Navbar

Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.

Bootstrap Navbar documentation

Vertical 

<!-- Navbar Vertical -->
<div class="navbar-vertical">
  <!-- Card -->
  <div class="card">
    <div class="card-body">
      <h6 class="text-cap small">Account</h6>

      <!-- List -->
      <ul class="nav nav-sub nav-sm nav-tabs nav-list-y-2 mb-4">
        <li class="nav-item">
          <a class="nav-link active" href="#">
            <i class="fas fa-id-card nav-icon"></i>
            Personal info
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <i class="fas fa-shield-alt nav-icon"></i>
            Login & security
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <i class="fas fa-bell nav-icon"></i>
            Notifications
            <span class="badge badge-soft-dark badge-pill nav-link-badge">1</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <i class="fas fa-sliders-h nav-icon"></i>
            Preferences
          </a>
        </li>
      </ul>
      <!-- End List -->

      <h6 class="text-cap small">Shopping</h6>

      <!-- List -->
      <ul class="nav nav-sub nav-sm nav-tabs nav-list-y-2 mb-4">
        <li class="nav-item">
          <a class="nav-link" href="#">
            <i class="fas fa-shopping-basket nav-icon"></i>
            Your orders
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <i class="fas fa-heart nav-icon"></i>
            Wishlist
            <span class="badge badge-soft-dark badge-pill nav-link-badge">2</span>
          </a>
        </li>
      </ul>
      <!-- End List -->

      <h6 class="text-cap small">Billing</h6>

      <!-- List -->
      <ul class="nav nav-sub nav-sm nav-tabs nav-list-y-2">
        <li class="nav-item">
          <a class="nav-link" href="#">
            <i class="fas fa-credit-card nav-icon"></i>
            Plans & payment
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <i class="fas fa-map-marker-alt nav-icon"></i>
            Address
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <i class="fas fa-users nav-icon"></i>
            Teams
            <span class="badge badge-soft-dark badge-pill nav-link-badge">+2 new users</span>
          </a>
        </li>
      </ul>
      <!-- End List -->
    </div>
  </div>
  <!-- End Card -->
</div>
<!-- End Navbar Vertical -->
Copy