20+ Most Beautiful Bootstrap 5 Navbar Examples

Siva Kishore G

Posted : 11 Dec 2021
Modified : 30 Jun 2022

Intermediate Developers

Bootstrap 5 Navbar examples & downloadable templates

Browse through these free examples of bootstrap 5 navbars which includes full code and downloadable links. Make modifications as required because your nav bar might have more links than what I have here. These are not magic bullet navbars that fit's for all. Choose it appropriately and play with it at different screen sizes to see which fit's your needs exactly.

Free Bootstrap 5 Navbar templates

Simple responsive navbar
Centered nav-brand
Social icons navbar
Multi-line navbar template
Off-Canvas navbar template
Neumorphic navbar
Book Pages
Ecommere (style 1)
Navbar Bottom (Transparent Gradient Background)
Sliding Drawer Navbar
Multinav Centered Flare
Custom Navbar Bottom
iMac Style Navbar
Full Width Submenu
Skewed Navbar
News Website Navbar (Unlimited Text Scrolling)
Pinterest Style Navbar

How to add bootstrap

Add bootstrap CDN links to the html. Add the CSS section inside the <head> element and then add script right after </body> tag.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script

1. Simple responsive navbar

This navbar template is made with bootstrap 5 which collapses to a menu hamburger button at md breakpoint. All links are aligned to the right. If you want it to align left towards the brand, remove class ms-auto from the UL element

right aligned links in bootstrap 5 navbar

View code

<nav class="navbar navbar-expand-lg navbar-dark bg-dark p-3">
<div class="container-fluid">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class=" collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav ms-auto ">
      <li class="nav-item">
        <a class="nav-link mx-2 active" aria-current="page" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link mx-2" href="#">Products</a>
      </li>
      <li class="nav-item">
        <a class="nav-link mx-2" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link mx-2 dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
          Company
        </a>
        <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <li><a class="dropdown-item" href="#">Blog</a></li>
          <li><a class="dropdown-item" href="#">About Us</a></li>
          <li><a class="dropdown-item" href="#">Contact us</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>
</nav>

2. Centered nav-brand

This needs some code editing since there should be an equal number of links to the either side of the navbar. Once that is achieved, play with the spacing of links to your liking and also adjust the navbar brand image size. Best suited for websites such as events, restaurants, delivery companies etc as it promotes the brand.

View code

    <nav class="navbar navbar-expand-lg navbar-dark p-3 bg-danger" id="headerNav">
  <div class="container-fluid">
    <a class="navbar-brand d-block d-lg-none" href="#">
      <img src="/static_files/images/logos/logo_2_white.png" height="80" />
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class=" collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav mx-auto ">
        <li class="nav-item">
          <a class="nav-link mx-2 active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link mx-2" href="#">Products</a>
        </li>
        <li class="nav-item d-none d-lg-block">
          <a class="nav-link mx-2" href="#">
            <img src="/static_files/images/logos/logo_2_white.png" height="80" />
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link mx-2" href="#">Pricing</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link mx-2 dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Company
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Blog</a></li>
            <li><a class="dropdown-item" href="#">About Us</a></li>
            <li><a class="dropdown-item" href="#">Contact us</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

@media screen and (min-width:992px){
  .nav-item {
  line-height:80px;
  }
}

3. Social icons navbar

Main navigation is aligned in the middle and social icons are aligned right. The social icons are invisible at xs breakpoint. To modify this, change the classes d-none d-lg-inline-flex

View code

    <nav class="navbar navbar-expand-lg navbar-light bg-info p-3">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">DBook Inc</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class=" collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav ms-auto ">
        <li class="nav-item">
          <a class="nav-link mx-2 active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link mx-2" href="#">Products</a>
        </li>
        <li class="nav-item">
          <a class="nav-link mx-2" href="#">Pricing</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link mx-2 dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Company
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Blog</a></li>
            <li><a class="dropdown-item" href="#">About Us</a></li>
            <li><a class="dropdown-item" href="#">Contact us</a></li>
          </ul>
        </li>
      </ul>
      <ul class="navbar-nav ms-auto d-none d-lg-inline-flex">
        <li class="nav-item mx-2">
          <a class="nav-link text-dark h5" href="" target="blank"><i class="fab fa-google-plus-square"></i></a>
        </li>
        <li class="nav-item mx-2">
          <a class="nav-link text-dark h5" href="" target="blank"><i class="fab fa-twitter"></i></a>
        </li>
        <li class="nav-item mx-2">
          <a class="nav-link text-dark h5" href="" target="blank"><i class="fab fa-facebook-square"></i></a>
        </li>
      </ul>
    </div>
  </div>
