Bootstrap Navigation Examples

Stay Updated

Subscribe to Bootsnipp newsletter. (only important updates will be sent, your email is never shared or sold to anyone else)

Considering A New Car?

You should consider a Tesla. Get 6 Months Free Supercharging.

Tesla Referral Code

Recent Comments

I need simple tree code. This is little bit complex.You can see here in left sidebar of "". I want to add same kind of tree to sidebar of "".Thanks in advance for your help.
"BootTree" TreeView for Bootstrap

<li class="dropdown-item"> <span style="cursor: pointer; width: 100%; display: block;" onclick="location.href='#' ">test</span> </li>try this
Bootstrap NavBar Menu Dropdowns

At the first level under the navbar, this works:<li class="dropdown-item"><a href="">Journey</a></li>If I move this down one level, it doesn't work. I pasted the <a> tag in your example and it still didn't work. I seem to get multiple click events. Any thoughts?
Bootstrap NavBar Menu Dropdowns

Well it.. thanks
Bootstrap Mega Menu

Does anyone have a 4.1.1 version of this snippet?
Fancy Sidebar Navigation

close side toggle with click on anywhere main page
Bootstrap V4 Side Toggle and Fixed Top Menu (Responsive)

This seems broken. If you shrink the web page down to what looks like a mobile size, and then click the hamburger menu, the items you can highlight in the menu disappear when you mouse over instead of going bold or highlighting. Seems a bit odd.
Mobile Nav Bar

I've made changes to the code so that it worked for my Joomla website - and I've also added media width to the CSS so the menu will be displayed all the time when it's shown on a screen at bootstrap 3 md breakpoint and beyond (you can later the @media width sections if you want the breakpoint to start at other points)
Fancy Sidebar Navigation

If you change the javascript a bit so it just toggles an open/closed class on the wrapper instead. And then apply all the other changes via CSS then you can use @media queries to only show the hamburger when the screen is of a certain width and only hide the sidebar when the menu is at a certain width.It also reduces the amount of javascript needed to just one onclick - toggleClass command.
Fancy Sidebar Navigation

Hey maridlcrmnDo you have a fix for the navbar, if I fx. want the nav shown on laptop/desktop?You know like Booststraps standard navbar? Sincerely Mads Dalsgaard.
Fancy Sidebar Navigation