Nested Dropdown

React 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; }

PAY ONCE

USE FOREVER

Hurry up ⌛ claim exclusive long term passes available only during Cyber Weeks