Navs and tabs

Documentation and examples for how to use navigation components.

Base nav

<ul class="nav">
    <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="javascript: void(0);">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="javascript: void(0);">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="javascript: void(0);">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
    </li>
</ul>

Alignments

Change the horizontal alignment of your nav with flexbox utilities. By default, navs are left-aligned, but you can easily change them to center or right aligned.

<ul class="nav justify-content-center">
    <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="javascript: void(0);">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="javascript: void(0);">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="javascript: void(0);">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
    </li>
</ul>

Right-aligned with .justify-content-end:

<ul class="nav justify-content-end">
    <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="javascript: void(0);">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="javascript: void(0);">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="javascript: void(0);">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
    </li>
</ul>

Vertical

Stack your navigation by changing the flex item direction with the .flex-column utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., .flex-sm-column).

<ul class="nav flex-column">
    <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="javascript: void(0);">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="javascript: void(0);">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="javascript: void(0);">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
    </li>
</ul>

Nav tabs

Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface. Use them to create tabbable regions with our tab JavaScript plugin.

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="javascript: void(0);">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="javascript: void(0);">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="javascript: void(0);">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
    </li>
</ul>

Nav pills

Take that same HTML, but use .nav-pills instead:

<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="javascript: void(0);">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="javascript: void(0);">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="javascript: void(0);">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
    </li>
</ul>

Fill and justify

Force your .nav's contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your .nav-items, use .nav-fill. Notice that all horizontal space is occupied, but not every nav item has the same width.

<ul class="nav nav-pills nav-fill">
    <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="javascript: void(0);">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="javascript: void(0);">Much longer nav link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="javascript: void(0);">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
    </li>
</ul>

StepsExclusive

Use .nav-pills with an additional .steps class. For a visited step use .visited class on nav-item.

<ul class="nav nav-pills step" id="wizard-tab" role="tablist">
    <li class="nav-item visited" role="presentation">
        <button class="nav-link" type="button" role="tab" aria-selected="false">1</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link active" type="button" role="tab" aria-selected="true">2</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" type="button" role="tab" aria-selected="false">3</button>
    </li>
</ul>

Steps verticalExclusive

Additionally, you can add .steps-vertical to present steps vertically.

<ul class="nav nav-pills step steps-vertical h-300px" id="wizard-tab-vertical" role="tablist">
    <li class="nav-item visited" role="presentation">
        <button class="nav-link" type="button" role="tab" aria-selected="false">1</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link active" type="button" role="tab" aria-selected="true">2</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" type="button" role="tab" aria-selected="false">3</button>
    </li>
</ul>