core-logo

Bootstrap navs

Bootstrap Navs component allows to create simple navigation. Learn how to use Bootstrap nav to quickly and easily create elegant and flexible navs.

On this page:



Base nav

The base .c-nav component is made with flexbox and implements a strong grounds for building all kinds of navigation components. It incorporates some style overrides, some link padding for larger hit areas, and basic disabled styling.

The base .c-nav component does not incorporate any .active state. The examples below include the class, principally to demonstrate that this unique class does not trigger any individual styling.
<ul class="c-nav">
  <li class="c-nav-item">
    <a class="c-nav-link active" href="#">Active link</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link" href="#">Link</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link" href="#">Link</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  </li>
</ul>

Classes are used throughout, so your markup can be super flexible. Add <ul>s like above, or roll your own with say a <nav> element. Because the .c-nav uses display: flex, the nav links function the same as nav items would, but without the additional markup.

<nav class="c-nav">
  <a class="c-nav-link active" href="#">Active link</a>
  <a class="c-nav-link" href="#">Link</a>
  <a class="c-nav-link" href="#">Link</a>
  <a class="c-nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
</nav>

Available styles

Adjust the style of .c-navs component with Bootstrap’s css classes and utilities. Combine and match as required, or build your own.

Horizontal alignment

Modify the horizontal alignment of your nav using flexbox utilities. By default, navs are left-aligned, but you can quickly change them to right or center aligned.

Centered with .c-justify-content-center:

<ul class="c-nav c-justify-content-center">
  <li class="c-nav-item">
    <a class="c-nav-link active" href="#">Active link</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link" href="#">Link</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link" href="#">Link</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  </li>
</ul>

Right-aligned with .c-justify-content-end:

<ul class="c-nav c-justify-content-end">
  <li class="c-nav-item">
    <a class="c-nav-link active" href="#">Active link</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link" href="#">Link</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link" href="#">Link</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  </li>
</ul>

Vertical

Stack your navigation by adjusting the flex item direction with the .c-flex-column utility. Want to stack them on some viewports but not others? Use the responsive versions (e.g., .c-flex-sm-column).

<ul class="c-nav c-flex-column">
  <li class="c-nav-item">
    <a class="c-nav-link active" href="#">Active link</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link" href="#">Link</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link" href="#">Link</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  </li>
</ul>

As always, vertical navigation is possible without <ul>s, too.

<nav class="c-nav c-flex-column">
  <a class="c-nav-link active" href="#">Active link</a>
  <a class="c-nav-link" href="#">Link</a>
  <a class="c-nav-link" href="#">Link</a>
  <a class="c-nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
</nav>

Tabs

Gets the primary nav from above and appends the .c-nav-tabs class to create a tabbed interface. Use them to build tabbable areas with our tab JavaScript plugin.

<ul class="c-nav c-nav-tabs">
  <li class="c-nav-item">
    <a class="c-nav-link active" href="#">Active link</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link" href="#">Link</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link" href="#">Link</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  </li>
</ul>

Pills

Take that same HTML, but use .c-nav-pills instead:

<ul class="c-nav c-nav-pills">
  <li class="c-nav-item">
    <a class="c-nav-link active" href="#">Active link</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link" href="#">Link</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link" href="#">Link</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  </li>
</ul>

Fill and justify

Force your .c-nav’s contents to reach the full available width one of two modifier classes. To proportionately fill all free space with your .c-nav-items, use .c-nav-fill. See that all horizontal space is filled, but not every nav item has the equal width.

<ul class="c-nav c-nav-pills c-nav-fill">
  <li class="c-nav-item">
    <a class="c-nav-link active" href="#">Active link</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link" href="#">Link</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  </li>
</ul>

When using a <nav>-based navigation, be certain to add .c-nav-item on the anchors.

<nav class="c-nav c-nav-pills c-nav-fill">
  <a class="c-nav-item c-nav-link active" href="#">Active</a>
  <a class="c-nav-item c-nav-link" href="#">Much longer nav link</a>
  <a class="c-nav-item c-nav-link" href="#">Link</a>
  <a class="c-nav-item c-nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
