The new version of CoreUI is available. Please check the latest version.

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 .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 .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="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active link</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="#" 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 .nav uses display: flex, the nav links function the same as nav items would, but without the additional markup.

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

Available styles

Adjust the style of .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 .justify-content-center:

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active link</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="#" tabindex="-1" aria-disabled="true">Disabled link</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 link</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="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  </li>
</ul>

Vertical

Stack your navigation by adjusting the flex item direction with the .flex-column utility. Want 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 link</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="#" tabindex="-1" aria-disabled="true">Disabled link</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 link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
</nav>

Tabs

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

<ul class="nav nav-tabs">
  <li class="nav-item">coreui.vaScript
Enable tabbable tabs coreui.vaScript (each tab needs to be activated individually):

<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"> <span class="kd">var</span> <span class="nx">triggerTabList</span> <span class="o">=</span> <span class="p">[].</span><span class="nx">slice</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s1">&#39;#myTab a&#39;</span><span class="p">))</span> <span class="nx">triggerTabList</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">triggerEl</span><span class="p">)</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">tabTrigger</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">coreui</span><span class="p">.</span><span class="nx">Tab</span><span class="p">(</span><span class="nx">triggerEl</span><span class="p">)</span>

<span class="nx">triggerEl</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">()</span> <span class="nx">tabTrigger</span><span class="p">.</span><span class="nx">show</span><span class="p">()</span> <span class="p">})</span> <span class="p">})</span> 
</code></pre></div>

You can activate individual tabs in several ways:

<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"> <span class="kd">var</span> <span class="nx">triggerEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;#myTab a[href=&#34;#profile&#34;]&#39;</span><span class="p">)</span> <span class="nx">coreui</span><span class="p">.</span><span class="nx">Tab</span><span class="p">.</span><span class="nx">getInstance</span><span class="p">(</span><span class="nx">triggerEl</span><span class="p">).</span><span class="nx">show</span><span class="p">()</span> <span class="c1">// Select tab by name
</span><span class="c1"></span>
<span class="kd">var</span> <span class="nx">triggerFirstTabEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;#myTab li:first-child a&#39;</span><span class="p">)</span> <span class="nx">coreui</span><span class="p">.</span><span class="nx">Tab</span><span class="p">.</span><span class="nx">getInstance</span><span class="p">(</span><span class="nx">triggerFirstTabEl</span><span class="p">).</span><span class="nx">show</span><span class="p">()</span> <span class="c1">// Select first tab 
</span></code></pre></div>

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="highlight"><pre class="chroma"><code class="language-html" data-lang="html">...
...
...
...</code></pre></div>
Methods
<div class="c-callout c-callout-danger c-elevation-1 cd-py-2">
<p>#### Asynchronous methods and transitions</p>

<p>All API methods are <strong>asynchronous</strong> and start a <strong>transition</strong>. They return to the caller as soon as the transition is started but <strong>before it ends</strong>. In addition, a method call on a <strong>transitioning component will be ignored</strong>.</p>

<p><a href="/docs/3.4/getting-started/javascript/">See our JavaScript documentation for more information</a>.</p>

</div>


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

<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html">Home
Profile
Messages
Settings
...
...
...
...
<span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span> <span class="kd">var</span> <span class="nx">firstTabEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;#myTab li:last-child a&#39;</span><span class="p">)</span> <span class="kd">var</span> <span class="nx">firstTab</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">coreui</span><span class="p">.</span><span class="nx">Tab</span><span class="p">(</span><span class="nx">firstTabEl</span><span class="p">)</span> <span class="nx">firstTab</span><span class="p">.</span><span class="nx">show</span><span class="p">()</span> <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span></code></pre></div>

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.coreui.tab event occurs).

<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"> <span class="kd">var</span> <span class="nx">someTabTriggerEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;#someTabTrigger&#39;</span><span class="p">)</span> <span class="kd">var</span> <span class="nx">tab</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">coreui</span><span class="p">.</span><span class="nx">Tab</span><span class="p">(</span><span class="nx">someTabTriggerEl</span><span class="p">)</span>

<span class="nx">tab</span><span class="p">.</span><span class="nx">show</span><span class="p">()</span> 
</code></pre></div>