</nav>

4. Multi-line navbar template

Fully customized navbar that fit's a large screen only. Do media queries in css to achieve mobile responsiveness. Import the google font as shown below if you like the font

View code

    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@500&display=swap" rel="stylesheet">

      .top-bar .nav-item {
  display: inline-block;
}

nav {
  padding: 0px;
}

nav.top-bar-wrap {
  background: #ffb66c;
}

.top-bar-wrap {
  height: 40px;
  line-height: 40px;
}

.main-nav-wrap {
  height: 80px;
  line-height: 80px;
}

nav.main-nav-wrap {
  background: #7c2222;
  font-size: 1.25rem
}

nav.top-bar-wrap ul,
nav.main-nav-wrap ul {
  margin-bottom: 0px;
  margin-top: 0px
}

a.nav-link:hover {
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  border-left: 12px solid rgba(0, 0, 0, 0.3);
}

a.nav-link {
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  color: #f9f9f9;
  text-transform: uppercase;
  font-family: '
  Rubik'
  ,
  sans-serif;
  transform: skew(-25deg);
  transition: all 400ms ease-out
}

a .inner-link {
  display: inline-block;
  transform: skew(25deg)
}

.nav-link {
  padding: 0px;
}

.top-bar-wrap a {
  padding-left: 12px;
}

.main-nav-wrap a {
  padding-left: 18px;
}

.brand-logo img {
  height: 40px;
  transform: skew(25deg)
}

.brand-phone a {
  display: block;
  font-size: 1.25em;
  text-decoration: none;
  color: #000000;
  letter-spacing: 2px;
  height: 40px;
  line-height: 1.5em;
  transform: skew(25deg)
}

.brand-phone,
.brand-logo {
  padding: 40px;
  position: absolute;
  top: 0;
  height: 120px;

  transform: skewX(-25deg);
}

.brand-logo {
  left: -30px;
  padding-left: 70px;
  background: #621616;
  border-right: 2px solid #ffb66c;

}

.brand-phone {
  right: 0;
  right: -30px;
  padding-right: 70px;
  background: #ffb66c;
  border-left: 3px solid #6c4013;
}

    <div role="navigation">
  <div class="">
    <div class="brand-logo">
      <a href=""><img src="/static_files/images/htmljstemplatesLogo.png" /></a>
    </div>
    <div class="brand-phone">
      <a href="#"><i class="fa fa-phone me-3"></i>900 234-1234</a>
    </div>
    <div class="text-center">
      <nav class="top-bar-wrap">
        <ul class="top-bar">
          <li class="nav-item">
            <a href="#" class="nav-link"><span class="inner-link">Home</span></a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link"><span class="inner-link">About</span></a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link"><span class="inner-link">Contact</span></a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link"><span class="inner-link">Support</span></a>
          </li>
        </ul>
      </nav>
      <nav class="main-nav-wrap">
        <ul class="main-nav">
          <li class="nav-item">
            <a href="#" class="nav-link"><span class="inner-link">Services</span></a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link"><span class="inner-link">Career</span></a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link"><span class="inner-link">Features</span></a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link"><span class="inner-link">Gallery</span></a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</div>

5. Off-Canvas navbar template

Very elegant sticky top navbar with off canvas retractable type menu. In this template, the navbar slides right and the animation looks like a scoot over effect. The brand letters change to initials at sm breakpoint. Completely responsive navbar designed using css flexbox.

View code

.flexMain {
  display:flex;
  align-items: center
}
.flex1 { flex:1 }
.flex2 { flex:2 }
.flex3 { flex:3 }

button.siteLink {
  margin-left:-5px;
  border:none;
  padding:24px;
  display:inline-block;
  min-width:115px;
}
.whiteLink {
  background : #fff;
}
.whiteLink:active {
  background : #000;
  color: #fff;
}
.blackLink {
  color: #fff;
  background:#232323;
  transition: all 300ms linear;
}

