Usage
<ul class="nav">
<li class="nav-item">
<a class="nav-link is-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 is-disabled" href="#" tabindex="-1" aria-disabled="true">
Disabled
</a>
</li>
</ul>Classes are used, allowing <ul>, <ol> and <nav> elements to be used.
<nav class="nav">
<a class="nav-link is-active" href="#">
Active
</a>
<a class="nav-link" href="#">
Link
</a>
<a class="nav-link" href="#">
Link
</a>
<a class="nav-link is-disabled" href="#" tabindex="-1" aria-disabled="true">
Disabled
</a>
</nav>Styles
Line
Use .nav-line with a .nav element to create a navigation element with underlines.
<ul class="nav nav-line border-bottom">
<li class="nav-item mr-3">
<a class="nav-link is-active" href="#">
Active
</a>
</li>
<li class="nav-item mr-3">
<a class="nav-link" href="#">
Link
</a>
</li>
<li class="nav-item mr-3">
<a class="nav-link" href="#">
Link
</a>
</li>
<li class="nav-item">
<a class="nav-link is-disabled" href="#" tabindex="-1" aria-disabled="true">
Disabled
</a>
</li>
</ul>Tabs
Use .nav-tabs with a .nav element to create a tabbed interface. This is the default style used by the Tabs extension.
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link is-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 is-disabled" href="#" tabindex="-1" aria-disabled="true">
Disabled
</a>
</li>
</ul>Pills
Use .nav-pills with a .nav element to create a pill-style navigation element. Use border radius utilities to control the rounding of the pills.
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link border-radius is-active" href="#">
Active
</a>
</li>
<li class="nav-item">
<a class="nav-link border-radius" href="#">
Link
</a>
</li>
<li class="nav-item">
<a class="nav-link border-radius" href="#">
Link
</a>
</li>
<li class="nav-item">
<a class="nav-link border-radius is-disabled" href="#" tabindex="-1" aria-disabled="true">
Disabled
</a>
</li>
</ul>Alignment
Horizontal alignment
Change the horizontal alignment of your nav with flexbox utilities.
Use .justify-content-center to position items in the center of the .nav element.
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link is-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 is-disabled" href="#" tabindex="-1" aria-disabled="true">
Disabled
</a>
</li>
</ul>Use .justify-content-end to position items at the end of the .nav element.
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link is-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 is-disabled" href="#" tabindex="-1" aria-disabled="true">
Disabled
</a>
</li>
</ul>Fill and justify
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 is-active" href="#">
Active
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Much longer nav link
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Link
</a>
</li>
<li class="nav-item">
<a class="nav-link is-disabled" href="#" tabindex="-1" aria-disabled="true">
Disabled
</a>
</li>
</ul>When using a <nav>-based navigation, be sure to include .nav-item on the anchors.
<nav class="nav nav-pills nav-fill">
<a class="nav-item nav-link is-active" href="#">
Active
</a>
<a class="nav-item nav-link" href="#">
Much longer nav link
</a>
<a class="nav-item nav-link" href="#">
Link
</a>
<a class="nav-item nav-link is-disabled" href="#" tabindex="-1" aria-disabled="true">
Disabled
</a>
</nav>For equal-width elements, use .nav-justified. All horizontal space will be occupied by nav links, but unlike the .nav-fill above, every nav item will be the same width.
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link is-active" href="#">
Active
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Much longer nav link
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Link
</a>
</li>
<li class="nav-item">
<a class="nav-link is-disabled" href="#">
Disabled
</a>
</li>
</ul>As before, when using a <nav>-based navigation, be sure to include .nav-item on the anchors.
Vertical alignment
Use .flex-column to create a vertical nav.
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link is-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 is-disabled" href="#" tabindex="-1" aria-disabled="true">
Disabled
</a>
</li>
</ul>Use responsive variants like .sm:flex-column to target specific screen sizes.