# Bootstrap 6 Tab > Turn a nav into a tabbable interface with the tab plugin: panes of local content that swap without leaving the page. The tab plugin turns a [nav](https://coreui.io/bootstrap/docs/components/nav/) into a tabbable interface. The nav carries the markup and the styling; this page covers the behavior the plugin adds on top of it. Include the plugin individually or through the compiled `coreui.js` file to extend navigational tabs and pills into tabbable panes of local content, even via dropdown menus. Dynamic tabbed interfaces, as described in the [WAI ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), 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). As a best practice, we recommend using `
...
...
...
...
``` ## With arbitrary markup To help fit your needs, this works with `
...
...
...
...
``` ### Via JavaScript Enable tabbable tabs via JavaScript (each tab needs to be activated individually): ```js const triggerTabList = document.querySelectorAll('#myTab button') triggerTabList.forEach(triggerEl => { const tabTrigger = new coreui.Tab(triggerEl) triggerEl.addEventListener('click', event => { event.preventDefault() tabTrigger.show() }) }) ``` You can activate individual tabs in several ways: ```js const triggerEl = document.querySelector('#myTab button[data-coreui-target="#profile"]') coreui.Tab.getInstance(triggerEl).show() // Select tab by name const triggerFirstTabEl = document.querySelector('#myTab li:first-child button') coreui.Tab.getInstance(triggerFirstTabEl).show() // Select first tab ``` ### Fade effect Every `.tab-pane` fades in as it becomes active — no class to add. The pane you leave goes at once, because two in-flow panes cannot cross-fade without one stacking under the other. Add `.tab-pane-instant` to a pane to switch its fade off, or retime it with `--cui-tab-pane-transition-duration` and `--cui-tab-pane-transition-timing`. ```html
...
...
``` ### Methods > #### Promises and transitions > > **Methods that show or hide a component return a promise.** The promise resolves when the transition ends, so `await` continues at the same moment a `shown.coreui.*` or `hidden.coreui.*` listener runs. The methods still return immediately and never block the caller. A call on a component that is already transitioning does nothing and resolves right away. > > [Refer to our JavaScript documentation for further details](https://coreui.io/bootstrap/docs/getting-started/javascript/#promises-and-transitions). #### constructor You can create a tab instance with the constructor, for example: ```js const cuiTab = new coreui.Tab('#myTab') ``` | Method | Description | | --- | --- | | `dispose` | Destroys an element's tab. | | `getInstance` | *Static* method which allows you to get the tab instance associated with a DOM element, you can use it like this: `coreui.Tab.getInstance(element)`. | | `getOrCreateInstance` | *Static* method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn't initialized You can use it like this: `coreui.Tab.getOrCreateInstance(element)`. | | `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 a promise that resolves after the tab pane is shown** (i.e. after the `shown.coreui.tab` event occurs). | ### 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 | | --- | --- | | `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. | | `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. | | `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. | ```js const tabEl = document.querySelector('button[data-coreui-toggle="tab"]') tabEl.addEventListener('shown.coreui.tab', event => { event.target // newly activated tab event.relatedTarget // previous active tab }) ```