.blackLink:active {
  color: #000;
  background:#fff
}
#siteBrand {
  font-family: impact;
  letter-spacing : -1px;
  font-size:32px;
  color:#252525;
  line-height : 1em;
}
#menuDrawer {
  background:#fff;
  position:fixed;
  height:100vh;
  overflow:auto;
  z-index:12312;
  top:0;
  left:0;
  border-right:1px solid #eaeaea;
  min-width:25%;
  max-width:320px;
  width:100%;
  transform : translateX(-100%);
  transition : transform 200ms linear;
}
#mainNavigation {
  transition : transform 200ms linear;
  background : #fff;
}
.drawMenu > #menuDrawer {
  transform : translateX(0%);
}
.drawMenu > #mainNavigation {
  transform : translateX(25%);
}
.fa-times {
  cursor : pointer
}
a.nav-menu-item:hover {
  margin-left:2px;
  border-left:10px solid black;
}
a.nav-menu-item{
  transition:border 200ms linear;
  text-decoration:none;
  display:block;
  padding:18px;
  padding-left:32px;
  border-bottom:1px solid #eaeaea;
  font-weight:bold;
  color:#343434
}
select.noStyle {
  border:none;
  outline:none
}

<div class="p-3 bg-dark text-white">
  <div class="flexMain">
    <div class="flex1">

    </div>
    <div class="flex2 text-center">
      <div><strong>This site design is awesome. Try it</strong></div>
    </div>
    <div class="flex1">

    </div>
  </div>
</div>
<div id="menuHolder">
  <div role="navigation" class="sticky-top border-bottom border-top" id="mainNavigation">
    <div class="flexMain">
      <div class="flex2">
        <button class="whiteLink siteLink" style="border-right:1px solid #eaeaea" onclick="menuToggle()"><i class="fas fa-bars me-2"></i> MENU</button>
      </div>
      <div class="flex3 text-center" id="siteBrand">
        MY AWESOME SITE
      </div>

      <div class="flex2 text-end d-block d-md-none">
        <button class="whiteLink siteLink"><i class="fas fa-search"></i></button>
      </div>

      <div class="flex2 text-end d-none d-md-block">
        <button class="whiteLink siteLink">REGISTER</button>
        <button class="blackLink siteLink">Login</button>
      </div>
    </div>
  </div>

  <div id="menuDrawer">
    <div class="p-4 border-bottom">
      <div class='row'>
        <div class="col">
          <select class="noStyle">
            <option value="english">English</option>
            <option value="spanish">Spanish</option>
            <option value="french">French</option>
            <option value="italian">Italian</option>
            <option value="hebrew">Hebrew</option>
          </select>
        </div>
        <div class="col text-end ">
          <i class="fas fa-times" role="btn" onclick="menuToggle()"></i>
        </div>
      </div>
    </div>
    <div>
      <a href="#" class="nav-menu-item"><i class="fas fa-home me-3"></i>Home</a>
      <a href="#" class="nav-menu-item"><i class="fab fa-product-hunt me-3"></i>Products</a>
      <a href="#" class="nav-menu-item"><i class="fas fa-search me-3"></i>Explore</a>
      <a href="#" class="nav-menu-item"><i class="fas fa-wrench me-3"></i>Services</a>
      <a href="#" class="nav-menu-item"><i class="fas fa-dollar-sign me-3"></i>Pricing</a>
      <a href="#" class="nav-menu-item"><i class="fas fa-file-alt me-3"></i>Blog</a>
      <a href="#" class="nav-menu-item"><i class="fas fa-building me-3"></i>About Us</a>
    </div>
  </div>
</div>

var menuHolder = document.getElementById('menuHolder')
var siteBrand = document.getElementById('siteBrand')
function menuToggle(){
  if(menuHolder.className === "drawMenu") menuHolder.className = ""
  else menuHolder.className = "drawMenu"
}
if(window.innerWidth < 426) siteBrand.innerHTML = "MAS"
window.onresize = function(){
  if(window.innerWidth < 420) siteBrand.innerHTML = "MAS"
  else siteBrand.innerHTML = "MY AWESOME WEBSITE"
}

6. Neumorphic Navbar

Bootstrap navbar with active link designed as neumorphic. This navbar collapses at sm breakpoint. Modify the navbar-expanded-sm class to get the required collapsible breakpoint.

