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. 

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

export default function App() {
  const [basicOpen, setBasicOpen] = useState(true);
  const [basicCollapse1, setBasicCollapse1] = useState(true);
  const [basicCollapse2, setBasicCollapse2] = useState(false);

  return (
    <>
      <MDBSideNav open={basicOpen} absolute getOpenState={(e: any) => setBasicOpen(e)}>
        <MDBSideNavMenu>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon far icon='smile' className='fa-fw me-3' />
              Link 1
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink icon='angle-down' shouldBeExpanded={basicCollapse1} onClick={() => setBasicCollapse1(!basicCollapse1)}>
              <MDBIcon fas icon='grin' className='fa-fw me-3' />
              Category 1
            </MDBSideNavLink>
            <MDBSideNavCollapse open={basicCollapse1}>
              <MDBSideNavLink>Link 2</MDBSideNavLink>
              <MDBSideNavLink>Link 3</MDBSideNavLink>
            </MDBSideNavCollapse>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink icon='angle-down' shouldBeExpanded={basicCollapse2} onClick={() => setBasicCollapse2(!basicCollapse2)}>
              <MDBIcon fas icon='grin' className='fa-fw me-3' />
              Category 2
            </MDBSideNavLink>
            <MDBSideNavCollapse open={basicCollapse2}>
              <MDBSideNavLink>Link 4</MDBSideNavLink>
              <MDBSideNavLink>Link 5</MDBSideNavLink>
            </MDBSideNavCollapse>
          </MDBSideNavItem>
        </MDBSideNavMenu>
      </MDBSideNav>

      <div style={{ padding: '20px' }} className='text-center'>
        <MDBBtn onClick={() => setBasicOpen(!basicOpen)}>
          <MDBIcon fas icon='bars' />
        </MDBBtn>
      </div>
    </>
  );
}

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. 
import React, { useState, useRef, useEffect } from 'react';
import {
  MDBSideNav,
  MDBSideNavMenu,
  MDBSideNavItem,
  MDBSideNavLink,
  MDBSideNavCollapse,
  MDBBtn,
  MDBIcon
} from 'mdb-react-ui-kit';

export default function App() {
  const [modeOpen, setModeOpen] = useState(true);
  const [modeCollapse1, setModeCollapse1] = useState(true);
  const [modeCollapse2, setModeCollapse2] = useState(false);
  const [mode, setMode] = useState('push');
  const [activeBtn, setActiveBtn] = useState('first');
  const sidenavContent = useRef(null);
  const [container, setContainer] = useState<any>();

  useEffect(() => {
    setContainer(sidenavContent.current);
  }, []);

  return (
    <>
      <div className='d-flex my-4'>
        <MDBBtn
          onClick={() => {
            setMode('push');
            setActiveBtn('first');
          }}
          outline={activeBtn !== 'first'}
          className='me-3'
        >
          Push
        </MDBBtn>
        <MDBBtn
          onClick={() => {
            setMode('side');
            setActiveBtn('second');
          }}
          outline={activeBtn !== 'second'}
          className='me-3'
        >
          Side
        </MDBBtn>
        <MDBBtn
          onClick={() => {
            setMode('over');
            setActiveBtn('third');
          }}
          outline={activeBtn !== 'third'}
          className='me-3'
        >
          Over
        </MDBBtn>
      </div>

      <MDBSideNav
        mode={mode}
        open={modeOpen}
        contentRef={container}
        absolute
        getOpenState={(e: any) => setModeOpen(e)}
      >
        <MDBSideNavMenu>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon far icon='smile' className='fa-fw me-3' />
              Link 1
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink icon='angle-down' shouldBeExpanded={modeCollapse1} onClick={() => setModeCollapse1(!modeCollapse1)}>
              <MDBIcon fas icon='grin' className='fa-fw me-3' />
              Category 1
            </MDBSideNavLink>
            <MDBSideNavCollapse open={modeCollapse1}>
              <MDBSideNavLink>Link 2</MDBSideNavLink>
              <MDBSideNavLink>Link 3</MDBSideNavLink>
            </MDBSideNavCollapse>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink icon='angle-down' shouldBeExpanded={modeCollapse2} onClick={() => setModeCollapse2(!modeCollapse2)}>
              <MDBIcon fas icon='grin' className='fa-fw me-3' />
              Category 2
            </MDBSideNavLink>
            <MDBSideNavCollapse open={modeCollapse2}>
              <MDBSideNavLink>Link 4</MDBSideNavLink>
              <MDBSideNavLink>Link 5</MDBSideNavLink>
            </MDBSideNavCollapse>
          </MDBSideNavItem>
        </MDBSideNavMenu>
      </MDBSideNav>

      <div style={{ padding: '20px' }} className='text-center'>
        <div style={{ padding: '20px' }} className='text-center'>
          <MDBBtn onClick={() => setModeOpen(!modeOpen)}>
            <MDBIcon fas icon='bars' />
          </MDBBtn>
        </div>

        <div ref={sidenavContent} className='d-flex my-5 text-start'>
          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.
        </div>
      </div>
    </>
  );
}

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:

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

export default function App() {
  const [colorOpen, setColorOpen] = useState(true);
  const [colorCollapse1, setColorCollapse1] = useState(true);
  const [colorCollapse2, setColorCollapse2] = useState(false);
  const [color, setColor] = useState('primary');

  const changeColor = (color: string) => setColor(color);

  return (
    <>
      <div className='my-3'>
        <MDBBtn>Primary</MDBBtn>
        <MDBBtn onClick={() => changeColor('primary')} color='secondary'>
          Secondary
        </MDBBtn>
        <MDBBtn onClick={() => changeColor('warning')} color='warning'>
          Warning
        </MDBBtn>
        <MDBBtn onClick={() => changeColor('danger')} color='danger'>
          Danger
        </MDBBtn>
        <MDBBtn onClick={() => changeColor('success')} color='success'>
          Success
        </MDBBtn>
        <MDBBtn onClick={() => changeColor('info')} color='info'>
          Info
        </MDBBtn>
        <MDBBtn onClick={() => changeColor('dark')} color='dark'>
          Dark
        </MDBBtn>
        <MDBBtn onClick={() => changeColor('light')} color='light'>
          Light
        </MDBBtn>
      </div>

      <MDBSideNav open={colorOpen} color={color} absolute getOpenState={(e: any) => setColorOpen(e)}>
        <MDBSideNavMenu>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon far icon='smile' className='fa-fw me-3' />
              Link 1
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink icon='angle-down' shouldBeExpanded={colorCollapse1} onClick={() => setColorCollapse1(!colorCollapse1)}>
              <MDBIcon fas icon='grin' className='fa-fw me-3' />
              Category 1
            </MDBSideNavLink>
            <MDBSideNavCollapse open={colorCollapse1}>
              <MDBSideNavLink>Link 2</MDBSideNavLink>
              <MDBSideNavLink>Link 3</MDBSideNavLink>
            </MDBSideNavCollapse>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink icon='angle-down' shouldBeExpanded={colorCollapse2} onClick={() => setColorCollapse2(!colorCollapse2)}>
              <MDBIcon fas icon='grin' className='fa-fw me-3' />
              Category 2
            </MDBSideNavLink>
            <MDBSideNavCollapse open={colorCollapse2}>
              <MDBSideNavLink>Link 4</MDBSideNavLink>
              <MDBSideNavLink>Link 5</MDBSideNavLink>
            </MDBSideNavCollapse>
          </MDBSideNavItem>
        </MDBSideNavMenu>
      </MDBSideNav>

      <div style={{ padding: '20px' }} className='text-center'>
        <MDBBtn onClick={() => setColorOpen(!colorOpen)}>
          <MDBIcon fas icon='bars' />
        </MDBBtn>
      </div>
    </>
  );
}

