Loading...
Utilizor Digital Network Hub
Productivity Engines
Development Global Reach
Local Ranking Ecosystems
Utilizor Programmatic SEO Network © 2026 | All Rights Reserved | Precision Engineering
Loading...
Utilizor Programmatic SEO Network © 2026 | All Rights Reserved | Precision Engineering
Learn how to create a navigation bar.
A navbar is a navigation header that is placed at the top of the page.
A standard navbar is created with .navbar, .navbar-expand-sm|md|lg|xl|xxl (for responsive collapsing), and a color scheme class.
The .navbar-brand class is used for your company, product, or project name.
To create a collapsible navbar, use a button with class="navbar-toggler", data-bs-toggle="collapse" and data-bs-target="#the-target". Then wrap the navbar content (links, etc) in a div with class .collapse navbar-collapse and the matching ID.
Use .navbar-dark bg-dark for a dark navbar or .navbar-light bg-light for a light navbar.
html/cssA simple horizontal navbar.
<nav class="navbar navbar-expand-sm bg-light">
<div class="container-fluid">
<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>
</div>
</nav>html/csshtml/cssResponsive navbar that collapses on smaller screens.
<nav class="navbar navbar-expand-lg navbar-light bg-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="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
</ul>
</div>
</div>
</nav>