Tabs

Tabs

Content for first tab goes here.
Vanilla JS
React Angular Vue CodePen
Code:
<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<div data-tabs class="bx--tabs">
  <div class="bx--tabs-trigger" tabindex="0">
    <a href="javascript:void(0)" class="bx--tabs-trigger-text" tabindex="-1"></a>
    <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M5 6L0 1 0.7 0.3 5 4.6 9.3 0.3 10 1z"></path></svg>
  </div>
  <ul class="bx--tabs__nav bx--tabs__nav--hidden" role="tablist">
    <li
      class="bx--tabs__nav-item bx--tabs__nav-item--selected "
      data-target=".tab-1-default" role="tab"  aria-selected="true"  >
      <a tabindex="0" id="tab-link-1-default" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab"
        aria-controls="tab-panel-1-default">Tab label 1</a>
    </li>
    <li
      class="bx--tabs__nav-item "
      data-target=".tab-2-default" role="tab"  >
      <a tabindex="0" id="tab-link-2-default" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab"
        aria-controls="tab-panel-2-default">Tab label 2</a>
    </li>
    <li
      class="bx--tabs__nav-item "
      data-target=".tab-3-default" role="tab"  >
      <a tabindex="0" id="tab-link-3-default" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab"
        aria-controls="tab-panel-3-default">Tab label 3</a>
    </li>
    <li
      class="bx--tabs__nav-item  bx--tabs__nav-item--disabled "
      data-target=".tab-4-default" role="tab"  
      aria-disabled="true" >
      <a tabindex="0" id="tab-link-4-default" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab"
        aria-controls="tab-panel-4-default">Tab label 4</a>
    </li>
  </ul>
</div>
<!-- The markup below is for demonstration purposes only -->
<div class="bx--tab-content">
  <div id="tab-panel-1-default" class="tab-1-default" role="tabpanel" aria-labelledby="tab-link-1-default"
    aria-hidden="false" >
    <div>Content for first tab goes here.</div>
  </div>
  <div id="tab-panel-2-default" class="tab-2-default" role="tabpanel" aria-labelledby="tab-link-2-default"
    aria-hidden="true"  hidden>
    <div>Content for second tab goes here.</div>
  </div>
  <div id="tab-panel-3-default" class="tab-3-default" role="tabpanel" aria-labelledby="tab-link-3-default"
    aria-hidden="true"  hidden>
    <div>Content for third tab goes here.</div>
  </div>
  <div id="tab-panel-4-default" class="tab-4-default" role="tabpanel" aria-labelledby="tab-link-4-default"
    aria-hidden="true"  hidden>
    <div>Content for fourth tab goes here.</div>
  </div>
</div>

Documentation

SCSS

Modifiers

Modifiers are used with various classes for Tabs.

Name Description
.bx--tabs__nav--hidden Applies specific styles to hide the narrow tab menu options
.bx--tabs__nav-item--selected Applies specific styles to the currently selected tab item
.bx--tabs--light Selector for applying light dropdown styles when tabs are in mobile view

JavaScript

Getting component class reference

ES2015
import { Tab } from 'carbon-components';
With pre-build bundle (carbon-components.min.js)
var Tab = CarbonComponents.Tab;

Instantiating

// `#my-tabs` is an element with `[data-tabs]` attribute
Tabs.create(document.getElementById('my-tabs'));

Public Methods

Name Params Description
setActive item: HTMLElement, callback: Function Uses data-target attribute to show a content panel using the given CSS selector. Non-active targets will be hidden. You can also pass in an optional callback function, see FAQ in Content Switcher for details
release Deletes the instance and removes document event listeners
Example - Changing the active item
// `#my-tabs` is an element with `[data-tabs]` attribute
var tabsInstance = Tabs.create(document.getElementById('my-tabs'));
// `#my-tab-item-1` is one of the `<li>`s with `bx--tabs__nav-item` class
tabsInstance.setActive(document.getElementById('my-tab-item-1'));

Options

Option Default Selector Description
selectorInit [data-tabs] The CSS selector to find tab containers
selectorMenu .bx--tabs__nav The CSS selector to find the drop down menu used in narrow mode
selectorTrigger .bx--tabs-trigger The CSS selector to find the button to open the drop down menu used in narrow mode
selectorTriggerText .bx--tabs-trigger-text The CSS selector to find the element used in narrow mode showing the selected tab item
selectorButton .bx--tabs__nav-item The CSS selector to find tab containers
selectorButtonEnabled .bx--tabs__nav-item:not(.bx--tabs__nav-item--disabled) The CSS selector to find tab containers that are not disabled
selectorButtonSelected .bx--tabs__nav-item--selected The CSS selector to find the selected tab
selectorLink .bx--tabs__nav-link The CSS selector to find the links in tabs
classActive bx--tabs__nav-item--selected The CSS class for tab's selected state
classHidden bx--tabs__nav--hidden The CSS class for the drop down menu's hidden state used in narrow mode
classOpen bx--tabs-trigger--open The CSS class for the drop down menu motion on open and close
eventBeforeSelected tab-beingselected The name of the custom event fired before a tab is selected
eventAfterSelected tab-selected The name of the custom event fired after a tab is selected

Events

Event Name Description
tab-beingselected The name of the custom event fired before a tab is selected. Cancellation of this event stops selection of tab.
tab-selected The name of the custom event fired after a tab is selected
Example - Preventing a tab from being selected in a certain condition
document.addEventListener('tab-beingselected', function(evt) {
  if (!myApplication.shouldTabItemBeSelected(evt.target)) {
    evt.preventDefault();
  }
});
Example - Notifying events of all tab items being selected to an analytics library
document.addEventListener('tab-selected', function(evt) {
  myAnalyticsLibrary.send({
    action: 'Tab selected',
    id: evt.target.id,
  });
});
Edit this page on GitHub
Previous
Components: Structured list
Next
Tabs: Usage