Dark example

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

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

export default function App() {
  const [darkOpen, setDarkOpen] = useState(true);
  const [darkCollapse1, setDarkCollapse1] = useState(true);
  const [darkCollapse2, setDarkCollapse2] = useState(false);

  return (
    <>
      <MDBSideNav
        open={darkOpen}
        color='light'
        bgColor='dark'
        absolute
        getOpenState={(e: any) => setDarkOpen(e)}
      >
        <MDBSideNavMenu>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon far icon='smile' className='fa-fw me-3' />
              Link 1
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink icon='angle-down' shouldBeExpanded={darkCollapse1} onClick={() => setDarkCollapse1(!darkCollapse1)}>
              <MDBIcon fas icon='grin' className='fa-fw me-3' />
              Category 1
            </MDBSideNavLink>
            <MDBSideNavCollapse open={darkCollapse1}>
              <MDBSideNavLink>Link 2</MDBSideNavLink>
              <MDBSideNavLink>Link 3</MDBSideNavLink>
            </MDBSideNavCollapse>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink icon='angle-down' shouldBeExpanded={darkCollapse2} onClick={() => setDarkCollapse2(!darkCollapse2)}>
              <MDBIcon fas icon='grin' className='fa-fw me-3' />
              Category 2
            </MDBSideNavLink>
            <MDBSideNavCollapse open={darkCollapse2}>
              <MDBSideNavLink>Link 4</MDBSideNavLink>
              <MDBSideNavLink>Link 5</MDBSideNavLink>
            </MDBSideNavCollapse>
          </MDBSideNavItem>
        </MDBSideNavMenu>
      </MDBSideNav>

      <div style={{ padding: '20px' }} className='text-center'>
        <MDBBtn onClick={() => setDarkOpen(!darkOpen)}>
          <MDBIcon fas icon='bars' />
        </MDBBtn>
      </div>
    </>
  );
}

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. 

import React, { useState } from 'react';
import {
  MDBSideNav,
  MDBScrollbar,
  MDBSideNavItem,
  MDBSideNavLink,
  MDBBtn,
  MDBIcon
} from 'mdb-react-ui-kit';

export default function App() {
  const [innerOpen, setInnerOpen] = useState(true);

  return (
    <>
      <MDBSideNav open={innerOpen} absolute getOpenState={(e: any) => setInnerOpen(e)}>
        <div className='text-center'>
          <h3 className='py-4'>Examples</h3>
          <hr className='m-0' />
        </div>
        <MDBScrollbar sidenav tag='ul' suppressScrollX style={{ height: '260px' }}>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon far icon='smile' className='fa-fw me-3' />
              <span className='sidenav-non-slim'>Link 1</span>
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon far icon='smile' className='fa-fw me-3' />
              <span className='sidenav-non-slim'>Link 2</span>
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon far icon='smile' className='fa-fw me-3' />
              <span className='sidenav-non-slim'>Link 3</span>
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon far icon='smile' className='fa-fw me-3' />
              <span className='sidenav-non-slim'>Link 4</span>
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon far icon='smile' className='fa-fw me-3' />
              <span className='sidenav-non-slim'>Link 5</span>
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon far icon='smile' className='fa-fw me-3' />
              <span className='sidenav-non-slim'>Link 6</span>
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon far icon='smile' className='fa-fw me-3' />
              <span className='sidenav-non-slim'>Link 7</span>
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon far icon='smile' className='fa-fw me-3' />
              <span className='sidenav-non-slim'>Link 8</span>
            </MDBSideNavLink>
          </MDBSideNavItem>
        </MDBScrollbar>
        <div className='text-center' style={{ minHeight: '3rem' }}>
          <hr className='mt-0 mb-2' />
          <small>mdbootstrap.com</small>
        </div>
      </MDBSideNav>

      <div style={{ padding: '20px' }} className='text-center'>
        <MDBBtn onClick={() => setInnerOpen(!innerOpen)}>
          <MDBIcon fas icon='bars' />
        </MDBBtn>
      </div>
    </>
  );
}

Menu item scroll

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

import React, { useState } from "react";
import {
  MDBSideNav,
  MDBScrollbar,
  MDBSideNavItem,
  MDBSideNavLink,
  MDBBtn,
  MDBIcon,
  MDBSideNavCollapse,
} from "mdb-react-ui-kit";

