Tabs

Component status
Contribution
Last releasedOctober 8, 2019
Current version@spectrum-css/tabs@2.0.0

Variants#


Basic tabs#
Verified

<div class="spectrum-Tabs spectrum-Tabs--horizontal">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 1</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 2</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 3</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 4</label>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 27px; left: 0px;"></div>
</div>
Show markup

Tabs with icons#
Verified

<div class="spectrum-Tabs spectrum-Tabs--horizontal">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Folder" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 1</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
      <use xlink:href="#spectrum-icon-18-Image" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 2</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Filter">
      <use xlink:href="#spectrum-icon-18-Filter" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 3</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Comment">
      <use xlink:href="#spectrum-icon-18-Comment" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 4</label>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 55px; left: 0px;"></div>
</div>
Show markup

Quiet#
Verified

<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--quiet">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 1</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 2</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 3</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 4</label>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 27px; left: 0px;"></div>
</div>
Show markup

Quiet tabs with icons#
Verified

<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--quiet">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Folder" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 1</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
      <use xlink:href="#spectrum-icon-18-Image" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 2</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Filter">
      <use xlink:href="#spectrum-icon-18-Filter" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 3</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Comment">
      <use xlink:href="#spectrum-icon-18-Comment" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 4</label>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 55px; left: 0px;"></div>
</div>
Show markup

Compact#
Contribution

Compact tabs should never be used without the quiet variation. Please use Quiet Compact Tabs instead.

<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--compact">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 1</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 2</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 3</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 4</label>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 27px; left: 0px;"></div>
</div>
Show markup

Compact tabs with icons and text#
Contribution

<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--compact">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Folder" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 1</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
      <use xlink:href="#spectrum-icon-18-Image" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 2</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Filter">
      <use xlink:href="#spectrum-icon-18-Filter" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 3</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Comment">
      <use xlink:href="#spectrum-icon-18-Comment" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 4</label>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 55px; left: 0px;"></div>
</div>
Show markup

Compact tabs with icons#
Contribution

<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--compact">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Folder" />
    </svg>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
      <use xlink:href="#spectrum-icon-18-Image" />
    </svg>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Filter">
      <use xlink:href="#spectrum-icon-18-Filter" />
    </svg>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Comment">
      <use xlink:href="#spectrum-icon-18-Comment" />
    </svg>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 17px; left: 0px;"></div>
</div>
Show markup

Compact (quiet)#
Verified

<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--compact spectrum-Tabs--quiet">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 1</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 2</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 3</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 4</label>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 27px; left: 0px;"></div>
</div>
Show markup

Compact tabs with icons and text (quiet)#
Contribution

<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--compact spectrum-Tabs--quiet">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Folder" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 1</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
      <use xlink:href="#spectrum-icon-18-Image" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 2</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Filter">
      <use xlink:href="#spectrum-icon-18-Filter" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 3</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Comment">
      <use xlink:href="#spectrum-icon-18-Comment" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 4</label>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 55px; left: 0px;"></div>
</div>
Show markup

Compact tabs with icons only (quiet)#
Contribution

<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--compact spectrum-Tabs--quiet">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Folder" />
    </svg>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
      <use xlink:href="#spectrum-icon-18-Image" />
    </svg>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Filter">
      <use xlink:href="#spectrum-icon-18-Filter" />
    </svg>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Comment">
      <use xlink:href="#spectrum-icon-18-Comment" />
    </svg>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 17px; left: 0px;"></div>
</div>
Show markup

Vertical tabs#
Contribution

<div class="spectrum-Tabs spectrum-Tabs--vertical">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 1</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 2</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 3</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 4</label>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="height: 46px; top: 0px;"></div>
</div>
Show markup

Vertical tabs with icon and text#
Contribution

<div class="spectrum-Tabs spectrum-Tabs--vertical">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Folder" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 1</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
      <use xlink:href="#spectrum-icon-18-Image" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 2</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Filter">
      <use xlink:href="#spectrum-icon-18-Filter" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 3</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Comment">
      <use xlink:href="#spectrum-icon-18-Comment" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 4</label>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="height: 46px; top: 0px;"></div>
