Navs
Documentation and examples for how to use Bootstrap’s included navigation components.
ads via Carbon
Adobe Creative Cloud for Teams starting at $33.99 per month.
ads via Carbon
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.
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.
The base .nav component does not include any .active state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling.
Active
Link
Link
Disabled
Classes are used throughout, so your markup can be super flexible. Use
-
s like above,
-
if the order of your items is important, or roll your own with a
Available styles
Change the style of .navs 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:
Active
Link
Link
Disabled
Right-aligned with .justify-content-end:
Active
Link
Link
Disabled
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).
Active
Link
Link
Disabled
As always, vertical navigation is possible without
-
s, too.
Active
Link
Link
Disabled
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.
Active
Link
Link
Disabled
Pills
Take that same HTML, but use .nav-pills instead:
Active
Link
Link
Disabled
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.
Active
Much longer nav link
Link
Disabled
When using a
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.
Active
Much longer nav link
Link
Disabled
Similar to the .nav-fill example using a
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.
Active
Longer nav link
Link
Disabled
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
-
, or wrap a
Note that navigation bars, even if visually styled as tabs with the .nav-tabs class, should not be given role=“tablist”, role=“tab” or role=“tabpanel” attributes. These are only appropriate for dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices. See JavaScript behavior for dynamic tabbed interfaces in this section for an example.
Using dropdowns
Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.
Tabs with dropdowns
Active
Dropdown
Link
Disabled
Pills with dropdowns
Active
Dropdown
Link
Disabled
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.
If you’re building our JavaScript from source, it requires util.js.
Dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices, require role=“tablist”, role=“tab”, role=“tabpanel”, and additional aria- attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).
Note that dynamic tabbed interfaces should not contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab’s trigger element is not immediately visible (as it’s inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies.
Home
Profile
Contact
Raw denim you probably haven’t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
To help fit your needs, this works with
-
-based markup, as shown above, or with any arbitrary “roll your own” markup. Note that if you’re using
Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.
The tabs plugin also works with pills.
Home
Profile
Contact
Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
And with vertical pills.
Home
Profile
Messages
Settings
Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.
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.
Via JavaScript
Enable tabbable tabs via JavaScript (each tab needs to be activated individually):
$(’#myTab a’).on(‘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 li:first-child a’).tab(‘show’) // Select first tab
$(’#myTab li:last-child a’).tab(‘show’) // Select last tab
$(’#myTab li:nth-child(3) a’).tab(‘show’) // Select third tab
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.
Methods
Asynchronous methods and transitions
All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.
See our JavaScript documentation for more information.
$().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.
.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’)
.tab(‘dispose’)
Destroys an element’s tab.
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 the hide.bs.tab event)
shown.bs.tab (on the newly-active just-shown tab, the same one as for the show.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
})
