Case Menu

Bootstrap Case: Adding a Navigation Menu

Navigation Menus in Bootstrap

Most websites and applications require some form of navigation. Bootstrap provides flexible components for creating various types of navigation menus.

In HTML, a menu is typically built using an unordered list <ul>. Bootstrap styles this structure with specific classes.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Menu Item 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Menu Item 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Bootstrap offers several styles for navigation, such as tabs and pills.

Tabs

Tabs are created by adding the .nav-tabs class to the <ul> element. Individual items use .nav-item and links use .nav-link.

Tip: Mark the current page’s link with the .active class and aria-current="page" for accessibility.

The following example creates navigation tabs:

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Menu 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Menu 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Menu 3</a>
  </li>
</ul>

Tabs With Dropdown Menu

Tabs can also incorporate dropdown menus. Use the .dropdown class on the <li class="nav-item"> and Bootstrap’s dropdown JavaScript plugin attributes.

The following example adds a dropdown menu to “Menu 1”:

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Home</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Menu 1</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Submenu 1-1</a></li>
      <li><a class="dropdown-item" href="#">Submenu 1-2</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Submenu 1-3</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Menu 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Menu 3</a>
  </li>
</ul>

<!-- Make sure to include Bootstrap JS for dropdown functionality -->
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->

Pills

Pills are created with .nav-pills on the <ul> element. Mark the current page with .active and aria-current="page" on the .nav-link.

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Menu 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Menu 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Menu 3</a>
  </li>
</ul>

Vertical Pills

Pills can be displayed vertically by adding the .flex-column utility class to the .nav-pills element.

The following example places a vertical pill menu. This layout is inherently responsive. You can place it within grid columns as needed.

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Menu 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Menu 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Menu 3</a>
        </li>
      </ul>
    </div>
    <div class="col-md-9">
      <!-- Content for the right side -->
      <p>Main content area...</p>
    </div>
  </div>
</div>

Pills With Dropdown Menu

Pills can also include dropdown menus, similar to tabs.

The following example adds a dropdown menu to “Menu 1” in a vertical pill navigation:

<ul class="nav nav-pills flex-column">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Home</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Menu 1</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Submenu 1-1</a></li>
      <li><a class="dropdown-item" href="#">Submenu 1-2</a></li>
      <li><a class="dropdown-item" href="#">Submenu 1-3</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Menu 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Menu 3</a>
  </li>
</ul>

<!-- Make sure to include Bootstrap JS for dropdown functionality -->
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->

For more details on navigation components, including alignment, fill and justify options, and integration with the Navbar component, consult the official Bootstrap 5 documentation on Navs and Tabs.