Bootstrap5 Navbar
The navbar is usually placed at the top of the page.
We can use.navbarclass to create a standard navbar, followed by:.navbar-expand-xxl|xl|lg|md|smclass to create a responsive navbar (horizontal on large screens, stacked vertically on small screens).
Options on the navbar can use<ul>element and addclass="navbar-nav"class.<li>Then.nav-itemadd on the element<a>use on the element.nav-linkclass:
Example
<nav class="navbar navbar-expand-sm bg-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
Try it yourself »
Vertical Navbar
By removing.navbar-expand-xxl|xl|lg|md|smclass, you can create a vertical navbar:
Example
<nav class="navbar bg-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
Try it yourself »
Centered Navbar
By adding.justify-content-centerclass, you can create a centered navbar:
Example
<nav class="navbar navbar-expand-sm bg-light justify-content-center">
...
</nav>
Try it yourself »
Navbar with Different Colors
You can use the following classes to create navbars with different colors:.bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darkand.bg-light)。
Tip:For dark backgrounds.navbar-darkyou need to set the text color to light; for light backgrounds.navbar-lightyou need to set the text color to dark.
Example
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</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>
</nav>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>
Try it yourself »
Active and Disabled States: You can<a>add on the element.activeclass to highlight the selected option..disabledclass is used to make the link unclickable.
Brand/Logo
.navbar-brandclass is used to highlight the brand/logo:
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Logo</a>
...
</nav>
Try it yourself »
You can use.navbar-brandclass to make the image responsive in the navbar.
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">
<img src="bird.jpg" alt="Logo" style="width:40px;">
</a>
...
</nav>
Try it yourself »
Collapsible Navbar
Usually, on small screens we collapse the navbar and display navigation options by clicking.
To create a collapsible navbar, you can add on the buttonclass="navbar-toggler", data-bs-toggle="collapse" and data-target="#thetarget"class. Then, on theclass="collapse navbar-collapse"div with the class, wrap the navigation content (links). The id on the div element matches thedata-targetid specified on the button:
Example
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
Try it yourself »
Navbar with Dropdown Menu
You can set a dropdown menu on the navbar:
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Logo</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-bs-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
Try it yourself »
Forms and Buttons in Navbar
Navbar forms<form>element usesclass="form-inline"class to arrange input fields and buttons:
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
Try it yourself »
You can also use other input classes, such as.input-group-addonclass is used to add a small label before the input field.
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" placeholder="Username">
</div>
</form>
</nav>
Try it yourself »
Navbar Text
Use.navbar-textThe class for setting non-link text on the navbar ensures horizontal alignment, with the same color and padding.
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
<span class="navbar-text">
Navbar text
</span>
</nav>
Try it Yourself »
Fixed Navbar
The navbar can be fixed to the top or the bottom.
We use.fixed-topclass to fix the navbar:
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav>
Try it Yourself »
.fixed-bottomThe class is used to set the navbar fixed at the bottom:
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
...
</nav>
Try it Yourself »
Navbar Example
Other extensions
