32+ Most Beautiful Bootstrap 5 Navbar Examples

Siva Kishore G

Posted : 11 Dec 2021
Modified : 20 Feb 2023

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
Restaurant Website Navbar
Vertical Strip Navbar
Large Logo
Static Menu
Topbar Featuring Contact Info
Audio Navbar
Pill Navbar
Mobile Layout Bottom Bar
Full Width With Social Share Tabs

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

14. 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

15. 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

16. 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

17. 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

18. Restaurant Website Navbar

Appropriate for a restaurant website. The logo is the center of attraction here. Used d-block, d-xs-block, d-md-block classes to toggle between visibility of the logos on different screen sizes. min-width of the nav-item needs to be changed depending upon how many items you have.

View code

@media screen and (min-width:777px){
        .nav-link {
          padding:18px 0;
          min-width:120px;
        }
        .navbar {
          padding: 0
        }
      }

          <nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <div class="container">
          <a class="navbar-brand d-md-none d-xs-block py-3" href="#">
            <img src="/static_files/images/logos/beer_white.png" height="40" alt="Company Logo">
          </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="#">Locations</a>
              </li>
              <li class="nav-item">
                <a class="nav-link mx-2" href="#">Menus</a>
              </li>
              <li class="nav-item">
                <a class="nav-link mx-2" href="#">Catering</a>
              </li>
              <li class="nav-item">
                <a class="nav-link mx-2" href="#">Reserve</a>
              </li>
              <li class="nav-item">
                <a class="nav-link mx-2 btn rounded-0 btn-danger" href="#">Order Online</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <div class="text-center p-3 d-none d-md-block">
        <img src="/static_files/images/logos/beer.png" height="120" alt="Company Logo">
      </div>

19. Vertical Strip Navbar

This is a fancy navbar aligned vertically at the page center. No special arrangements are made for mobile view since the strip itself is small. Further efforts can be made to concise the navbar to a single block at smaller displays. This navbar portrays a very classy 3d looking perspective.

View code

