Nested Dropdown

React Bootstrap nested (multilevel) Dropdown - free examples

Nested dropdowns built with React Bootstrap 5. Tutorial & templates for multilevel navbar dropdowns menu, activated on hover or on click & much more

By adding a few lines of additional CSS you can add extra levels of submenu to your dropdown. You can apply this to the dropdown in a simple button or within the navbar.

To learn more about dropdowns read Dropdown Docs.

Button dropdown

An example of a nested dropdown with a simple button.

        
            
          import React from 'react';
          import { MDBDropdown, MDBDropdownMenu, MDBDropdownToggle, MDBDropdownItem, MDBDropdownLink, MDBContainer } from 'mdb-react-ui-kit';
          
          export default function Basic() {
            return (
              <MDBContainer className="d-flex justify-content-center mt-5 basic">
                <MDBDropdown>
                  <MDBDropdownToggle>Dropdown button</MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Another action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Submenu &raquo;</MDBDropdownLink>
                      <ul className="dropdown-menu dropdown-submenu">
                        <MDBDropdownItem>
                          <MDBDropdownLink href="#">Submenu item 1</MDBDropdownLink>
                        </MDBDropdownItem>
                        <MDBDropdownItem>
                          <MDBDropdownLink href="#">Submenu item 2</MDBDropdownLink>
                        </MDBDropdownItem>
                        <MDBDropdownItem>
                          <MDBDropdownLink href="#">Submenu item 3 &raquo;</MDBDropdownLink>
                          <ul className="dropdown-menu dropdown-submenu">
                            <MDBDropdownItem>
                              <MDBDropdownLink href="#">Multi level 1</MDBDropdownLink>
                            </MDBDropdownItem>
                            <MDBDropdownItem>
                              <MDBDropdownLink href="#">Multi level 2</MDBDropdownLink>
                            </MDBDropdownItem>
                          </ul>
                        </MDBDropdownItem>
                        <MDBDropdownItem>
                          <MDBDropdownLink href="#">Submenu item 4</MDBDropdownLink>
                        </MDBDropdownItem>
                        <MDBDropdownItem>
                          <MDBDropdownLink href="#">Submenu item 5</MDBDropdownLink>
                        </MDBDropdownItem>
                      </ul>
                    </MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
              </MDBContainer>
            );
          }
          
        
    
        
            
          .dropdown-menu li {
          position: relative;
          }
          .dropdown-menu .dropdown-submenu {
          display: none;
          position: absolute;
          left: 100%;
          top: -7px;
          }
          .dropdown-menu .dropdown-submenu-left {
          right: 100%;
          left: auto;
          }
          .dropdown-menu > li:hover > .dropdown-submenu {
          display: block;
          }

Navbar dropdown

