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:

https://simonkoehler.com/contact

Comments

[ruud78]

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

[Joy]

jsfiddle.net/5ga679z2/3/

[Serdar GÜNAYDIN]

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

[Serdar GÜNAYDIN]

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