react-bootstrap-sidebar-menu

Example page: open Demo to view it in the browser.

Description

React sidebar menu based on react-bootstrap

Installation

npm install react-bootstrap-sidebar-menu

Usage

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'

Compatibility

• React v16.14.0 or above,
• React-Dom: v16.14.0 or above

License

This project is licensed under the MIT License.

Support Maintanance

If you find this package useful consider a small contribution: Buy Me A Coffee