An example of nested dropdown within the Navbar.

        
            
          import React from 'react';
          import {
            MDBContainer,
            MDBNavbar,
            MDBNavbarNav,
            MDBNavbarItem,
            MDBDropdown,
            MDBDropdownToggle,
            MDBDropdownMenu,
            MDBDropdownItem,
            MDBDropdownLink,
          } from 'mdb-react-ui-kit';

          export default function NavbarDropdown() {
            return (
              <MDBNavbar expand='lg' light bgColor='light'>
                <MDBContainer fluid>
                  <MDBNavbarNav>
                    <MDBNavbarItem>
                      <MDBDropdown>
                        <MDBDropdownToggle tag='a' className='nav-link'>
                          Dropdown Link
                        </MDBDropdownToggle>
                        <MDBDropdownMenu>
                          <MDBDropdownItem>
                            <MDBDropdownLink href="#">Action</MDBDropdownLink>
                          </MDBDropdownItem>
                          <MDBDropdownItem>
                            <MDBDropdownLink href="#">Another action</MDBDropdownLink>
                          </MDBDropdownItem>
                          <MDBDropdownItem>
                            <MDBDropdownLink href="#">Submenu &raquo;</MDBDropdownLink>
                            <ul className="dropdown-menu dropdown-submenu">
                              <MDBDropdownItem>
                                <MDBDropdownLink href="#">Submenu item 1</MDBDropdownLink>
                              </MDBDropdownItem>
                              <MDBDropdownItem>
                                <MDBDropdownLink href="#">Submenu item 2</MDBDropdownLink>
                              </MDBDropdownItem>
                              <MDBDropdownItem>
                                <MDBDropdownLink href="#">Submenu item 3 &raquo;</MDBDropdownLink>
                                <ul className="dropdown-menu dropdown-submenu">
                                  <MDBDropdownItem>
                                    <MDBDropdownLink href="#">Multi level 1</MDBDropdownLink>
                                  </MDBDropdownItem>
                                  <MDBDropdownItem>
                                    <MDBDropdownLink href="#">Multi level 2</MDBDropdownLink>
                                  </MDBDropdownItem>
                                </ul>
                              </MDBDropdownItem>
                              <MDBDropdownItem>
                                <MDBDropdownLink href="#">Submenu item 4</MDBDropdownLink>
                              </MDBDropdownItem>
                              <MDBDropdownItem>
                                <MDBDropdownLink href="#">Submenu item 5</MDBDropdownLink>
                              </MDBDropdownItem>
                            </ul>
                          </MDBDropdownItem>
                        </MDBDropdownMenu>
                      </MDBDropdown>
                    </MDBNavbarItem>
                  </MDBNavbarNav>
                </MDBContainer>
              </MDBNavbar>
            );
          }
          
        
    
        
            
          .dropdown-menu li {
          position: relative;
          }
          .dropdown-menu .dropdown-submenu {
          display: none;
          position: absolute;
          left: 100%;
          top: -7px;
          }
          .dropdown-menu .dropdown-submenu-left {
          right: 100%;
          left: auto;
          }
          .dropdown-menu > li:hover > .dropdown-submenu {
          display: block;
          }

Navbar dropdown left

An example of a nested dropdown with the submenu expanding on the left side instead of the right side. 

        
            
          import React from 'react';
          import {
            MDBContainer,
            MDBNavbar,
            MDBNavbarNav,
            MDBNavbarItem,
            MDBDropdown,
            MDBDropdownToggle,
            MDBDropdownMenu,
            MDBDropdownItem,
            MDBDropdownLink,
          } from 'mdb-react-ui-kit';

          export default function NavbarDropdownLeft() {
            return (
              <MDBNavbar expand='lg' light bgColor='light'>
                <MDBContainer fluid>
                  <MDBNavbarNav>
                    <MDBNavbarItem className="ms-auto">
                      <MDBDropdown>
                        <MDBDropdownToggle tag='a' className='nav-link'>
                          Dropdown Link
                        </MDBDropdownToggle>
                        <MDBDropdownMenu>
                          <MDBDropdownItem>
                            <MDBDropdownLink href="#">Action</MDBDropdownLink>
                          </MDBDropdownItem>
                          <MDBDropdownItem>
                            <MDBDropdownLink href="#">Another action</MDBDropdownLink>
                          </MDBDropdownItem>
                          <MDBDropdownItem>
                            <MDBDropdownLink href="#">Submenu &raquo;</MDBDropdownLink>
                            <ul className="dropdown-menu dropdown-submenu dropdown-submenu-left">
                              <MDBDropdownItem>
                                <MDBDropdownLink href="#">Submenu item 1</MDBDropdownLink>
                              </MDBDropdownItem>
                              <MDBDropdownItem>
                                <MDBDropdownLink href="#">Submenu item 2</MDBDropdownLink>
                              </MDBDropdownItem>
                              <MDBDropdownItem>
                                <MDBDropdownLink href="#">Submenu item 3 &raquo;</MDBDropdownLink>
                                <ul className="dropdown-menu dropdown-submenu dropdown-submenu-left">
                                  <MDBDropdownItem>
                                    <MDBDropdownLink href="#">Multi level 1</MDBDropdownLink>
                                  </MDBDropdownItem>
                                  <MDBDropdownItem>
                                    <MDBDropdownLink href="#">Multi level 2</MDBDropdownLink>
                                  </MDBDropdownItem>
                                </ul>
                              </MDBDropdownItem>
                              <MDBDropdownItem>
                                <MDBDropdownLink href="#">Submenu item 4</MDBDropdownLink>
                              </MDBDropdownItem>
                              <MDBDropdownItem>
                                <MDBDropdownLink href="#">Submenu item 5</MDBDropdownLink>
                              </MDBDropdownItem>
                            </ul>
                          </MDBDropdownItem>
                        </MDBDropdownMenu>
                      </MDBDropdown>
                    </MDBNavbarItem>
                  </MDBNavbarNav>
                </MDBContainer>
              </MDBNavbar>
            );
          }
          
        
    
        
            
          .dropdown-menu li {
          position: relative;
          }
          .dropdown-menu .dropdown-submenu {
          display: none;
          position: absolute;
          left: 100%;
          top: -7px;
          }
          .dropdown-menu .dropdown-submenu-left {
          right: 100%;
          left: auto;
          }
          .dropdown-menu > li:hover > .dropdown-submenu {
          display: block;
          }