</nav>

For same width elements, use .c-nav-justified. Nav links will fill all horizontal space but unlike the .c-nav-fill above, each nav item will have the same width.

<ul class="c-nav c-nav-pills c-nav-justified">
  <li class="c-nav-item">
    <a class="c-nav-link active" href="#">Active link</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link" href="#">Link</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  </li>
</ul>

Alike to the .c-nav-fill example using a <nav>-based navigation, be certain to include .c-nav-item on the anchors.

<nav class="c-nav c-nav-pills c-nav-justified">
  <a class="c-nav-item c-nav-link active" href="#">Active</a>
  <a class="c-nav-item c-nav-link" href="#">Much longer nav link</a>
  <a class="c-nav-item c-nav-link" href="#">Link</a>
  <a class="c-nav-item c-nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
</nav>

Working with flex utilities

If you require responsive nav variations, you shoul consider using a range of flexbox utilities. While more verbose, those utilities offer excellent customization across responsive breakpoints. In the following example, our nav will be stacked on the lowest breakpoint, then change to a horizontal layout that fills the available width starting from the small breakpoint.

<nav class="c-nav c-nav-pills c-flex-column c-flex-sm-row">
  <a class="c-flex-sm-fill c-text-sm-center c-nav-link active" href="#">Active</a>
  <a class="c-flex-sm-fill c-text-sm-center c-nav-link" href="#">Longer nav link</a>
  <a class="c-flex-sm-fill c-text-sm-center c-nav-link" href="#">Link</a>
  <a class="c-flex-sm-fill c-text-sm-center c-nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
</nav>

Regarding accessibility

If you’re using navs to implement a navigation bar, be certain to add a role="navigation" to the parent container of the <ul>, or wrap a <nav> element around the full navigation. Don’t attach the role to the <ul> itself, as this would prevent it from being declared as an actual list by assistive technologies.

Using dropdowns

Add dropdown menus with some HTML and the dropdowns JavaScript plugin.

Tabs with dropdowns

<ul class="c-nav c-nav-tabs">
  <li class="c-nav-item">
    <a class="c-nav-link active" href="#">Active link</a>
  </li>
  <li class="c-nav-item c-dropdown">
    <a class="c-nav-link c-dropdown-toggle" data-toggle="c-dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="c-dropdown-menu">
      <a class="c-dropdown-item" href="#">Action</a>
      <a class="c-dropdown-item" href="#">Another action</a>
      <a class="c-dropdown-item" href="#">Something else here</a>
      <div class="c-dropdown-divider"></div>
      <a class="c-dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link" href="#">Link</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  </li>
</ul>

Pills with dropdowns

<ul class="c-nav c-nav-pills">
  <li class="c-nav-item">
    <a class="c-nav-link active" href="#">Active link</a>
  </li>
  <li class="c-nav-item c-dropdown">
    <a class="c-nav-link c-dropdown-toggle" data-toggle="c-dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="c-dropdown-menu">
      <a class="c-dropdown-item" href="#">Action</a>
      <a class="c-dropdown-item" href="#">Another action</a>
      <a class="c-dropdown-item" href="#">Something else here</a>
      <div class="c-dropdown-divider"></div>
      <a class="c-dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link" href="#">Link</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  </li>
</ul>

JavaScript behavior

Use the tab JavaScript plugin—include it individually or through the compiled coreui.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.

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.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

<ul class="c-nav c-nav-tabs" id="myTab" role="tablist">
  <li class="c-nav-item">
    <a class="c-nav-link active" id="home-tab" data-toggle="c-tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link" id="profile-tab" data-toggle="c-tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link" id="contact-tab" data-toggle="c-tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="c-tab-content" id="myTabContent">
  <div class="c-tab-pane c-fade c-show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="c-tab-pane c-fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="c-tab-pane c-fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

