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 ;-)
Top comments (4)
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
jsfiddle.net/5ga679z2/3/
When i change bootstrap version 5.0.0-alpha3 to 5.0.2 dropdowns not working.. i dont understand why?
Ok i found it. Changing data-toggle to data-bs-toggle data-target to data-bs-target