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

  1. CSS Menus
  2. jQuery Menus
  3. JavaScript Menus
  4. React JS Menus
  5. Tailwind Menus

Author

  • BBBootstrap Team

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

Demo image: Bootstrap Menu V19

Author

  • rokr

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

Author

  • rokr

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

Demo image: Bootstrap Menu V19

Author

  • rokr

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

Author

  • rokr

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

Author

  • Envato Tuts+

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

Author

  • rokr

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

Author

  • rokr

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

Author

  • corbpie

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

Demo image: Bootstrap 5 Colorful Navbar with Animation

Author

  • BBBootstrap Team

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

Author

  • Santanu Patra

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

Author

  • Ivan Grozdic

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

Demo image: Bootstrap 4 Navigation Bar with Brand Logo and Name

Author

  • Omkar Bailkeri

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

Demo image: Bootstrap Sticky Navbar

Author

  • Bootstrapious

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

Author

  • bestjquery

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

Author

  • bestjquery

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

Author

  • bestjquery

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

Author

  • Swarup Kumar Kuila

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

Author

  • Omkar Bailkeri

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

Demo image: Bootstrap Transparent Navbar

Author

  • Bootstrapious

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

Author

  • Piyush

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

Author

  • BBBootstrap Team

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

Author

  • Rajesh Kr. Das

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

Author

  • Vaibhav

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

Demo image: Bootstrap Navbar with Logo

Author

  • bootstrapious

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

Demo image: Bootstrap Vertical Navbar

Author

  • Bootstrapious

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

Author

  • Ivan Grozdic

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

Author

  • Tristan Cottam Meulemans

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

Author

  • Trish Recuero

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

Author

  • Dey Dey

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

Author

  • Harun Kocaman

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

Author

  • Raian de Andrades

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

Author

  • Jacob Lett

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

Author

  • Zachary Kahl

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

Demo image: Draggable Bootstrap Menu

Author

  • Wade

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

Author

  • Boomer

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

Author

  • Dan Stuart

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

Author

  • Scott Marshall

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

Author

  • Clint Bettiga

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

Author

  • Epic Bootstrap

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

Author

  • Nemra1

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

Author

  • Siddharth Panchal

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

Author

  • aniketDev

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

Author

  • Siddharth Panchal

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

Author

  • AtiqUrRehman

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

Author

  • maridlcrmn

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

Author

  • anil0495

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