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-item
s, 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.