export default function App() {
  const [openCollapse1, setOpenCollapse1] = useState(false);
  const [openCollapse2, setOpenCollapse2] = useState(false);
  const [openCollapse3, setOpenCollapse3] = useState(false);
  const [openCollapse4, setOpenCollapse4] = useState(false);
  const [openCollapse5, setOpenCollapse5] = useState(false);
  const [openCollapse6, setOpenCollapse6] = useState(false);
  const [openCollapse7, setOpenCollapse7] = useState(false);
  const [openCollapse8, setOpenCollapse8] = useState(false);
  const [innerOpen, setInnerOpen] = useState(true);

  return (
    <>
      <MDBSideNav open={innerOpen} absolute getOpenState={(e: any) => setInnerOpen(e)}>
        <div className="text-center">
          <h3 className="py-4">Examples</h3>
          <hr className="m-0" />
        </div>
        <MDBScrollbar sidenav tag="ul" suppressScrollX style={{ height: "260px" }}>
          <MDBSideNavItem>
            <MDBSideNavLink
              icon="angle-down"
              shouldBeExpanded={openCollapse1}
              onClick={() => setOpenCollapse1((prev) => !prev)}
            >
              <MDBIcon far icon="smile" className="fa-fw me-3" />
              <span className="sidenav-non-slim">Scrolling Category 1</span>
            </MDBSideNavLink>
            <MDBSideNavCollapse open={openCollapse1}>
              <MDBScrollbar sidenav tag="ul" suppressScrollX style={{ height: "100px" }}>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 1</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 2</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 3</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 4</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 5</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 6</span>
                </MDBSideNavLink>
              </MDBScrollbar>
            </MDBSideNavCollapse>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink
              icon="angle-down"
              shouldBeExpanded={openCollapse2}
              onClick={() => setOpenCollapse2((prev) => !prev)}
            >
              <MDBIcon far icon="smile" className="fa-fw me-3" />
              <span className="sidenav-non-slim">Scrolling Category 2</span>
            </MDBSideNavLink>
            <MDBSideNavCollapse open={openCollapse2}>
              <MDBScrollbar sidenav tag="ul" suppressScrollX style={{ height: "100px" }}>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 1</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 2</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 3</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 4</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 5</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 6</span>
                </MDBSideNavLink>
              </MDBScrollbar>
            </MDBSideNavCollapse>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink
              icon="angle-down"
              shouldBeExpanded={openCollapse3}
              onClick={() => setOpenCollapse3((prev) => !prev)}
            >
              <MDBIcon far icon="smile" className="fa-fw me-3" />
              <span className="sidenav-non-slim">Scrolling Category 3</span>
            </MDBSideNavLink>
            <MDBSideNavCollapse open={openCollapse3}>
              <MDBScrollbar sidenav tag="ul" suppressScrollX style={{ height: "100px" }}>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 1</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 2</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 3</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 4</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 5</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 6</span>
                </MDBSideNavLink>
              </MDBScrollbar>
            </MDBSideNavCollapse>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink
              icon="angle-down"
              shouldBeExpanded={openCollapse4}
              onClick={() => setOpenCollapse4((prev) => !prev)}
            >
              <MDBIcon far icon="smile" className="fa-fw me-3" />
              <span className="sidenav-non-slim">Scrolling Category 4</span>
            </MDBSideNavLink>
            <MDBSideNavCollapse open={openCollapse4}>
              <MDBScrollbar sidenav tag="ul" suppressScrollX style={{ height: "100px" }}>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 1</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 2</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 3</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 4</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 5</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 6</span>
                </MDBSideNavLink>
              </MDBScrollbar>
            </MDBSideNavCollapse>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink
              icon="angle-down"
              shouldBeExpanded={openCollapse5}
              onClick={() => setOpenCollapse5((prev) => !prev)}
            >
              <MDBIcon far icon="smile" className="fa-fw me-3" />
              <span className="sidenav-non-slim">Scrolling Category 5</span>
            </MDBSideNavLink>
            <MDBSideNavCollapse open={openCollapse5}>
              <MDBScrollbar sidenav tag="ul" suppressScrollX style={{ height: "100px" }}>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 1</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 2</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 3</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 4</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 5</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 6</span>
                </MDBSideNavLink>
              </MDBScrollbar>
            </MDBSideNavCollapse>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink
              icon="angle-down"
              shouldBeExpanded={openCollapse6}
              onClick={() => setOpenCollapse6((prev) => !prev)}
            >
              <MDBIcon far icon="smile" className="fa-fw me-3" />
              <span className="sidenav-non-slim">Scrolling Category 6</span>
            </MDBSideNavLink>
            <MDBSideNavCollapse open={openCollapse6}>
              <MDBScrollbar sidenav tag="ul" suppressScrollX style={{ height: "100px" }}>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 1</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 2</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 3</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 4</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 5</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 6</span>
                </MDBSideNavLink>
              </MDBScrollbar>
            </MDBSideNavCollapse>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink
              icon="angle-down"
              shouldBeExpanded={openCollapse7}
              onClick={() => setOpenCollapse7((prev) => !prev)}
            >
              <MDBIcon far icon="smile" className="fa-fw me-3" />
              <span className="sidenav-non-slim">Scrolling Category 7</span>
            </MDBSideNavLink>
            <MDBSideNavCollapse open={openCollapse7}>
              <MDBScrollbar sidenav tag="ul" suppressScrollX style={{ height: "100px" }}>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 1</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 2</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 3</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 4</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 5</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 6</span>
                </MDBSideNavLink>
              </MDBScrollbar>
            </MDBSideNavCollapse>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink
              icon="angle-down"
              shouldBeExpanded={openCollapse8}
              onClick={() => setOpenCollapse8((prev) => !prev)}
            >
              <MDBIcon far icon="smile" className="fa-fw me-3" />
              <span className="sidenav-non-slim">Scrolling Category 8</span>
            </MDBSideNavLink>
            <MDBSideNavCollapse open={openCollapse8}>
              <MDBScrollbar sidenav tag="ul" suppressScrollX style={{ height: "100px" }}>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 1</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 2</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 3</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 4</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 5</span>
                </MDBSideNavLink>
                <MDBSideNavLink>
                  <MDBIcon far icon="smile" className="fa-fw me-3" />
                  <span className="sidenav-non-slim">Link 6</span>
                </MDBSideNavLink>
              </MDBScrollbar>
            </MDBSideNavCollapse>
          </MDBSideNavItem>
        </MDBScrollbar>
        <div className="text-center" style={{ minHeight: "3rem" }}>
          <hr className="mt-0 mb-2" />
          <small>mdbootstrap.com</small>
        </div>
      </MDBSideNav>

      <div style={{ padding: "20px" }} className="text-center">
        <MDBBtn onClick={() => setInnerOpen(!innerOpen)}>
          <MDBIcon fas icon="bars" />
        </MDBBtn>
      </div>
    </>
  );
}

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.

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

export default function App() {
  const [slimOpen, setSlimOpen] = useState(true);
  const [slimCollapse1, setSlimCollapse1] = useState(false);
  const [slimCollapse2, setSlimCollapse2] = useState(false);
  const [slimMode, setSlimMode] = useState(true);

  return (
    <>
      <MDBSideNav
        backdrop={false}
        open={slimOpen}
        absolute
        slim={slimMode}
        slimCollapsed={!slimCollapse1 && !slimCollapse2}
        getOpenState={(e: any) => setSlimOpen(e)}
      >
        <MDBSideNavMenu>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon far icon='smile' className='fa-fw me-3' />
              <span className='sidenav-non-slim'>Link 1</span>
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink icon='angle-down' shouldBeExpanded={slimCollapse1} onClick={() => setSlimCollapse1(!slimCollapse1)}>
              <MDBIcon fas icon='grin' className='fa-fw me-3' />
              <span className='sidenav-non-slim'>Category 1</span>
            </MDBSideNavLink>
            <MDBSideNavCollapse open={slimCollapse1}>
              <MDBSideNavLink>Link 2</MDBSideNavLink>
              <MDBSideNavLink>Link 3</MDBSideNavLink>
            </MDBSideNavCollapse>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink icon='angle-down' shouldBeExpanded={slimCollapse2} onClick={() => setSlimCollapse2(!slimCollapse2)}>
              <MDBIcon fas icon='grin' className='fa-fw me-3' />
              <span className='sidenav-non-slim'>Category 2</span>
            </MDBSideNavLink>
            <MDBSideNavCollapse open={slimCollapse2}>
              <MDBSideNavLink>Link 4</MDBSideNavLink>
              <MDBSideNavLink>Link 5</MDBSideNavLink>
            </MDBSideNavCollapse>
          </MDBSideNavItem>
        </MDBSideNavMenu>
      </MDBSideNav>

      <div style={{ padding: '20px' }} className='text-center'>
        <MDBBtn onClick={() => setSlimOpen(!slimOpen)}>
          <MDBIcon fas icon='bars' />
        </MDBBtn>
        <MDBBtn onClick={() => setSlimMode(!slimMode)}>Toggle slim</MDBBtn>
      </div>
    </>
  );
}

Accordion example

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

export default function App() {
  const [accordionOpen, setAccordionOpen] = useState(true);
  const [collapseOpened, setCollapseOpened] = useState('accordionCollapse1');

  const toggleAccordion = (value: string) => {
    value !== collapseOpened ? setCollapseOpened(value) : setCollapseOpened('');
  };

  return (
    <>
      <MDBSideNav open={accordionOpen} absolute getOpenState={(e: any) => setAccordionOpen(e)}>
        <MDBSideNavMenu>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon far icon='smile' className='fa-fw me-3' />
              Link 1
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink
              icon='angle-down'
              shouldBeExpanded={collapseOpened === 'accordionCollapse1'}
              onClick={() => toggleAccordion('accordionCollapse1')}
            >
              <MDBIcon fas icon='grin' className='fa-fw me-3' />
              Category 1
            </MDBSideNavLink>
            <MDBSideNavCollapse id='accordionCollapse1' open={collapseOpened === 'accordionCollapse1'}>
              <MDBSideNavLink>Link 2</MDBSideNavLink>
              <MDBSideNavLink>Link 3</MDBSideNavLink>
            </MDBSideNavCollapse>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink icon='angle-down'shouldBeExpanded={collapseOpened === 'accordionCollapse2'} onClick={() => toggleAccordion('accordionCollapse2')}>
              <MDBIcon fas icon='grin' className='fa-fw me-3' />
              Category 2
            </MDBSideNavLink>
            <MDBSideNavCollapse id='accordionCollapse2' open={collapseOpened === 'accordionCollapse2'}>
              <MDBSideNavLink>Link 4</MDBSideNavLink>
              <MDBSideNavLink>Link 5</MDBSideNavLink>
            </MDBSideNavCollapse>
          </MDBSideNavItem>
        </MDBSideNavMenu>
      </MDBSideNav>

      <div style={{ padding: '20px' }} className='text-center'>
        <MDBBtn onClick={() => setAccordionOpen(!accordionOpen)}>
          <MDBIcon fas icon='bars' />
        </MDBBtn>
      </div>
    </>
  );
}