To help fit your needs, this works with <ul>-based markup, as shown above, or with any arbitrary “roll your own” markup. Note that if you’re using <nav>, you shouldn’t add role="tablist" directly to it, as this would override the element’s natural role as a navigation landmark. Instead, switch to an alternative element (in the example below, a simple <div>) and wrap the <nav> around it.

<nav>
  <div class="c-nav c-nav-tabs" id="nav-tab" role="tablist">
    <a class="c-nav-item c-nav-link active" id="nav-home-tab" data-toggle="c-tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="c-nav-item c-nav-link" id="nav-profile-tab" data-toggle="c-tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="c-nav-item c-nav-link" id="nav-contact-tab" data-toggle="c-tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </div>
</nav>
<div class="c-tab-content" id="nav-tabContent">
  <div class="c-tab-pane c-fade c-show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="c-tab-pane c-fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="c-tab-pane c-fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

The tabs plugin works with pills.

In rutrum ante tincidunt, venenatis lorem eget, tristique eros. Phasellus lacinia, lorem at elementum pulvinar, urna justo commodo ipsum, quis lacinia felis lectus at ligula. Phasellus volutpat tortor in dolor convallis, sit amet dignissim leo feugiat. Curabitur suscipit sit amet felis eu gravida. Aliquam eget ullamcorper erat, in condimentum dolor. Suspendisse at sem sed ligula tincidunt mattis. Aenean mattis, mauris non suscipit commodo, orci nulla fermentum nisi, id bibendum orci magna ac metus. Morbi eget justo vitae arcu maximus fringilla sit amet eget dui. Nulla pharetra dolor id lorem egestas, et venenatis diam maximus. Nullam facilisis ac magna finibus dictum. Sed varius sit amet diam nec ultrices.

Suspendisse finibus ullamcorper metus, vel bibendum libero rhoncus a. Sed quam purus, imperdiet dapibus eleifend et, vulputate ac augue. Aenean eu faucibus urna, eget auctor orci. Curabitur mollis suscipit quam. Mauris sit amet velit eu mi vulputate eleifend. Ut vitae tortor scelerisque, fermentum dolor a, efficitur nunc. Aliquam aliquam molestie justo lobortis congue.

Praesent imperdiet, nulla sit amet vehicula volutpat, dolor velit aliquet mauris, a placerat orci urna vitae tellus. In hac habitasse platea dictumst. Donec ut elit eu urna tristique pellentesque. Maecenas dignissim iaculis scelerisque. Aenean ligula neque, efficitur sed elementum id, posuere eget lectus. Sed tristique sollicitudin arcu at interdum. Donec eget gravida nisi, id mollis nibh. Aliquam id accumsan quam. Praesent at suscipit magna. Sed porttitor tincidunt congue. Fusce dignissim dapibus consectetur. Ut bibendum finibus sem eu sodales. Nullam porta nisi lacus, at mollis arcu malesuada at.

<ul class="c-nav c-nav-pills c-mb-3" id="pills-tab" role="tablist">
  <li class="c-nav-item">
    <a class="c-nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="c-tab-content" id="pills-tabContent">
  <div class="c-tab-pane c-fade c-show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  <div class="c-tab-pane c-fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="c-tab-pane c-fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

And with vertical pills.

Praesent imperdiet, nulla sit amet vehicula volutpat, dolor velit aliquet mauris, a placerat orci urna vitae tellus. In hac habitasse platea dictumst. Donec ut elit eu urna tristique pellentesque. Maecenas dignissim iaculis scelerisque. Aenean ligula neque, efficitur sed elementum id, posuere eget lectus. Sed tristique sollicitudin arcu at interdum. Donec eget gravida nisi, id mollis nibh. Aliquam id accumsan quam. Praesent at suscipit magna. Sed porttitor tincidunt congue. Fusce dignissim dapibus consectetur. Ut bibendum finibus sem eu sodales. Nullam porta nisi lacus, at mollis arcu malesuada at.

Suspendisse finibus ullamcorper metus, vel bibendum libero rhoncus a. Sed quam purus, imperdiet dapibus eleifend et, vulputate ac augue. Aenean eu faucibus urna, eget auctor orci. Curabitur mollis suscipit quam. Mauris sit amet velit eu mi vulputate eleifend. Ut vitae tortor scelerisque, fermentum dolor a, efficitur nunc. Aliquam aliquam molestie justo lobortis congue.

Fusce consequat, purus at luctus pulvinar, sapien libero scelerisque neque, sed bibendum ex dui at felis. Integer sed imperdiet nibh, non eleifend lectus. Sed interdum, tortor et rutrum elementum, nisi risus venenatis risus, eget dictum ligula lacus et magna. Nullam pharetra enim quis velit pellentesque euismod. Integer nec neque massa. Maecenas sollicitudin id justo id varius. Maecenas vel nisl eget velit aliquam facilisis. Aenean luctus placerat ornare. Cras congue dolor et enim molestie rhoncus. Proin volutpat, augue eget luctus scelerisque, orci nisi mollis eros, ut volutpat ipsum justo ac tortor.

In rutrum ante tincidunt, venenatis lorem eget, tristique eros. Phasellus lacinia, lorem at elementum pulvinar, urna justo commodo ipsum, quis lacinia felis lectus at ligula. Phasellus volutpat tortor in dolor convallis, sit amet dignissim leo feugiat. Curabitur suscipit sit amet felis eu gravida. Aliquam eget ullamcorper erat, in condimentum dolor. Suspendisse at sem sed ligula tincidunt mattis. Aenean mattis, mauris non suscipit commodo, orci nulla fermentum nisi, id bibendum orci magna ac metus.

<div class="c-row">
  <div class="c-col-3">
    <div class="c-nav c-flex-column c-nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="c-nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="c-nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="c-nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="c-nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </div>
  </div>
  <div class="c-col-9">
    <div class="c-tab-content" id="v-pills-tabContent">
      <div class="c-tab-pane c-fade c-show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
      <div class="c-tab-pane c-fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
      <div class="c-tab-pane c-fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
      <div class="c-tab-pane c-fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
    </div>
  </div>
</div>

Using data attributes

You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="c-tab" or data-toggle="c-pill" on an element. Use these data attributes on .c-nav-tabs or .c-nav-pills.

<!-- Nav tabs -->
<ul class="c-nav c-nav-tabs" id="myTab" role="tablist">
  <li class="c-nav-item">
    <a class="c-nav-link active" id="home-tab" data-toggle="c-tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link" id="profile-tab" data-toggle="c-tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link" id="messages-tab" data-toggle="c-tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link" id="settings-tab" data-toggle="c-tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="c-tab-content">
  <div class="c-tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="c-tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="c-tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="c-tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

Via JavaScript (jQuery)

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 .c-fade to each .c-tab-pane. The first tab pane must also have .c-show to make the initial content visible.

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

See our JavaScript documentation for more information.

$().tab

Activates a tab element and content container. The tab should have either a data-target or an href targeting a container node in the DOM.

<ul class="c-nav c-nav-tabs" id="myTab" role="tablist">
  <li class="c-nav-item">
    <a class="c-nav-link active" id="home-tab" data-toggle="c-tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link" id="profile-tab" data-toggle="c-tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link" id="messages-tab" data-toggle="c-tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="c-nav-item">
    <a class="c-nav-link" id="settings-tab" data-toggle="c-tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </li>
</ul>

<div class="c-tab-content">
  <div class="c-tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="c-tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="c-tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="c-tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

<script>
  $(function () {
    $('#myTab li:last-child a').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 been shown (i.e., before the shown.coreui.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:

  1. hide.coreui.tab (on the current active tab)
  2. show.coreui.tab (on the to-be-shown tab)
  3. hidden.coreui.tab (on the previous active tab, the same one as for the hide.coreui.tab event)
  4. shown.coreui.tab (on the newly-active just-shown tab, the same one as for the show.coreui.tab event)

If no tab was already active, then the hide.coreui.tab and hidden.coreui.tab events will not be fired.

Event Type Description
show.coreui.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.coreui.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.coreui.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.coreui.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="c-tab"]').on('shown.coreui.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})