BS5 Navbar
Bootstrap 5 Navbars
A navigation header that appears at the top of the page is called a navigation bar:
==== Navigation Bars MUKAVU ====
Basic Navbar
A navigation bar made with Bootstrap can expand or contract based on the size of the screen.
The .navbar class creates a conventional navigation bar, while the .navbar-expand-xl|lg|md|sm responsive collapsing class stacks the navbar vertically on extremely large, large, medium, and small displays.
Use a <ul> element with class=”navbar-nav” to put links within the navbar. Next, include <a> elements with a .nav-link class after <li> elements with a.nav-item class:
Link 1Â Â Link 2Â Â Link 3
Example
<!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-light">
<!-- Links -->
<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>
Vertical Navbar
In order to make a navigation bar that is always vertical, remove the .navbar-expand-* class:
Link 1Â Â
Link 2Â Â
Link 3
Example
<!-- A grey vertical navbar -->
<nav class="navbar bg-light">
...
</nav>
Centered Navbar
To make the navigation bar center, add the .justify-content-center class:
Link 1Â Â Link 2Â Â Link 3
Example
<nav class="navbar navbar-expand-sm bg-light justify-content-center">
...
</nav>
Colored Navbar
To alter the navbar’s background color, use any of the .bg-color classes (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light).
Tip: Use the .navbar-dark class to add a white text color to all of the links in the navbar, or the .navbar-light class to add a black text color.
Example
<!-- Grey with black text -->
<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>
<!-- Black with white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Blue with white text -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>
Active/disabled states: To make a link stand out, add the .active class to a <a> element. To make a link inactive, use the .disabled class.
Brand / Logo
To draw attention to the brand, logo, or project name on your website, use the .navbar-brand class:
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Logo</a>
...
</nav>
Bootstrap 5 will automatically style pictures with the .navbar-brand class to fit the navbar vertically.
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Avatar Logo" style="width:40px;" class="rounded-pill" title="BS5 Navbar 4" data-lazy-src="logo.png"><noscript><img decoding="async" src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill" title="BS5 Navbar 4"></noscript>
</a>
</div>
</nav>
Navbar Text
To maintain proper padding and text color, vertically align any non-linking components inside the navbar by using the .navbar-text class.
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<span class="navbar-text">Navbar text</span>
</div>
</nav>
Tip: To always show the toggler button and conceal navbar links, you can also remove the .navbar-expand-md class.
==== Navigation Bar MUKAVU ====
You typically wish to hide the navigation links and replace them with a button that, when pressed, should display them, especially on small screens.
Use a button with the properties class=”navbar-toggler”, data-bs-toggle=”collapse”, and data-bs-target=”#thetarget” to create a collapsible navigation bar. After that, enclose the navbar’s content (links, etc.) in a <div> element with class=”collapse navbar-collapse” and an id that corresponds to the button’s data-bs-target (“thetarget”).
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</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>
</div>
</nav>
Tip: To always show the toggler button and conceal navbar links, you can also remove the .navbar-expand-md class.
Navbar With Dropdown
==== Navigation Bar MUKAVU ====
Dropdown menus can also be held in navbars:
Example
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Dropdown</a>
<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>
Navbar Forms and Buttons
==== Navigation Bar MUKAVU ====
Additionally, forms can be incorporated into 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</a>
<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>
Fixed Navigation Bar
==== Navigation Bar MUKAVU ====
Additionally, the navigation bar can be fixed to the top or bottom of the page.
Regardless matter how far the page scrolls, a fixed navigation bar remains visible at either the top or bottom.
The navigation bar is fixed at the top thanks to the .fixed-top class:
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav>
To keep the navbar at the bottom of the page, use the .fixed-bottom class:
==== Navigation Bar MUKAVU ====
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
...
</nav>
If you want the navbar to remain at the top of the page even after you scroll past it, use the .sticky-top class.
Note: IE11 and older versions of this class will treat it as position:relative and will not function.
==== Navigation Bar MUKAVU ====
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
...
</nav>
