DEV Community

loading...
Cover image for Bootstrap v5 Navbar Component with Multi-Level and Mega Menu

Bootstrap v5 Navbar Component with Multi-Level and Mega Menu

Simon Köhler
Freelance PHP Backend-Developer and Expert for TYPO3 Open Source CMS
Updated on ・1 min read

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:

https://simon-koehler.com/contact

Discussion (4)

Collapse
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,

Ruud

Collapse
joha365 profile image
Joy
Collapse
serdarhoca28 profile image
Serdar GÜNAYDIN

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

Collapse
serdarhoca28 profile image
Serdar GÜNAYDIN

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