Skip to main content

Navbar

Create a responsive navigation bar.

<nav class="navbar navbar-dark navbar-expand-lg" aria-label="Main">
<div class="container">
<a href="index.html" class="navbar-brand d-inline-flex text-uppercase">Logo</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbar"
aria-controls="navbar"
aria-expanded="false"
aria-label="Toggle navigation">

<i class="material-icons icon-2x" aria-hidden="true">menu</i>
</button>
<div class="collapse navbar-collapse text-uppercase" id="navbar">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
<li class="nav-item dropdown">
<a href="#"
class="nav-link dropdown-toggle"
id="navbarDropdown"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false">
Dropdown
<i class="material-icons align-middle ms-1" aria-hidden="true">expand_more</i>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Item 1</a></li>
<li><a class="dropdown-item" href="#">Item 2</a></li>
<li><a class="dropdown-item" href="#">Item 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

Bootstrap Documentation