Bootstrap 5 Navs

Welcome to The Coding College! Today’s tutorial focuses on Bootstrap 5 Navs, one of the most versatile components for building navigation interfaces. From simple links to advanced tabbed content, Bootstrap 5 Navs make creating clean, responsive navigation easy.

What Are Bootstrap 5 Navs?

The Navs component in Bootstrap 5 allows you to organize navigation links or buttons in a horizontal or vertical layout. Navs can be styled for tabs, pills, or custom buttons, adapting seamlessly to any UI.

Getting Started with Navs

The base structure of a Bootstrap Nav uses the .nav class, which can be further styled with additional classes like .nav-tabs or .nav-pills.

Example: Basic Nav

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 Navs</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-5">
    <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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output:

A horizontal navigation bar with three links, with the “Home” link marked as active.

Nav Variants

Bootstrap 5 Navs offer several layout and styling options, including tabs, pills, vertical orientation, and more.

1. Tabs

The .nav-tabs class styles the navigation bar as tabs, commonly used for switching between sections of content.

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active Tab</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Inactive Tab</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Another Tab</a>
  </li>
</ul>

2. Pills

Use the .nav-pills class to create pill-shaped navigation items.

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active Pill</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Inactive Pill</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Another Pill</a>
  </li>
</ul>

3. Vertical Nav

To stack nav items vertically, add the .flex-column class.

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Features</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Pricing</a>
  </li>
</ul>

4. Horizontal Alignment

Nav items are inline by default. However, you can align nav links to the center or right using Bootstrap’s utility classes.

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Center</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
</ul>

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" href="#">Right-Aligned</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
</ul>

Using Navs with Dropdowns

Combine nav items with dropdown menus for advanced navigation.

<ul class="nav nav-tabs">
  <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>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
</ul>

Navs with JavaScript

For interactive functionality like dynamic tab switching, Bootstrap includes JavaScript methods.

Example: Dynamic Tabs

<div class="container mt-5">
  <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">This is Home content.</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">This is Profile content.</div>
  </div>
</div>

Customization and Styling

Using Utility Classes:

Customize navs using Bootstrap’s utility classes like text-center, bg-light, and rounded.

Adding Icons:

Enhance nav items with icons using <i> tags or SVGs.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#"><i class="bi bi-house"></i> Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#"><i class="bi bi-gear"></i> Settings</a>
  </li>
</ul>

Accessibility Best Practices

  1. Use descriptive labels for nav links for screen readers.
  2. Implement proper aria-selected attributes for tabs.
  3. Ensure proper keyboard navigation support for dropdowns and tabs.

Common Use Cases

  1. Website Navigation: Horizontal or vertical menus for websites.
  2. Tab Navigation: Switch between content sections dynamically.
  3. Sidebars: Create collapsible, vertical navbars for additional options.

FAQs About Bootstrap 5 Navs

Q1: Can I use Navs with a Navbar?

Yes, Navs are often used inside Navbar components for building navigation menus.

Q2: How do I make Navs responsive?

Bootstrap’s grid system and utility classes ensure that navs are responsive by default. Use classes like flex-column or flex-row for custom layouts.

Q3: Can I combine Navs with Collapse?

Yes, Navs can be used within a collapsible menu for responsive designs like mobile navigation.

Conclusion

Bootstrap 5 Navs offer a flexible way to create responsive and interactive navigation interfaces. Whether you need a simple nav bar or a dynamic tabbed UI, this component makes the process effortless.

Leave a Comment