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.


          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 isOpen={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' iconAngle={180} onClick={() => setBasicCollapse1(!basicCollapse1)}>
                        <MDBIcon fas icon='grin' className='fa-fw me-3' />
                        Category 1
                      </MDBSideNavLink>
                      <MDBSideNavCollapse show={basicCollapse1}>
                        <MDBSideNavLink>Link 2</MDBSideNavLink>
                        <MDBSideNavLink>Link 3</MDBSideNavLink>
                      </MDBSideNavCollapse>
                    </MDBSideNavItem>
                    <MDBSideNavItem>
                      <MDBSideNavLink icon='angle-down' onClick={() => setBasicCollapse2(!basicCollapse2)}>
                        <MDBIcon fas icon='grin' className='fa-fw me-3' />
                        Category 2
                      </MDBSideNavLink>
                      <MDBSideNavCollapse show={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}
                  isOpen={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' iconAngle={180} onClick={() => setModeCollapse1(!modeCollapse1)}>
                        <MDBIcon fas icon='grin' className='fa-fw me-3' />
                        Category 1
                      </MDBSideNavLink>
                      <MDBSideNavCollapse show={modeCollapse1}>
                        <MDBSideNavLink>Link 2</MDBSideNavLink>
                        <MDBSideNavLink>Link 3</MDBSideNavLink>
                      </MDBSideNavCollapse>
                    </MDBSideNavItem>
                    <MDBSideNavItem>
                      <MDBSideNavLink icon='angle-down' onClick={() => setModeCollapse2(!modeCollapse2)}>
                        <MDBIcon fas icon='grin' className='fa-fw me-3' />
                        Category 2
                      </MDBSideNavLink>
                      <MDBSideNavCollapse show={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 isOpen={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' iconAngle={180} onClick={() => setColorCollapse1(!colorCollapse1)}>
                        <MDBIcon fas icon='grin' className='fa-fw me-3' />
                        Category 1
                      </MDBSideNavLink>
                      <MDBSideNavCollapse show={colorCollapse1}>
                        <MDBSideNavLink>Link 2</MDBSideNavLink>
                        <MDBSideNavLink>Link 3</MDBSideNavLink>
                      </MDBSideNavCollapse>
                    </MDBSideNavItem>
                    <MDBSideNavItem>
                      <MDBSideNavLink icon='angle-down' onClick={() => setColorCollapse2(!colorCollapse2)}>
                        <MDBIcon fas icon='grin' className='fa-fw me-3' />
                        Category 2
                      </MDBSideNavLink>
                      <MDBSideNavCollapse show={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
                  isOpen={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' iconAngle={180} onClick={() => setDarkCollapse1(!darkCollapse1)}>
                        <MDBIcon fas icon='grin' className='fa-fw me-3' />
                        Category 1
                      </MDBSideNavLink>
                      <MDBSideNavCollapse show={darkCollapse1}>
                        <MDBSideNavLink>Link 2</MDBSideNavLink>
                        <MDBSideNavLink>Link 3</MDBSideNavLink>
                      </MDBSideNavCollapse>
                    </MDBSideNavItem>
                    <MDBSideNavItem>
                      <MDBSideNavLink icon='angle-down' onClick={() => setDarkCollapse2(!darkCollapse2)}>
                        <MDBIcon fas icon='grin' className='fa-fw me-3' />
                        Category 2
                      </MDBSideNavLink>
                      <MDBSideNavCollapse show={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

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.


          import React, { useState } from 'react';
          import { MDBSideNav, MDBScrollbar, MDBSideNavItem, MDBSideNavLink, MDBSideNavCollapse, MDBBtn, MDBIcon } from 'mdb-react-ui-kit';
  
          export default function App() {
            const [innerOpen, setInnerOpen] = useState(true);         
          
            return (
              <>
                <MDBSideNav isOpen={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>
              </>
            );
          }

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
                  isOpen={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' iconAngle={180} onClick={() => setSlimCollapse1(!slimCollapse1)}>
                        <MDBIcon fas icon='grin' className='fa-fw me-3' />
                        <span className='sidenav-non-slim'>Category 1</span>
                      </MDBSideNavLink>
                      <MDBSideNavCollapse show={slimCollapse1}>
                        <MDBSideNavLink>Link 2</MDBSideNavLink>
                        <MDBSideNavLink>Link 3</MDBSideNavLink>
                      </MDBSideNavCollapse>
                    </MDBSideNavItem>
                    <MDBSideNavItem>
                      <MDBSideNavLink icon='angle-down' onClick={() => setSlimCollapse2(!slimCollapse2)}>
                        <MDBIcon fas icon='grin' className='fa-fw me-3' />
                        <span className='sidenav-non-slim'>Category 2</span>
                      </MDBSideNavLink>
                      <MDBSideNavCollapse show={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 isOpen={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'
                        iconAngle={180}
                        onClick={() => toggleAccordion('accordionCollapse1')}
                      >
                        <MDBIcon fas icon='grin' className='fa-fw me-3' />
                        Category 1
                      </MDBSideNavLink>
                      <MDBSideNavCollapse id='accordionCollapse1' show={collapseOpened}>
                        <MDBSideNavLink>Link 2</MDBSideNavLink>
                        <MDBSideNavLink>Link 3</MDBSideNavLink>
                      </MDBSideNavCollapse>
                    </MDBSideNavItem>
                    <MDBSideNavItem>
                      <MDBSideNavLink icon='angle-down' onClick={() => toggleAccordion('accordionCollapse2')}>
                        <MDBIcon fas icon='grin' className='fa-fw me-3' />
                        Category 2
                      </MDBSideNavLink>
                      <MDBSideNavCollapse id='accordionCollapse2' show={collapseOpened}>
                        <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 isOpen={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'
                        iconAngle={180}
                        onClick={() => toggleGroupCollapse1('groupCollapse1')}
                      >
                        <MDBIcon fas icon='grin' className='fa-fw me-3' />
                        Category 1
                      </MDBSideNavLink>
                      <MDBSideNavCollapse id='groupCollapse1' show={groupCollapseOpened1}>
                        <MDBSideNavLink>Link 2</MDBSideNavLink>
                        <MDBSideNavLink>Link 3</MDBSideNavLink>
                      </MDBSideNavCollapse>
                    </MDBSideNavItem>
                    <MDBSideNavItem>
                      <MDBSideNavLink icon='angle-down' onClick={() => toggleGroupCollapse1('groupCollapse2')}>
                        <MDBIcon fas icon='grin' className='fa-fw me-3' />
                        Category 2
                      </MDBSideNavLink>
                      <MDBSideNavCollapse id='groupCollapse2' show={groupCollapseOpened1}>
                        <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'
                        iconAngle={180}
                        onClick={() => toggleGroupCollapse2('groupCollapse3')}
                      >
                        <MDBIcon fas icon='grin' className='fa-fw me-3' />
                        Category 3
                      </MDBSideNavLink>
                      <MDBSideNavCollapse id='groupCollapse3' show={groupCollapseOpened2}>
                        <MDBSideNavLink>Link 7</MDBSideNavLink>
                        <MDBSideNavLink>Link 8</MDBSideNavLink>
                      </MDBSideNavCollapse>
                    </MDBSideNavItem>
                    <MDBSideNavItem>
                      <MDBSideNavLink icon='angle-down' onClick={() => toggleGroupCollapse2('groupCollapse4')}>
                        <MDBIcon fas icon='grin' className='fa-fw me-3' />
                        Category 4
                      </MDBSideNavLink>
                      <MDBSideNavCollapse id='groupCollapse4' show={groupCollapseOpened2}>
                        <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 isOpen={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' iconAngle={180} onClick={() => setRightCollapse1(!rightCollapse1)}>
                        <MDBIcon fas icon='grin' className='fa-fw me-3' />
                        Category 1
                      </MDBSideNavLink>
                      <MDBSideNavCollapse show={rightCollapse1}>
                        <MDBSideNavLink>Link 2</MDBSideNavLink>
                        <MDBSideNavLink>Link 3</MDBSideNavLink>
                      </MDBSideNavCollapse>
                    </MDBSideNavItem>
                    <MDBSideNavItem>
                      <MDBSideNavLink icon='angle-down' onClick={() => setRightCollapse2(!rightCollapse2)}>
                        <MDBIcon fas icon='grin' className='fa-fw me-3' />
                        Category 2
                      </MDBSideNavLink>
                      <MDBSideNavCollapse show={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>
              </>
            );
          }

Sidenav - API

Import

JavaScript


        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>`

MDBSideNavLink

Name	Type	Default	Description	Example
`className`	String	`''`	Adds a custom class to MDBSideNavLink	`<MDBSideNavLink className="class" />...</MDBSideNavLink>`
`icon`	String	`''`	Defines a rotating icon in the MDBSideNavLink.	`<MDBSideNavLink icon='angle-down' />...</MDBSideNavLink>`
`iconClass`	String	`''`	Adds additional classes to the icon element.	`<MDBSideNavLink iconClass='mb-3' />...</MDBSideNavLink>`
`iconAngle`	0 \|\| 180	`'0'`	Defines a starting angle of the icon element.	`<MDBSideNavLink iconAngle={180} />...</MDBSideNavLink>`

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.

Service	Why?	Agreement
Essential cookies	These cookies are strictly necessary to provide you with services available through our websites and to use some of its features, such as access to secure areas. Because these cookies are strictly necessary to deliver the websites, you cannot refuse them without impacting how our websites function. You can block or delete them by changing your browser settings.	No Yes
Functional	These cookies are used to enhance the performance and functionality of our websites but are non-essential to their use. However, without these cookies, certain functionality may become unavailable. These cookies are served by brandflow.net.	No Yes
Google AdWords	These cookies are used to make advertising via Google AdWords messages more relevant to you and your interests. They also perform functions like preventing the same ad from continuously reappearing, ensuring that ads are properly displayed, and in some cases selecting advertisements that are based on your interests.	No Yes
Facebook Pixel	These cookies are used to make advertising Facebook messages more relevant to you and your interests. They also perform functions like preventing the same ad from continuously reappearing, ensuring that ads are properly displayed, and in some cases selecting advertisements that are based on your interests.	No Yes