A simple React component for side navigation
npm install react-simple-sidenav


A lightweight, customizable, and touch-friendly side navigation component for React. Built with TypeScript and fully compatible with React 18+.
✨ Features:
- ⚡️ Lightweight (only 1.45 kB gzipped)
- 🎨 Fully customizable styles
- 📱 Touch-friendly with swipe gestures
- 🔧 TypeScript support
- ♿️ Accessible
- 🚀 Modern React 18+ support
Demo: https://gauravchl.github.io/react-simple-sidenav

``bash`
npm install react-simple-sidenav
or with yarn:
`bash`
yarn add react-simple-sidenav
or with bun:
`bash`
bun add react-simple-sidenav
`tsx
import React, { useState } from 'react';
import SideNav, { MenuIcon } from 'react-simple-sidenav';
const MyComponent: React.FC = () => {
const [showNav, setShowNav] = useState(false);
return (
API
$3
| Prop | Type | Default | Description |
| -------------- | ------------------- | ----------- | ---------------------------------------------------------------------------------------------- |
| showNav |
boolean | false | Controls whether the side navigation is open or closed |
| onHideNav | () => void | - | Callback function triggered when the navigation closes |
| onShowNav | () => void | - | Callback function triggered when the navigation opens |
| openFromRight | boolean | false | Opens navigation from the right side instead of left |
| style | CSSProperties | - | Custom styles for the root container element |
| navStyle | CSSProperties | - | Custom styles for the navigation panel |
| titleStyle | CSSProperties | - | Custom styles for the title element |
| itemStyle | CSSProperties | - | Custom styles for navigation items |
| itemHoverStyle | CSSProperties | - | Custom styles for navigation items on hover |
| title | ReactNode | - | Content to display at the top of the navigation |
| items | ReactNode[] | - | Array of navigation items |
| children | ReactNode | - | Custom content for the navigation. When provided, title and items props are ignored |Examples
$3
`tsx
import React, { useState } from 'react';
import SideNav, { MenuIcon } from 'react-simple-sidenav';const MyComponent: React.FC = () => {
const [showNav, setShowNav] = useState(false);
return (
<>
setShowNav(true)} />
showNav={showNav}
onHideNav={() => setShowNav(false)}
/>
>
);
};
`$3
`tsx
import React, { useState } from 'react';
import SideNav, { MenuIcon } from 'react-simple-sidenav';const MyComponent: React.FC = () => {
const [showNav, setShowNav] = useState(false);
return (
<>
setShowNav(true)} />
showNav={showNav}
onHideNav={() => setShowNav(false)}
title="Hello World"
items={['home', 'services', 'about', 'contact']}
titleStyle={{ backgroundColor: '#4CAF50' }}
itemStyle={{ backgroundColor: '#fff' }}
itemHoverStyle={{ backgroundColor: '#CDDC39' }}
/>
>
);
};
`$3
`tsx
import React, { useState } from 'react';
import SideNav, { MenuIcon } from 'react-simple-sidenav';const MyComponent: React.FC = () => {
const [showNav, setShowNav] = useState(false);
const navItems = [
Home,
About,
Contact,
];
return (
<>
setShowNav(true)} />
showNav={showNav}
onHideNav={() => setShowNav(false)}
title={Navigation
}
items={navItems}
/>
>
);
};
`$3
`tsx
import React, { useState } from 'react';
import SideNav, { MenuIcon } from 'react-simple-sidenav';const MyComponent: React.FC = () => {
const [showNav, setShowNav] = useState(false);
return (
<>
setShowNav(true)} />
openFromRight={true}
showNav={showNav}
onHideNav={() => setShowNav(false)}
title="Right Side Menu"
items={['Item1', 'Item2', 'Item3']}
/>
>
);
};
`$3
`tsx
import React, { useState } from 'react';
import SideNav, { MenuIcon } from 'react-simple-sidenav';const MyComponent: React.FC = () => {
const [showNav, setShowNav] = useState(false);
return (
<>
setShowNav(true)} />
showNav={showNav}
onHideNav={() => setShowNav(false)}
>
Custom Content
You can put any React components here!
>
);
};
`TypeScript Support
This package is written in TypeScript and includes type definitions. All props are fully typed:
`tsx
import type { SideNavProps, MenuIconProps } from 'react-simple-sidenav';
`
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
$3
`bash
Clone the repository
git clone https://github.com/gauravchl/react-simple-sidenav.git
cd react-simple-sidenavInstall dependencies with bun
bun installBuild library first (required before running demo)
bun run buildStart development server for demo
Note: The demo imports from dist/, so rebuild after source changes
bun run devBuild demo for production
bun run build:demo
`Development Workflow:
1. Make changes to
src/index.tsx
2. Run bun run build` to rebuild the libraryMIT © Gaurav Chikhale
Inspired by Side Navigation Bar TL;DW episode of Supercharged