Navs

Documentation and examples for how to use Bootstrap’s included navigation components.

Bootstrap 4 documentation
Base nav

Navigation available in Bootstrap share general markup and styles, from the base .nav class to the active and disabled states. Swap modifier classes to switch between each style.

The base .nav component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.

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

Classes are used throughout, so your markup can be super flexible. Use <ul>s like above, or roll your own with say a <nav> element. Because the .nav uses display: flex, the nav links behave the same as nav items would, but without the extra markup.

                                                        
<nav class="nav">
    <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>
Available styles

Change the style of .navs component with modifiers and utilities. Mix and match as needed, or build your own.

Horizontal alignment

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.

Centered with .justify-content-center:

                                                        
<ul class="nav justify-content-center">
    <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="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">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" 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="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">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" 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="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
    </li>
</ul>

As always, vertical navigation is possible without <ul>s, too.

                                                        
<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>
Circle pills
                                                    
<ul class="nav nav-pills nav-pill-circle flex-column flex-sm-row">
    <li class="nav-item">
        <a class="nav-link active" href="#">
            <span class="nav-link-icon d-block"><i class="far fa-user"></i></span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">
            <span class="nav-link-icon d-block"><i class="far fa-lightbulb"></i></span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">
            <span class="nav-link-icon d-block"><i class="far fa-sun"></i></span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">
            <span class="nav-link-icon d-block"><i class="far fa-paper-plane"></i></span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">
            <span class="nav-link-icon d-block"><i class="far fa-comments"></i></span>
        </a>
    </li>
</ul>