Example page: open Demo to view it in the browser.
React sidebar menu based on react-bootstrap
npm install react-bootstrap-sidebar-menu
import Sidebar from 'react-bootstrap-sidebar-menu';
<Sidebar>
<Sidebar.Collapse>
<Sidebar.Header>
<Sidebar.Brand>{/* brand icon */}</Sidebar.Brand>
<Sidebar.Toggle />
</Sidebar.Header>
<Sidebar.Body>
<Sidebar.Nav>
<Sidebar.Nav.Link>
<Sidebar.Nav.Icon>{/* menu item icon */}</Sidebar.Nav.Icon>
<Sidebar.Nav.Title>{/* menu item title */}</Sidebar.Nav.Title>
</Sidebar.Nav.Link>
<Sidebar.Sub>
<Sidebar.Sub.Toggle>
<Sidebar.Nav.Icon />
<Sidebar.Nav.Title>{/* sub menu item title */}</Sidebar.Nav.Title>
</Sidebar.Sub.Toggle>
<Sidebar.Sub.Collapse>
<Sidebar.Nav>
<Sidebar.Nav.Link>
<Sidebar.Nav.Icon>{/* sum menu item icon */}</Sidebar.Nav.Icon>
<Sidebar.Nav.Title>{/* sub menu item title */}</Sidebar.Nav.Title>
</Sidebar.Nav.Link>
</Sidebar.Nav>
</Sidebar.Sub.Collapse>
</Sidebar.Sub>
</Sidebar.Nav>
</Sidebar.Body>
</Sidebar.Collapse>
</Sidebar>
You can import the sidebar-menu.scss directly into your scss file (please note that you should import bootstrap styles before importing the library's stylesheet)
@import '~react-bootstrap-sidebar-menu/dist/sidebar-menu.scss'
- React v16.14.0 or above,
- React-Dom: v16.14.0 or above
This project is licensed under the MIT License.
If you find this package useful consider a small contribution: Buy Me A Coffee