View code

    #neubar {
  background: #fae8d2;
  box-shadow: 4px 6px 12px rgba(0,0,0,0.4)
}

.nav-item .active {
  border-radius: 6px;
  background: linear-gradient(145deg, #ffe7ca, #f5d7b2);
  box-shadow:  4px 4px 8px #ddc1a0,
               -4px -4px 8px #f7e5cc;
}
#neubar .dropdown-menu a:hover {
  color: #454545
}
#neubar .nav-item {
  margin : auto 4px;
}
#neubar a {

  padding-left:12px;
  padding-right:12px;
}
#neubar .dropdown-menu {
  background : #545454
}
a.navbar-brand {
  color: #454545
}

    <nav class="navbar navbar-expand-sm navbar-light" id="neubar">
  <div class="container">
    <a class="navbar-brand" href="#"><img src="/static_files/images/logos/logo_2.png" height="60" /></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class=" collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav ms-auto ">
        <li class="nav-item">
          <a class="nav-link mx-2 active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link mx-2" href="#">Products</a>
        </li>
        <li class="nav-item">
          <a class="nav-link mx-2" href="#">Pricing</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link mx-2 dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Company
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Blog</a></li>
            <li><a class="dropdown-item" href="#">About Us</a></li>
            <li><a class="dropdown-item" href="#">Contact us</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

If you want to learn more about neumorphism, please check this article

7. Book Pages

This navbar resembles a book type navigation and hence the name. This menu is not mobile optimized. This navbar involves setting up a predefined number of vertical bars with known width and adjusting the page content right-margin or adjusting the body padding accordingly.

For example, if you want 4 nav pages each of 30px width, then the body should have the right-padding of 120px (4*30px)

View code

nav {
  margin-right:120px;
}
.verticalNav {
  width : 40px;
  position:fixed;
  height:100vh;
  top:0;
  right:0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height:40px;
  text-transform : uppercase;
  cursor:pointer;
  transition : all 300ms ease-in;
  border-right : 2px solid #232323
}

.verticalNav:hover {
  width : 100%;
  writing-mode: unset;
  text-orientation: sideways;
}

.verticalNav:hover .navContent {
  margin-left:120px;
  display:flex;
  justify-content: center;
  align-items: center;
  height:100vh
}
.navContent p{
  line-height:1.2em
}
.navContent,
.verticalNav:hover .siteNavLabel  {
  display: none;
}
.subNavMenu {
  font-size:6em;
  line-height:1em;
  color: #fff;
}

.verticalNav:nth-child(1){
  right:80px;
  background: #4adfff;
}
.verticalNav:nth-child(2){
  right:40px;
  background: #faf7f8;
}
.verticalNav:nth-child(3){
  right:0px;
  background: #761adc;
}
.hideToggle nav {
  margin-right:0px;
}
.hideToggle .verticalNav {
  display:none
}
#toggleRightMenu {
  cursor : pointer
}
.hideToggle #toggleRightMenu {
  transform : rotate(180deg)
}

    <div id="navWrap">
  <nav class="navbar navbar-expand-md p-3">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">
        <img src="/static_files/images/dbook_black.png" alt="demo dbook logo" height="40">
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="ms-auto">
        <i class="fas fa-arrow-right" id="toggleRightMenu"></i>
      </div>
    </div>
  </nav>
  <div id="verticalNavWrap">
    <div class='verticalNav'>
      <div class="siteNavLabel  text-center">About Us</div>
      <div class="navContent">
        <div class="container">
          <div class="row align-items-center">
            <div class="col">
              <h2 class="jumboHeading">About Us</h2>
              <p class="pt-4 ps-4 pe-4">
                A mobile app to register users's entry exit. Designed and developed by Siva Kishore G.
              </p>
              <div class="ms-4">
                <button class="btn btn-info">Download now</button>
              </div>
            </div>
            <div class="col">
              <div><a href="#" class="subNavMenu">Blog</a></div>
              <div><a href="#" class="subNavMenu">Contact Us</a></div>
              <div><a href="#" class="subNavMenu">Subscribe</a></div>
              <div><a href="#" class="subNavMenu">Partners</a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class='verticalNav'>
      <div class="siteNavLabel text-center">Pricing</div>
      <div class="navContent">
        <div class="container">
          <div class="row align-items-center">
            <div class="col">
              <h2 class="jumboHeading">Pricing</h2>
              <p class="p-4">
                Create upto 5 locations and 30 days of backup for free users.
              </p>
            </div>
            <div class="col">
              <div class="card text-center" style="width: 18rem;">
                <div class="card-header bg-info">PREMIUM</div>
                <div class="card-body">
                  <h5 class="card-title"></h5>
                  <ul class="card-text list-unstyled">
                    <li>Upto 20 Locations</li>
                    <li>1 Year Data</li>
                    <li>Separate App</li>
                    <li>Zero Ads</li>
                    <li>Unlimited popups</li>
                  </ul>
                </div>
                <div class="card-footer bg-dark text-white">2000 INR</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class='verticalNav text-center text-white'>
      <div class="siteNavLabel">Services</div>
      <div class="navContent">
        <div class="container">
          <div class="row align-items-center">
            <div class="col-md-7 mx-auto">
              <h2 class="jumboHeading">Services</h2>
              <p class="p-4">
                Servicing apartments, restaurants, hotels &amp; businesses
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

  var trm = document.getElementById('toggleRightMenu')
