Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
Bootstrap Navbar documentationNavbars come with built-in support for a handful of sub-components. Choose from the following as needed:
.navbar-brand for your company, product, or project name..navbar-nav for a full-height and lightweight navigation (including support for dropdowns)..navbar-toggler for use with our collapse plugin and other navigation toggling behaviors..navbar-text for adding vertically centered strings of text..collapse.navbar-collapse for grouping and hiding navbar contents by a parent breakpoint.Here’s an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the lg (large) breakpoint.
<nav class="navbar navbar-expand-lg navbar-light bg-gray-100">
<div class="container-fluid">
<a class="navbar-brand" href="#0">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#0">Link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#0">Link2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#0">Link3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#0">Link4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#0">Link5</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#0">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#0">Link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#0">Link2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#0">Link3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#0">Link4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#0">Link5</a>
</li>
</ul>
</div>
</div>
</nav>
Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the <body>) to prevent overlap with other elements.
Also note that .sticky-top uses position: sticky, which isn’t fully supported in every browser.
<nav class="navbar fixed-top navbar-light bg-gray-100">
<div class="container-fluid">
<a class="navbar-brand" href="#0">Fixed top</a>
</div>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-gray-100">
<div class="container-fluid">
<a class="navbar-brand" href="#0">Fixed bottom</a>
</div>
</nav>
<nav class="navbar sticky-top navbar-light bg-gray-100">
<div class="container-fluid">
<a class="navbar-brand" href="#0">Sticky top</a>
</div>
</nav>
Navbars can utilize .navbar-toggler, .navbar-collapse, and .navbar-expand{-sm|-md|-lg|-xl|-xxl} classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don’t add any .navbar-expand class.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#0">Hidden brand</a>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#0">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#0">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#0" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Sometimes you want to use the collapse plugin to trigger hidden content elsewhere on the page. Because our plugin works on the id and data-target matching, that’s easily done!
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#0">Hidden brand</a>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#0">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#0">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#0" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>