30 Bootstrap Navbar Examples
Published: 2024-02-01 06:34:14

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](https://mdbootstrap.com/docs/standard/navigation/navbar/).

Dark mode navbar with search
----------------------------

 ![MDB 5 - Bootstrap 5 & Material Design](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/navigation/navbar/examples/assets/1.webp)[

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

* * *

Navbar with profile dropdown
----------------------------

 ![MDB 5 - Bootstrap 5 & Material Design](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/navigation/navbar/examples/assets/3.webp)[

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

* * *

Gradient navbar
---------------

 ![MDB 5 - Bootstrap 5 & Material Design](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/navigation/navbar/examples/assets/23.webp)[

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

* * *

Double navbar with centered logo
--------------------------------

 ![MDB 5 - Bootstrap 5 & Material Design](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/navigation/navbar/examples/assets/4.webp)[

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

* * *

Simple navbar with logo
-----------------------

 ![MDB 5 - Bootstrap 5 & Material Design](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/navigation/navbar/examples/assets/7.webp)[

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

* * *

Dark theme navbar with logo & search
------------------------------------

 ![MDB 5 - Bootstrap 5 & Material Design](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/navigation/navbar/examples/assets/9.webp)[

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

* * *

Navbar with centered toolbar
----------------------------

 ![MDB 5 - Bootstrap 5 & Material Design](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/navigation/navbar/examples/assets/8.webp)[

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

* * *

Github-style navbar
-------------------

 ![MDB 5 - Bootstrap 5 & Material Design](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/navigation/navbar/examples/assets/5.webp)[

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

* * *

Standard navbar menu
--------------------

 ![MDB 5 - Bootstrap 5 & Material Design](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/navigation/navbar/examples/assets/10.webp)[

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

* * *

Partially transparent navbar with blur effect
---------------------------------------------

 ![MDB 5 - Bootstrap 5 & Material Design](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/navigation/navbar/examples/assets/24.webp)[

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

* * *

Minimalistic navbar
-------------------

 ![MDB 5 - Bootstrap 5 & Material Design](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/navigation/navbar/examples/assets/25.webp)[

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

* * *

Navbar with pastel background color
-----------------------------------

 ![MDB 5 - Bootstrap 5 & Material Design](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/navigation/navbar/examples/assets/26.webp)[

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

* * *

Transparent navbar
------------------

 ![MDB 5 - Bootstrap 5 & Material Design](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/navigation/navbar/examples/assets/28.webp)[

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

* * *

Navbar with centered logo
-------------------------

 ![MDB 5 - Bootstrap 5 & Material Design](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/navigation/navbar/examples/assets/29.webp)[

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

* * *

Navbar with mega menu
---------------------

 ![MDB 5 - Bootstrap 5 & Material Design](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/navigation/navbar/examples/assets/16.webp)[

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

* * *

Navbar with organized mega menu
-------------------------------

 ![MDB 5 - Bootstrap 5 & Material Design](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/navigation/navbar/examples/assets/18.webp)[

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

* * *

Navbar with extended mega menu with images
------------------------------------------

 ![MDB 5 - Bootstrap 5 & Material Design](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/navigation/navbar/examples/assets/19.webp)[

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

* * *

Navbar with categorized pictures dropdown
-----------------------------------------

 ![MDB 5 - Bootstrap 5 & Material Design](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/navigation/navbar/examples/assets/20.webp)[

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

* * *

Navbar with newsfeed dropdown
-----------------------------

 ![MDB 5 - Bootstrap 5 & Material Design](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/navigation/navbar/examples/assets/21.webp)[

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

* * *

Navbar with newsfeed dropdown v2
--------------------------------

 ![MDB 5 - Bootstrap 5 & Material Design](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/navigation/navbar/examples/assets/22.webp)[

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

* * *

Navbar with sidenav toggle
--------------------------

 ![MDB 5 - Bootstrap 5 & Material Design](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/navigation/navbar/examples/assets/30.webp)[

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

* * *

Transparent navbar, fixed after scrolling v2
--------------------------------------------

 ![MDB 5 - Bootstrap 5 & Material Design](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/navigation/navbar/examples/assets/27.webp)[

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

* * *

Change navbar background color on scroll
----------------------------------------

 ![MDB 5 - Bootstrap 5 & Material Design](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/navigation/navbar/examples/assets/2.webp)[

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

* * *

Navbar with side navigation
---------------------------

 ![MDB 5 - Bootstrap 5 & Material Design](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/navigation/navbar/examples/assets/12.webp)[

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

* * *

Dark double navbar with center search & sidebar toggle
------------------------------------------------------

 ![MDB 5 - Bootstrap 5 & Material Design](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/navigation/navbar/examples/assets/6.webp)[

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

* * *

Light double navbar with center search & sidebar toggle
-------------------------------------------------------

 ![MDB 5 - Bootstrap 5 & Material Design](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/navigation/navbar/examples/assets/13.webp)[

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

* * *

Navbar with dark header
-----------------------

 ![MDB 5 - Bootstrap 5 & Material Design](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/navigation/navbar/examples/assets/11.webp)[

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

* * *

Navbar with light header
------------------------

 ![MDB 5 - Bootstrap 5 & Material Design](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/navigation/navbar/examples/assets/14.webp)[

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

* * *

Navbar with cart icon
---------------------

 ![MDB 5 - Bootstrap 5 & Material Design](https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/navigation/navbar/examples/assets/15.webp)[

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