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.
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
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
<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>
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.
<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;
}
}
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
<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>
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
<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>
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.
.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"
}
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.
#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>
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)
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 & 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'
}
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.
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>
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.
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.
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
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
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.
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.
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
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
Tips to choose a perfect navbar for your website, the color theory, target devices, navbar components and boilerplate template.
No Comments to show
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.