dispose
Destroys an element's tab.

getInstance
Static method which allows you to get the tab instance associated with a DOM element

<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"> <span class="kd">var</span> <span class="nx">triggerEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;#trigger&#39;</span><span class="p">)</span> <span class="kd">var</span> <span class="nx">tab</span> <span class="o">=</span> <span class="nx">coreui</span><span class="p">.</span><span class="nx">Tab</span><span class="p">.</span><span class="nx">getInstance</span><span class="p">(</span><span class="nx">triggerEl</span><span class="p">)</span> <span class="c1">// Returns a Bootstrap tab instance 
</span></code></pre></div>

Events
When showing a new tab, the events fire in the following order:

hide.coreui.tab (on the current active tab)
show.coreui.tab (on the to-be-shown tab)
hidden.coreui.tab (on the previous active tab, the same one as for the hide.coreui.tab event)
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.
<div class="highlight"><pre class="chroma"><code class="language-js" data-lang="js"> <span class="kd">var</span> <span class="nx">tabEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;a[data-toggle=&#34;tab&#34;]&#39;</span><span class="p">)</span> <span class="nx">tabEl</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;shown.coreui.tab&#39;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span> <span class="c1">// newly activated tab e.relatedTarget // previous active tab }) 
</span></code></pre></div>

© 2019 GitHub, Inc.
Terms
Privacy
Security
Status
Help
Contact GitHub
Pricing
API
Training
Blog
About

    <a class="nav-link active" href="#">Active link</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="#" tabindex="-1" aria-disabled="true">Disabled link</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 link</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="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  </li>
</ul>

Fill and justify

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

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active link</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" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  </li>
</ul>

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

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

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

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active link</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" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  </li>
</ul>

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

<nav class="nav nav-pills nav-justified">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Much longer nav link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item 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="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="#">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" 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="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active link</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" 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="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  </li>
</ul>

Pills with dropdowns

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active link</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" 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="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  </li>
</ul>

Usage

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

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

Via JavaScript

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

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new coreui.Tab(triggerEl)

  triggerEl.addEventListener('click', function (e) {
    e.preventDefault()
    tabTrigger.show()
  })
})

You can activate individual tabs in several ways:

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
coreui.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
coreui.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

Via jQuery

Removed jQuery in favor of regular JavaScript

In version 3.x we removed jQuery in favor of regular JavaScript. CoreUI Library (@coreui/coreui) doesn’t need jQuery anymore. However, if you prefer to use jQuery over regular JavaScript, there is nothing to prevent.

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.

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

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="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <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="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.

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.

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.

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

The tabs plugin works with pills.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="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="nav-item">
    <a class="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="nav-item">
    <a class="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="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

And with vertical pills.

Home Profile Messages Settings

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.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="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="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="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="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="col-9">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
    </div>
  </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.

constructor

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" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </li>
</ul>

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

<script>
  var firstTabEl = document.querySelector('#myTab li:last-child a')
  var firstTab = new coreui.Tab(firstTabEl)

  firstTab.show()
</script>

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.coreui.tab event occurs).

  var someTabTriggerEl = document.querySelector('#someTabTrigger')
  var tab = new coreui.Tab(someTabTriggerEl)

  tab.show()

dispose

Destroys an element’s tab.

getInstance

Static method which allows you to get the tab instance associated with a DOM element

var triggerEl = document.querySelector('#trigger')
var tab = coreui.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

Events

When showing a new tab, the events fire in the following order:

hide.coreui.tab (on the current active tab)
show.coreui.tab (on the to-be-shown tab)
hidden.coreui.tab (on the previous active tab, the same one as for the hide.coreui.tab event)
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.

var tabEl = document.querySelector('a[data-toggle="tab"]')
tabEl.addEventListener('shown.coreui.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

jQuery behavior

Removed jQuery in favor of regular JavaScript

Methods

Asynchronous methods and transitions

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

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

hide.coreui.tab (on the current active tab)
show.coreui.tab (on the to-be-shown tab)
hidden.coreui.tab (on the previous active tab, the same one as for the hide.coreui.tab event)
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="tab"]').on('shown.coreui.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})