Got it! Here's a handy guide to Bootstrap 5 Navs — components for creating navigation with tabs, pills, and more.

? Bootstrap 5 Navs

Navs are flexible components for building navigation menus like tabs, pills, or simple stacked links.

1. Basic Nav

<ul class="nav">  <li class="nav-item">    <a class="nav-link active" href="#">Active</a>  </li>  <li class="nav-item">    <a class="nav-link" href="#">Link</a>  </li>  <li class="nav-item">    <a class="nav-link" href="#">Another Link</a>  </li>  <li class="nav-item">    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  </li></ul>

• .nav is the container

• .nav-item wraps each link

• .nav-link styles links

• .active highlights the current page

• .disabled disables a nav item

2. Nav with Tabs

Tabs style navs with bottom borders:

<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="#">Tab 2</a>  </li></ul>

3. Nav with Pills

Pills give nav links a pill-shaped background:

<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="#">Pill 2</a>  </li></ul>

4. Vertical Navs

Make nav vertical by adding .flex-column:

<ul class="nav flex-column">  <li class="nav-item">    <a class="nav-link active" href="#">Active vertical</a>  </li>  <li class="nav-item">    <a class="nav-link" href="#">Link</a>  </li></ul>

5. Navs with Dropdown

You can combine nav items with dropdowns:

<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 1</a></li>      <li><a class="dropdown-item" href="#">Action 2</a></li>    </ul>  </li>  <li class="nav-item">    <a class="nav-link" href="#">Regular Link</a>  </li></ul>

6. Nav Justify

To make nav items spread evenly, add .nav-justified:

<ul class="nav nav-tabs nav-justified">  <li class="nav-item">    <a class="nav-link active" href="#">Justified 1</a>  </li>  <li class="nav-item">    <a class="nav-link" href="#">Justified 2</a>  </li></ul>

7. Nav Fill

Fill the nav so all items take equal width with .nav-fill:

<ul class="nav nav-pills nav-fill">  <li class="nav-item">    <a class="nav-link active" href="#">Fill 1</a>  </li>  <li class="nav-item">    <a class="nav-link" href="#">Fill 2</a>  </li></ul>

Summary of Key Classes

Want an example with dynamic tabs, or navs controlling tab content? I can help with that too!