Collection of free Bootstrap navigation menu code examples: responsive, sidebar, dropdown, fixed, vertical, horizontal, hamburger, etc. Update of May 2020 collection. 23 new items.
Related Articles
Links
Made with
- HTML / CSS / JS
About a code
Bootstrap 5 Sidebar Menu with Toggle Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: boxicons.css
Bootstrap version: 5.0.0

Links
Made with
- HTML / CSS / JS
About a code
Bootstrap Menu V14
Right align navbar menu template with social media icons and a completely responsive structure. You can easily embed it into your website and perform additional edits to tailor it to your needs.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js, popper.js
Bootstrap version: 4.3.1
Links
Made with
- HTML / CSS / JS
About a code
Bootstrap Menu V18
Present even more content and make navigation more powerful with this free mega menu template design. You can preview it first, hit the download second and put it into action third. Enjoy the process.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js, popper.js
Bootstrap version: 4.3.1

Links
Made with
- HTML / CSS / JS
About a code
Bootstrap Menu V19
Instead of sticking to the traditional navigation positioning on a website, this free left sidebar menu template goes slightly against the grain. It is also fully mobile-friendly, offering an off-canvas menu for a better user experience.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js, popper.js
Bootstrap version: 4.3.1
Links
Made with
- HTML / CSS / JS
About a code
Bootstrap Menu V20
Keep things minimal while at the same time bold with this free full-screen menu overlay template. The navigation goes straight to the point, and you can also add a company logo or leave it out completely.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js, popper.js
Bootstrap version: 4.3.1
Links
Made with
- HTML / CSS / JS
About a code
How to Convert Bootstrap Pills (Tabs) Into a Dropdown Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Bootstrap version: 4.6.0
Links
Made with
- HTML / CSS / JS
About a code
Bootstrap Menu V07
Create excellent website navigability with this beautiful, responsive and free transparent menu template. It also features a top bar with social media icons and multi-level drop-down menu layering.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: icomoon.css, owl.carousel.css, jquery.js, popper.js
Bootstrap version: 4.3.1
Links
Made with
- HTML / CSS / JS
About a code
Bootstrap Menu V05
Create excellent website navigability with this beautiful, responsive and free transparent menu template. It also features a top bar with social media icons and multi-level drop-down menu layering.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: icomoon.css, owl.carousel.css, jquery.js, popper.js
Bootstrap version: 4.3.1
Links
Made with
- HTML / CSS / JS
About a code
Side Menu Responsive Bootstrap
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Bootstrap version: 4.5.2

Links
Made with
- HTML / CSS / JS
About a code
Bootstrap 5 Colorful Navbar with Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Bootstrap version: 5.0.0
Links
Made with
- HTML / CSS / JS
About a code
Cool Bootstrap Navigation Bar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Bootstrap version: 4.1.1
Links
Made with
- HTML / CSS / JS
About a code
Menu Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Bootstrap version: 4.5.0

Links
Made with
- HTML / CSS / JS
About a code
Bootstrap 4 Navigation Bar
Bootstrap 4 navigation bar with brand logo and name.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 4.3.1

Links
Made with
- HTML / CSS
About a code
Bootstrap Sticky Navbar
Create a sticky top navbar using Bootstrap 4 utility classes.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 4.3.1
Links
Made with
- HTML / CSS / JS
About a code
Bootstrap Dropdown Menu Style 96
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: bootsnav.css, jquery.js, bootsnav.js
Bootstrap version: 3.3.0
Links
Made with
- HTML / CSS / JS
About a code
Bootstrap Dropdown Menu Style 83
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: bootsnav.css, jquery.js, bootsnav.js
Bootstrap version: 3.3.0
Links
Made with
- HTML / CSS / JS
About a code
Bootstrap Dropdown Menu Style 75
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: bootsnav.css, jquery.js, bootsnav.js
Bootstrap version: 3.3.0
Links
Made with
- HTML / CSS / JS
About a code
Menu with Awesome Hover
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Bootstrap version: 4.1.3
Links
Made with
- HTML / CSS / JS
About a code
Bootstrap 4 Mega
Bootstrap 4 mega menu navigation bar with icons.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 4.3.1

