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 isOpen property to toggle navigation. Use the getOpenState property function to synchronize inner and outter open state.


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.

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:


Dark example

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


Inner scroll

Passing a selector of an inner element to the scrollContainer option will initialize MDB scrollbar only on this container (by default it's initialized on the sidenav's main element).

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

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


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.


Accordion example


Groups

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


Right

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

Sidenav - API


Import


        import { MDBSideNav, MDBSideNavMenu, MDBSideNavItem, MDBSideNavLink, MDBSideNavCollapse } from 'mdb-react-ui-kit';
      

Properties

MDBSideNav

Name Type Default Description Example
className String '' Adds a custom class to MDBSideNav <MDBSideNav className="class" />...</MDBSideNav>
isOpen Boolean '' Defines if sidenav is open or not <MDBSideNav isOpen={true} />...</MDBSideNav>
getOpenState Function '' If you're using a state for isOpen prop, you have to use this function to synchronize inner and outer states. <MDBSideNav isOpen={someState} getIsOpen={(e) => setSomeState(e)} />...</MDBSideNav>
color String 'primary' Defines a color of the hovered/focused sidenav elements. <MDBSideNav color='secondary' />...</MDBSideNav>
backdrop Boolean 'true' Enables or disables a backdrop. <MDBSideNav backdrop={false} />...</MDBSideNav>
slim Boolean 'false' Enables or disables a slim mode. <MDBSideNav slim={true} />...</MDBSideNav>
slimCollapsed Boolean '' Defines if the sidenav in the slim mode is collapsed or not. You have to use it when combining a slim mode with sidenav collapse. <MDBSideNav slim={true} slimCollapsed={!collapse1 && !collapse2} />...</MDBSideNav>
constant Boolean 'false' Prevents hiding sidenav after clicking outside of it. <MDBSideNav constant />...</MDBSideNav>
bgColor String '' Sets a background color for the sidenav. <MDBSideNav bgColor='dark' />...</MDBSideNav>
right Boolean 'false' Initializes a sidenav at the right side of the page. <MDBSideNav right />...</MDBSideNav>
relative Boolean 'false' Initializes a sidenav with the position: relative CSS property. <MDBSideNav relative />...</MDBSideNav>
absolute Boolean 'false' Initializes a sidenav with the position: absolute CSS property. <MDBSideNav absolute />...</MDBSideNav>
light Boolean 'false' Initializes a sidenav with the light skin. <MDBSideNav light />...</MDBSideNav>
mode 'side' || 'push' || 'over' 'over' Defines a mode for the sidenav. <MDBSideNav mode='push' />...</MDBSideNav>
contentRef React ref '' Sets a reference to the content of the sidenav, that should be pushed/pulled by push or side mode. <MDBSideNav contentRef={someRef} />...</MDBSideNav>
closeOnEsc Boolean 'true' Enables or disables hiding a sidenav after clicking the Escape key. <MDBSideNav closeOnEsc={false} />...</MDBSideNav>

MDBSideNavMenu

Name Type Default Description Example
className String '' Adds a custom class to MDBSideNavMenu <MDBSideNavMenu className="class" />...</MDBSideNavMenu>

MDBSideNavItem

Name Type Default Description Example
className String '' Adds a custom class to MDBSideNavItem <MDBSideNavItem className="class" />...</MDBSideNavItem>

MDBSideNavCollapse

This component works exactly as the MDBCollapse component with some modifications that don't change its functionality. Look at MDBCollapse docs to get more info.