Bootstrap Navs

Bootstrap Navs are flexible navigation components that allow you to build anything from a simple horizontal list of links to complex tabbed interfaces. While the Navbar component is meant for global site headers, Navs are often used for in-page navigation, sidebar menus, and tabs.

---

Basic Nav

Navigation components heavily rely on flexible container elements. You can use <ul>, <ol>, or even <nav> wrappers combined with standard classes.

• .nav: The base class that provides structure and removes default list styling.
• .nav-item: Applied to list items.
• .nav-link: Applied to the actual anchor tags to give them appropriate padding and hover effects. Add the .active class to show the current state, and .disabled for unclickable links.

<ul class="nav">
    <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Active Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Normal 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 Link</a>
    </li>
</ul>

---

Alignment and Orientation

Bootstrap Navs use flexbox, which means you can easily align them horizontally or stack them vertically utilizing flexbox utility classes.

Horizontal Alignment

Change the horizontal alignment of your nav by adding .justify-content-center or .justify-content-end.

<!-- Centered Nav -->
<ul class="nav justify-content-center">...</ul>

<!-- Right-aligned Nav -->
<ul class="nav justify-content-end">...</ul>

Vertical Alignment

To stack your navigation links vertically, simply apply the .flex-column utility class.

<ul class="nav flex-column">...</ul>

---

Tabs

Transform your basic nav into a classical tabbed interface by adding the .nav-tabs class. Tabs visually separate content areas and apply bottom borders to the active item to attach it smoothly to the content area.

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

---

Pills

Alternatively to tabs, you can use pills by applying the .nav-pills class. Pills surround the active link with a solid background color (using the primary theme color by default) with rounded corners.

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

---

Fill and Justify

You can force your nav items to span the entire width of their container. There are two slightly different methods:

• .nav-fill: Nav items proportionally fill available horizontal space based on their content width.
• .nav-justified: Nav items are forced to all be exactly the exact same width.

<!-- Filled Navigation Items -->
<ul class="nav nav-pills nav-fill">...</ul>

<!-- Equally Sized Navigation Items -->
<ul class="nav nav-pills nav-justified">...</ul>