var navWrap = document.getElementById('navWrap')
trm.onclick = function(){
  if(navWrap.className === 'hideToggle') navWrap.className = ''
  else navWrap.className = 'hideToggle'
}

8. Ecommerce (Style 1)

Appropriate for an ecommerce website which features a search bar. The navbar is a stick-top navbar which expands only at lg breakpoint. I've used fontawesome 6 for the icons. The search bar is visible inline on large screens and is placed at the bottom for small screens.

Overall this is a great navigation bar with some tweaks needed based on the number of links you would want to put on.

View code

a {
  font-size:14px;
  font-weight:700
}
.superNav {
  font-size:13px;
}
.form-control {
  outline:none !important;
  box-shadow: none !important;
}
@media screen and (max-width:540px){
  .centerOnMobile {
    text-align:center
  }
}

    <div class="superNav border-bottom py-2 bg-light">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 centerOnMobile">
        <select  class="me-3 border-0 bg-light">
          <option value="en-us">EN-US</option>
        </select>
        <span class="d-none d-lg-inline-block d-md-inline-block d-sm-inline-block d-xs-none me-3"><strong>info@somedomain.com</strong></span>
        <span class="me-3"><i class="fa-solid fa-phone me-1 text-warning"></i> <strong>1-800-123-1234</strong></span>
      </div>
      <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 d-none d-lg-block d-md-block-d-sm-block d-xs-none text-end">
        <span class="me-3"><i class="fa-solid fa-truck text-muted me-1"></i><a class="text-muted" href="#">Shipping</a></span>
        <span class="me-3"><i class="fa-solid fa-file  text-muted me-2"></i><a class="text-muted" href="#">Policy</a></span>
      </div>
    </div>
  </div>
</div>
<nav class="navbar navbar-expand-lg bg-white sticky-top navbar-light p-3 shadow-sm">
  <div class="container">
    <a class="navbar-brand" href="#"><i class="fa-solid fa-shop me-2"></i> <strong>GEAR SHOP</strong></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="mx-auto my-3 d-lg-none d-sm-block d-xs-block">
      <div class="input-group">
        <span class="border-warning input-group-text bg-warning text-white"><i class="fa-solid fa-magnifying-glass"></i></span>
        <input type="text" class="form-control border-warning" style="color:#7a7a7a">
        <button class="btn btn-warning text-white">Search</button>
      </div>
    </div>
    <div class=" collapse navbar-collapse" id="navbarNavDropdown">
      <div class="ms-auto d-none d-lg-block">
        <div class="input-group">
          <span class="border-warning input-group-text bg-warning text-white"><i class="fa-solid fa-magnifying-glass"></i></span>
          <input type="text" class="form-control border-warning" style="color:#7a7a7a">
          <button class="btn btn-warning text-white">Search</button>
        </div>
      </div>
      <ul class="navbar-nav ms-auto ">
        <li class="nav-item">
          <a class="nav-link mx-2 text-uppercase active" aria-current="page" href="#">Offers</a>
        </li>
        <li class="nav-item">
          <a class="nav-link mx-2 text-uppercase" href="#">Products</a>
        </li>
        <li class="nav-item">
          <a class="nav-link mx-2 text-uppercase" href="#">Catalog</a>
        </li>
        <li class="nav-item">
          <a class="nav-link mx-2 text-uppercase" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link mx-2 text-uppercase" href="#">About</a>
        </li>
      </ul>
      <ul class="navbar-nav ms-auto ">
        <li class="nav-item">
          <a class="nav-link mx-2 text-uppercase" href="#"><i class="fa-solid fa-cart-shopping me-1"></i> Cart</a>
        </li>
        <li class="nav-item">
          <a class="nav-link mx-2 text-uppercase" href="#"><i class="fa-solid fa-circle-user me-1"></i> Account</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