</div>
Show markup

Compact vertical tabs#
Contribution

<div class="spectrum-Tabs spectrum-Tabs--vertical spectrum-Tabs--compact">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 1</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 2</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 3</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 4</label>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="height: 32px; top: 0px;"></div>
</div>
Show markup

Compact vertical tabs with icon and text#
Contribution

<div class="spectrum-Tabs spectrum-Tabs--vertical spectrum-Tabs--compact">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Folder" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 1</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
      <use xlink:href="#spectrum-icon-18-Image" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 2</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Filter">
      <use xlink:href="#spectrum-icon-18-Filter" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 3</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Comment">
      <use xlink:href="#spectrum-icon-18-Comment" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 4</label>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="height: 32px; top: 0px;"></div>
</div>
Show markup

Basic tabs with overflow#
Verified

Closed

Open

  • Tab 1
  • Tab 2
  • Tab 3
  • Tab 4
<h4>Closed</h4>
<div class="spectrum-Tabs spectrum-Tabs--horizontal" style="width: 409px">
    <div class="spectrum-Dropdown spectrum-Dropdown--quiet">
      <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Dropdown-trigger is-selected" aria-haspopup="true">
        <span class="spectrum-Dropdown-label">Tab 1</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
        </svg>
      </button>
    </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 50px; left: 8px;"></div>
</div>

<h4 style="margin-top: 62px;">Open</h4>
<div class="spectrum-Tabs spectrum-Tabs--horizontal" style="width: 409px">
    <div class="spectrum-Dropdown spectrum-Dropdown--quiet is-open">
      <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Dropdown-trigger is-selected" aria-haspopup="true">
        <span class="spectrum-Dropdown-label">Tab 1</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
        </svg>
      </button>
    </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 50px; left: 8px;"></div>
</div>
<div class="spectrum-Popover spectrum-Popover--bottom spectrum-Dropdown-popover spectrum-Dropdown-popover--quiet is-open" style="margin-left: -5px; margin-top: -9px;">
  <ul class="spectrum-Menu" role="listbox">
    <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Tab 1</span>
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </svg>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Tab 2</span>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Tab 3</span>
    </li>
    <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
      <span class="spectrum-Menu-itemLabel">Tab 4</span>
    </li>
  </ul>
</div>

<div class="dummy-spacing"></div>
Show markup

Compact tabs with overflow#
Verified

Closed

Open


  • Tab 1
  • Tab 2
  • Tab 3
  • Tab 4
<h4>Closed</h4>
<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--quiet spectrum-Tabs--compact" style="width: 409px">
    <div class="spectrum-Dropdown spectrum-Dropdown--quiet">
      <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Dropdown-trigger is-selected" aria-haspopup="true">
        <span class="spectrum-Dropdown-label">Tab 1</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
        </svg>
      </button>
    </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 50px; left: 8px;"></div>
</div>

<h4 style="margin-top: 62px;">Open</h4>
<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--quiet spectrum-Tabs--compact" style="width: 409px">
    <div class="spectrum-Dropdown spectrum-Dropdown--quiet is-open">
      <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Dropdown-trigger is-selected" aria-haspopup="true">
        <span class="spectrum-Dropdown-label">Tab 1</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
        </svg>
      </button>
    </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 50px; left: 8px;"></div>
</div>
<br>
<div class="spectrum-Popover spectrum-Popover--bottom spectrum-Dropdown-popover spectrum-Dropdown-popover--quiet is-open" style="margin-left: -5px; margin-top: -9px;">
  <ul class="spectrum-Menu" role="listbox">
    <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Tab 1</span>
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </svg>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Tab 2</span>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Tab 3</span>
    </li>
    <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
      <span class="spectrum-Menu-itemLabel">Tab 4</span>
    </li>
  </ul>
</div>

<div class="dummy-spacing"></div>
Show markup