Groups

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

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

export default function App() {
  const [groupOpen, setGroupOpen] = useState(true);
  const [groupCollapseOpened1, setGroupCollapseOpened1] = useState('groupCollapse1');
  const [groupCollapseOpened2, setGroupCollapseOpened2] = useState('groupCollapse3');

  const toggleGroupCollapse1 = (value: string) => {
    value !== groupCollapseOpened1 ? setGroupCollapseOpened1(value) : setGroupCollapseOpened1('');
  };

  const toggleGroupCollapse2 = (value: string) => {
    value !== groupCollapseOpened2 ? setGroupCollapseOpened2(value) : setGroupCollapseOpened2('');
  };

  return (
    <>
      <MDBSideNav open={groupOpen} absolute getOpenState={(e: any) => setGroupOpen(e)}>
        <MDBSideNavMenu>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon far icon='smile' className='fa-fw me-3' />
              Link 1
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink
              icon='angle-down'
              shouldBeExpanded={groupCollapseOpened1 === 'groupCollapse1'}
              onClick={() => toggleGroupCollapse1('groupCollapse1')}
            >
              <MDBIcon fas icon='grin' className='fa-fw me-3' />
              Category 1
            </MDBSideNavLink>
            <MDBSideNavCollapse id='groupCollapse1' open={groupCollapseOpened1 === 'groupCollapse1'}>
              <MDBSideNavLink>Link 2</MDBSideNavLink>
              <MDBSideNavLink>Link 3</MDBSideNavLink>
            </MDBSideNavCollapse>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink icon='angle-down' shouldBeExpanded={groupCollapseOpened1 === 'groupCollapse2'} onClick={() => toggleGroupCollapse1('groupCollapse2')}>
              <MDBIcon fas icon='grin' className='fa-fw me-3' />
              Category 2
            </MDBSideNavLink>
            <MDBSideNavCollapse id='groupCollapse2' open={groupCollapseOpened1 === 'groupCollapse2'}>
              <MDBSideNavLink>Link 4</MDBSideNavLink>
              <MDBSideNavLink>Link 5</MDBSideNavLink>
            </MDBSideNavCollapse>
          </MDBSideNavItem>
        </MDBSideNavMenu>
        <hr />
        <MDBSideNavMenu>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon far icon='smile' className='fa-fw me-3' />
              Link 6
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink
              icon='angle-down'
              shouldBeExpanded={groupCollapseOpened2 === 'groupCollapse3'}
              onClick={() => toggleGroupCollapse2('groupCollapse3')}
            >
              <MDBIcon fas icon='grin' className='fa-fw me-3' />
              Category 3
            </MDBSideNavLink>
            <MDBSideNavCollapse id='groupCollapse3' open={groupCollapseOpened2 === 'groupCollapse3'}>
              <MDBSideNavLink>Link 7</MDBSideNavLink>
              <MDBSideNavLink>Link 8</MDBSideNavLink>
            </MDBSideNavCollapse>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink icon='angle-down' shouldBeExpanded={groupCollapseOpened2 === 'groupCollapse4'} onClick={() => toggleGroupCollapse2('groupCollapse4')}>
              <MDBIcon fas icon='grin' className='fa-fw me-3' />
              Category 4
            </MDBSideNavLink>
            <MDBSideNavCollapse id='groupCollapse4' open={groupCollapseOpened2 === 'groupCollapse4'}>
              <MDBSideNavLink>Link 9</MDBSideNavLink>
              <MDBSideNavLink>Link 10</MDBSideNavLink>
            </MDBSideNavCollapse>
          </MDBSideNavItem>
        </MDBSideNavMenu>
      </MDBSideNav>

      <div style={{ padding: '20px' }} className='text-center'>
        <MDBBtn onClick={() => setGroupOpen(!groupOpen)}>
          <MDBIcon fas icon='bars' />
        </MDBBtn>
      </div>
    </>
  );
}

Right

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

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

export default function App() {
  const [rightOpen, setRightOpen] = useState(true);
  const [rightCollapse1, setRightCollapse1] = useState(true);
  const [rightCollapse2, setRightCollapse2] = useState(false);

  return (
    <>
      <MDBSideNav right open={rightOpen} absolute getOpenState={(e: any) => setRightOpen(e)}>
        <MDBSideNavMenu>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon far icon='smile' className='fa-fw me-3' />
              Link 1
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink icon='angle-down' shouldBeExpanded={rightCollapse1} onClick={() => setRightCollapse1(!rightCollapse1)}>
              <MDBIcon fas icon='grin' className='fa-fw me-3' />
              Category 1
            </MDBSideNavLink>
            <MDBSideNavCollapse open={rightCollapse1}>
              <MDBSideNavLink>Link 2</MDBSideNavLink>
              <MDBSideNavLink>Link 3</MDBSideNavLink>
            </MDBSideNavCollapse>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink icon='angle-down' shouldBeExpanded={rightCollapse2} onClick={() => setRightCollapse2(!rightCollapse2)}>
              <MDBIcon fas icon='grin' className='fa-fw me-3' />
              Category 2
            </MDBSideNavLink>
            <MDBSideNavCollapse open={rightCollapse2}>
              <MDBSideNavLink>Link 4</MDBSideNavLink>
              <MDBSideNavLink>Link 5</MDBSideNavLink>
            </MDBSideNavCollapse>
          </MDBSideNavItem>
        </MDBSideNavMenu>
      </MDBSideNav>

      <div style={{ padding: '20px' }} className='text-center'>
        <MDBBtn onClick={() => setRightOpen(!rightOpen)}>
          <MDBIcon fas icon='bars' />
        </MDBBtn>
      </div>
    </>
  );
}

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 
import React, { useState, useRef } from 'react';
import {
  MDBSideNav,
  MDBSideNavMenu,
  MDBSideNavItem,
  MDBSideNavLink,
  MDBSideNavCollapse,
  MDBIcon,
  MDBBtn,
} from 'mdb-react-ui-kit';

