Documentation

Navs and tabs

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

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.

<tab-nav>
    <tab-nav-items :active="true" href="#"><template v-slot:title>Active</template></tab-nav-items>
    <tab-nav-items  href="#"><template v-slot:title>Link</template></tab-nav-items>
    <tab-nav-items  href="#"><template v-slot:title>Link</template></tab-nav-items>
    <tab-nav-items  aClass="disabled" tabindex="-1" href="#"><template v-slot:title>Disable</template></tab-nav-items>
</tab-nav>

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.

<tab-nav>
    <tab-nav-items :active="true" href="#"><template v-slot:title>Active</template></tab-nav-items>
    <tab-nav-items  href="#"><template v-slot:title>Link</template></tab-nav-items>
    <tab-nav-items  href="#"><template v-slot:title>Link</template></tab-nav-items>
    <tab-nav-items  aClass="disabled" tabindex="-1" href="#"><template v-slot:title>Disable</template></tab-nav-items>
</tab-nav>

Available styles

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

Horizontal alignment

Centered with .justify-content-center:

<tab-nav extraclass="justify-content-center">
    <tab-nav-items :active="true" href="#"><template v-slot:title>Active</template></tab-nav-items>
    <tab-nav-items  href="#"><template v-slot:title>Link</template></tab-nav-items>
    <tab-nav-items  href="#"><template v-slot:title>Link</template></tab-nav-items>
    <tab-nav-items  aClass="disabled" tabindex="-1" href="#"><template v-slot:title>Disable</template></tab-nav-items>
</tab-nav>

Right-aligned with .justify-content-end:

<tab-nav extraclass="justify-content-end">
    <tab-nav-items :active="true" href="#"><template v-slot:title>Active</template></tab-nav-items>
    <tab-nav-items  href="#"><template v-slot:title>Link</template></tab-nav-items>
    <tab-nav-items  href="#"><template v-slot:title>Link</template></tab-nav-items>
    <tab-nav-items  aClass="disabled" tabindex="-1" href="#"><template v-slot:title>Disable</template></tab-nav-items>
</tab-nav>

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.

<tab-nav extraclass="nav-fill" :pills="true">
    <tab-nav-items :active="true" href="#"><template v-slot:title>Active</template></tab-nav-items>
    <tab-nav-items  href="#"><template v-slot:title>Link</template></tab-nav-items>
    <tab-nav-items  href="#"><template v-slot:title>Link</template></tab-nav-items>
    <tab-nav-items  aClass="disabled" tabindex="-1" href="#"><template v-slot:title>Disable</template></tab-nav-items>
</tab-nav>

Working with flex utilities

If you need responsive nav variations, consider using a series of flexbox utilities. While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.

<tab-nav extraclass="flex-column flex-sm-row" :pills="true">
    <tab-nav-items :active="true" aClass="flex-sm-fill text-sm-center" href="#"><template v-slot:title>Active</template></tab-nav-items>
    <tab-nav-items  href="#" aClass="flex-sm-fill text-sm-center"><template v-slot:title>Longer nav link</template></tab-nav-items>
    <tab-nav-items  href="#" aClass="flex-sm-fill text-sm-center"><template v-slot:title>Link</template></tab-nav-items>
    <tab-nav-items  aClass="disabled flex-sm-fill text-sm-center" tabindex="-1" href="#"><template v-slot:title>Disable</template></tab-nav-items>
</tab-nav>

Using dropdowns

Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.

Tabs with dropdowns

<tab-nav :tabs="true">
    <tab-nav-items :active="true" href="#"><template v-slot:title>Active</template></tab-nav-items>
    <tab-nav-items liClass="dropdown" href="#" aClass="dropdown-toggle" dataToggle="dropdown"><template v-slot:title>Dropdown</template>
        <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>
    </tab-nav-items>
    <tab-nav-items  href="#"><template v-slot:title>Link</template></tab-nav-items>
    <tab-nav-items  aClass="disabled" tabindex="-1" href="#"><template v-slot:title>Disable</template></tab-nav-items>
</tab-nav>

Pills with dropdowns

<tab-nav :pills="true">
    <tab-nav-items :active="true" href="#"><template v-slot:title>Active</template></tab-nav-items>
    <tab-nav-items liClass="dropdown" href="#" aClass="dropdown-toggle" dataToggle="dropdown"><template v-slot:title>Dropdown</template>
        <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>
    </tab-nav-items>
    <tab-nav-items  href="#"><template v-slot:title>Link</template></tab-nav-items>
    <tab-nav-items  aClass="disabled" tabindex="-1" href="#"><template v-slot:title>Disable</template></tab-nav-items>
</tab-nav>