9. Navbar Bottom (Transparent Gradient Background)

Appropriate for travel / vacation websites with a solid focus on the brand. The navigation links are at below of the site logo / brand logo. This kind of navbar puts more emphasis on the brand image. The coloring must be chosen according to the background image which is teal in this case.

The navbar is fixed to the top and a black gradient is applied via css. To make the gradient bleed over the page, a bottom padding is applied to the navigation. On mobile, the navigation collapses to a menu button.

View code

#mainNavigation a {
  font-family: 'Cabin', sans-serif;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:2px;
  text-shadow:1px 1px 2px rgba(0,0,0,0.4)
}

.dropdown-menu {
  background:#03727d
}
a.dropdown-toggle {
  color:#dfdfdf !important
}
a.dropdown-item:hover {
  color:#03727d !important
}
.nav-item a{
  color:#dfdfdf;
}
.nav-item a:hover {
  color:#fff
}
.nav-item{
  min-width:12vw;
}
#mainNavigation {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:123;
  padding-bottom:120px;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
#navbarNavDropdown.collapsing .navbar-nav,
#navbarNavDropdown.show .navbar-nav{
  background:#037582;
  padding:12px;
}

    <div id="mainNavigation">
  <nav role="navigation">
    <div class="py-3 text-center border-bottom">
      <img src="/static_files/images/logos/logo_3_white_2.png" alt="" class="invert">
    </div>
  </nav>
  <div class="navbar-expand-md">
    <div class="navbar-dark text-center my-2">
      <button class="navbar-toggler w-75" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span> <span class="align-middle">Menu</span>
      </button>
    </div>
    <div class="text-center mt-3 collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav mx-auto ">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Book Hotel</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Destinations</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Policy</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Company
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Blog</a></li>
            <li><a class="dropdown-item" href="#">About Us</a></li>
            <li><a class="dropdown-item" href="#">Contact us</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

10. Sliding Drawer Navbar

This is not fully mobile responsive because of the complexity of the navigation. I've left it for you to tackle it. There are two sliding drawers in this example. One closes and another one opens.

Download

11. Multinav centered flare

This navbar certainly uses bootstrap 5's classes but it's not a conventional one. I've used flexbox classes and display classes to achieve some sort of responsiveness. At xs breakpoint, the navigation links disappear but the flare (shopping cart) stays on. Replace it with a menu button and attach a menu drawer like in conventional navbars.

Download

12. Custom Navbar Bottom

This is a full width navbar placed under the logo. Designed using display classes such as d-none, d-block, d-inline-block, d-flex. Since it is a custom type navbar, a standard bootstrap class collapse has to be overridden in the media queries. See what elements are hidden under xs and lg breakpoints.

Match the colors of images and backgrounds to amplify the beauty of the navbar

Download

13. iMac DocK Style Navbar

This design is inspired by the dock on a macbook laptop. As usual, the icons are provided by font awesome. This design is customized for 6 panels (6 links in other words). If you want to incorporate more links / panels, then you must also adjust the values of the class navLink in the media query. Each panel exerts a bit of neumorphism and thereby colors chosen are important to get the effect of protruding panel

Download

13. Full Width Submenu

This navbar features a full width submenu which has a container, row and responsive columns. Perfect for those who want to feature a sort of menu snippet on the website. A bit of custom styling required and the down chevron is from bootstrap icons

Download

14. Skewed Navbar

Skewed navbar perfect for sports website. The navbar collapses at md breakpoint. In this, large screen layout is more beautiful compared to the mobile layout. Utilized certain media query styles to get the skewed effect.

Skewed at the outer element and reverse skewed in the inner element

Download

15. News Website Navbar (Unlimited Text Scrolling)

