Nested dropdowns built with React Bootstrap 5. Tutorial & templates for multilevel navbar dropdowns menu, activated on hover or on click & much more
Check out React Profiles Documentation for detailed instructions & even more examples.
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 »</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 »</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; }-
Download MDB React - free UI KIT
-
Choose your favourite customized component and click on the image
-
Copy & paste the code into your MDB project
React Nested Dropdown navbar left: 
React Nested Dropdown on hover: 