Navs
Basic Example #
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.
<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" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Horizontal Alignment #
Change the horizontal alignment of your nav with flexbox utilities. By default, navs are left-aligned, but you can easily change them to center or right aligned.
Centered with
.justify-content-center
:
<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" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Right-aligned with
.justify-content-end
:
<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" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Vertical #
Stack your navigation by changing the flex item direction with the
.flex-column
utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g.,
.flex-sm-column
).
<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" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Pills #
Take that same HTML, but use
.nav-pills
instead:
<ul class="nav nav-pills">
<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" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
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-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 active" aria-current="page" 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 disabled" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
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 align-items-stretch">
<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="#">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 disabled" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
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.
<nav class="nav nav-pills flex-column flex-sm-row">
<a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#"
>Active</a
><a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a
><a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a
><a
class="flex-sm-fill text-sm-center nav-link disabled"
tabindex="-1"
aria-disabled="true"
>Disabled</a
>
</nav>
Using Dropdowns #
Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item dropstart">
<a
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
href="#"
role="button"
aria-expanded="false"
>Start</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 dropdown">
<a
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
href="#"
role="button"
aria-expanded="false"
>Down</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 dropup">
<a
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
href="#"
role="button"
aria-expanded="false"
>Up</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 dropend">
<a
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
href="#"
role="button"
aria-expanded="false"
>End</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 disabled" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
Live Example #
Use the tab JavaScript plugin to extend our navigational pills to create tabbable panes of local content.
<div class="card">
<div class="card-header">
<ul class="nav nav-pills" role="tablist">
<li class="nav-item" role="presentation">
<button
class="nav-link active"
id="pills-home-tab"
data-bs-toggle="pill"
data-bs-target="#pills-home"
type="button"
role="tab"
aria-controls="pills-home"
aria-selected="true"
>
Home
</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="pills-profile-tab"
data-bs-toggle="pill"
data-bs-target="#pills-profile"
type="button"
role="tab"
aria-controls="pills-profile"
aria-selected="false"
>
Profile
</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="pills-contact-tab"
data-bs-toggle="pill"
data-bs-target="#pills-contact"
type="button"
role="tab"
aria-controls="pills-contact"
aria-selected="false"
>
Contact
</button>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div
class="tab-pane fade show active"
id="pills-home"
role="tabpanel"
aria-labelledby="pills-home-tab"
>
Placeholder content for the tab panel. This one relates to the home tab.
Takes you miles high, so high, 'cause she's got that one
international smile. There's a stranger in my bed, there's a
pounding in my head. Oh, no. In another life I would make you stay.
'Cause I, I'm capable of anything. Suiting up for my crowning
battle. Used to steal your parents' liquor and climb to the roof.
Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love
is like a drug. I guess that I forgot I had a choice.
</div>
<div
class="tab-pane fade"
id="pills-profile"
role="tabpanel"
aria-labelledby="pills-profile-tab"
>
Placeholder content for the tab panel. This one relates to the profile
tab. You got the finest architecture. Passport stamps, she's
cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that
one day I'd be losing you. She eats your heart out. Your kiss is
cosmic, every move is magic. I mean the ones, I mean like she's the
one. Greetings loved ones let's take a journey. Just own the night
like the 4th of July! But you'd rather get wasted.
</div>
<div
class="tab-pane fade"
id="pills-contact"
role="tabpanel"
aria-labelledby="pills-contact-tab"
>
Placeholder content for the tab panel. This one relates to the contact
tab. Her love is like a drug. All my girls vintage Chanel baby. Got a
motel and built a fort out of sheets. 'Cause she's the muse and
the artist. (This is how we do) So you wanna play with magic. So just be
sure before you give it all to me. I'm walking, I'm walking on
air (tonight). Skip the talk, heard it all, time to walk the walk. Catch
her if you can. Stinging like a bee I earned my stripes.
</div>
</div>
</div>
</div>