30 Bootstrap Navbar Examples

Sh Raj - Feb 1 -

- Dev Community

30 Bootstrap Navbar Examples

Bootstrap 5 Navbar examples & customization

A stunning collection of Navbar templates built with the newest Bootstrap 5. Navbar YouTube, Facebook, Amazon styles, Navbar with image, carousel, Navbar light, dark, gradient, transparent and many more.

If you want to learn more about the construction of the navbar and get to know the basic and advanced usage of this component - read the Navbar Docs.

Dark mode navbar with search

[

](https://mdbootstrap.com/snippets/standard/mdbootstrap/2948601?view=side)

Navbar with profile dropdown

[

](https://mdbootstrap.com/snippets/standard/mdbootstrap/2948942?view=side)

Gradient navbar

[

](https://mdbootstrap.com/snippets/standard/mdbootstrap/2949604?view=side)

Double navbar with centered logo

[

](https://mdbootstrap.com/snippets/standard/mdbootstrap/2949023?view=side)

Simple navbar with logo

[

](https://mdbootstrap.com/snippets/standard/mdbootstrap/2948963?view=side)

Dark theme navbar with logo & search

[

](https://mdbootstrap.com/snippets/standard/mdbootstrap/2948983?view=side)

Navbar with centered toolbar

[

](https://mdbootstrap.com/snippets/standard/mdbootstrap/2949143?view=side)

Github-style navbar

[

](https://mdbootstrap.com/snippets/standard/mdbootstrap/2948607?view=side)

Standard navbar menu

[

](https://mdbootstrap.com/snippets/standard/mdbootstrap/2949000?view=side)

Partially transparent navbar with blur effect

[

](https://mdbootstrap.com/snippets/standard/mdbootstrap/2949594?view=side)

Minimalistic navbar

[

](https://mdbootstrap.com/snippets/standard/mdbootstrap/2949621?view=side)

Navbar with pastel background color

[

](https://mdbootstrap.com/snippets/standard/mdbootstrap/2949642?view=side)

Transparent navbar

[

](https://mdbootstrap.com/snippets/standard/mdbootstrap/2949656?view=side)

Navbar with centered logo

[

](https://mdbootstrap.com/snippets/standard/mdbootstrap/2949664?view=side)

Navbar with mega menu

[

](https://mdbootstrap.com/snippets/standard/mdbootstrap/2949558?view=side)

Navbar with organized mega menu

[

](https://mdbootstrap.com/snippets/standard/mdbootstrap/2949573?view=side)

Navbar with extended mega menu with images

[

](https://mdbootstrap.com/snippets/standard/mdbootstrap/2949576?view=side)

Navbar with categorized pictures dropdown

[

](https://mdbootstrap.com/snippets/standard/mdbootstrap/2949577?view=side)

Navbar with newsfeed dropdown

[

](https://mdbootstrap.com/snippets/standard/mdbootstrap/2949581?view=side)

Navbar with newsfeed dropdown v2

[

](https://mdbootstrap.com/snippets/standard/mdbootstrap/2949585?view=side)

Navbar with sidenav toggle

[

](https://mdbootstrap.com/snippets/standard/mdbootstrap/2949673?view=side)

Transparent navbar, fixed after scrolling v2

[

](https://mdbootstrap.com/snippets/standard/mdbootstrap/2949651?view=side)

Change navbar background color on scroll

[

](https://mdbootstrap.com/snippets/standard/mdbootstrap/2948900?view=side)

Navbar with side navigation

[

](https://mdbootstrap.com/snippets/standard/mdbootstrap/2949470?view=side)

Dark double navbar with center search & sidebar toggle

[

](https://mdbootstrap.com/snippets/standard/mdbootstrap/2949041?view=side)

Light double navbar with center search & sidebar toggle

[

](https://mdbootstrap.com/snippets/standard/mdbootstrap/2949502?view=side)

Navbar with dark header

[

](https://mdbootstrap.com/snippets/standard/mdbootstrap/2949388?view=side)

Navbar with light header

[

](https://mdbootstrap.com/snippets/standard/mdbootstrap/2949513?view=side)

Navbar with cart icon

[

](https://mdbootstrap.com/snippets/standard/mdbootstrap/2949518?view=side)

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .