Tabs Component

Default Tabs

When a tab is selected, the aria-selected state of all tabs in the list must be updated in order for the CSS to reflect the change. Only one tab can be selected and in the tab order at any moment in time. Likewise, only one tabpanel can be visible at any time, and it must correspond to the currently selected tab.

Use child element modifier tabs__items--large to opt into larger font-size for tabs.

NOTE: JavaScript is required to handle tab selection state, panel visibility, focus management and arrow-key navigation. For detailed behaviour requirements, please visit the eBay MIND Pattern for Tabs .

<div class="tabs">
  <div class="tabs__items" role="tablist">
    <div
      aria-controls="default-tabpanel-1"
      aria-selected="true"
      class="tabs__item"
      id="default-tab-1"
      role="tab"
    >
      <span> Tab 1 </span>
    </div>
    <div
      aria-controls="default-tabpanel-2"
      aria-selected="false"
      class="tabs__item"
      id="default-tab-2"
      role="tab"
    >
      <span> Tab 2 </span>
    </div>
    <div
      aria-controls="default-tabpanel-3"
      aria-selected="false"
      class="tabs__item"
      id="default-tab-3"
      role="tab"
    >
      <span> Tab 3 </span>
    </div>
  </div>
  <div class="tabs__content">
    <div
      aria-labelledby="default-tab-1"
      class="tabs__panel"
      id="default-tabpanel-1"
      role="tabpanel"
    >
      <div class="tabs__cell">
        <h3>Panel 1 Content</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet
          assumenda culpa est nisi porro quae quidem ratione repellendus,
          temporibus. Assumenda atque dolor dolorem eligendi eveniet ipsam modi
          necessitatibus quos ut?
        </p>
      </div>
    </div>
    <div
      aria-labelledby="default-tab-2"
      class="tabs__panel"
      hidden
      id="default-tabpanel-2"
      role="tabpanel"
    >
      <div class="tabs__cell">
        <h3>Panel 2 Content</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet
          assumenda culpa est nisi porro quae quidem ratione repellendus,
          temporibus. Assumenda atque dolor dolorem eligendi eveniet ipsam modi
          necessitatibus quos ut?
        </p>
      </div>
    </div>
    <div
      aria-labelledby="default-tab-3"
      class="tabs__panel"
      hidden
      id="default-tabpanel-3"
      role="tabpanel"
    >
      <div class="tabs__cell">
        <h3>Panel 3 Content</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet
          assumenda culpa est nisi porro quae quidem ratione repellendus,
          temporibus. Assumenda atque dolor dolorem eligendi eveniet ipsam modi
          necessitatibus quos ut?
        </p>
      </div>
    </div>
  </div>
</div>

Fake Tabs

A fake tab looks like a normal tab, but is actually a hyperlink to a new page. Therefore a set of fake tabs behaves more like a simple navigational widget, rather than a dynamic user interface control.

A valid HREF attribute is required for all anchor tags. A value of "javascript" (or any such variant) is not a valid URL!

The aria-current attribute is used to programmatically denote the current page state and current link.

Use child element modifier fake-tabs__items--large to opt into larger font-size for fake tabs.

<div class="fake-tabs">
  <ul class="fake-tabs__items">
    <li class="fake-tabs__item">
      <a aria-current="page" href="https://www.ebay.com"> Page 1 </a>
    </li>
    <li class="fake-tabs__item">
      <a href="https://www.ebay.com"> Page 2 </a>
    </li>
    <li class="fake-tabs__item">
      <a href="https://www.ebay.com"> Page 3 </a>
    </li>
  </ul>
  <div class="fake-tabs__content">
    <div class="fake-tabs__cell">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda
        culpa est nisi porro quae quidem ratione repellendus, temporibus.
        Assumenda atque dolor dolorem eligendi eveniet ipsam modi necessitatibus
        quos ut?
      </p>
    </div>
  </div>
</div>