Nested dropdown on hover

An example of a nested dropdown activated on hover, it can also be embedded inside on a Navbar .

        
            
          import React, { useState } from 'react';
          import { MDBDropdown, MDBDropdownMenu, MDBDropdownToggle, MDBDropdownItem, MDBDropdownLink, MDBContainer } from 'mdb-react-ui-kit';

          export default function Hover() {
            const [dropdownActive, setDropdownActive] = useState(false);

            return (
              <MDBContainer className="d-flex justify-content-center mt-5 basic">
                <MDBDropdown isOpen={dropdownActive}>
                  <MDBDropdownToggle 
                    onMouseEnter={() => setDropdownActive(true)} 
                    onMouseLeave={() => setDropdownActive(false)}
                  >
                    Dropdown button
                  </MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Another action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink href="#">Submenu &raquo;</MDBDropdownLink>
                      <ul className="dropdown-menu dropdown-submenu">
                        <MDBDropdownItem>
                          <MDBDropdownLink href="#">Submenu item 1</MDBDropdownLink>
                        </MDBDropdownItem>
                        <MDBDropdownItem>
                          <MDBDropdownLink href="#">Submenu item 2</MDBDropdownLink>
                        </MDBDropdownItem>
                        <MDBDropdownItem>
                          <MDBDropdownLink href="#">Submenu item 3 &raquo;</MDBDropdownLink>
                          <ul className="dropdown-menu dropdown-submenu">
                            <MDBDropdownItem>
                              <MDBDropdownLink href="#">Multi level 1</MDBDropdownLink>
                            </MDBDropdownItem>
                            <MDBDropdownItem>
                              <MDBDropdownLink href="#">Multi level 2</MDBDropdownLink>
                            </MDBDropdownItem>
                          </ul>
                        </MDBDropdownItem>
                        <MDBDropdownItem>
                          <MDBDropdownLink href="#">Submenu item 4</MDBDropdownLink>
                        </MDBDropdownItem>
                        <MDBDropdownItem>
                          <MDBDropdownLink href="#">Submenu item 5</MDBDropdownLink>
                        </MDBDropdownItem>
                      </ul>
                    </MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
              </MDBContainer>
            );
          }
          
        
    
        
            
          .dropdown-menu li {
          position: relative;
          }
          .dropdown-menu .dropdown-submenu {
          display: none;
          position: absolute;
          left: 100%;
          top: -7px;
          }
          .dropdown-menu .dropdown-submenu-left {
          right: 100%;
          left: auto;
          }
          .dropdown-menu > li:hover > .dropdown-submenu {
          display: block;
          }

          .dropdown-hover:hover>.dropdown-menu {
          display: inline-block;
          }

          .dropdown-hover>.dropdown-toggle:active {
          /*Without this, clicking will make it sticky*/
          pointer-events: none;
          }