The navbar is the main header of every page: brand, links, dropdowns, search and account actions that collapse behind a toggler on small screens. These examples cover expand breakpoints, light, dark and coloured bars, logo brands, offcanvas menus and several real-world layouts.
1Basic navbar
A light navbar that collapses below the lg breakpoint, with links and a dropdown.
<nav class="navbar navbar-expand-lg bg-body-tertiary rounded">
<div class="container-fluid">
<a class="navbar-brand" href="#">Aeroora</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-1029" aria-controls="nav-1029" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="nav-1029">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<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="#">Features</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Services</a><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">Smart reporting</a></li><li><a class="dropdown-item" href="#">Team analytics</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">All services</a></li></ul></li>
<li class="nav-item"><a class="nav-link disabled" aria-disabled="true">Soon</a></li>
</ul>
</div>
</div>
</nav>2Brand text only
The simplest navbar: a brand as a link or as a heading.
<nav class="navbar bg-body-tertiary rounded mb-2">
<div class="container-fluid">
<a class="navbar-brand" href="#">Aeroora</a>
</div>
</nav>
<nav class="navbar bg-body-tertiary rounded">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">The workspace your team will actually love</span>
</div>
</nav>3Logo brand
An image logo as the brand; give it a fixed height so the bar keeps its size.
<nav class="navbar navbar-expand-md bg-body border rounded">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="../assets/img/logo-1.svg" alt="Aeroora" height="32" style="width:auto"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-1030" aria-controls="nav-1030" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="nav-1030">
<ul class="navbar-nav ms-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="#">Pricing</a></li>
<li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>4Logo and name
Combine a small logo with the brand name, aligned with flex utilities.
<nav class="navbar navbar-expand-lg bg-body-tertiary rounded">
<div class="container-fluid">
<a class="navbar-brand d-flex align-items-center gap-2" href="#"><img src="../assets/img/logo-2.svg" alt="Aeroora" height="28" style="width:auto"><span class="fw-bold">Aeroora</span></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-1031" aria-controls="nav-1031" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="nav-1031">
<ul class="navbar-nav me-auto">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Overview</a></li>
<li class="nav-item"><a class="nav-link" href="#">Support</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
</ul>
</div>
</div>
</nav>5Dark navbar
<code>data-bs-theme="dark"</code> with <code>.bg-dark</code> switches links, toggler and dropdowns to light-on-dark.
<nav class="navbar navbar-expand-lg bg-dark rounded" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#"><i class="bi bi-hexagon-fill" aria-hidden="true"></i> Aeroora</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-1032" aria-controls="nav-1032" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="nav-1032">
<ul class="navbar-nav me-auto">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="#">Reports</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">More</a><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">Team</a></li><li><a class="dropdown-item" href="#">Billing</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">Help</a></li></ul></li>
</ul>
<button type="button" class="btn btn-outline-light btn-sm">Sign in</button>
</div>
</div>
</nav>6Primary colored navbar
Use the theme colour as the bar background; the links take the text colour that reads on it.
<nav class="navbar navbar-expand-lg bg-primary rounded" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Aeroora</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-1033" aria-controls="nav-1033" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="nav-1033">
<ul class="navbar-nav me-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="#">Solutions</a></li>
<li class="nav-item"><a class="nav-link" href="#">Customers</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
</ul>
<a href="#" class="btn btn-light btn-sm">Get started</a>
</div>
</div>
</nav>7Navbar with search
A search form on the right side of the bar that moves into the collapsed menu on small screens.
<nav class="navbar navbar-expand-lg bg-body-tertiary rounded">
<div class="container-fluid">
<a class="navbar-brand" href="#">Aeroora</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-1034" aria-controls="nav-1034" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="nav-1034">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<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="#">Library</a></li>
<li class="nav-item"><a class="nav-link" href="#">Topics</a></li>
</ul>
<form class="d-flex" role="search">
<label for="nav-search-1035" class="visually-hidden">Search</label>
<input class="form-control me-2" type="search" id="nav-search-1035" placeholder="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>8Right aligned with buttons
Links pushed to the right with <code>.ms-auto</code>, followed by login and sign-up buttons.
<nav class="navbar navbar-expand-lg bg-body border-bottom">
<div class="container-fluid">
<a class="navbar-brand fw-semibold" href="#">Aeroora</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-1036" aria-controls="nav-1036" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="nav-1036">
<ul class="navbar-nav ms-auto me-lg-3">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Product</a></li>
<li class="nav-item"><a class="nav-link" href="#">Docs</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
</ul>
<div class="d-flex gap-2 py-2 py-lg-0">
<a href="#" class="btn btn-outline-primary btn-sm">Log in</a><a href="#" class="btn btn-primary btn-sm">Sign up</a>
</div>
</div>
</div>
</nav>9Centered links
<code>.mx-auto</code> centers the menu between the brand and an action on the right.
<nav class="navbar navbar-expand-lg bg-body-tertiary rounded">
<div class="container-fluid">
<a class="navbar-brand" href="#">Aeroora</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-1037" aria-controls="nav-1037" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="nav-1037">
<ul class="navbar-nav mx-auto">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Work</a></li>
<li class="nav-item"><a class="nav-link" href="#">Studio</a></li>
<li class="nav-item"><a class="nav-link" href="#">Journal</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
<a href="#" class="btn btn-dark btn-sm"><i class="bi bi-calendar-check-fill" aria-hidden="true"></i> Book a call</a>
</div>
</div>
</nav>10Always collapsed
Leave out the <code>.navbar-expand-*</code> class and the menu stays behind the toggler on every screen size.
<nav class="navbar bg-body-tertiary rounded">
<div class="container-fluid">
<a class="navbar-brand" href="#">Aeroora</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-1038" aria-controls="nav-1038" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="nav-1038">
<ul class="navbar-nav pt-2">
<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="#">Stories</a></li>
<li class="nav-item"><a class="nav-link" href="#">Support</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>11Toggler on the left
Place the toggler before the brand and expand from the md breakpoint.
<nav class="navbar navbar-expand-md bg-body-tertiary rounded">
<div class="container-fluid">
<button class="navbar-toggler me-2" type="button" data-bs-toggle="collapse" data-bs-target="#nav-1039" aria-controls="nav-1039" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<a class="navbar-brand me-auto" href="#">Aeroora</a><a href="#" class="btn btn-sm btn-outline-secondary order-md-last ms-2" aria-label="Account"><i class="bi bi-person-fill" aria-hidden="true"></i></a>
<div class="collapse navbar-collapse" id="nav-1039">
<ul class="navbar-nav ms-md-3">
<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="#">Explore</a></li>
<li class="nav-item"><a class="nav-link" href="#">Saved</a></li>
</ul>
</div>
</div>
</nav>12Navbar text
<code>.navbar-text</code> for plain text such as the signed-in user, vertically aligned with the links.
<nav class="navbar navbar-expand-lg bg-body-tertiary rounded">
<div class="container-fluid">
<a class="navbar-brand" href="#">Aeroora</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-1040" aria-controls="nav-1040" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="nav-1040">
<ul class="navbar-nav me-auto">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Projects</a></li>
<li class="nav-item"><a class="nav-link" href="#">Tasks</a></li>
<li class="nav-item"><a class="nav-link" href="#">Files</a></li>
</ul>
<span class="navbar-text">Signed in as <a href="#">Ava Rossi</a></span>
</div>
</div>
</nav>13Offcanvas navbar
On small screens the menu opens in an offcanvas panel instead of collapsing inline.
<nav class="navbar navbar-expand-lg bg-body-tertiary rounded">
<div class="container-fluid">
<a class="navbar-brand" href="#">Aeroora</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#nav-1041" aria-controls="nav-1041" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="nav-1041" aria-labelledby="nav-1041-label">
<div class="offcanvas-header">
<h2 class="offcanvas-title fs-5" id="nav-1041-label">Aeroora</h2>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<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="#">Services</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Company</a><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">About</a></li><li><a class="dropdown-item" href="#">Careers</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">Press</a></li></ul></li>
</ul>
</div>
</div>
</div>
</nav>14Dark offcanvas navbar
A dark bar whose offcanvas menu is dark as well, including a search form.
<nav class="navbar navbar-expand-xl bg-dark rounded" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#"><i class="bi bi-stars" aria-hidden="true"></i> Aeroora</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#nav-1042" aria-controls="nav-1042" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="nav-1042" aria-labelledby="nav-1042-label">
<div class="offcanvas-header">
<h2 class="offcanvas-title fs-5" id="nav-1042-label">Menu</h2>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<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="#">Gallery</a></li>
<li class="nav-item"><a class="nav-link" href="#">Events</a></li>
<li class="nav-item"><a class="nav-link" href="#">Members</a></li>
</ul>
<form class="d-flex mt-3 mt-xl-0" role="search">
<label for="nav-search-1043" class="visually-hidden">Search</label>
<input class="form-control me-2" type="search" id="nav-search-1043" placeholder="Search">
<button class="btn btn-outline-light" type="submit">Go</button>
</form>
</div>
</div>
</div>
</nav>15Icon links with badge
Icons above short labels and a cart counter badge - common for shops and apps.
<nav class="navbar navbar-expand bg-body-tertiary rounded">
<div class="container-fluid">
<a class="navbar-brand" href="#">Aeroora</a>
<ul class="navbar-nav ms-auto text-center small">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#"><span class="d-block fs-5"><i class="bi bi-house-door-fill" aria-hidden="true"></i></span>Home</a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="d-block fs-5"><i class="bi bi-heart-fill" aria-hidden="true"></i></span>Saved</a></li>
<li class="nav-item"><a class="nav-link position-relative" href="#"><span class="d-block fs-5"><i class="bi bi-bag-fill" aria-hidden="true"></i></span>Cart<span class="position-absolute top-0 end-0 badge rounded-pill text-bg-danger">5</span></a></li>
</ul>
</div>
</nav>16User avatar dropdown
An avatar on the right opens an account dropdown aligned to the end.
<nav class="navbar navbar-expand-lg bg-body border rounded">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="../assets/img/logo-3.svg" alt="Aeroora" height="28" style="width:auto"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-1045" aria-controls="nav-1045" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="nav-1045">
<ul class="navbar-nav me-auto">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Overview</a></li>
<li class="nav-item"><a class="nav-link" href="#">Inbox</a></li>
<li class="nav-item"><a class="nav-link" href="#">Calendar</a></li>
</ul>
<div class="dropdown">
<a href="#" class="d-flex align-items-center gap-2 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"><img src="../assets/img/avatar-2.svg" class="rounded-circle" width="32" height="32" alt="Ava Rossi"><span class="small">Ava</span></a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Profile</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
</div>
</div>
</nav>17Two-row header
A slim utility bar with contact details above the main navbar.
+1 (555) 530-7635 Barcelona
<div class="border rounded overflow-hidden">
<div class="bg-dark text-white small py-1 px-3 d-flex flex-wrap justify-content-between gap-2">
<span><i class="bi bi-telephone-fill" aria-hidden="true"></i> +1 (555) 530-7635</span><span><i class="bi bi-geo-alt-fill" aria-hidden="true"></i> Barcelona</span>
</div>
<nav class="navbar navbar-expand-lg bg-body">
<div class="container-fluid">
<a class="navbar-brand" href="#">Aeroora</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-1046" aria-controls="nav-1046" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="nav-1046">
<ul class="navbar-nav ms-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="#">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#">Team</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
</div>18Scrolling menu
<code>.navbar-nav-scroll</code> limits the height of a long collapsed menu and lets it scroll.
<nav class="navbar navbar-expand-lg bg-body-tertiary rounded">
<div class="container-fluid">
<a class="navbar-brand" href="#">Aeroora</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-1047" aria-controls="nav-1047" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="nav-1047">
<ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 120px;">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">API integrations</a></li>
<li class="nav-item"><a class="nav-link" href="#">Team analytics</a></li>
<li class="nav-item"><a class="nav-link" href="#">Smart reporting</a></li>
<li class="nav-item"><a class="nav-link" href="#">Secure file sharing</a></li>
<li class="nav-item"><a class="nav-link" href="#">Single sign-on</a></li>
<li class="nav-item"><a class="nav-link" href="#">Workflow automation</a></li>
</ul>
</div>
</div>
</nav>19Floating pill navbar
A rounded, shadowed bar inside a padded container - a modern landing page look.
<div class="p-3 bg-body-tertiary rounded">
<nav class="navbar navbar-expand-lg bg-body rounded-pill shadow-sm px-3">
<div class="container-fluid">
<a class="navbar-brand fw-bold text-primary" href="#">Aeroora</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-1048" aria-controls="nav-1048" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="nav-1048">
<ul class="navbar-nav mx-auto">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Features</a></li>
<li class="nav-item"><a class="nav-link" href="#">Reviews</a></li>
<li class="nav-item"><a class="nav-link" href="#">FAQ</a></li>
</ul>
<a href="#" class="btn btn-primary rounded-pill btn-sm px-3">Try free</a>
</div>
</div>
</nav>
</div>20Expandable search row
A search icon toggles a second collapse row under the bar with a full width search field.
<nav class="navbar navbar-expand-md bg-primary-subtle rounded flex-wrap">
<div class="container-fluid">
<a class="navbar-brand" href="#">Aeroora</a>
<div class="d-flex align-items-center order-md-last">
<button class="btn btn-link link-body-emphasis" type="button" data-bs-toggle="collapse" data-bs-target="#nav-sbox-1050" aria-expanded="false" aria-controls="nav-sbox-1050" aria-label="Toggle search"><i class="bi bi-search" aria-hidden="true"></i></button>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-1049" aria-controls="nav-1049" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
</div>
<div class="collapse navbar-collapse" id="nav-1049">
<ul class="navbar-nav ms-md-auto me-md-2">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Latest</a></li>
<li class="nav-item"><a class="nav-link" href="#">Popular</a></li>
<li class="nav-item"><a class="nav-link" href="#">Topics</a></li>
</ul>
</div>
<div class="collapse w-100" id="nav-sbox-1050">
<form class="py-2" role="search">
<label for="nav-sq-1051" class="visually-hidden">Search</label>
<input class="form-control" type="search" id="nav-sq-1051" placeholder="What are you looking for?">
</form>
</div>
</div>
</nav>