The navbar provides a responsive header for navigation, branding, forms, and other interactive elements.
| Class Name | Type | Description |
|---|---|---|
| navbar | Component | Navbar component |
| navbar-brand | Inner | Branding section |
| navbar-toggler | Inner | Toggler button for mobile view |
| navbar-collapse | Inner | Collapsible content container |
| navbar-nav | Inner | Navigation links container |
| nav-item | Inner | Navigation item |
| nav-link | Inner | Navigation link |
| navbar-text | Inner | Text content |
| navbar-nav-scroll | Inner | Scrollable navigation links container |
| navbar-expand | Modifier | Always expanded |
| navbar-expand-sm | Modifier | Expand at small breakpoint |
| navbar-expand-md | Modifier | Expand at medium breakpoint |
| navbar-expand-lg | Modifier | Expand at large breakpoint |
| navbar-expand-xl | Modifier | Expand at extra large breakpoint |
| navbar-expand-xxl | Modifier | Expand at double extra large breakpoint |
A basic navbar includes branding, navigation links, dropdowns, and a search form within a responsive container.
HTML
<nav class="navbar navbar-expand-lg bg-subtle">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h16q.425 0 .713.288T21 17t-.288.713T20 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z" stroke-width="0.5" stroke="currentColor"/></svg>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 lg:mb-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="flex" role="search">
<input class="form-control-fill me-2" type="search" placeholder="Search" aria-label="Search"/>
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>The nav component structures navigation links within a navbar. It supports active and disabled states. Add the .active class on .nav-link to indicate the current page.
Note that the aria-current attribute should also be added to the active .nav-link.
HTML
<nav class="navbar navbar-expand-lg bg-subtle">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h16q.425 0 .713.288T21 17t-.288.713T20 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z" stroke-width="0.5" stroke="currentColor"/></svg>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<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">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>List-based approaches can be entirely avoided if preferred.
HTML
<nav class="navbar navbar-expand-lg bg-subtle">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h16q.425 0 .713.288T21 17t-.288.713T20 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z" stroke-width="0.5" stroke="currentColor"/></svg>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>Forms can be placed inside a navbar to include inputs, buttons, or other interactive elements.
HTML
<nav class="navbar bg-subtle">
<div class="container">
<form class="flex" role="search">
<input class="form-control-fill me-2" type="search" placeholder="Search" aria-label="Search"/>
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>Immediate .navbar children use flex with .justify-between by default. Adjust alignment with flex utilities.
HTML
<nav class="navbar bg-subtle">
<div class="container">
<a class="navbar-brand">Navbar</a>
<form class="flex" role="search">
<input class="form-control-fill me-2" type="search" placeholder="Search" aria-label="Search"/>
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>To use text within a navbar, use the .navbar-text class.
HTML
<nav class="navbar bg-subtle">
<div class="container">
<span class="navbar-text">Navbar text with an inline element</span>
</div>
</nav>Navbars are flexible, supporting various background and color schemes to match design requirements.
<nav class="navbar navbar-expand-lg bg-subtle dark">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-expand-lg bg-primary-light dark">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-expand-lg bg-primary-lighter">
<!-- Navbar content -->
</nav>Any of the responsive containers like .sm:container, .md:container, .lg:container, .xl:container, .2xl:container can be used to adjust the width at which navbar content is presented.
HTML
<nav class="navbar navbar-expand-lg bg-subtle">
<div class="md:container">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>The .navbar-nav-scroll class enables vertical scrolling for .navbar-nav or other sub-components within a collapsed navbar. This is particularly useful for extensive navigation menus on smaller screens. By default, the scrollable area has a maximum height of 75vh. This can be adjusted using utility classes (e.g., max-h-[value]) or by overriding the --scroll-height CSS variable for more precise control.
HTML
<nav class="navbar navbar-expand-lg bg-subtle">
<div class="container">
<a class="navbar-brand" href="#">Navbar scroll</a>
<button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h16q.425 0 .713.288T21 17t-.288.713T20 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z" stroke-width="0.5" stroke="currentColor"/></svg>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav navbar-nav-scroll me-auto my-2 lg:my-0" style="--scroll-height: 100px;">
<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="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Link</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"/></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Link</a>
</li>
</ul>
<form class="flex" role="search">
<input class="form-control-fill me-2" type="search" placeholder="Search" aria-label="Search"/>
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>Navbars utilize .navbar-toggler, .navbar-collapse, and .navbar-expand{-sm|-md|-lg|-xl|-xxl} classes to manage when content collapses into a toggleable menu. Specific elements can also be shown or hidden using utility classes.
For navbars that never collapse, add the .navbar-expand class. For navbars that always collapse, omit the .navbar-expand class.
The collapse plugin can toggle content outside the .navbar by matching id with data-bs-target.
HTML
<div class="collapse" id="navbarToggleExternalContent"x>
<div class="bg-subtle p-4">
<h6 class="font-semibold mb-0">Collapsed content</h6>
<span>Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar bg-subtle">
<div class="container">
<button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h16q.425 0 .713.288T21 17t-.288.713T20 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z" stroke-width="0.5" stroke="currentColor"/></svg>
</button>
</div>
</nav>Expanding and collapsing navbars can be transformed into an offcanvas drawer with the offcanvas component. Both the default offcanvas styles and .navbar-expand-* classes are extended to create a dynamic and flexible navigation sidebar.
In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the .navbar-expand-* class entirely.
HTML
<nav class="navbar bg-subtle">
<div class="container">
<a class="navbar-brand" href="#">Offcanvas</a>
<button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h16q.425 0 .713.288T21 17t-.288.713T20 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z" stroke-width="0.5" stroke="currentColor"/></svg>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title font-semibold" id="offcanvasNavbarLabel">Offcanvas</h5>
<button type="button" class="btn btn-icon ms-auto" data-bs-dismiss="offcanvas" aria-label="Close">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275t.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275z" stroke-width="0.5" stroke="currentColor"/></svg>
</button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider"/>
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form class="flex mt-3"role="search">
<input class="form-control-fill me-2" type="search" placeholder="Search" aria-label="Search"/>
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</div>
</nav>The Navbar component is built using a set of CSS variables. These variables provide flexibility for customizing styles.
.navbar {
--navbar-padding-x: --spacing(3);
--navbar-padding-y: --spacing(2);
--navbar-color: var(--text-color-muted);
--navbar-hover-color: var(--text-color-default);
--navbar-disabled-color: var(--color-disabled-color);
--navbar-active-color: var(--text-color-default);
--navbar-brand-padding-y: --spacing(1.25);
--navbar-brand-margin-end: --spacing(4);
--navbar-brand-font-size: var(--text-lg);
--navbar-brand-color: var(--text-color-default);
--navbar-brand-hover-color: var(--text-color-default);
--navbar-nav-link-padding-x: --spacing(2);
}.navbar-nav {
--nav-link-padding-x: 0;
--nav-link-padding-y: --spacing(2);
--nav-link-font-weight: var(--font-weight-medium);
--nav-link-color: var(--text-color-muted);
--nav-link-font-size: var(--text-base);
--nav-link-line-height: 1.5;
--nav-link-disabled-color: var(--color-disabled-color);
--nav-link-active-color: unset;
}