Navbar
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.
How it works
Here’s what you need to know before getting started with the navbar:
-
Navbars require a wrapping
.navbarwith.navbar-expand{-sm|-md|-lg|-xl}for responsive collapsing and color scheme classes. - Navbars and their contents are fluid by default. Use optional containers to limit their horizontal width.
- Use our spacing and flex utility classes for controlling spacing and alignment within navbars.
- Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
-
Navbars are hidden by default when printing. Force them to be printed by
adding
.d-printto the.navbar. See the display utility class. -
Ensure accessibility by using a
<nav>element or, if using a more generic element such as a<div>, add arole="navigation"to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
Read on for an example and list of supported sub-components.
Nav
Navbar navigation links build on our
.nav options with their own modifier
class and require the use of toggler classes for proper
responsive styling.
Navigation in navbars will also grow to occupy as much horizontal space as
possible
to keep your navbar contents securely aligned.
Active states—with .active—to indicate
the current page can be applied directly to
.nav-links or their immediate parent
.nav-items.
<nav class="navbar navbar-expand-lg bg-secondary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler"
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>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#"
>Home <span class="sr-only">(current)</span></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" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
You may also utilize dropdowns in your navbar nav. Dropdown menus require a
wrapping element for positioning, so be sure to use separate and nested elements
for .nav-item and
.nav-link as shown below.
<nav class="navbar navbar-expand-lg bg-success">
<div class="container">
<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">
<li class="nav-item active">
<a class="nav-link" href="#"
>Home <span class="sr-only">(current)</span></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 dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdownMenuLink"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
Forms
You can add search form to Navbar:
<nav class="navbar navbar-light bg-primary justify-content-between">
<div class="container-fluid">
<a class="navbar-brand">Navbar</a>
<form class="navbar-left navbar-form nav-search" action="">
<div class="input-group">
<input type="text" placeholder="Search ..." class="form-control" />
<div class="input-group-append">
<button type="submit" class="btn btn-search">
<i class="fa fa-search search-icon"></i>
</button>
</div>
</div>
</form>
</div>
</nav>
Text
Navbars may contain bits of text with the help of
.navbar-text. This class adjusts vertical
alignment and horizontal spacing for strings of text.
<nav class="navbar navbar-dark bg-primary">
<div class="container">
<span class="navbar-text"> Navbar text with an inline element </span>
</div>
</nav>
Mix and match with other components and utilities as needed.
<nav class="navbar navbar-expand-lg navbar-dark bg-warning">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarText"
aria-controls="navbarText"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto">
<li class="nav-item active">
<a class="nav-link" href="#"
>Home <span class="sr-only">(current)</span></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>
</ul>
<span class="navbar-text"> Navbar text with an inline element </span>
</div>
</div>
</nav>
Color schemes
Theming the navbar has never been easier thanks to the combination of theming
classes and background-color utilities.
Choose from .navbar-light for use with
light background colors, or
.navbar-dark for dark background colors.
Then, customize with .bg-* utilities.
<nav class="navbar navbar-expand-lg navbar-dark bg-black">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-black">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-secondary">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-info">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-success">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-danger">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-warning">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-expand-lg navbar-light">
<!-- Navbar content -->
</nav>
Containers
When the container is within your navbar, its horizontal padding is removed at
breakpoints lower than your specified
.navbar-expand{-sm|-md|-lg|-xl} class.
This ensures we’re not doubling up on padding unnecessarily on lower viewports
when your navbar is collapsed.
<nav class="navbar navbar-expand-lg navbar-dark bg-danger">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
Placement
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 navbar-dark bg-info">
<a class="navbar-brand" href="#">Default</a>
</nav>
<nav class="navbar fixed-top navbar-dark bg-warning">
<a class="navbar-brand" href="#">Fixed top</a>
</nav>
<nav class="navbar fixed-bottom navbar-dark bg-primary">
<a class="navbar-brand" href="#">Fixed bottom</a>
</nav>
<nav class="navbar sticky-top navbar-dark bg-black">
<a class="navbar-brand" href="#">Sticky top</a>
</nav>
Responsive behaviors
Navbars can utilize .navbar-toggler,
.navbar-collapse, and
.navbar-expand{-sm|-md|-lg|-xl} 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.
Toggler
Navbar togglers are left-aligned by default, but should they follow a sibling
element like a .navbar-brand, they’ll
automatically be aligned to the far right. Reversing your markup will reverse
the placement of the toggler. Below are examples of different toggle styles.
With no .navbar-brand shown in lowest
breakpoint:
<nav class="navbar navbar-expand-lg navbar-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="#">Hidden brand</a>
<ul class="navbar-nav me-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input
class="form-control me-sm-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">
Search
</button>
</form>
</div>
</div>
</nav>
With a brand name shown on the left and toggler on the right:
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarTogglerDemo02"
aria-controls="navbarTogglerDemo02"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav me-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input
class="form-control me-sm-2"
type="search"
placeholder="Search"
/>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">
Search
</button>
</form>
</div>
</div>
</nav>
With a toggler on the left and brand name on the right:
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarTogglerDemo03"
aria-controls="navbarTogglerDemo03"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav me-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input
class="form-control me-sm-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">
Search
</button>
</form>
</div>
</div>
</nav>