:: LUNO :: Navs

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.

Navs for more bootstrao components Bootstrap Navs documentation

The base .nav component does not include any .active state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling.

To convey the active state to assistive technologies, use the aria-current attribute — using the page value for current page, or true for the current item in a set.

Preview
HTML

<!-- Nav: left alignment -->
<ul class="nav">
    <li class="nav-item"><a class="nav-link active" aria-current="page" 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>

<!-- Nav: center alignment -->
<ul class="nav justify-content-center">
    <li class="nav-item"><a class="nav-link active" aria-current="page" 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>

<!-- Nav: right alignment -->
<ul class="nav justify-content-end">
    <li class="nav-item"><a class="nav-link active" aria-current="page" 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>

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

Preview
HTML

<nav class="nav">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
    <a class="nav-link" href="#">Link</a>
    <a class="nav-link" href="#">Link</a>
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Preview
HTML

<ul class="nav flex-column">
    <li class="nav-item"><a class="nav-link active" aria-current="page" 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>

<nav class="nav flex-column">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
    <a class="nav-link" href="#">Link</a>
    <a class="nav-link" href="#">Link</a>
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Tabs

Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface.

Takes the basic nav from above and adds the .nav .nav-tabs .px-3 .border-bottom-0 class to generate a tabbed interface.

<ul class="nav nav-tabs px-3 border-bottom-0" role="tablist">
    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#nav-Preview4" role="tab">Preview</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#nav-HTML4" role="tab">HTML</a></li>
</ul>
<div class="card mb-3">
    <div class="card-body">
        <div class="tab-content">
            <div class="tab-pane fade show active" id="nav-Preview4" role="tabpanel">
                ...
            </div>
            <div class="tab-pane fade" id="nav-HTML4" role="tabpanel">
                ...
            </div>
        </div>
    </div>
</div>

Takes the basic nav from above and adds the .nav .nav-tabs .tab-page-toolbar .rounded .d-inline-flex class to generate a tabbed interface.

<ul class="nav nav-tabs tab-page-toolbar rounded d-inline-flex" role="tablist">
    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#nav-Preview5" role="tab">Preview</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#nav-HTML5" role="tab">HTML</a></li>
</ul>

<div class="tab-content mt-2">
    <div class="tab-pane fade show active" id="nav-Preview5" role="tabpanel">
        ....
    </div>
    <div class="tab-pane fade" id="nav-HTML5" role="tabpanel">
        ....
    </div>
</div>

Takes the basic nav from above and adds the .nav nav-tabs .tab-card class to generate a tabbed interface.

<ul class="nav nav-tabs tab-card" role="tablist">
    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#nav-Preview6" role="tab">Preview</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#nav-HTML6" role="tab">HTML</a></li>
</ul>

<div class="tab-content mt-2">
    <div class="tab-pane fade show active" id="nav-Preview6" role="tabpanel">
        ....
    </div>
    <div class="tab-pane fade" id="nav-HTML6" role="tabpanel">
        ....
    </div>
</div>

Takes the basic nav from above and adds the .nav nav-tabs .tab-card class to generate a tabbed interface.

Where does it come from?

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.

<ul class="nav nav-tabs tab-card" role="tablist">
    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#nav-Preview7" role="tab">Preview</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#nav-HTML7" role="tab">HTML</a></li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-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>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Separated link</a></li>
        </ul>
    </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>

<div class="tab-content mt-2">
    <div class="tab-pane fade show active" id="nav-Preview7" role="tabpanel">
       ....
    </div>
    <div class="tab-pane fade" id="nav-HTML7" role="tabpanel">
        ....
    </div>
</div>

Pills

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

Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.

<ul class="nav nav-pills mb-3" role="tablist">
    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#nav-Preview8" role="tab">Preview</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#nav-HTML8" role="tab">HTML</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>

<div class="tab-content">
    <div class="tab-pane fade show active" id="nav-Preview8" role="tabpanel">
        ....
    </div>
    <div class="tab-pane fade" id="nav-HTML8" role="tabpanel">
        ....
    </div>
</div>

Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.

<div class="d-flex align-items-start">
    <ul class="nav flex-column nav-pills me-3" role="tablist">
        <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#nav-Preview9" role="tab">Preview</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#nav-HTML9" role="tab">HTML</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#nav-Messages9" role="tab">Messages</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#nav-Settings9" role="tab">Settings</a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane fade show active" id="nav-Preview9" role="tabpanel">
            ....
        </div>
        <div class="tab-pane fade" id="nav-HTML9" role="tabpanel">
            ....
        </div>
        <div class="tab-pane fade" id="nav-Messages9" role="tabpanel">
            ....
        </div>
        <div class="tab-pane fade" id="nav-Settings9" role="tabpanel">
            ....
        </div>
    </div>
</div>

Bootstrap navbar Bootstrap pagination

LUNO

Base nav

Tabs

Where does it come from?

Pills

Theme Setting

Light/Dark & Contrast Layout

Google Font Settings

More Setting