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

Installation

``bash
npm install react-simple-sidenav
`

or with yarn:

`bash
yarn add react-simple-sidenav
`

or with bun:

`bash
bun add react-simple-sidenav
`

Quick Start

`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)}
>





);
};
`

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-sidenav

Install dependencies with bun

bun install

Build library first (required before running demo)

bun run build

Start development server for demo

Note: The demo imports from dist/, so rebuild after source changes

bun run dev

Build demo for production

bun run build:demo
`

Development Workflow:
1. Make changes to src/index.tsx
2. Run bun run build` to rebuild the library
3. The demo will hot-reload and pick up the changes

License

MIT © Gaurav Chikhale

Credits

Inspired by Side Navigation Bar TL;DW episode of Supercharged