export default function App() {
  const [sidenavOpen, setSidenavOpen] = useState(true);
  const [basicCollapse1, setBasicCollapse1] = useState(true);
  const [basicCollapse2, setBasicCollapse2] = useState(true);
  const contentRef = useRef(null);

  return (
    <>
      <MDBSideNav open={sidenavOpen} getOpenState={(e: any) => setSidenavOpen(e)} closeOnEsc>
        <div className='mt-4'>
          <div id='header-content' className='ps-3'>
            <img
              src='https://mdbootstrap.com/img/Photos/Avatars/img%20(23).webp'
              alt='avatar'
              className='rounded-circle img-fluid mb-3'
              style={{ maxWidth: '50px' }}
            />

            <h4>
              <span style={{ whiteSpace: 'nowrap' }}>Ann Smith</span>
            </h4>
            <p>ann_s@mdbootstrap.com</p>
          </div>
          <hr className='mb-0' />
        </div>
        <MDBSideNavMenu>
          <MDBSideNavItem>
            <MDBSideNavLink href='/'>
              <MDBIcon icon='envelope' className='fas fa-fw me-3' />
              Inbox
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon icon='paper-plane' className='fas fa-fw me-3' />
              Outbox
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink icon='address-book' onClick={() => setBasicCollapse1(!basicCollapse1)}>
              Contacts
            </MDBSideNavLink>
            <MDBSideNavCollapse open={basicCollapse1}>
              <MDBSideNavLink>Family</MDBSideNavLink>
              <MDBSideNavLink>Friends</MDBSideNavLink>
              <MDBSideNavLink>Work</MDBSideNavLink>
            </MDBSideNavCollapse>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon icon='file' className='fas fa-fw me-3' />
              Drafts
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon icon='heart' className='fas fa-fw me-3' />
              Favourites
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon icon='star' className='fas fa-fw me-3' />
              Starred
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon icon='trash' className='fas fa-fw me-3' />
              Trash
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon icon='ban' className='fas fa-fw me-3' />
              Spam
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink icon='tag' onClick={() => setBasicCollapse2(!basicCollapse2)}>
              Contacts
            </MDBSideNavLink>
            <MDBSideNavCollapse open={basicCollapse2}>
              <MDBSideNavLink>Social</MDBSideNavLink>
              <MDBSideNavLink>Notifications</MDBSideNavLink>
              <MDBSideNavLink>Recent</MDBSideNavLink>
              <MDBSideNavLink>Uploads</MDBSideNavLink>
              <MDBSideNavLink>Backups</MDBSideNavLink>
              <MDBSideNavLink>Offers</MDBSideNavLink>
            </MDBSideNavCollapse>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon icon='sticky-note' className='fas fa-fw me-3' />
              Notes
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon icon='user-circle' className='fas fa-fw me-3' />
              Personal
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon icon='ellipsis-h' className='fas fa-fw me-3' />
              More
            </MDBSideNavLink>
          </MDBSideNavItem>
        </MDBSideNavMenu>
        <hr className='m-0' />
        <MDBSideNavMenu>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon icon='cogs' className='fas fa-fw me-3' />
              Settings
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon icon='user' className='fas fa-fw me-3' />
              Profile
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon icon='shield-alt' className='fas fa-fw me-3' />
              Privacy
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon icon='user-astronaut' className='fas fa-fw me-3' />
              Logout
            </MDBSideNavLink>
          </MDBSideNavItem>
        </MDBSideNavMenu>
        <div className='text-center' style={{ height: '100px' }}>
          <hr className='mb-4 mt-0' />
          <p>MDBootstrap.com</p>
        </div>
      </MDBSideNav>

      <div style={{ width: '100%', height: '100vh' }} className='text-center bg-light' ref={contentRef}>
        <div className='text-center py-5'>
          <MDBBtn color='primary' onClick={() => setSidenavOpen(!sidenavOpen)} className='m-5'>
            <MDBIcon icon='bars' />
          </MDBBtn>
          <div>
            <img
              className='rounded'
              style={{ maxWidth: '80%' }}
              src='https://mdbootstrap.com/img/Photos/Others/img%20(45).webp'
            />
          </div>
        </div>
      </div>
    </>
  );
}

2. Side navigation with a mode transition

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

View full screen demo 
import React, { useState, useRef, useEffect, useCallback } from 'react';
import {
  MDBSideNav,
  MDBSideNavMenu,
  MDBSideNavItem,
  MDBSideNavLink,
  MDBSideNavCollapse,
  MDBIcon,
} from 'mdb-react-ui-kit';

export default function App() {
  const [basicCollapse1, setBasicCollapse1] = useState(true);
  const [basicCollapse2, setBasicCollapse2] = useState(true);
  const [mode, setMode] = useState('side');
  const contentRef = useRef(null);

  const handleResize = useCallback(() => {
    if (window.matchMedia('(min-width: 900px)')) {
      return setMode('side');
    }

    return setMode('push');
  }, []);

  useEffect(() => {
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, [handleResize]);

  return (
    <>
      <MDBSideNav backdrop={false} mode={mode} color='dark' closeOnEsc={false}>
        <div className='mt-4'>
          <div id='header-content' className='ps-3'>
            <img
              src='https://mdbootstrap.com/img/Photos/Avatars/img%20(23).webp'
              alt='avatar'
              className='rounded-circle img-fluid mb-3'
              style={{ maxWidth: '50px' }}
            />

            <h4>
              <span style={{ whiteSpace: 'nowrap' }}>Ann Smith</span>
            </h4>
            <p>ann_s@mdbootstrap.com</p>
          </div>
          <hr className='mb-0' />
        </div>
        <MDBSideNavMenu>
          <MDBSideNavItem>
            <MDBSideNavLink href='/'>
              <MDBIcon icon='envelope' className='fas fa-fw me-3' />
              Inbox
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon icon='paper-plane' className='fas fa-fw me-3' />
              Outbox
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink icon='address-book' onClick={() => setBasicCollapse1(!basicCollapse1)}>
              Contacts
            </MDBSideNavLink>
            <MDBSideNavCollapse open={basicCollapse1}>
              <MDBSideNavLink>Family</MDBSideNavLink>
              <MDBSideNavLink>Friends</MDBSideNavLink>
              <MDBSideNavLink>Work</MDBSideNavLink>
            </MDBSideNavCollapse>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon icon='file' className='fas fa-fw me-3' />
              Drafts
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon icon='heart' className='fas fa-fw me-3' />
              Favourites
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon icon='star' className='fas fa-fw me-3' />
              Starred
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon icon='trash' className='fas fa-fw me-3' />
              Trash
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon icon='ban' className='fas fa-fw me-3' />
              Spam
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink icon='tag' onClick={() => setBasicCollapse2(!basicCollapse2)}>
              Contacts
            </MDBSideNavLink>
            <MDBSideNavCollapse open={basicCollapse2}>
              <MDBSideNavLink>Social</MDBSideNavLink>
              <MDBSideNavLink>Notifications</MDBSideNavLink>
              <MDBSideNavLink>Recent</MDBSideNavLink>
              <MDBSideNavLink>Uploads</MDBSideNavLink>
              <MDBSideNavLink>Backups</MDBSideNavLink>
              <MDBSideNavLink>Offers</MDBSideNavLink>
            </MDBSideNavCollapse>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon icon='sticky-note' className='fas fa-fw me-3' />
              Notes
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon icon='user-circle' className='fas fa-fw me-3' />
              Personal
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon icon='ellipsis-h' className='fas fa-fw me-3' />
              More
            </MDBSideNavLink>
          </MDBSideNavItem>
        </MDBSideNavMenu>
        <hr className='m-0' />
        <MDBSideNavMenu>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon icon='cogs' className='fas fa-fw me-3' />
              Settings
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon icon='user' className='fas fa-fw me-3' />
              Profile
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon icon='shield-alt' className='fas fa-fw me-3' />
              Privacy
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon icon='user-astronaut' className='fas fa-fw me-3' />
              Logout
            </MDBSideNavLink>
          </MDBSideNavItem>
        </MDBSideNavMenu>
        <div className='text-center' style={{ height: '100px' }}>
          <hr className='mb-4 mt-0' />
          <p>MDBootstrap.com</p>
        </div>
      </MDBSideNav>

      <div
        style={{ width: '100%', height: '100vh', paddingLeft: '240px', transition: 'padding 0.3s linear' }}
        className='text-center bg-light'
        ref={contentRef}
      >
        <div className='text-center py-5'>
          <h3 className='my-5'>Resize to change the mode</h3>
          <div>
            <img
              className='rounded'
              style={{ maxWidth: '80%' }}
              src='https://mdbootstrap.com/img/Photos/Others/img%20(53).webp'
            />
          </div>
        </div>
      </div>
    </>
  );
}

3. Slim side navigation (dark)

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

View full screen demo 
import React, { useRef } from 'react';
import { MDBSideNav, MDBSideNavMenu, MDBSideNavItem, MDBSideNavLink, MDBIcon } from 'mdb-react-ui-kit';

export default function App() {
  const contentRef = useRef(null);

  return (
    <>
      <MDBSideNav backdrop={false} color='dark' closeOnEsc={false} slim slimCollapsed bgColor='dark'>
        <div className='text-center mt-4'>
          <a className='ripple rounded-circle' data-mdb-color='light' href='#'>
            <img
              src='https://mdbootstrap.com/img/Photos/Avatars/img%20(29).webp'
              alt='avatar'
              className='rounded-circle img-fluid'
              style={{ maxWidth: '60px' }}
            />
          </a>
        </div>
        <hr />
        <MDBSideNavMenu>
          <MDBSideNavItem className='my-3'>
            <MDBSideNavLink className='p-0 d-flex justify-content-center'>
              <MDBIcon far icon='heart' size='2x'></MDBIcon>
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem className='my-3'>
            <MDBSideNavLink className='p-0 d-flex justify-content-center'>
              <MDBIcon far icon='envelope' size='2x'></MDBIcon>
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem className='my-3'>
            <MDBSideNavLink className='p-0 d-flex justify-content-center'>
              <MDBIcon far icon='user' size='2x'></MDBIcon>
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem className='my-3'>
            <MDBSideNavLink className='p-0 d-flex justify-content-center'>
              <MDBIcon icon='cogs' size='2x'></MDBIcon>
            </MDBSideNavLink>
          </MDBSideNavItem>
        </MDBSideNavMenu>
      </MDBSideNav>

      <div ref={contentRef} className='page-intro'>
        <div className='mask p-4 text-center'>
          <h1>Natalie Smith</h1>
          <h2>Portfolio</h2>
        </div>
      </div>
    </>
  );
}
.sidenav[data-mdb-slim-width='90'] {
  width: 90px;
}

.page-intro {
  background-image: url('https://mdbcdn.b-cdn.net/img/Photos/Others/img%20(52).webp');
  background-size: cover;
  background-position-x: center;
  background-color: white;
  width: 100vw;
  height: 100vh;
}

.mask {
  background-color: rgba(66, 66, 66, 0.4);
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.8);
}

