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 »</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;
}
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 »</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>
</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 »</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 »</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 »</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;
}
.dropdown-hover:hover>.dropdown-menu {
display: inline-block;
}
.dropdown-hover>.dropdown-toggle:active {
/*Without this, clicking will make it sticky*/
pointer-events: none;
}
Related resources
Also, if you want to support our friends from TW Elements you can also check out the Tailwind dropdown documentation.