# Navs

Documentation and examples for how to use Bootstrap’s included navigation components.

Bootstrap Navs documentation

## Vertical

Use `.flex-column` class.

                          <ul class="nav flex-column">
                            <li class="nav-item">
                              <a class="nav-link active" href="#0">Active</a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" href="#0">Link</a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" href="#0">Link</a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link disabled" href="#0">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="#0">Active</a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" href="#0">Link</a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" href="#0">Link</a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link disabled" href="#0">Disabled</a>
                            </li>
                          </ul>

## Classic

Take that same HTML, but use `.nav-classic` instead:

                          <ul class="nav nav-classic">
                            <li class="nav-item">
                              <a class="nav-link active" href="#0">Active</a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" href="#0">Link</a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" href="#0">Link</a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link disabled" href="#0">Disabled</a>
                            </li>
                          </ul>

## White style

                          <div class="bg-dark p-4">
                            <ul class="nav nav-white nav-pills">
                              <li class="nav-item">
                                <a class="nav-link active" href="#0">Active</a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" href="#0">Link</a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" href="#0">Link</a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link disabled" href="#0">Disabled</a>
                              </li>
                            </ul>
                          </div>

## Box style

                          <ul class="nav nav-box nav-pills">
                            <li class="nav-item">
                              <a class="nav-link active" href="#0">Active</a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" href="#0">Link</a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" href="#0">Link</a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link disabled" href="#0">Disabled</a>
                            </li>
                          </ul>

## Fill and justify

Use `.nav-fill` class.

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

## Tabs

Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabbed interface.

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.

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.

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. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

                          <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item" role="presentation">
                              <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
                            </li>
                            <li class="nav-item" role="presentation">
                              <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
                            </li>
                            <li class="nav-item" role="presentation">
                              <a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
                            </li>
                          </ul>
                          <div class="tab-content py-3" id="myTabContent">
                            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                              <p>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.</p>
                            </div>
                            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                              <p>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.</p>
                            </div>
                            <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                              <p>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. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
                            </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 bootstrap.Tab(triggerEl)

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

You can activate individual tabs in several ways:

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

                    var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
                    bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first 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>

## 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-bs-target` or, if using a link, an `href` attribute, targeting a container node in the DOM.

                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                      <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
                      </li>
                      <li class="nav-item" role="presentation">
                        <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
                      </li>
                      <li class="nav-item" role="presentation">
                        <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
                      </li>
                      <li class="nav-item" role="presentation">
                        <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
                      </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 bootstrap.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.bs.tab` event occurs).

                    var someTabTriggerEl = document.querySelector('#someTabTrigger')
                    var tab = new bootstrap.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 = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

##### Events

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

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

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