.mask h1 {
  margin-top: 220px;
  font-size: 6rem;
}

.mask h2 {
  font-size: 2.8rem;
}

@media (max-width: 500px) {
  .mask h1 {
    font-size: 4rem;
  }

  .mask h2 {
    font-size: 2rem;
  }
}

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 
import React, { useState, useCallback, useEffect } from 'react';
import {
MDBSideNav,
MDBSideNavMenu,
MDBSideNavItem,
MDBSideNavLink,
MDBSideNavCollapse,
MDBIcon,
MDBContainer,
MDBNavbar,
MDBInput,
MDBInputGroup,
MDBNavbarToggler,
MDBNavbarNav,
MDBNavbarItem,
MDBDropdown,
MDBDropdownToggle,
MDBDropdownMenu,
MDBDropdownItem,
MDBBadge,
MDBCollapse,
} from 'mdb-react-ui-kit';

export default function App() {
  const [collapseOpened, setCollapseOpened] = useState('accordionCollapse1');
  const [basicOpen, setBasicOpen] = useState(true);
  const [mode, setMode] = useState('over');

  const toggleAccordion = (value: string) => {
    value !== collapseOpened ? setCollapseOpened(value) : setCollapseOpened('');
  };

  const handleResize = useCallback(() => {
    if (!window.matchMedia('screen and (min-width: 1400px)').matches) {
      setMode('over');
      return setBasicOpen(false);
    }

    setMode('push');
    return setBasicOpen(true);
  }, []);

  useEffect(() => {
    handleResize();
  }, [handleResize]);

  useEffect(() => {
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, [handleResize]);

  return (
    <header>
      <MDBSideNav mode={mode} open={basicOpen} getOpenState={setBasicOpen}>
        <div className='d-flex justify-content-center py-4'>
          <img
            id='MDB-logo'
            src='https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp'
            alt='MDB Logo'
            draggable='false'
          />
        </div>
        <MDBSideNavMenu>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon icon='chart-area' className='fa-fw me-3' />
              Website traffic
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink
              icon='angle-down'
              shouldBeExpanded={collapseOpened === 'accordionCollapse1'}
              onClick={() => toggleAccordion('accordionCollapse1')}
            >
              <MDBIcon icon='cogs' className='fa-fw me-3' />
              Settings
            </MDBSideNavLink>
            <MDBSideNavCollapse
              id='accordionCollapse1'
              open={collapseOpened === 'accordionCollapse1'}
            >
              <MDBSideNavLink>Profile</MDBSideNavLink>
              <MDBSideNavLink>Account</MDBSideNavLink>
            </MDBSideNavCollapse>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink
              icon='angle-down'
              shouldBeExpanded={collapseOpened === 'accordionCollapse2' }
              onClick={() => toggleAccordion('accordionCollapse2')}
            >
              <MDBIcon icon='lock' className='fa-fw me-3' />
              Password
            </MDBSideNavLink>
            <MDBSideNavCollapse
              id='accordionCollapse2'
              open={collapseOpened === 'accordionCollapse2' }
            >
              <MDBSideNavLink>Request password</MDBSideNavLink>
              <MDBSideNavLink>Reset password</MDBSideNavLink>
            </MDBSideNavCollapse>
          </MDBSideNavItem>
        </MDBSideNavMenu>
      </MDBSideNav>

      <MDBNavbar fixed='top' expand='xxl' id='main-navbar'>
        <MDBContainer fluid>
          <MDBNavbarToggler
            aria-controls='navbarSupportedContent'
            aria-expanded='false'
            aria-label='Toggle navigation'
            onClick={() => setBasicOpen(!basicOpen)}
          >
            <MDBIcon icon='bars' fas />
          </MDBNavbarToggler>

          <MDBInputGroup className='d-none d-md-flex input-group w-auto my-auto'>
            <MDBInput label='Search (ctrl + "/" to focus)' />
            <MDBIcon className='my-auto ms-2' icon='search' />
          </MDBInputGroup>

          <MDBNavbarNav right fullWidth={false} className='ml-auto d-flex flex-row'>
            <MDBNavbarItem>
              <MDBDropdown>
                <MDBDropdownToggle tag='a' className='nav-link text-dark'>
                  <MDBIcon icon='bell' />
                  <MDBBadge notification color='danger' pill>
                    1
                  </MDBBadge>
                </MDBDropdownToggle>
                <MDBDropdownMenu>
                  <MDBDropdownItem link>Action</MDBDropdownItem>
                  <MDBDropdownItem link>Another action</MDBDropdownItem>
                  <MDBDropdownItem link>Something else here</MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            </MDBNavbarItem>
            <MDBNavbarItem className='mx-3 me-lg-0 my-auto'>
              <MDBIcon icon='fill-drip' />
            </MDBNavbarItem>
            <MDBNavbarItem className='ms-3 me-lg-0 my-auto'>
              <MDBIcon fab icon='github' />
            </MDBNavbarItem>
            <MDBNavbarItem className='ms-3'>
              <MDBDropdown>
                <MDBDropdownToggle tag='a' className='nav-link'>
                  <i className='flag flag-united-kingdom'></i>
                </MDBDropdownToggle>
                <MDBDropdownMenu>
                  <MDBDropdownItem link>
                    <i className='flag-united-kingdom flag'></i>English
                    <MDBIcon icon='check' className='text-success ms-2' />
                  </MDBDropdownItem>
                  <MDBDropdownItem link>
                    <i className='flag flag-poland'></i>Polski
                  </MDBDropdownItem>
                  <MDBDropdownItem link>
                    <i className='flag flag-china'></i>中文
                  </MDBDropdownItem>
                  <MDBDropdownItem link>
                    <i className='flag flag-japan'></i>日本語
                  </MDBDropdownItem>
                  <MDBDropdownItem link>
                    <i className='flag flag-germany'></i>Deutsch
                  </MDBDropdownItem>
                  <MDBDropdownItem link>
                    <i className='flag flag-france'></i>Français
                  </MDBDropdownItem>
                  <MDBDropdownItem link>
                    <i className='flag flag-spain'></i>Español
                  </MDBDropdownItem>
                  <MDBDropdownItem link>
                    <i className='flag flag-russia'></i>Русский
                  </MDBDropdownItem>
                  <MDBDropdownItem link>
                    <i className='flag flag-portugal'></i>Português
                  </MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            </MDBNavbarItem>
            <MDBNavbarItem>
              <MDBDropdown>
                <MDBDropdownToggle tag='a' className='nav-link'>
                  <img
                    src='https://mdbootstrap.com/img/Photos/Avatars/img (31).webp'
                    className='rounded-circle'
                    height='22'
                    alt=''
                    loading='lazy' />
                </MDBDropdownToggle>
                <MDBDropdownMenu>
                  <MDBDropdownItem link>My profile</MDBDropdownItem>
                  <MDBDropdownItem link>Settings</MDBDropdownItem>
                  <MDBDropdownItem link>Logout</MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            </MDBNavbarItem>
          </MDBNavbarNav>
        </MDBContainer>
      </MDBNavbar>
    </header>
  );
}
@media (min-width: 1400px) {
  main,
  #main-navbar {
    padding-left: 240px;
  }
}

