MDB React 5

Responsive React navigation Drawer built with the latest Bootstrap 5. Examples like sliding side drawer in a container, multilevel, material, right drawer & more.

Check out React Drawer Documentation for detailed instructions & even more examples.

Basic example

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' shouldBeExpanded={basicCollapse1} 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' shouldBeExpanded={basicCollapse2} 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>
    </>
  );
}

How to use?

1. Download MDB 5 - PRO REACT UI KIT

2. Choose your favourite customized component and click on the image

3. Copy & paste the code into your MDB project

▶️ Subscribe to YouTube channel for web development tutorials & resources

More examples (click on the image to see a live demo)

Positioning:

Colors example:

Dark example:

Inner scroll:

Menu item scroll:

Slim example:

You can find other examples here.

---

More extended React documentation

• React Bootstrap Code
• React Bootstrap Gallery
• React Bootstrap Hamburger Menu
• React Bootstrap Jumbotron
• React Bootstrap Maps
• React Bootstrap Mega Menu
• React Bootstrap Media object
• React Bootstrap Multiselect
• React Bootstrap Masonry
• React Bootstrap Contact form
• React Bootstrap Gradients
• React Bootstrap Pagination
• React Bootstrap Panels
• React Bootstrap Social Media icons & buttons
• React Bootstrap Search
• React Bootstrap Table sort
• React Bootstrap Table responsive
• React Bootstrap Table scroll
• React Bootstrap Table search
• React Bootstrap Textarea
• React Bootstrap Sidebar
• React Bootstrap Profiles
• React Bootstrap Nested Dropdown
• React Bootstrap Address Form
• React Scroll Back to Top button
• React Product Cards
• React Avatar
• React Carousel Slider with Thumbnails
• React Chat
• React Comparison table
• React Comments