Navs
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.
Contents
- Base nav
- Available styles
- Working with flex utilities
- Regarding accessibility
- Using dropdowns
- JavaScript behavior
Base nav
The base .nav
component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling. No active states are included in the base nav.
<ul class="nav"> <li class="nav-item"> <a class="nav-link 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 disabled" href="#">Disabled</a> </li> </ul>
Classes are used throughout, so your markup can be super flexible. Use <ul>
s like above, or roll your own with say a <nav>
element. Because the .nav
uses display: flex
, the nav links behave the same as nav items would, but without the extra markup.
<nav class="nav"> <a class="nav-link active" href="#">Active</a> <a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a> <a class="nav-link disabled" href="#">Disabled</a> </nav>
Available styles
Change the style of .nav
s component with modifiers and utilities. Mix and match as needed, or build your own.
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" 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" href="#">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" 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" href="#">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" 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" href="#">Disabled</a> </li> </ul>
As always, vertical navigation is possible without <ul>
s, too.
<nav class="nav flex-column"> <a class="nav-link active" href="#">Active</a> <a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a> <a class="nav-link disabled" href="#">Disabled</a> </nav>
Tabs
Takes the basic nav from above and adds the .nav-tabs
class to generate a tabbed interface. Use them to create tabbable regions with our tab JavaScript plugin.
<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link 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 disabled" href="#">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" 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" href="#">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" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">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" href="#">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"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">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" href="#">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" href="#">Active</a> <a class="flex-sm-fill text-sm-center nav-link" href="#">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" href="#">Disabled</a> </nav>
Regarding accessibility
If you’re using navs to provide a navigation bar, be sure to add a role="navigation"
to the most logical parent container of the <ul>
, or wrap a <nav>
element around the whole navigation. Do not add the role to the <ul>
itself, as this would prevent it from being announced as an actual list by assistive technologies.
Using dropdowns
Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.
Tabs with dropdowns
<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>
Pills with dropdowns
<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>
JavaScript behavior
Use the tab JavaScript plugin—include it individually or through the compiled bootstrap.js
file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.
Open example on getbootstrap.com
Using data attributes
You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab"
or data-toggle="pill"
on an element. Use these data attributes on .nav-tabs
or .nav-pills
.
<!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active" id="home" role="tabpanel">...</div> <div class="tab-pane" id="profile" role="tabpanel">...</div> <div class="tab-pane" id="messages" role="tabpanel">...</div> <div class="tab-pane" id="settings" role="tabpanel">...</div> </div>
Via JavaScript
Enable tabbable tabs via JavaScript (each tab needs to be activated individually):
$('#myTab a').click(function (e) { e.preventDefault() $(this).tab('show') })
You can activate individual tabs in several ways:
$('#myTab a[href="#profile"]').tab('show') // Select tab by name $('#myTab a:first').tab('show') // Select first tab $('#myTab a:last').tab('show') // Select last tab $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
Fade effect
To make tabs fade in, add .fade
to each .tab-pane
. The first tab pane must also have .show
to make the initial content visible.
<div class="tab-content"> <div class="tab-pane fade show active" id="home" role="tabpanel">...</div> <div class="tab-pane fade" id="profile" role="tabpanel">...</div> <div class="tab-pane fade" id="messages" role="tabpanel">...</div> <div class="tab-pane fade" id="settings" role="tabpanel">...</div> </div>
Methods
$().tab
Activates a tab element and content container. Tab should have either a data-target
or an href
targeting a container node in the DOM.
<ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Settings</a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="home" role="tabpanel">...</div> <div class="tab-pane" id="profile" role="tabpanel">...</div> <div class="tab-pane" id="messages" role="tabpanel">...</div> <div class="tab-pane" id="settings" role="tabpanel">...</div> </div> <script> $(function () { $('#myTab a:last').tab('show') }) </script>
.tab(‘show’)
Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. Returns to the caller before the tab pane has actually been shown (i.e. before the shown.bs.tab
event occurs).
$('#someTab').tab('show')
Events
When showing a new tab, the events fire in the following order:
-
hide.bs.tab
(on the current active tab) -
show.bs.tab
(on the to-be-shown tab) -
hidden.bs.tab
(on the previous active tab, the same one as for thehide.bs.tab
event) -
shown.bs.tab
(on the newly-active just-shown tab, the same one as for theshow.bs.tab
event)
If no tab was already active, then the hide.bs.tab
and hidden.bs.tab
events will not be fired.
Event Type Description
show.bs.tab This event fires on tab show, but before the new tab has been shown. Use event.target
and event.relatedTarget
to target the active tab and the previous active tab (if available) respectively. shown.bs.tab This event fires on tab show after a tab has been shown. Use event.target
and event.relatedTarget
to target the active tab and the previous active tab (if available) respectively. hide.bs.tab This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use event.target
and event.relatedTarget
to target the current active tab and the new soon-to-be-active tab, respectively. hidden.bs.tab This event fires after a new tab is shown (and thus the previous active tab is hidden). Use event.target
and event.relatedTarget
to target the previous active tab and the new active tab, respectively.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { e.target // newly activated tab e.relatedTarget // previous active tab })
Please login to continue.