.dropdown-toggle:after {
  display: none;
}

Sidenav small and with categories

import React, { useState, useRef, useEffect } from 'react';
import { Link } from 'react-router-dom';
import {
  MDBContainer,
  MDBSideNav,
  MDBSideNavItem,
  MDBSideNavLink,
  MDBSideNavMenu,
  MDBBtn,
  MDBIcon,
} from 'mdb-react-ui-kit';

export default function SideNavPage(): JSX.Element {
  const [isOpen, setIsOpen] = useState(true);

  return (
    <MDBContainer className='my-5'>
      <MDBSideNav small open={isOpen} absolute getOpenState={(e: any) => setIsOpen(e)}>
        <a
          className='ripple d-flex justify-content-center py-4 mb-3'
          style={{ borderBottom: '2px solid #f5f5f5' }}
          href='#!'
          data-mdb-ripple-color='primary'
        >
          <img
            id='MDB-logo'
            src='https://mdbcdn.b-cdn.net/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp'
            alt='MDB Logo'
            draggable='false'
          />
        </a>
        <MDBSideNavMenu>
          <MDBSideNavItem>
            <MDBSideNavLink tag={Link} to='/'>
              <MDBIcon icon='tachometer-alt' className='fa-fw me-3' />
              <span className='sidenav-non-slim'>Overview</span>
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem className='pt-3'>
            <span className='sidenav-subheading text-muted'>Create</span>
            <MDBSideNavLink tag={Link}>
              <MDBIcon fas icon='plus' className='fa-fw me-3' />
              <span className='sidenav-non-slim'>Project</span>
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink>
              <MDBIcon fas icon='plus' className='fa-fw me-3' />
              Database
            </MDBSideNavLink>
          </MDBSideNavItem>

          <MDBSideNavItem className='pt-3'>
            <span className='sidenav-subheading text-muted'>Manage</span>
            <MDBSideNavLink tag={Link}>
              <MDBIcon fas icon='cubes' className='fa-fw me-3' />
              <span className='sidenav-non-slim'>Projects</span>
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink tag={Link}>
              <MDBIcon fas icon='database' className='fa-fw me-3' />
              <span className='sidenav-non-slim'>Databases</span>
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink tag={Link}>
              <MDBIcon fas icon='stream' className='fa-fw me-3' />
              <span className='sidenav-non-slim'>Custom domains</span>
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink tag={Link}>
              <MDBIcon fas icon='code-branch' className='fa-fw me-3' />
              <span className='sidenav-non-slim'>Repositories</span>
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink tag={Link}>
              <MDBIcon fas icon='users' className='fa-fw me-3' />
              <span className='sidenav-non-slim'>Team</span>
            </MDBSideNavLink>
          </MDBSideNavItem>

          <MDBSideNavItem className='pt-3'>
            <span className='sidenav-subheading text-muted'>Maintain</span>
            <MDBSideNavLink tag={Link}>
              <MDBIcon fas icon='chart-pie' className='fa-fw me-3' />
              <span className='sidenav-non-slim'>Analytics</span>
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink tag={Link}>
              <MDBIcon fas icon='sync' className='fa-fw me-3' />
              <span className='sidenav-non-slim'>Backups</span>
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink tag={Link}>
              <MDBIcon fas icon='shield' className='fa-fw me-3' />
              <span className='sidenav-non-slim'>Security</span>
            </MDBSideNavLink>
          </MDBSideNavItem>

          <MDBSideNavItem className='pt-3'>
            <span className='sidenav-subheading text-muted'>Admin</span>
            <MDBSideNavLink tag={Link}>
              <MDBIcon fas icon='money-bill' className='fa-fw me-3' />
              <span className='sidenav-non-slim'>Billing</span>
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink tag={Link}>
              <MDBIcon fas icon='file-contract' className='fa-fw me-3' />
              <span className='sidenav-non-slim'>License</span>
            </MDBSideNavLink>
          </MDBSideNavItem>

          <MDBSideNavItem className='pt-3'>
            <span className='sidenav-subheading text-muted'>Tools</span>
            <MDBSideNavLink tag={Link}>
              <MDBIcon fas icon='hand-pointer' className='fa-fw me-3' />
              <span className='sidenav-non-slim'>Drag & drop builder</span>
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink tag={Link}>
              <MDBIcon fas icon='code' className='fa-fw me-3' />
              <span className='sidenav-non-slim'>Online code editor</span>
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink tag={Link}>
              <MDBIcon fas icon='copy' className='fa-fw me-3' />
              <span className='sidenav-non-slim'>SFTP</span>
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink tag={Link} href='www.wp.pl'>
              <MDBIcon fab icon='jenkins' className='fa-fw me-3' />
              <span className='sidenav-non-slim'>Jenkins</span>
            </MDBSideNavLink>
          </MDBSideNavItem>
          <MDBSideNavItem>
            <MDBSideNavLink tag={Link}>
              <MDBIcon fab icon='gitlab' className='fa-fw me-3' />
              <span className='sidenav-non-slim'>GitLab</span>
            </MDBSideNavLink>
          </MDBSideNavItem>
        </MDBSideNavMenu>
      </MDBSideNav>

      <div style={{ padding: '20px' }} className='text-center'>
        <MDBBtn onClick={() => setIsOpen(!isOpen)}>
          <MDBIcon fas icon='bars' />
        </MDBBtn>
      </div>
    </MDBContainer>
  );
}

Sidenav - API

Import

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

Properties

MDBSideNav

