How it works
- With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.
- Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl|-xxl} for responsive collapsing and color scheme classes.
- Navbars and their contents are fluid by default. Change the container to limit their horizontal width in different ways.
- 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.
- Ensure accessibility by using a <nav> element or, if using a more generic element such as a <div>, add a role="navigation" to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
- Indicate the current item by using aria-current="page" for the current page or aria-current="true" for the current item in a set.
Example
<li>nav class="navbar navbar-expand-sm bg-light">
<li>div class="container-fluid">
<li>ul class="navbar-nav">
<li>li class="nav-item">
<li>a class="nav-link" href="#">Link 1
<li>/li>
<li>li class="nav-item">
<li>a class="nav-link" href="#">Link 2
<li>/li>
<li>li class="nav-item">
<li>a class="nav-link" href="#">Link 3
<li>/li>
<li>/ul>
<li>/div>
<li></nav>
You can click on above box to edit the code and run again.Centered Navbar
Add the .justify-content-center class to center the navigation bar:
Example
<nav class="navbar navbar-expand-sm bg-light justify-content-center">
...
</nav>
You can click on above box to edit the code and run again.Colored Navbar
Use any of the .bg-color classes to change the background color of the navbar (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light)
Example
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Activev/a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Linkv/a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Linkv/a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabledv/a>
v/li>
v/ul>
</div>
</nav>
You can click on above box to edit the code and run again.Brand / Logo
The .navbar-brand class is used to highlight the brand/logo/project name of your page:
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
</div>
</nav>
You can click on above box to edit the code and run again.Navbar Text
Use the .navbar-text class to vertical align any elements inside the navbar that are not links (ensures proper padding and text color).
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<span class="navbar-text">Navbar text</span>
</div>
</nav>
You can click on above box to edit the code and run again.Navbar With Dropdown
Navbars can also hold dropdown menus:
Example
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Dropdown
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
<li><a class="dropdown-item" href="#">A third link</a></li>
</ul>
</li>
You can click on above box to edit the code and run again.Navbar Forms and Buttons
You can also include forms inside the navigation bar:
Example
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Logo
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="text" placeholder="Search">
<button class="btn btn-primary" type="button">Search</button>
</form>
</div>
</div>
</nav>
You can click on above box to edit the code and run again.Fixed Navigation BarVertical Navbar
A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.
The .fixed-top class makes the navigation bar fixed at the top:
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> ... </nav>You can click on above box to edit the code and run again.
Sticky Navbar
A sticky navigation bar stays fixed at the top of the page when you scroll past it.
Some example text. Some example text. Some example text. Some example text. Some example text.
Some example text. Some example text. Some example text. Some example text. Some example text.
Some example text. Some example text. Some example text. Some example text. Some example text.
Some example text. Some example text. Some example text. Some example text. Some example text.