The Bootstrap Navbar is a responsive navigation component used to create website menus. It can contain a brand or logo, navigation links, dropdown menus, buttons, search forms, and other navigation elements.
.navbar,
.navbar-brand, .navbar-nav,
.nav-item, and .nav-link.
A Navbar is a navigation section placed commonly at the top of a website. It helps users move between different pages.
A typical Navbar may contain:
<nav class="navbar">
...
</nav>
The .navbar class creates the basic Bootstrap Navbar.
<nav class="navbar">
<a class="navbar-brand" href="#">
My Website
</a>
</nav>
The .navbar-brand class is used for the website name,
logo, or main brand.
<a class="navbar-brand" href="#">
Soopro Pathshala
</a>The brand usually links to the website homepage.
Background utility classes can be combined with the Navbar.
<nav class="navbar bg-dark">
<a class="navbar-brand text-white"
href="#">
My Website
</a>
</nav>
Navbar links are commonly created using
.navbar-nav, .nav-item, and
.nav-link.
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link"
href="#">
Home
</a>
</li>
</ul>
The .active class can indicate the current navigation
item.
<a class="nav-link active"
aria-current="page"
href="#">
Home
</a>
The .disabled class can visually indicate that a
navigation link is unavailable.
<a class="nav-link disabled"
aria-disabled="true"
href="#">
Coming Soon
</a>A Bootstrap container can be placed inside a Navbar to control its content width and alignment.
<nav class="navbar bg-light">
<div class="container">
<a class="navbar-brand"
href="#">
My Website
</a>
</div>
</nav>
Use .container-fluid when the Navbar content should use
the available width.
<nav class="navbar bg-dark">
<div class="container-fluid">
<a class="navbar-brand text-white"
href="#">
My Website
</a>
</div>
</nav>Bootstrap Navbar can collapse navigation links on smaller screens.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand"
href="#">
Website
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarMenu">
<span class="navbar-toggler-icon">
</span>
</button>
<div
class="collapse navbar-collapse"
id="navbarMenu">
...
</div>
</div>
</nav>
The .navbar-expand-* classes control when the Navbar
expands from its collapsed mobile layout.
.navbar-expand-sm.navbar-expand-md.navbar-expand-lg.navbar-expand-xl.navbar-expand-xxl<nav class="navbar navbar-expand-lg">
...
</nav>
For example, .navbar-expand-lg means the Navbar expands
at the large breakpoint and above.
The .navbar-toggler class styles the button used to open
the collapsed navigation menu.
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#mainMenu"
aria-controls="mainMenu"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
</span>
</button>The button works together with the collapsible Navbar content.
The .collapse and .navbar-collapse classes
are used for the responsive navigation section.
<div
class="collapse navbar-collapse"
id="mainMenu">
<ul class="navbar-nav">
...
</ul>
</div>
The id of the collapsible section should match the
button's data-bs-target.
The .navbar-toggler-icon class provides the standard
Navbar toggle icon when the appropriate Bootstrap Navbar styles are
loaded.
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#menu">
<span
class="navbar-toggler-icon">
</span>
</button>The toggler icon is commonly used with responsive collapsed navigation.
A typical website Navbar contains several navigation links.
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link"
href="#">
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">
About
</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">
Services
</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">
Contact
</a>
</li>
</ul>A dropdown can be added to a Navbar to organize related links.
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
role="button"
data-bs-toggle="dropdown">
Tutorials
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item"
href="#">
HTML
</a>
</li>
<li>
<a class="dropdown-item"
href="#">
CSS
</a>
</li>
</ul>
</li>A search form can be placed inside a Navbar.
<form class="d-flex">
<input
class="form-control me-2"
type="search"
placeholder="Search">
<button
class="btn btn-outline-success"
type="submit">
Search
</button>
</form>Buttons can be placed inside the Navbar for actions such as Login, Register, or Contact.
<a
href="#"
class="btn btn-primary">
Login
</a>
An image can be placed inside .navbar-brand to create a
logo.
<a class="navbar-brand"
href="#">
<img
src="logo.png"
alt="Website Logo"
width="40"
height="40">
My Website
</a>Navbar background and text colors can be customized using Bootstrap utility classes and Navbar color modes.
<nav class="navbar bg-dark">
...
</nav>
<nav class="navbar bg-primary">
...
</nav>For a dark background, make sure the text and interactive elements have sufficient contrast.
Bootstrap flex utilities can be used to control the alignment of Navbar content.
<div
class="d-flex justify-content-end">
<ul class="navbar-nav">
...
</ul>
</div>Useful flex utilities include:
justify-content-startjustify-content-centerjustify-content-endms-autome-auto
The ms-auto utility can push Navbar content toward the
end of a flex container.
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link"
href="#">
Login
</a>
</li>
</ul>This is useful for placing items such as Login, Register, or Profile toward the right side of the Navbar.
A professional Navbar can combine normal links and dropdown menus.
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link"
href="#">
Home
</a>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown">
Tutorials
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item"
href="#">
HTML
</a>
</li>
<li>
<a class="dropdown-item"
href="#">
Bootstrap
</a>
</li>
</ul>
</li>
</ul>
Bootstrap's sticky-top utility can make a Navbar remain
visible near the top of the page while scrolling.
<nav
class="navbar sticky-top bg-dark">
...
</nav>sticky-top to a Navbar when you want it to remain
visible as the user scrolls past it.
Sticky positioning depends on the surrounding page layout and browser behavior.
Here is a practical responsive Navbar with a brand, navigation links, dropdown, and responsive toggle.
<nav class="navbar navbar-expand-lg bg-dark"
data-bs-theme="dark">
<div class="container">
<a class="navbar-brand"
href="#">
My Website
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#mainNavbar"
aria-controls="mainNavbar"
aria-expanded="false"
aria-label="Toggle navigation">
<span
class="navbar-toggler-icon">
</span>
</button>
<div
class="collapse navbar-collapse"
id="mainNavbar">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<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="#">
About
</a>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
role="button"
data-bs-toggle="dropdown">
Tutorials
</a>
<ul class="dropdown-menu">
<li>
<a
class="dropdown-item"
href="#">
HTML
</a>
</li>
<li>
<a
class="dropdown-item"
href="#">
Bootstrap
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#">
Contact
</a>
</li>
</ul>
<a
href="#"
class="btn btn-primary">
Login
</a>
</div>
</div>
</nav>A good Navbar should be accessible to keyboard users and users of assistive technologies.
<nav> element.aria-label when additional navigation context is needed.aria-current="page" for the current page link.<nav
aria-label="Main navigation">
...
</nav>Common Navbar mistakes include:
data-bs-target.A tutorial website can use a Navbar with Tutorials, Exercises, MCQ, Interview Questions, Payment, and Admission links.
<nav class="navbar navbar-expand-lg bg-dark"
data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand"
href="#">
My Tutorials
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#tutorialMenu">
<span
class="navbar-toggler-icon">
</span>
</button>
<div
class="collapse navbar-collapse"
id="tutorialMenu">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a
class="nav-link"
href="#">
Tutorials
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#">
Exercises
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#">
MCQ
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#">
Interview Q&A
</a>
</li>
</ul>
</div>
</div>
</nav>The following example combines a brand, responsive toggle, navigation links, dropdown menu, search form, and login button.
<nav
class="navbar navbar-expand-lg bg-dark"
data-bs-theme="dark">
<div class="container-fluid">
<a
class="navbar-brand"
href="#">
Soopro Pathshala
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#mainMenu"
aria-controls="mainMenu"
aria-expanded="false"
aria-label="Toggle navigation">
<span
class="navbar-toggler-icon">
</span>
</button>
<div
class="collapse navbar-collapse"
id="mainMenu">
<ul
class="navbar-nav me-auto mb-2 mb-lg-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 dropdown-toggle"
href="#"
role="button"
data-bs-toggle="dropdown">
Tutorials
</a>
<ul class="dropdown-menu">
<li>
<a
class="dropdown-item"
href="#">
HTML
</a>
</li>
<li>
<a
class="dropdown-item"
href="#">
CSS
</a>
</li>
<li>
<a
class="dropdown-item"
href="#">
Bootstrap
</a>
</li>
<li>
<a
class="dropdown-item"
href="#">
Python
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#">
Exercises
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#">
MCQ
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#">
Contact
</a>
</li>
</ul>
<form class="d-flex me-3">
<input
class="form-control me-2"
type="search"
placeholder="Search">
<button
class="btn btn-outline-light"
type="submit">
Search
</button>
</form>
<a
href="#"
class="btn btn-primary">
Login
</a>
</div>
</div>
</nav>.navbar to create a Bootstrap Navbar..navbar-brand for the website name or logo..navbar-nav for the navigation list..nav-item for individual navigation items..nav-link for navigation links..navbar-expand-lg or another breakpoint class for responsive behavior..navbar-toggler for the mobile navigation toggle button..navbar-collapse and .collapse for collapsible navigation..dropdown and .dropdown-menu for dropdown navigation..navbar-brand with an image for a logo.ms-auto and other flex utilities for alignment.sticky-top when a Navbar should remain visible while scrolling.Question: Which Bootstrap class is used to create the main Navbar component?