a.vlink {
        color : #efefef;
        position:relative;
        height:54px;
        width:72px;
        text-align:center;
        line-height:54px;
        display:block;
        font-size:1.2rem;
      }
      a.vlink span {
        position : absolute;
        opacity: 0;
        transition : transform 400ms ease-out;
        margin-left:24px;
        box-shadow : 2px 4px 3px 1px rgba(0,0,0,0.2)
      }
      a.vlink:nth-of-type(odd){
      
      }
      
      a.vlink span:before {
        content : '';
        display:block;
        width:0;
        height:0;
        position:absolute;
        border-top:8px solid transparent;
        border-bottom:8px solid transparent;
        border-right:8px solid #000;
        left:-12px;
        top:33%;
      }
      a.vlink span:hover {
        background : #000 !important;
      }
      a.vlink:hover {
        box-shadow : 1px 2px 3px #9d451d;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2825b+0,e55b2b+50,f07146+100;Red+3D+%232 */
        background: rgb(242,130,91); /* Old browsers */
        background: -moz-linear-gradient(left,  rgba(242,130,91,1) 0%, rgba(229,91,43,1) 50%, rgba(240,113,70,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(left,  rgba(242,130,91,1) 0%,rgba(229,91,43,1) 50%,rgba(240,113,70,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right,  rgba(242,130,91,1) 0%,rgba(229,91,43,1) 50%,rgba(240,113,70,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2825b', endColorstr='#f07146',GradientType=1 ); /* IE6-9 */
      }
      
      a.vlink:hover span {
        opacity:1;
        width:120px;
        transform:translateX(12px);
        background : #343434;
        font-size:16px;
        border-radius:6px;
        border-left:4px solid #000;
        padding : 0px 12px 0px 12px
      }
      
      ul {
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#45484d+0,000000+100;Black+3D+%231 */
        background: rgb(69,72,77); /* Old browsers */
        background: -moz-linear-gradient(left,  rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(left,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
        box-shadow :-6px 12px 5px 2px rgba(145,145,145,0.5)
      }

<div class="vh-100 d-flex align-items-center position-fixed start-0 top-0" role="navigation">
        <div class="p-2">
          <div id="mainNav">
            <ul class="list-unstyled rounded ms-2">
              <li><a class="vlink rounded border-0" href="#"><i class="fas fa-home"></i> <span>Home</span></a></li>
              <li><a class="vlink rounded" href="#"><i class="fas fa-th"></i> <span>Services</span></a></li>
              <li><a class="vlink rounded" href="#"><i class="fas fa-headset"></i> <span>Call Us</span></a></li>
              <li><a class="vlink rounded" href="#"><i class="far fa-calendar-alt"></i> <span>Schedule</span></a></li>
              <li><a class="vlink rounded" href="#"><i class="fas fa-user-circle"></i> <span>About Us</span></a></li>
              <li><a class="vlink rounded" href="#"><i class="fas fa-newspaper"></i> <span>News</span></a></li>
              <li><a class="vlink rounded" href="#"><i class="fas fa-photo-video"></i> <span>Gallery</span></a></li>
            </ul>
          </div>
        </div>
      </div>

20. Large Logo

As the name suggests, this is a navbar with a large logo. The logo scales down when the user starts scrolling. Make sure your logo is at least 640px. The logo stays small at smaller breakpoints. Since the navbar is transparent, I prefer the hero image background with black-to-transparent gradient. A bit of customization is required if you have multiple nav links. The JS code is optimized and you might want to throttle the scroll using lodash library for optimizing furthermore.

View code

@font-face {
      	font-family: GreatVibes;
      	src: url('/static_files/fonts/gv.ttf');
      }
      
      .greatVibesFont {
        font-family : GreatVibes;
      }
      
      .navbar-brand img {
        width:100%;
        max-width:640px;
        position:absolute;
        transition:all 300ms linear;
        transform-origin: 0% 0%;
      }
      
      @media screen and (max-width:956px){
        .navbar-brand img {
          width:100%;
          max-width:240px;
          position:relative;
        }
      }
      
      img.consize {
        transform : translateY(-20px) scale(0.25);
      }
      #mainNav {
        transition : background 300ms linear;
      }

<nav class="navbar navbar-expand-lg navbar-dark p-3 fixed-top" id="mainNav">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">
            <img src="/static_files/images/logos/diviLogo.png" alt="Divi Logo" id="logoImg">
          </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>
      
      <div id="hero" style="background:url('/static_files/images/html/adventure.jpg') no-repeat;background-size:cover;background-position:top center">
        <h1 class="display-3 text-center text-white greatVibesFont" style="padding-top:45vh;padding-bottom:85vh;text-shadow : 0px 3px 4px rgba(0,0,0,0.8)">
          Adventure Unlimited. Explore the West
        </h1>
      </div>
      <div class="vh-100"></div>

var mainNav = document.getElementById('mainNav')
      var logoImg = document.getElementById('logoImg')
      var hero = document.getElementById('hero')
      var heroActive = false // To enhance performance, I chose this global variable to track the navbar changes.
      window.addEventListener('scroll', function() {
        if (window.scrollY > 200) {
          if (!heroActive) {
            heroActive = true
            mainNav.classList.add('bg-dark')
            if(window.innerWidth < 956) return;
            logoImg.className = 'consize'
          }
        } else {
          if (heroActive) {
            heroActive = false
            mainNav.classList.remove('bg-dark')
            if(window.innerWidth < 956) return;
            logoImg.className = ''
          }
        }
      })

21. Static Menu

This is a non conventional menu designed using bootstrap 5's css classes. The demo has a complete working example in which there is a fixed mini menu which can be used to highlight and hyperlink the section on the page. Learn more about how to add a scroll based navigation.

View code

#gradBgn {
        width:100%;
        position:relative;
      }
      .anton {
        font-family: 'Anton', sans-serif;
      }
      .openSans {
        font-family: 'Open Sans', sans-serif;
      }
      .blurOverlay {
        background:#fff;
        background:rgba(0,0,0,0.8);
      
        z-index:11;
      }
      #gradBgn {
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#5e004b+0,9e0041+100 */
        background: rgb(94,0,75); /* Old browsers */
        background: -moz-linear-gradient(45deg,  rgba(94,0,75,1) 0%, rgba(158,0,65,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(45deg,  rgba(94,0,75,1) 0%,rgba(158,0,65,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(45deg,  rgba(94,0,75,1) 0%,rgba(158,0,65,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e004b', endColorstr='#9e0041',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
        background: url('/static_files/images/html/stayMenuBgn.jpg') no-repeat;
        background-size:cover;
      
        position:fixed;
        top:0;
        height:100vh;
        width:100%;
        overflow:auto
      }
      .custom-link:hover {
        color : #fff
      }
      .custom-link {
        text-decoration : none;
        color : #cecece;
        min-width:120px;
        display:inline-block;
      }
      .hamLine {
        display:block;
        width:24px;
        margin-top:4px;
        border-top:1px solid #fff;
        vertical-align:middle;
        transform-origin:15% 15%;
        transition : all 200ms linear;
      }
      #subMenu {
        display:inline-grid;
        cursor:pointer;
        z-index:12;
      }
      
      .slideRight .custom-link{
        transform : translateX(20px);
        transition : transform 200ms linear;
      }
      
      .menuClicked .hamLine:nth-child(1){
        transform: rotate(45deg)
      }
      .menuClicked .hamLine:nth-child(3){
        transform: rotate(-45deg)
      }
      .menuClicked .hamLine:nth-child(2){
        display:none;
      }

<link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Anton&family=Open+Sans:wght@300;400&display=swap" rel="stylesheet">
      <div id="gradBgn">
        <div class="position-relative">
          <div class="d-flex justify-content-between p-3 align-items-center position-fixed w-100">
            <div>
              <img src="/static_files/images/logos/htmlWhiteLogo.png" alt="Company Logo" height="48">
            </div>
            <div>
              <div class="d-flex position-relative">
                <div class="d-none d-sm-block"><a href="#" class="custom-link">About</a></div>
                <div class="d-none d-sm-block">
                  <a href="#" class="custom-link">Pages <i class="ms-1 gg-chevron-down"></i></a>
                </div>
                <div id="subMenu">
                  <span class="hamLine"></span>
                  <span class="hamLine"></span>
                  <span class="hamLine"></span>
                </div>
                <div id="fullPageMenu" class="visually-hidden">
                  <div class="anton d-flex align-items-center position-fixed vh-100 w-100 start-0 top-0 blurOverlay">
                    <div class="container">
                      <div class="display-1"><a href="#" class="custom-link">About</a></div>
                      <div class="display-1"><a href="#" class="custom-link">Services</a></div>
                      <div class="display-1"><a href="#" class="custom-link">Contact</a></div>
                    </div>
                  </div>
                </div>
                <div class="p-4 start-0 top-0 position-fixed vh-100 align-items-center d-none d-md-flex" >
                  <div class="openSans">
                    <div class="selected sideLink ms-3 my-3"><span class="avatar">H</span> Home</div>
                    <div class="sideLink ms-3 my-3"><span class="avatar">G</span> Utilities</div>
                    <div class="sideLink ms-3 my-3"><span class="avatar">C</span> Blog</div>
                    <div class="sideLink ms-3 my-3"><span class="avatar">C</span> Contact</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

var subMenu = document.getElementById('subMenu')
      var fullPageMenu = document.getElementById('fullPageMenu')
      subMenu.addEventListener('click',function(){
        if(subMenu.className === 'menuClicked') {
          subMenu.className = ""
          setTimeout(function(){fullPageMenu.className = "visually-hidden"},200)
        }else{
          subMenu.className = 'menuClicked'
          fullPageMenu.className = "slideRight"
        }
      })

22. Topbar Featuring Contact Info

This is a beautiful navbar with a broad topbar to show all three modes of contact. Address, email and phone numbers in each column. Further more, add map link to the google address which triggers a map when clicked. Similarly do with email and phone number.

View code

.nav-item {
        font-size:18px;
        text-transform:uppercase;
        height:82px;
        line-height:64px;
      }
      .flare {
        background:#ef662b;
      }
      .flare a.nav-link {
        color:#fff !important
      }
      .topbarElements > div:nth-of-type(1){
        font-size:48px;
        margin:12px 32px;
        color:#ef662b
      }
      @media screen and (min-width:1040px){
        .flare { margin-right:-15px; }
      }
      @media screen and (max-width:1029px){
        .navbar-nav {
          margin-bottom:15px;
          text-align:center
        }
        .nav-item {
          background : rgba(255,255,255,0.1);
          margin:2px;
        }
      }

          <div class="row align-items-center text-center">
        <div class="col">
          <div class="topbarElements d-inline-flex align-items-center">
            <div>&#x27A4;</div>
            <div class="text-start d-md-block d-none">
              <h5 class="p-0 m-0 text-uppercase">Office</h5>
              <p class="p-0 m-0 text-secondary">123 Broad St, Cookeville, TN</p>
            </div>
          </div>
        </div>
        <div class="col border-start border-end">
          <div class="topbarElements d-inline-flex align-items-center">
            <div>&#x270E;</div>
            <div class="text-start d-md-block d-none">
              <h5 class="p-0 m-0 text-uppercase">Email</h5>
              <p class="p-0 m-0 text-secondary">example@email.com</p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="topbarElements d-inline-flex align-items-center">
            <div>
              &#x260F;
            </div>
            <div class="text-start d-md-block d-none">
              <h5 class="p-0 m-0 text-uppercase">Phone</h5>
              <p class="p-0 m-0 text-secondary">+91 123 123 2323</p>
            </div>
          </div>
        </div>
      </div>
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark p-0 m-0">
        <div class="container-fluid">
          <a class="navbar-brand" href="#"><img src="/static_files/images/logos/dbkLogo.png" alt="DBK Logo" height="72"></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>
              <li class="nav-item flare">
                <a class="nav-link mx-2" href="#">Get A Quote <span class="ms-2">&#x2192;</span></a>
              </li>
            </ul>
          </div>
        </div>
      </nav>

23. Audio Navbar

This is sort of a premium navbar coupled with audio files. The audio starts when the user clicks on the page which is portrayed by the flashing mouse and the line underneath. The bottom navbar fades down at 740px which is kind of custom css since my navbar wraps at that 740px breakpoint. You will hear a whoosh sound everytime you hover over the nav link.

The audio files I've used are royalty free. Make sure you do too unless you purchase the license.

View code

html {
          overflow-x: hidden;
      }
      
      body {
          font-family: 'Montserrat', sans-serif;
      }
      
      .indChar {
          animation: rt 1s 1 linear;
          opacity: 0;
          animation-fill-mode: forwards;
      
      }
      
      .font400 {
          font-weight: 400 !important;
      }
      
      .nav-link {
          color: #888888;
          letter-spacing: 2px;
          font-size: 14px;
      }
      
      .nav-link:hover {
          color: #548da8
      }
      
      .nav-link:hover::after,
      .nav-link:hover::before {
          opacity: 1;
      }
      
      .nav-link:before {
          content: "\263C";
          margin-right: 4px;
          color: #cecece;
          opacity: 0;
          transition: opacity 200ms linear;
      }
      
      .nav-link:after {
          content: "\263C";
          margin-left: 4px;
          color: #cecece;
          opacity: 0;
          transition: opacity 200ms linear;
      }
      
      p {
          color: #616161;
          letter-spacing: 18px;
      }
      
      #mouse {
          filter: invert(50%);
          animation: flick 800ms infinite linear;
      }
      
      @keyframes flick {
      
          0%,
          100% {
              opacity: 0.3
          }
      
          50% {
              opacity: 1;
          }
      }
      
      @keyframes rt {
          0% {
              opacity: 0;
          }
      
          50% {
              transform: rotateZ(180deg) translateX(-200px)
          }
      
          100% {
              transform: rotateZ(360deg);
              opacity: 1;
              color: #548da8
          }
      }
      
      #bottomNav {
          transition: all 300ms linear;
      }
      
      @media screen and (max-width:752px) {
          #bottomNav {
              transform: translateY(100%);
              opacity: 0
          }
      }

          <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400&display=swap" rel="stylesheet">
      
      <audio id="myAudio">
          <source src="/static_files/music/music.mp3" type="audio/mp3">
      </audio>
      <audio id="wik">
          <source src="/static_files/music/wik.mp3" type="audio/mp3">
      </audio>
      
      <div class="text-dark text-center bg-dark vh-100 d-flex flex-column">
          <div class="my-auto">
              <h1 class="display-1" id="rotateChars">
                  GANNAVARAPU
              </h1>
              <p>A BEAUTIFUL NAVBAR</p>
          </div>
          <div class="">
              <div class="mb-5 text-center">
                  <div><img src="/static_files/svgs/mouse.svg" id="mouse" alt="" height="42"></div>
                  <div class="mt-3 text-uppercase"><small class="text-secondary">Click &amp; Turn up the Volume</small></div>
              </div>
              <div class="col-md-8 mx-auto">
                  <div class="d-flex justify-content-evenly align-items-center mb-5" id="bottomNav">
                      <div class="nav-item"><a class="nav-link" href="#">HOME</a></div>
                      <div class="nav-item"><a class="nav-link" href="#">DIRECTION</a></div>
                      <div class="nav-item"><a class="nav-link" href="#">WORK</a></div>
                      <div class="nav-item"><a class="nav-link" href="#">PROGRAM</a></div>
                      <div class="nav-item"><a class="nav-link" href="#">CONTACT</a></div>
                  </div>
              </div>
          </div>
      </div>

var rc = document.getElementById('rotateChars')
      var text = rc.innerText.trim()
      var len = text.length
      var grp = len / 2
      var html = ""
      while (len > -1) {
          var txt = text.charAt(len)
          html = `<span style="animation-delay:${len / grp}s" class="indChar ${txt.trim() === "" ? "" : "d-inline-block"} ">${txt}</span>${html}`
          len--
      }
      rc.innerHTML = html
      
      var audioEnabled = false
      var wik = document.getElementById('wik')
      var navLinks = document.getElementsByClassName('nav-link')
      for (var n of navLinks) {
          n.addEventListener('mouseover', function () { if (audioEnabled) { wik.currentTime = 0; wik.play() } })
      }
      
      var enableMusic = window.addEventListener('click', function () {
          var myAudio = document.getElementById('myAudio')
          myAudio.volume = 0.5;
          myAudio.play()
          audioEnabled = true
          document.getElementById('mouse').style.animationPlayState = "paused"
          removeEventListener('click', enableMusic)
      })

24. Pill Navbar

A beautiful pill type of navbar designed with bootstrap 5. The navlinks are highlighted with a top border when clicked and they actually toggle when another link is clicked. Can be used for your ReactJS design.

View code

.nav_left {
          background-color: #f19159;
          border-top-left-radius: 48px;
          border-bottom-left-radius: 48px;
      }
      
      .nav-tabs .nav-link.active {
          background-color: transparent;
          border-color: transparent;
          border-top: 4px solid #fff;
          color: #fff;
      }
      
      .nav-tabs .nav-link {
          border: none;
          border-top-left-radius: 0;
          border-top-right-radius: 0;
          margin: 0 30px 0 40px;
      }
      
      .nav-tabs {
          border-bottom: none;
      }
      
      .nav-link {
          padding: 1rem 0.5rem;
          color: #fff;
      }
      
      .nav-link:focus,
      .nav-link:hover {
          color: #fff;
      }
      
      .search_input {
          width:100%;
          border-radius: 10px;
          border: none;
          line-height: initial;
          padding-top: 4px;
          padding-bottom: 4px;
          color: #f19159;
      }
      
      .search_input:focus-visible {
          outline: none;
      }
      
      input.search_input::placeholder {
          color: #cfd2ec;
          vertical-align: middle;
      }
      
      .search_img {
          top: 7px;
          right: 8px;
      }
      
      .navbar-toggler {
          border: 3px solid #f19159;
      }
      
      .navbar-toggler-icon {
          background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(35, 76, 203, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
      }
      
      .navbar-toggler:focus {
          box-shadow: none;
      }

<nav class="navbar navbar-expand-lg py-3 ">
          <div class="pe-lg-0 ps-lg-5 container-fluid justify-content-between">
              <a class="navbar-brand" href="#">
                  <img src="/static_files/images/logo.png" height="60" alt="logo">
              </a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
                  aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
                  <div class="nav_left d-lg-flex align-items-center">
                      <nav>
                          <div class="nav d-block d-lg-flex nav-tabs" id="nav-tab" role="tablist">
                              <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home"
                                  type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
                              <button class="nav-link" id="about-tab" data-bs-toggle="tab" data-bs-target="#about"
                                  type="button" role="tab" aria-controls="about" aria-selected="false">About</button>
                              <button class="nav-link" id="timing-tab" data-bs-toggle="tab" data-bs-target="#timing"
                                  type="button" role="tab" aria-controls="timing" aria-selected="false">Timing</button>
                              <button class="nav-link" id="courses-tab" data-bs-toggle="tab" data-bs-target="#courses"
                                  type="button" role="tab" aria-controls="courses" aria-selected="false">Courses</button>
                          </div>
                      </nav>
                      <div class="position-relative d-inline-block me-lg-4">
                          <input class="search_input ms-5 mb-3 mb-lg-0 ms-lg-0 pe-5 ps-3" type="search" placeholder="Search"
                              aria-label="Search">
                          <img class="position-absolute search_img" src="/static_files/svgs/search.svg" width="16" height="16"
                              alt="twitter">
                      </div>
                  </div>
              </div>
          </div>
      </nav>

25. Mobile Layout Bottom Bar

A right aligned navbar designed with bootstrap 5. The links are associated with appropriate logos which animate to a filled SVG upon hovering. A very rich but stuble animation. At small screens, the navbar disappears and a bottom bar will appear which will make the site look like a mobile app. See the image below which shows the large layout and a smal layout inside of it.

Preview Download

26. Full Width With Social Share Tabs

This template has a complete hero section with a full page navbar and a floating social share links and logos. The desktop view doesn't have a logo but it appears at smaller screens along with a hamburger icon to toggling the nav links.

Preview 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. Bootstrap 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. Bootstrap Navbar (style 3)

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. Bootstrap Navbar (style 4)

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

Premium

5. YouTube Style Navbar

Inspired by Youtube, I've designed this navbar. This navbar expands from the small breakpoint. The search bar wraps to a new column at xs breakpoint.

Features autosuggest when the user types at least three characters. You will have to write your own code to dismiss the autosuggest popup box.

Premium

6. Fancy Navbar

This is a modifed simple navbar. A lot of customization is done to acheive the curvy nav item style. Utilized the concept of border-radius in such a way that only part of the span element is visible.

Make sure the background is white otherwise the second span tag inside the nav-item class element will be visible.

Premium

7. Custom Scroll Navbar

This is a multi-navbar and a very fancy one. A second navbar appears after scrolling which includes a contact us form. This second navbar is triggered when the user is scrolled over 200px and retracts when the scrollY position is less than 200px.

A lot of customization is done using css and JS to achieve a complete mobile responsiveness.