React Pro Sidebar provides a set of components for creating high level and customizable side navigation
yarn add react-pro-sidebarnpm install react-pro-sidebarFirst you need to make sure that your components are wrapped within a <ProSidebarProvider> component
import { ProSidebarProvider } from 'react-pro-sidebar';
<ProSidebarProvider>
<App />
</ProSidebarProvider>;Then in your layout component you can add sidebar navigation
import { Sidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';
<Sidebar>
<Menu>
<SubMenu label="Charts">
<MenuItem> Pie charts </MenuItem>
<MenuItem> Line charts </MenuItem>
</SubMenu>
<MenuItem> Documentation </MenuItem>
<MenuItem> Calendar </MenuItem>
</Menu>
</Sidebar>;The library comes with a useProSidebar hook that lets you access and manage sidebar state
const { collapseSidebar, toggleSidebar, collapsed, toggled, broken, rtl } = useProSidebar();Returns
-
collapseSidebar: (collapsed?: boolean) => void: A function that enables you to update the sidebar's collapsed state -
toggleSidebar: (toggled?: boolean) => void: A function that enables you to update the sidebar's toggled state -
collapsed: boolean: Sidebar collapsed state -
toggled: boolean: Sidebar toggled state -
broken: boolean: Sidebar breakPoint state -
rtl: boolean: Sidebar direction state
Example Usage
import { Sidebar, Menu, MenuItem, useProSidebar } from 'react-pro-sidebar';
function Layout() {
const { collapseSidebar } = useProSidebar();
return (
<div style={{ display: 'flex', height: '100%' }}>
<Sidebar>
<Menu>
<MenuItem> Documentation</MenuItem>
<MenuItem> Calendar</MenuItem>
<MenuItem> E-commerce</MenuItem>
</Menu>
</Sidebar>
<main>
<button onClick={() => collapseSidebar()}>Collapse</button>
</main>
</div>
);
}We provide compatibility with React Router using routerLink prop
Example Usage
import { Sidebar, Menu, MenuItem } from 'react-pro-sidebar';
import { Link } from 'react-router-dom';
<Sidebar>
<Menu>
<MenuItem routerLink={<Link to="/documentation" />}> Documentation</MenuItem>
<MenuItem routerLink={<Link to="/calendar" />}> Calendar</MenuItem>
<MenuItem routerLink={<Link to="/e-commerce" />}> E-commerce</MenuItem>
</Menu>
</Sidebar>;| Component | Prop | Type | Description | Default |
|---|---|---|---|---|
| Sidebar | defaultCollapsed | boolean |
Initial collapsed status | false |
| width | number | string |
Width of the sidebar | 270px |
|
| collapsedWidth | number | string |
Width of the sidebar on collapsed state | 80px |
|
| backgroundColor | string |
Set background color for sidebar | rgb(249, 249, 249, 0.7) |
|
| image | string |
Url of the image to use in the sidebar background, need to apply transparency to background color | - | |
| breakPoint | xs | sm | md | lg | xl | xxl | always |
Set when the sidebar should trigger responsiveness behavior | - | |
| customBreakPoint | string |
Set custom breakpoint value, this will override breakPoint prop | - | |
| transitionDuration | number |
Duration for the transition in milliseconds to be used in collapse and toggle behavior | 300 |
|
| overlayColor | string |
Set overlay color | rgb(0, 0, 0, 0.3) |
|
| rtl | boolean |
RTL direction | false |
|
| Menu | closeOnClick | boolean |
If true, submenu popper will close when clicking on MenuItem |
false |
| renderMenuItemStyles | (params: { level: number; collapsed: boolean; disabled: boolean; active: boolean; }) => CSSObject |
Render method for style customization on MenuItem and SubMenu components | - | |
| renderExpandIcon | (params: { level: number; collapsed: boolean; disabled: boolean; active: boolean; open: boolean; }) => React.ReactNode |
Render method for customizing submenu expand icon | - | |
| MenuItem | icon | ReactNode |
Icon for the menu item | - |
| active | boolean |
If true, the component is active |
false |
|
| disabled | boolean |
If true, the component is disabled |
- | |
| prefix | ReactNode |
Add a prefix to the menuItem | - | |
| suffix | ReactNode |
Add a suffix to the menuItem | - | |
| routerLink | React.ReactElement |
React router Link or NavLink component that will be used to handle routing | - | |
| SubMenu | label | string | ReactNode |
Label for the submenu | - |
| icon | ReactNode |
Icon for submenu | - | |
| defaultOpen | boolean |
Set if the submenu is open by default | false |
|
| open | boolean |
Set open value if you want to control the state | - | |
| active | boolean |
If true, the component is active |
false |
|
| disabled | boolean |
If true, the component is disabled |
- | |
| prefix | ReactNode |
Add a prefix to the submenu | - | |
| suffix | ReactNode |
Add a suffix to the submenu | - | |
| onOpenChange | (open: boolean) => void |
Callback function called when submenu state changes | - |
MIT © Mohamed Azouaoui