Skip to main content

Navbar

Create a responsive navigation bar.

<nav class="navbar navbar-expand-lg py-3" aria-label="Demo 1">
  <div class="container">
    <a href="#" class="navbar-brand link-body-emphasis text-uppercase">Logo</a>
    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbar-1"
      aria-controls="navbar-1"
      aria-expanded="false"
      aria-label="Toggle navigation">
      <i class="fas fa-bars fa-lg"></i>
    </button>
    <div class="collapse navbar-collapse" id="navbar-1">
      <div class="navbar-nav ms-auto">
        <div class="dropdown">
          <a
            class="nav-link dropdown-toggle px-lg-3"
            href="#"
            id="navbarDropdown"
            role="button"
            data-bs-toggle="dropdown"
            aria-expanded="false">Services<i class="fas fa-angle-down ms-2" aria-hidden="true"></i>
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Service 1</a>
            <a class="dropdown-item" href="#">Service 2</a>
            <a class="dropdown-item" href="#">Service 3</a>
          </div>
        </div>
        <a class="nav-link px-lg-3" href="#">Pricing</a>
        <a class="nav-link px-lg-3" href="#">About</a>
      </div>
      <a class="btn btn-outline-primary btn-sm rounded-pill ms-lg-3 my-3 my-lg-0" href="#">Sign Up</a>
    </div>
  </div>
</nav>

Centered navigation

Left navigation

Bootstrap Documentation