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