Sidenav

React Bootstrap 5 Sidenav component

The side navigation component provides an easy way to navigate through your website. Its appearance & behaviour are easily adjustable properties - additional functionality.

Note: Read the API tab to find all available options and advanced customization

Basic example

In the basic version, the side navigation will appear over your website's content after clicking on a toggler.

Note: Use open property to toggle navigation. Use the getOpenState property function to synchronize inner and outter open state.

Show code

Positioning

While using the side and push modes, you can specify the reference for your page's content - this way, the component will automatically update paddings and margins.

Select mode:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc magna massa, ornare quis interdum a, cursus in quam. Quisque risus libero, cursus eget eros vitae, aliquam placerat velit. Vivamus luctus eros id sagittis luctus. Pellentesque felis nulla, rhoncus viverra nunc vitae, viverra aliquam ante. Ut feugiat mattis tempor.
Show code

Colors example

Setting the color property will change the background and font color of active/hovered links and categories.

Note: This option works for MDB 5 main colors - primary, secondary, warning, danger, success, info, dark and light.

Select color:

Show code

Dark example

When using the darker background with the side navigation, we recommend setting the color attribute to "light" for better contrast.

Show code

Inner scroll

Use <MDBScrollbar> instead of <MDBSideNavMenu> component to create a scrollable menu.

Note: For customization purposes - you have to calculate the height on your own.

Show code

Menu item scroll

You can use custom styles and our Scrollbar to add inner scroll for menu items.

Show code

Slim example

You can hide/show elements in the slim mode by setting slim property on them - depending on value they will be either visible only in a slim or an expanded mode. Elements without this attribute will appear in both modes.

To show a particular part of items in the slim mode - wrap them into the span element and add .sidenav-non-slim class.

Show code

Accordion example

Show code

Groups

You can use more than one menu inside the side navigation - in this case, accordions will be independent of one another.

Show code

Right

Place the navigation on the other side by setting the right property to true.

Show code

Full-screen examples

The following examples various settings of the side navigation component in a full-screen mode.

1. Basic side navigation

Click the toggler to show the navigation (over mode).

View full screen demo
Show code

2. Side navigation with a mode transition

Resize the window to change the mode from side to over.

View full screen demo
Show code

3. Slim side navigation (dark)

Non-expandable slim sidenav with a dark background and custom width.

View full screen demo
Show code

4. MDB Navigation

Navigation template based on MDB documentation with the following settings:

  • Hidden on screens smaller then 1400px
  • padding-left: 240px added via CSS to the header and main on the screens larger then 1400px to push the content out of the sidenav area
  • Sidenav toggler added to the Navbar and hidden on screen larger then 1400px
  • On screens smaller then 1400px sidenav mode changes from side to over.
View full screen demo
Show code

Sidenav small and with categories

Show code