27+ Most Beautiful Bootstrap 5 Navbar Examples | 2022 Edition

Templates

author small image

Siva Kishore G

Posted : 11 Dec 2021
Modified : 25 Aug 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
Restaurant Website Navbar
Vertical Strip Navbar
Large Logo

Premium Bootstrap 5 Navbar Templates

Amazon Website Navbar
Bootstrap Navbar (style 2)
Bootstrap Navbar (style 3)
Bootstrap Navbar (style 4)
YouTube Style Navbar
Fancy Navbar
Custom Scroll Navbar

Edit Website Template Online - Boot...

Edit Website Template Online - Bootstrap 5

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.

navbrand centered in bootstrap 5

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

Social Icons navbar

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

Skewed Navbar - Custom style

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.

custom navbar - style 3

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.

Neumorpgic navbar

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>

Alert SVG

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)

Book pages navbar

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.

Ecommerce style-1

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.

Navbar bottom

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.

Sliding Drawer Navbar

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.

Multinav centered flare

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.

Alert SVG

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

Multinav centered flare

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

iMac Style navbar

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

full width submenu

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.

Alert SVG

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

full width submenu

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.

Alert SVG

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

News Website Navbar

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.

Pinterest Style Navbar

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.

Pinterest Style Navbar

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.

Vertical Strip Navbar

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 = ''
    }
  }
})

Premium

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

OR

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.

custom navbar - style 2

OR

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

OR

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

custom navbar style-5

OR

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.

Youtube Style Navbar

OR

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.

Fancy Navbar

OR

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.

Custom Scroll Navbar

OR

Related Posts

How to choose a perfect navbar for your website

A Complete Guide To Navbars

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

Post a comment

Full Name *

Email address *

Website address

Phone

Comment *

I promise, I keep it clean *

Comments

No Comments to show

Cookie Consent

This website uses cookies and similar technologies, to enhance your browsing experience and provide personalized recommendations. By continuing to use our website, you agree to our Privacy policy.