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-navy 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-navy 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-navy badge-pill nav-link-badge">+2 new users</span>
                                </a>
                              </li>
                            </ul>
                            <!-- End List -->
                          </div>
                        </div>
                        <!-- End Card -->
                      </div>
                      <!-- End Navbar Vertical -->