Multiple submenu navbar perfect for news website. The navbar collapses at md breakpoint. The submenu features an unlimited text scrolling effect.

Modify / append text to the child of 'scrollContent' element to update the scroll content

Download

15. Pinterest Style Navbar

This navbar template is designed while inspired by pinterest. Since the website relies heavily on it's search functionality and hence the large search bar. The searchbar is visible at every breakpoint. Some modifications required for the chat icon and the notification badge over it.

Download

Premium

1. Amazon website navbar

This navbar resembles the amazon website navbar. Quite a bit of code. This navbar consists of two sections, top bar and bottom bar. In the top bar there is a logo, location selection , account info and shopping cart. In the bottom bar there are sub-categories. The bottom bar folds into the "menu" button at xs breakpoint. I've used bootstrap's collapse class and target attribute to toggle the bottom bar menu.

Navbar resembling the one in amazon website

Premium

2. Custom Navbar (style 2)

This is a sticky nav bar which means it will be fixed at top even when scrolled. This navbar has a topbar which provides as a mini billboard of the website. For example, if you want to flash any new or new update of the site or new product etc. Designed with CSS flexbox and bootstrap's visibility classes to get desired functionality. For some, I used media queries.

This is a fancy navbar because when you scroll, the logo will change to initials, a cool effect produced by javascript.

Premium

3. Custom Navbar (style 4)

This is a sticky top navbar with the brand logo on the left and a hamburger icon on the right. The words "Menu" appears when hovered over the hamburger icon and upon clicking, a full page menu will appear sliding from right

Premium

4. Custom Navbar (style 5)

This navbar doesn't use conventional style coding. But this is a custom coded navbar. vertically centered and links appearing from the side and animate upon hovering or clicking.

Based on your font family and font size you will have to readjust the CSS values of .linkIcon, a.custom-nav-item

A Complete Guide To Navbars

Tips to choose a perfect navbar for your website, the color theory, target devices, navbar components and boilerplate template.

20+ Most Beautiful Bootstrap 5 Navbar Examples | 2022 Edition

Templates

Bootstrap 5 Navbar examples & downloadable templates

Free Bootstrap 5 Navbar templates

Premium Bootstrap 5 Navbar Templates

How to add bootstrap

1. Simple responsive navbar

2. Centered nav-brand

3. Social icons navbar

4. Multi-line navbar template

5. Off-Canvas navbar template

6. Neumorphic Navbar

7. Book Pages

8. Ecommerce (Style 1)

9. Navbar Bottom (Transparent Gradient Background)

10. Sliding Drawer Navbar

11. Multinav centered flare

12. Custom Navbar Bottom

13. iMac DocK Style Navbar

13. Full Width Submenu

14. Skewed Navbar

15. News Website Navbar (Unlimited Text Scrolling)

15. Pinterest Style Navbar

Premium

1. Amazon website navbar

2. Custom Navbar (style 2)

3. Custom Navbar (style 4)

4. Custom Navbar (style 5)

Related Posts

A Complete Guide To Navbars

Post a comment

Comments

Recent Posts

Recent Utilities

Cookie Consent

20+ Most Beautiful Bootstrap 5 Navbar Examples | 2022 Edition

Templates

Bootstrap 5 Navbar examples & downloadable templates

Free Bootstrap 5 Navbar templates

Premium Bootstrap 5 Navbar Templates

How to add bootstrap

1. Simple responsive navbar

2. Centered nav-brand

3. Social icons navbar

4. Multi-line navbar template

5. Off-Canvas navbar template

6. Neumorphic Navbar

7. Book Pages

8. Ecommerce (Style 1)

9. Navbar Bottom (Transparent Gradient Background)

10. Sliding Drawer Navbar

11. Multinav centered flare

12. Custom Navbar Bottom

13. iMac DocK Style Navbar

13. Full Width Submenu

14. Skewed Navbar

15. News Website Navbar (Unlimited Text Scrolling)

15. Pinterest Style Navbar

Premium

1. Amazon website navbar

2. Custom Navbar (style 2)

3. Custom Navbar (style 4)

4. Custom Navbar (style 5)

Related Posts

A Complete Guide To Navbars

Post a comment

Comments

Recent Posts

Recent Utilities

Cookie Consent

SUBSCRIBE