Links
Made with
- HTML / CSS / JS
About a code
Bootstrap Transparent Navbar
The menu starts off as a transparent header bar. Then, as your website visitor scrolls down, it becomes opaque that will enhance your menu’s accessibility. Additionally, the menu bar is responsive, and the menu items are hidden in a minimal hamburger menu. Bootstrap transparent navbar looks good in both desktop computers and mobile devices.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 4.3.1
Links
Made with
- HTML / CSS / JS
About a code
Bootstrap 4 Navbar
With Bootstrap, a navigation bar can extend or collapse, depending on the screen size. A standard navigation bar is created with the .navbar
class, followed by a responsive collapsing class: .navbar-expand-xl. ... sm
(stacks the navbar vertically on extra large, large, medium or small screens).
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 4.3.1
Links
Made with
- HTML / CSS / JS
About a code
Bootstrap 4 Dropdown Megamenu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Bootstrap version: 4.3.1
Links
Made with
- HTML / CSS / JS
About a code
Bootstrap Menu
Bootstrap menu with smooth border transition.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: popper.js
Bootstrap version: 4.3.1
Links
Made with
- HTML / CSS / JS
About a code
Multi-level Bootstrap Menu
Multi-level Bootstrap menu on hover Bootstrap3.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Bootstrap version: 3.4.0

Links
Made with
- HTML / CSS
About a code
Bootstrap Navbar with Logo
Build a Bootstrap 4 navbar with an image logo.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 4.3.1

Links
Made with
- HTML / CSS / JS
About a code
Bootstrap Vertical Navbar
Build a fixed sidebar using Bootstrap 4 vertical navigation and media objects.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 4.3.1
Links
Made with
- HTML / CSS / JS
About a code
Responsive Bootstrap 4 Menu - Light/Dark
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Bootstrap version: 4.1.3
Links
Made with
- HTML / CSS / JS
About a code
Bootstrap Responsive Hover Navbar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Bootstrap version: 3.3.7
Links
Made with
- HTML / CSS / JS
About a code
Bootstrap Menu Underline Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Bootstrap version: 4.0.0
Links
Made with
- HTML / CSS / JS
About a code
Bootstrap 4 Navbar with Dropdown Animations
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Bootstrap version: 4.0.0
Links
Made with
- HTML / CSS / JS
About a code
Bootstrap Menu for One Page
One page Bootstrap + jQuery smooth scroll effect menu, if clicked menu item change active status and scroll to the section.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Bootstrap version: 3.3.7
Links
Made with
- HTML / CSS / JS
About a code
Bootstrap Menu + Submenu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 3.3.5
Links
Made with
- HTML / CSS / JS
About a code
Bootstrap 4 Mega Dropdown Menu Navbar
Mega Dropdown Menu Navbar - Bootstrap 4 code snippet full width dropdown menu.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Bootstrap version: 4.1.3
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Minimal Bootstrap Navbar
A minimal Bootstrap navbar.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 3.3.7

Links
Made with
- HTML / CSS / JS
About a code
Draggable Bootstrap Menu
This draggable bootstrap menu overflows the dropdown menus yet shows a background color the same size as the collapsed menu.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js, jquery-ui.js
Bootstrap version: 3.3.7
Links
Made with
- HTML / CSS (Sass) / JS
About a code
Fixed Navigation Sidebar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: linearicons.js, jquery.js
Bootstrap version: 3.3.6
Links
Made with
- HTML (Haml) / CSS (SCSS) / JS
About a code
Bootstrap Fullscreen Menu
Here’s an example of using Bootstrap’s modal plugin for site navigation. This will animate your navigation in nicely and is great for portfolio and brochure style websites that don’t require second level links.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Bootstrap version: 3.3.6
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Responsive Animated Nav
A fully responsive animated navigation menu for Bootstrap literally copy and paste and you're on your way.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 3.3.1
Links
Made with
- HTML (Haml) / CSS (SCSS) / JS
About a code
Bootstrap Navbar Toggle Show/Hide
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 2.3.2
Links
Made with
- HTML / CSS / JS
About a code
Header Blue
Landing page header featuring a responsive navbar, beautiful intro text, and a phone mockup for showcasing your products.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 4.1.3
Links
Made with
- HTML / CSS / JS
About a code
Style Header Menu Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 4.1.1
Links
Made with
- HTML / CSS / JS
About a code
Accordian Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 4.0.0
Links
Made with
- HTML / CSS / JS
About a code
Responsive Side Navigation Menu Bar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css, jquery.js
Bootstrap version: 4.0.0
Links
Made with
- HTML / CSS / JS
About a code
Side Menu Responsive
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Bootstrap version: 4.0.0
Links
Made with
- HTML / CSS / JS
About a code
Bootstrap Mega Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Bootstrap version: 3.3.0
Links
Made with
- HTML / CSS / JS
About a code
Mega Menu
Mega menu slide down on hover with carousel.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Bootstrap version: 3.3.0
Links
Made with
- HTML / CSS / JS
About a code
Mega Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Bootstrap version: 3.3.0