Name Type Default Description Example
absolute boolean false Initializes a sidenav with the position: absolute CSS property. <MDBSideNav absolute />...</MDBSideNav>
accordion boolean false Enables accordion behavior in a navigation container <MDBSideNav accordion />...</MDBSideNav>
backdrop boolean true Enables or disables a backdrop. <MDBSideNav backdrop={false} />...</MDBSideNav>
bgColor string '' Sets a background color for the sidenav. <MDBSideNav bgColor='dark' />...</MDBSideNav>
closeOnEsc boolean true Enables or disables hiding a sidenav after clicking the Escape key. <MDBSideNav closeOnEsc={false} />...</MDBSideNav>
color "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light" | "dark" 'primary' Defines a color of the hovered/focused sidenav elements. <MDBSideNav color='secondary' />...</MDBSideNav>
constant boolean false Prevents hiding sidenav after clicking outside of it. <MDBSideNav constant />...</MDBSideNav>
contentRef HTMLElement Sets a reference to the content of the sidenav, that should be pushed/pulled by push or side mode. <MDBSideNav contentRef={someRef} />...</MDBSideNav>
getOpenState React.Dispatch<React.SetStateAction<boolean>> '' If you're using a state for open prop, you have to use this function to synchronize inner and outer states. <MDBSideNav open={someState} getOpenState={(e) => setSomeState(e)} />...</MDBSideNav>
open boolean '' Defines if sidenav is open or not <MDBSideNav open={true} />...</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>
relative boolean false Initializes a sidenav with the position: relative CSS property. <MDBSideNav relative />...</MDBSideNav>
right boolean false Initializes a sidenav at the right side of the page. <MDBSideNav right />...</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>
small 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 small={true} />...</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 HTMLElement - 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>
nonInvasive boolean true Enables or disables scrolling page when sidenav is open. <MDBSideNav nonInvasive={true} />...</MDBSideNav>

MDBSideNavMenu

Name Type Default Description Example
ref React.Ref<any> - A reference to the MDBSideNavMenu component <MDBSideNavMenu ref={someRef} />...</MDBSideNavMenu>

MDBSideNavItem

Name Type Default Description Example
ref React.Ref<any> '' A reference to the MDBSideNavItem component. <MDBSideNavItem ref={someRef} />...</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.

Events

MDBSideNav

Name Type Description
onOpen () => void Fires when the sidenav demands to be opened.
onClose () => void Fires when the sidenav demands to be closed.
onExpand () => any This event fires immediately when the sidenav is expanded
onCollapse () => any This event fires immediately when the sidenav is collapsed

CSS variables

As part of MDB’s evolving CSS variables approach, sidenav now use local CSS variables on .sidenav and .sidenav-backdrop for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

Sidenav CSS variables are in different classes which belong to this component. To make it easier to use them, you can find below all of the used CSS variables.

// .sidenav
--#{$prefix}sidenav-transform: #{$sidenav-transform};
--#{$prefix}sidenav-zindex: #{$sidenav-zindex};
--#{$prefix}sidenav-background-color: #{$sidenav-background-color};
--#{$prefix}sidenav-width: #{$sidenav-width};
--#{$prefix}sidenav-height: #{$sidenav-height};
--#{$prefix}sidenav-box-shadow: #{$sidenav-box-shadow};
--#{$prefix}sidenav-data-hidden-false-transform: #{$sidenav-data-hidden-false-transform};
--#{$prefix}sidenav-data-color-light-color: #{$sidenav-data-color-light-color};
--#{$prefix}sidenav-data-right-true-transform: #{$sidenav-data-right-true-transform};
--#{$prefix}sidenav-data-slim-collapsed-true-width: #{$sidenav-data-slim-collapsed-true-width};
--#{$prefix}sidenav-menu-padding: #{$sidenav-menu-padding};
--#{$prefix}sidenav-collapse-sidenav-link-font-size: #{$sidenav-collapse-sidenav-link-font-size};
--#{$prefix}sidenav-collapse-sidenav-link-height: #{$sidenav-collapse-sidenav-link-height};
--#{$prefix}sidenav-link-font-size: #{$sidenav-link-font-size};
--#{$prefix}sidenav-link-padding-y: #{$sidenav-link-padding-y};
--#{$prefix}sidenav-link-padding-x: #{$sidenav-link-padding-x};
--#{$prefix}sidenav-collapse-sidenav-link-padding-left: #{$sidenav-collapse-sidenav-link-padding-left};
--#{$prefix}sidenav-link-height: #{$sidenav-link-height};
--#{$prefix}sidenav-link-border-radius: #{$sidenav-link-border-radius};
--#{$prefix}sidenav-link-transition: #{$sidenav-link-transition};
--#{$prefix}sidenav-link-hover-background-color: #{$sidenav-link-hover-background-color};
--#{$prefix}sidenav-link-active-focus-background-color: #{$sidenav-link-active-focus-background-color};
--#{$prefix}sidenav-link-active-color: #{$sidenav-link-active-color};
--#{$prefix}sidenav-subheading-font-size: #{$sidenav-subheading-font-size};
--#{$prefix}sidenav-subheading-padding-y: #{$sidenav-subheading-padding-y};
--#{$prefix}sidenav-subheading-padding-x: #{$sidenav-subheading-padding-x};
--#{$prefix}sidenav-subheading-fw: #{$sidenav-subheading-fw};
--#{$prefix}sidenav-sm-link-pt: #{$sidenav-sm-link-pt};
--#{$prefix}sidenav-sm-link-pb: #{$sidenav-sm-link-pb};
--#{$prefix}sidenav-rotate-icon-margin-right: #{$sidenav-rotate-icon-margin-right};
--#{$prefix}sidenav-rotate-icon-transition: #{$sidenav-rotate-icon-transition};
--#{$prefix}sidenav-light-color: #{$sidenav-light-color};

// .sidenav-backdrop
--#{$prefix}sidenav-backdrop-zindex: #{$sidenav-backdrop-zindex};
--#{$prefix}sidenav-backdrop-background-color: #{$sidenav-backdrop-background-color};

SCSS variables

$sidenav-zindex: 1035;
$sidenav-backdrop-zindex: 1034;

$sidenav-transform: translateX(-100%);
$sidenav-background-color: $white;
$sidenav-width: 240px;
$sidenav-height: 100vh;
$sidenav-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);

$sidenav-data-hidden-false-transform: translateX(0%);
$sidenav-data-color-light-color: rgba(255, 255, 255, 0.6);
$sidenav-data-right-true-transform: translateX(100%);
$sidenav-data-slim-collapsed-true-width: 77px;

$sidenav-menu-padding: 0.2rem;

$sidenav-collapse-sidenav-link-font-size: 0.78rem;
$sidenav-collapse-sidenav-link-height: 1.5rem;
$sidenav-collapse-sidenav-link-padding-left: 3.4rem;

$sidenav-link-font-size: 0.89rem;
$sidenav-link-padding-y: 1rem;
$sidenav-link-padding-x: 1.5rem;
$sidenav-link-height: 3rem;
$sidenav-link-border-radius: 5px;
$sidenav-link-transition: all 0.3s linear;

$sidenav-link-hover-color: $primary;
$sidenav-link-hover-background-color: #f6f9fc;

$sidenav-link-active-focus-color: $sidenav-link-hover-color;
$sidenav-link-active-focus-background-color: $sidenav-link-hover-background-color;
$sidenav-link-active-color: $sidenav-link-hover-color;

$sidenav-rotate-icon-margin-right: 0.8rem;
$sidenav-rotate-icon-transition: transform 0.3s;

$sidenav-backdrop-background-color: rgba(0, 0, 0, 0.1);

$sidenav-light-color: $sidenav-data-color-light-color;

$sidenav-subheading-font-size: 0.6rem;
$sidenav-subheading-padding-y: 1rem;
$sidenav-subheading-padding-x: 1.5rem;
$sidenav-subheading-fw: 700;

$sidenav-sm-link-pt: 0.4rem;
$sidenav-sm-link-pb: $sidenav-sm-link-pt;