Buy now
Navbar
Responsive navigation header that includes support for branding, navigation, and more.
Light version
<!-- Light navbar: Dark links against light background -->
<header class="navbar navbar-expand-lg navbar-light bg-light shadow-sm">
<div class="container">
<a href="#" class="navbar-brand me-2 me-xl-4">
<img class="d-block" src="path-to-logo-image" width="116" alt="Finder">
</a>
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<a href="#" class="btn btn-primary btn-sm ms-2 order-lg-3">
<i class="fi-plus me-2"></i>Add<span class='d-none d-sm-inline'> listing</span>
</a>
<div class="collapse navbar-collapse order-lg-2" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li>
<a href="#" class="dropdown-item">Action link</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-item dropdown-toggle">Dropdown</a>
<ul class="dropdown-menu">
<li>
<a href="#" class="dropdown-item">Action link</a>
</li>
<li>
<a href="#" class="dropdown-item">Another action</a>
</li>
<li>
<a href="#" class="dropdown-item">Something else here</a>
</li>
<li>
<a href="#" class="dropdown-item">Yet another link</a>
</li>
</ul>
</li>
<li>
<a href="#" class="dropdown-item">Another action</a>
</li>
<li class="dropdown-divider"></li>
<li>
<a href="#" class="dropdown-item">Something else here</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</header>// Light navbar: Dark links against light background
header.navbar.navbar-expand-lg.navbar-light.bg-light.shadow-sm
.container
a(href="#").navbar-brand.me-2.me-xl-4
img(src="path-to-logo-image", width="116", alt="Finder").d-block
button(type="button", data-bs-toggle="collapse", data-bs-target="#navbarNav", aria-controls="navbarNav", aria-expanded="false", aria-label="Toggle navigation").navbar-toggler.ms-auto
span.navbar-toggler-icon
a(href="#").btn.btn-primary.btn-sm.ms-2.order-lg-3
i.fi-plus.me-2
| Add<span class="d-none d-sm-inline"> listing</span>
#navbarNav.collapse.navbar-collapse.order-lg-2
ul.navbar-nav
li.nav-item.active
a(href="#").nav-link Home
li.nav-item
a(href="#").nav-link Link
li.nav-item.dropdown
a(href="#", role="button", data-bs-toggle="dropdown", aria-expanded="false").nav-link.dropdown-toggle Dropdown
ul.dropdown-menu
li: a(href="#").dropdown-item Action link
li.dropdown
a(href="#").dropdown-item.dropdown-toggle Dropdown
ul.dropdown-menu
li: a(href="#").dropdown-item Action link
li: a(href="#").dropdown-item Another action
li: a(href="#").dropdown-item Something else here
li: a(href="#").dropdown-item Yet another link
li: a(href="#").dropdown-item Another action
li.dropdown-divider
li: a(href="#").dropdown-item Something else here
li.nav-item
a(href="#", tabindex="-1", aria-disabled="true").nav-link.disabled Disabled
Dark version
<!-- Dark navbar: Light links against dark background -->
<header class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a href="#" class="navbar-brand me-2 me-xl-4">
<img class="d-block" src="path-to-logo-image" width="116" alt="Finder">
</a>
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarDarkNav" aria-controls="navbarDarkNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<a href="#" class="btn btn-primary btn-sm ms-2 order-lg-3">
<i class="fi-plus me-2"></i>Add<span class='d-none d-sm-inline'> listing</span>
</a>
<div class="collapse navbar-collapse order-lg-2" id="navbarDarkNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu dropdown-menu-dark">
<li>
<a href="#" class="dropdown-item">Action link</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-item dropdown-toggle">Dropdown</a>
<ul class="dropdown-menu dropdown-menu-dark">
<li>
<a href="#" class="dropdown-item">Action link</a>
</li>
<li>
<a href="#" class="dropdown-item">Another action</a>
</li>
<li>
<a href="#" class="dropdown-item">Something else here</a>
</li>
<li>
<a href="#" class="dropdown-item">Yet another link</a>
</li>
</ul>
</li>
<li>
<a href="#" class="dropdown-item">Another action</a>
</li>
<li class="dropdown-divider"></li>
<li>
<a href="#" class="dropdown-item">Something else here</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</header>// Dark navbar: Light links against dark background
header.navbar.navbar-expand-lg.navbar-dark.bg-dark
.container
a(href="#").navbar-brand.me-2.me-xl-4
img(src="path-to-logo-image", width="116", alt="Finder").d-block
button(type="button", data-bs-toggle="collapse", data-bs-target="#navbarDarkNav", aria-controls="navbarDarkNav", aria-expanded="false", aria-label="Toggle navigation").navbar-toggler.ms-auto
span.navbar-toggler-icon
a(href="#").btn.btn-primary.btn-sm.ms-2.order-lg-3
i.fi-plus.me-2
| Add<span class="d-none d-sm-inline"> listing</span>
#navbarDarkNav.collapse.navbar-collapse.order-lg-2
ul.navbar-nav
li.nav-item.active
a(href="#").nav-link Home
li.nav-item
a(href="#").nav-link Link
li.nav-item.dropdown
a(href="#", role="button", data-bs-toggle="dropdown", aria-expanded="false").nav-link.dropdown-toggle Dropdown
ul.dropdown-menu.dropdown-menu-dark
li: a(href="#").dropdown-item Action link
li.dropdown
a(href="#").dropdown-item.dropdown-toggle Dropdown
ul.dropdown-menu.dropdown-menu-dark
li: a(href="#").dropdown-item Action link
li: a(href="#").dropdown-item Another action
li: a(href="#").dropdown-item Something else here
li: a(href="#").dropdown-item Yet another link
li: a(href="#").dropdown-item Another action
li.dropdown-divider
li: a(href="#").dropdown-item Something else here
li.nav-item
a(href="#", tabindex="-1", aria-disabled="true").nav-link.disabled Disabled
Alternative color schemes
<!-- Accent navbar -->
<header class="navbar navbar-expand-lg navbar-dark bg-accent">
<div class="container">
<!-- Navbar content goes here -->
</div>
</header>
<!-- Secondary navbar -->
<header class="navbar navbar-expand-lg navbar-light bg-secondary">
<div class="container">
<!-- Navbar content goes here -->
</div>
</header>// Accent navbar
header.navbar.navbar-expand-lg.navbar-dark.bg-accent
.container
// Navbar content goes here
// Secondary navbar
header.navbar.navbar-expand-lg.navbar-light.bg-secondary
.container
// Navbar content goes here
User account dropdown
Robert Fox
(302) 555-0107
robert_fox@gmail.com
robert_fox@gmail.com
<!-- Navbar with user account dropdown -->
<header class="navbar navbar-expand-lg navbar-light bg-light shadow-sm">
<div class="container">
<a href="#" class="navbar-brand flex-shrink-0 me-2 me-xl-4">
<img class="d-block" src="path-to-logo-image" width="116" alt="Finder">
</a>
<button type="button" class="navbar-toggler ms-auto" data-bs-toggle="collapse" data-bs-target="#navbarUserNav" aria-controls="navbarUserNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="dropdown order-lg-3">
<a href="#" class="d-inline-block py-1" data-bs-toggle="dropdown">
<img class="rounded-circle" src="path-to-user-avatar-image" width="40" alt="User">
</a>
<div class="dropdown-menu dropdown-menu-end">
<div class="d-flex align-items-start border-bottom px-3 py-1 mb-2" style="width: 16rem;">
<img class="rounded-circle" src="path-to-user-avatar-image" width="48" alt="User">
<div class="ps-2">
<h6 class="fs-base mb-0">Robert Fox</h6>
<div class="star-rating star-rating-sm">
<i class="star-rating-icon fi-star-filled active"></i>
<i class="star-rating-icon fi-star-filled active"></i>
<i class="star-rating-icon fi-star-filled active"></i>
<i class="star-rating-icon fi-star-filled active"></i>
<i class="star-rating-icon fi-star-filled active"></i>
</div>
<div class="fs-xs py-2">(302) 555-0107<br>robert_fox@gmail.com</div>
</div>
</div>
<a href="#" class="dropdown-item">
<i class="fi-user opacity-60 me-2"></i>
Personal Info
</a>
<a href="#" class="dropdown-item">
<i class="fi-lock opacity-60 me-2"></i>
Password & Security
</a>
<a href="#" class="dropdown-item">
<i class="fi-list opacity-60 me-2"></i>
My Listings
</a>
<a href="#" class="dropdown-item">
<i class="fi-heart opacity-60 me-2"></i>
Wishlist
</a>
<a href="#" class="dropdown-item">
<i class="fi-star opacity-60 me-2"></i>
Reviews
</a>
<a href="#" class="dropdown-item">
<i class="fi-bell opacity-60 me-2"></i>
Notifications
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Help</a>
<a href="#" class="dropdown-item">Sign Out</a>
</div>
</div>
<div class="collapse navbar-collapse order-lg-2" id="navbarUserNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Features</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Pricing</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
</ul>
</div>
</div>
</header>// Navbar with user account dropdown
header.navbar.navbar-expand-lg.navbar-light.bg-light.shadow-sm
.container
a(href="#").navbar-brand.flex-shrink-0.me-2.me-xl-4
img(src="path-to-logo-image", width="116", alt="Finder").d-block
button(type="button", data-bs-toggle="collapse", data-bs-target="#navbarUserNav", aria-controls="navbarUserNav", aria-expanded="false", aria-label="Toggle navigation").navbar-toggler.ms-auto
span.navbar-toggler-icon
.dropdown.order-lg-3
a(href="#", data-bs-toggle="dropdown").d-inline-block.py-1
img(src="path-to-user-avatar-image", width="40", alt="User").rounded-circle
.dropdown-menu.dropdown-menu-end
.d-flex.align-items-start.border-bottom.px-3.py-1.mb-2(style="width: 16rem;")
img(src="path-to-user-avatar-image", width="48", alt="User").rounded-circle
.ps-2
h6.fs-base.mb-0 Robert Fox
+star-rating(5,"sm")
.fs-xs.py-2
| (302) 555-0107
br
| robert_fox@gmail.com
a(href="#").dropdown-item
i.fi-user.opacity-60.me-2
| Personal Info
a(href="#").dropdown-item
i.fi-lock.opacity-60.me-2
| Password & Security
a(href="#").dropdown-item
i.fi-list.opacity-60.me-2
| My Listings
a(href="#").dropdown-item
i.fi-heart.opacity-60.me-2
| Wishlist
a(href="#").dropdown-item
i.fi-star.opacity-60.me-2
| Reviews
a(href="#").dropdown-item
i.fi-bell.opacity-60.me-2
| Notifications
.dropdown-divider
a(href="#").dropdown-item
| Help
a(href="#").dropdown-item
| Sign Out
#navbarUserNav.collapse.navbar-collapse.order-lg-2
ul.navbar-nav
li.nav-item.active
a(href="#").nav-link
| Home
li.nav-item
a(href="#").nav-link
| Features
li.nav-item
a(href="#").nav-link
| Pricing
li.nav-item
a(href="#").nav-link
| About
Search field
<!-- Navbar with search field -->
<header class="navbar navbar-expand-lg navbar-light bg-light shadow-sm">
<div class="container">
<a href="#" class="navbar-brand flex-shrink-0 me-2 me-xl-4">
<img class="d-block" src="path-to-logo-image" width="116" alt="Finder">
</a>
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearchNav" aria-controls="navbarSearchNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Search visible on desktop -->
<div class="input-group input-group-sm d-none d-lg-flex ps-2 ps-xxl-5 order-lg-3">
<i class="fi-search position-absolute text-muted top-50 translate-middle-y ms-2"></i>
<input class="form-control border-top-0 border-start-0 border-end-0 rounded-0" type="search" placeholder="Search site...">
</div>
<div class="collapse navbar-collapse order-lg-2" id="navbarSearchNav">
<!-- Search visible on mobile -->
<div class="d-lg-none bg-secondary border mx-n3 p-3 mt-3">
<div class="input-group">
<i class="fi-search position-absolute text-muted top-50 translate-middle-y ps-1 ms-2"></i>
<input class="form-control rounded-2" type="search" placeholder="Search site...">
</div>
</div>
<!-- Navigation -->
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</header>// Navbar with search field
header.navbar.navbar-expand-lg.navbar-light.bg-light.shadow-sm
.container
a(href="#").navbar-brand.flex-shrink-0.me-2.me-xl-4
img(src="path-to-logo-image", width="116", alt="Finder").d-block
button(type="button", data-bs-toggle="collapse", data-bs-target="#navbarSearchNav", aria-controls="navbarSearchNav", aria-expanded="false", aria-label="Toggle navigation").navbar-toggler.ms-auto
span.navbar-toggler-icon
// Search visible on desktop
.input-group.input-group-sm.d-none.d-lg-flex.ps-2.ps-xxl-5.order-lg-3
i.fi-search.position-absolute.text-muted.top-50.translate-middle-y.ms-2
input(type="search", placeholder="Search site...").form-control.border-top-0.border-start-0.border-end-0.rounded-0
#navbarSearchNav.collapse.navbar-collapse.order-lg-2
// Search visible on mobile
.d-lg-none.bg-secondary.border.mx-n3.p-3.mt-3
.input-group
i.fi-search.position-absolute.text-muted.top-50.translate-middle-y.ps-1.ms-2
input(type="search", placeholder="Search site...").form-control.rounded-2
// Navigation
ul.navbar-nav
li.nav-item.active
a(href="#").nav-link Home
li.nav-item
a(href="#").nav-link Features
li.nav-item
a(href="#").nav-link Pricing
li.nav-item
a(href="#").nav-link About