DEV Community

Cover image for Bootstrap v5 Navbar Component with Multi-Level and Mega Menu
Simon Köhler
Simon Köhler

Posted on • Updated on


Bootstrap v5 Navbar Component with Multi-Level and Mega Menu

Do you need more than only 2 Levels for your Bootstrap Navbar? Or you find the original hamburger menu of Bootstrap kind of boring? Well, here's the code for free.

Super simple example

I had to create this code for a client who sells themes with Bootstrap. So here's a little screenshot of the 2-level menu:

More advanced Codepen Example

This example code shows a Navbar component of the Bootstrap Framework version 5 with the following new features added:

  • Multi Level Menu
  • Material Icons as Dropdown Icons
  • Animated Hamburger Menu for Mobile Devices

Use, share and make it better

Feel free to use all my codes in your projects. I would be happy to see projects online where you used my codes. Please tell me what you think by writing a comment, and don't forget to follow me ;-)

If you have any questions, feel free to contact me:

Top comments (4)

ruud78 profile image
ruud78 • Edited

Hi Simon,

Great job.
How can I make the second menulink (Mulilevel) work like the first (Home) and third (Link) so it redirects to the underlying url?

When I change href="#" to href="/url.html" or something the link isn't working, it only activates the dropdown:

a class="nav-link dropdown-toggle show" href="need a link here to the category" data-toggle="dropdown" aria-expanded="true">Multilevel</a

I tried lots of examples with click or hover, but none of them redirects to the underlying link.

Thanks in advance,


joha365 profile image
serdarhoca28 profile image

When i change bootstrap version 5.0.0-alpha3 to 5.0.2 dropdowns not working.. i dont understand why?

serdarhoca28 profile image

Ok i found it. Changing data-toggle to data-bs-toggle data-target to data-bs-target

DEV The only reason people scroll to the bottom... 
is because they want to read more.

Sign up for an account to bookmark, comment, and react to articles that interest you.