Navs

A variety of navigation components.

Navigation elements 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.

Active state 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. 

<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>

Customizing navs

Alignment

Horizontal alignment

Change the horizontal alignment of your nav using flexbox utilities. By default, navs are left aligned, but you can easily center or right align them using .justify-content-center and .justify-content-end respectively. 


<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>

Vertical alignment

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>

Tabs

Takes the basic nav from above and add the .nav-tabs class to generate a tabbed interface. Use them to create tabbable regions with the tab JavaScript plugin. 


<ul class="nav nav-tabs">
	<li class="nav-item">
		<a href="#" class="nav-link active">
			<i class="fas fa-user"></i> Profile
		</a>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link">
			<i class="fas fa-book"></i> Docs
		</a>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link">
			<i class="fas fa-cogs"></i> Settings
		</a>
	</li>
</ul>

Pills

Or create a pill style using .nav-pills instead. 


<ul class="nav nav-pills">
	<li class="nav-item">
		<a href="#" class="nav-link active">
			<i class="fas fa-user"></i> Profile
		</a>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link">
			<i class="fas fa-book"></i> Docs
		</a>
	</li>
	<li class="nav-item">
		<a href="#" class="nav-link">
			<i class="fas fa-cogs"></i> Settings
		</a>
	</li>
</ul>

Fill and justify

Force your .nav's contents to extend the full available width using modifier classes. .nav-fill fills all space available, but does not size items equally. Be sure to include .nav-item in addition to .nav-link when using anchor elements only, instead of lists to wrap the anchor elements like in the previous example. 


<nav class="nav nav-pills nav-fill">
	<a class="nav-item nav-link active" href="#">Active</a>
	<a class="nav-item nav-link" href="#">Link</a>
	<a class="nav-item nav-link" href="#">Link</a>
	<a class="nav-item nav-link disabled" href="#">Disabled</a>
</nav>

For equal-width elements, use .nav-justified. All horizontal space will be occupied, but unlike .nav-fill, every nav item will be the same width. 


<nav class="nav nav-pills nav-justified">
	<a class="nav-item nav-link active" href="#">Active</a>
	<a class="nav-item nav-link" href="#">Link</a>
	<a class="nav-item nav-link" href="#">Link</a>
	<a class="nav-item nav-link disabled" href="#">Disabled</a>
</nav>

With dropdowns

Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin. 


<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>

The same can be applied to pills. 


<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

Using the tabs JavaScript plugin you can extend navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.

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.

Also note that if you use a <nav>-based markup as in the examples below, you shouldn’t add role="tablist" directly to it, as it would override the element’s native role as navigation landmark.

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" with an href to the id of the tab pane.

Tab one
Tab two
Tab three

<nav>
  <div class="nav nav-tabs" id="tabs-1" role="tablist">
    <a class="nav-item nav-link active" id="tab-1-1-tab" data-toggle="tab" href="#tab-1-1" role="tab" aria-controls="tab-1-1" aria-selected="true">
    	<i class="fas fa-home"></i> Home
    </a>
    <a class="nav-item nav-link" id="tab-1-2-tab" data-toggle="tab" href="#tab-1-2" role="tab" aria-controls="tab-1-2" aria-selected="false">
    	<i class="fas fa-user"></i> Profile
    </a>
    <a class="nav-item nav-link" id="tab-1-3-tab" data-toggle="tab" href="#tab-1-3" role="tab" aria-controls="tab-1-3" aria-selected="false">
    	<i class="fas fa-phone"></i> Contact
    </a>
  </div>
</nav>

<div class="tab-content" id="tabs-1-content">
  <div class="tab-pane fade show active" id="tab-1-1" role="tabpanel" aria-labelledby="tab-1-1">Tab one</div>
  <div class="tab-pane fade" id="tab-1-2" role="tabpanel" aria-labelledby="tab-1-2">Tab two</div>
  <div class="tab-pane fade" id="tab-1-3" role="tabpanel" aria-labelledby="tab-1-3">Tab three</div>
</div>

This also works with pills.

Tab one
Tab two
Tab three

<nav>
  <div class="nav nav-pills" id="tabs-2" role="tablist">
    <a class="nav-item nav-link active" id="tab-2-1-tab" data-toggle="tab" href="#tab-2-1" role="tab" aria-controls="tab-2-1" aria-selected="true">
    	<i class="fas fa-home"></i> Home
    </a>
    <a class="nav-item nav-link" id="tab-2-2-tab" data-toggle="tab" href="#tab-2-2" role="tab" aria-controls="tab-2-2" aria-selected="false">
    	<i class="fas fa-user"></i> Profile
    </a>
    <a class="nav-item nav-link" id="tab-2-3-tab" data-toggle="tab" href="#tab-2-3" role="tab" aria-controls="tab-2-3" aria-selected="false">
    	<i class="fas fa-phone"></i> Contact
    </a>
  </div>
</nav>

<div class="tab-content" id="tabs-2-content">
  <div class="tab-pane fade show active" id="tab-2-1" role="tabpanel" aria-labelledby="tab-2-1">Tab one</div>
  <div class="tab-pane fade" id="tab-2-2" role="tabpanel" aria-labelledby="tab-2-2">Tab two</div>
  <div class="tab-pane fade" id="tab-2-3" role="tabpanel" aria-labelledby="tab-2-3">Tab three</div>
</div>

And with vertical pills.

Tab one
Tab two
Tab three

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="tabs-3" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="tab-3-1-tab" data-toggle="pill" href="#tab-3-1" role="tab" aria-controls="tab-3-1" aria-selected="true">
      	<i class="fas fa-home fa-2x"></i><br>Home
      </a>
      <a class="nav-link" id="tab-3-2-tab" data-toggle="pill" href="#tab-3-2" role="tab" aria-controls="tab-3-2" aria-selected="false">
      	<i class="fas fa-user fa-2x"></i><br>Profile
      </a>
      <a class="nav-link" id="tab-3-3-tab" data-toggle="pill" href="#tab-3-3" role="tab" aria-controls="tab-3-3" aria-selected="false">
      	<i class="fas fa-envelope fa-2x"></i><br>Messages
      </a>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content" id="tabs-3-content">
      <div class="tab-pane fade show active" id="tab-3-1" role="tabpanel" aria-labelledby="tab-3-1">Tab one</div>
      <div class="tab-pane fade" id="tab-3-2" role="tabpanel" aria-labelledby="tab-3-2">Tab two</div>
      <div class="tab-pane fade" id="tab-3-3" role="tabpanel" aria-labelledby="tab-3-3">Tab three</div>
    </div>
  </div>
</div>

Via JavaScript

Create tabbable tabs via JavaScript (each tab needs to be activated individually): 


$('#myTab a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
});

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" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

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.
Method Description
$().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).
$().tab('dispose') Destroys an element’s tab.

Events

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
});

Read more

Navbars Pagination