Navigation

29 Next's in app navigation follows the boostrap tabbed navigation. Please read the official documentation for a full list of options from Bootstrap's core library.

See Markup Example

<ul class="nav nav-tabs">
    <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">Disabled</a>
    </li>
</ul>

Example with Javascript Behaviour

Link tab 1 content...

Link tab 2 content...

Link tab 3 content...

Link tab 4 content...

See Markup Example

<ul class="nav nav-tabs ">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="link1-tab" data-bs-toggle="tab" data-bs-target="#link1-tab-pane" type="button" role="tab" aria-controls="link1-tab-pane" aria-selected="true">Link 1</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="link2-tab" data-bs-toggle="tab" data-bs-target="#link2-tab-pane" type="button" role="tab" aria-controls="link2-tab-pane" aria-selected="false">Link 2</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="link3-tab" data-bs-toggle="tab" data-bs-target="#link3-tab-pane" type="button" role="tab" aria-controls="link3-tab-pane" aria-selected="false">Link 3</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="link4-tab" data-bs-toggle="tab" data-bs-target="#link4-tab-pane" type="button" role="tab" aria-controls="link4-tab-pane" aria-selected="false" disabled>Link 4 Disabled</button>
    </li>
</ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="link1-tab-pane" role="tabpanel" aria-labelledby="link1-tab" tabindex="0">
        Link tab 1 content...
    </div>
    <div class="tab-pane fade" id="link2-tab-pane" role="tabpanel" aria-labelledby="link2-tab" tabindex="0">
            Link tab 2 content...
    </div>
    <div class="tab-pane fade" id="link3-tab-pane" role="tabpanel" aria-labelledby="link3-tab" tabindex="0">
        Link tab 3 content...
    </div>
    <div class="tab-pane fade" id="link4-tab-pane" role="tabpanel" aria-labelledby="link4-tab" tabindex="0">
        Link tab 4 content...
    </div>
</div>