Bootstrap - Navs and Tabs

Introduction

Hello, aspiring web developers! Today, we're going to dive into one of the most commonly used components in web design: navigation menus and tabs. These elements are like the road signs of your website, guiding users to different sections and content. With Bootstrap's nav and tab components, we can create sleek, responsive navigation systems that work across all devices. So, let's roll up our sleeves and start coding!

Base nav

Let's start with the basics. Bootstrap provides a simple way to create navigation menus using the .nav class. Here's a basic example:

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">About</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Services</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Contact</a>
  </li>
</ul>

This code creates a horizontal list of navigation links. The active class highlights the current page, while the disabled class greys out links that are not currently clickable.

Available styles

Bootstrap offers various styles for your navs. Let's look at two popular ones:

Nav tabs

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Messages</a>
  </li>
</ul>

This creates a tabbed navigation menu, perfect for organizing content into different sections.

Nav pills

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Messages</a>
  </li>
</ul>

The pills style gives a more button-like appearance to your navigation links.

Horizontal alignment

You can easily change the alignment of your nav items. Here's how:

<ul class="nav justify-content-center">
  <!-- Nav items here -->
</ul>

<ul class="nav justify-content-end">
  <!-- Nav items here -->
</ul>

The justify-content-center class centers the nav items, while justify-content-end aligns them to the right.

Working with flex utilities

Bootstrap's flex utilities give you even more control over your nav layout:

<nav class="nav flex-column">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Disabled</a>
</nav>

This creates a vertical nav menu using the flex-column class.

Regarding accessibility

When building navs, it's crucial to consider accessibility. Use <nav> elements where appropriate, and add aria-current="page" to the active item:

<nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <!-- Other nav items -->
</nav>

Using dropdowns

Navs can include dropdown menus for more complex navigation structures:

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <!-- Other nav items -->
</ul>

This code creates a nav with a dropdown menu. The data-bs-toggle="dropdown" attribute enables the dropdown functionality.

Tabs with dropdowns

You can also include dropdowns in tab-style navs:

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <!-- Dropdown items -->
    </ul>
  </li>
  <!-- Other nav items -->
</ul>

Pills with dropdowns

The same principle applies to pill-style navs:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <!-- Dropdown items -->
    </ul>
  </li>
  <!-- Other nav items -->
</ul>

JavaScript behavior

Bootstrap's JavaScript plugins can add dynamic behavior to your navs and tabs. Here's how to create a set of tabs with content panes:

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home content here...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile content here...</div>
</div>

This code creates a set of tabs that, when clicked, show different content panes.

Accessibility

To make your tabs accessible, use the role, aria-controls, aria-selected, and aria-labelledby attributes as shown in the previous example.

Using data attributes

Data attributes allow you to control tab behavior without writing JavaScript:

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <!-- Other tab buttons -->
</ul>

The data-bs-toggle="tab" and data-bs-target="#home" attributes enable tab functionality without additional JavaScript.

Via JavaScript

You can also activate tabs via JavaScript:

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab button'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', function (event) {
    event.preventDefault()
    tabTrigger.show()
  })
})

This code attaches click event listeners to each tab button, activating the corresponding tab when clicked.

Fade effect

To add a fade effect to your tabs, use the fade class:

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
</div>

This creates a smooth transition effect when switching between tabs.

And there you have it! You've just learned how to create and customize navigation menus and tabs using Bootstrap. Remember, practice makes perfect, so try experimenting with these components in your own projects. Happy coding!

Method	Description
Tab.getInstance(element)	Gets the tab instance associated with a DOM element
Tab.getOrCreateInstance(element)	Returns a tab instance associated with a DOM element or creates a new one
show()	Selects the given tab and shows its associated pane
dispose()	Destroys an element's tab

Credits: Image by storyset