• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Tabs

Component status
Contribution
Current version@spectrum-css/tabs@4.1.4
ReleasedMarch 7, 2024
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Variants

Sizing
Contribution

S

Tab 1
Tab 2
Tab 3
Tab 4

M (default)

Tab 1
Tab 2
Tab 3
Tab 4

L

Tab 1
Tab 2
Tab 3
Tab 4

XL

Tab 1
Tab 2
Tab 3
Tab 4
Show markup
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
<div class="spectrum-Tabs spectrum-Tabs--sizeS spectrum-Tabs--horizontal">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <span class="spectrum-Tabs-itemLabel">Tab 1</span>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <span class="spectrum-Tabs-itemLabel">Tab 2</span>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <span class="spectrum-Tabs-itemLabel">Tab 3</span>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <span class="spectrum-Tabs-itemLabel">Tab 4</span>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 24px; left: 0px;"></div>
</div>
<h4 style="margin-top: 62px;" class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>
<div class="spectrum-Tabs spectrum-Tabs--sizeM spectrum-Tabs--horizontal">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <span class="spectrum-Tabs-itemLabel">Tab 1</span>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <span class="spectrum-Tabs-itemLabel">Tab 2</span>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <span class="spectrum-Tabs-itemLabel">Tab 3</span>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <span class="spectrum-Tabs-itemLabel">Tab 4</span>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 28px; left: 0px;"></div>
</div>
<h4 style="margin-top: 62px;" class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
<div class="spectrum-Tabs spectrum-Tabs--sizeL spectrum-Tabs--horizontal">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <span class="spectrum-Tabs-itemLabel">Tab 1</span>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <span class="spectrum-Tabs-itemLabel">Tab 2</span>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <span class="spectrum-Tabs-itemLabel">Tab 3</span>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <span class="spectrum-Tabs-itemLabel">Tab 4</span>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 32px; left: 0px;"></div>
</div>
<h4 style="margin-top: 62px;" class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
<div class="spectrum-Tabs spectrum-Tabs--sizeXL spectrum-Tabs--horizontal">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <span class="spectrum-Tabs-itemLabel">Tab 1</span>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <span class="spectrum-Tabs-itemLabel">Tab 2</span>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <span class="spectrum-Tabs-itemLabel">Tab 3</span>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <span class="spectrum-Tabs-itemLabel">Tab 4</span>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 36px; left: 0px;"></div>
</div>

Basic tabs
Contribution

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

Tabs with icons
Contribution

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

Disabled
Contribution

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

Quiet
Contribution

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

Quiet and emphasized
Contribution

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

Quiet tabs with icons
Contribution

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

Emphasized tabs
Contribution

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

Emphasized tabs with icons
Contribution

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

Compact (quiet)
Contribution

Compact tabs should never be used without the quiet variation.

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

Compact emphasized (quiet)
Contribution

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

Compact tabs with icons and text (quiet)
Contribution

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

Compact, emphasized tabs with icons and text (quiet)
Contribution

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

Compact tabs with icons only (quiet)
Contribution

Show markup
<div class="spectrum-Tabs spectrum-Tabs--sizeM spectrum-Tabs--horizontal spectrum-Tabs--compact spectrum-Tabs--quiet">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" 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--sizeM" 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--sizeM" 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--sizeM" focusable="false" aria-hidden="true" aria-label="Comment">
      <use xlink:href="#spectrum-icon-18-Document" />
    </svg>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 17px; left: 0px;"></div>
</div>

Compact, emphasized tabs with icons only (quiet)
Contribution

Show markup
<div class="spectrum-Tabs spectrum-Tabs--sizeM spectrum-Tabs--horizontal spectrum-Tabs--compact spectrum-Tabs--quiet spectrum-Tabs--emphasized">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeM" 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--sizeM" 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--sizeM" 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--sizeM" focusable="false" aria-hidden="true" aria-label="Comment">
      <use xlink:href="#spectrum-icon-18-Document" />
    </svg>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 17px; left: 0px;"></div>
</div>

Vertical tabs
Contribution

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

Vertical Right tabs
Contribution

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

Vertical, emphasized tabs
Contribution

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

Vertical tabs with icon and text
Contribution

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

Vertical, emphasized tabs with icon and text
Contribution

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

Compact vertical tabs
Contribution

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

Compact, emphasized vertical tabs
Contribution

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

Compact vertical tabs with icon and text
Contribution

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

Compact, emphasized vertical tabs with icon and text
Contribution

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

Basic tabs with overflow
Contribution

Closed

Open

  • Tab 1
  • Tab 2
  • Tab 3
  • Tab 4
Show markup
<h4>Closed</h4>
<div class="spectrum-Tabs spectrum-Tabs--sizeM spectrum-Tabs--horizontal" style="width: 409px">
  <button class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet" aria-haspopup="true">
    <span class="spectrum-Picker-label">Tab 1</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Chevron100" />
    </svg>
  </button>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 50px; left: 0;"></div>
</div>

<h4 style="margin-top: 62px;">Open</h4>
<div class="spectrum-Tabs spectrum-Tabs--sizeM spectrum-Tabs--horizontal" style="width: 409px">
  <button class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet is-open" aria-haspopup="true">
    <span class="spectrum-Picker-label">Tab 1</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Chevron100" />
    </svg>
  </button>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 50px; left: 0;"></div>
</div>
<div class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover spectrum-Picker-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-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Checkmark100" />
      </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>

Compact tabs with overflow
Contribution

Closed

Open


  • Tab 1
  • Tab 2
  • Tab 3
  • Tab 4
Show markup
<h4>Closed</h4>
<div class="spectrum-Tabs spectrum-Tabs--sizeM spectrum-Tabs--horizontal spectrum-Tabs--quiet spectrum-Tabs--compact" style="width: 409px">
    <button class="spectrum-Picker  spectrum-Picker--sizeM spectrum-Picker--quiet is-open" aria-haspopup="true">
      <span class="spectrum-Picker-label">Tab 1</span>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </button>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 50px; left: 0;"></div>
</div>

<h4 style="margin-top: 62px;">Open</h4>
<div class="spectrum-Tabs spectrum-Tabs--sizeM spectrum-Tabs--horizontal spectrum-Tabs--quiet spectrum-Tabs--compact" style="width: 409px">
    <button class="spectrum-Picker  spectrum-Picker--sizeM spectrum-Picker--quiet is-open" aria-haspopup="true">
      <span class="spectrum-Picker-label">Tab 1</span>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </button>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 50px; left: 0;"></div>
</div>
<br>
<div class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover spectrum-Picker-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-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Checkmark100" />
      </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>

Tabs with anchors
Contribution

Tab 1 Tab 2 Tab 3 Tab 4
Show markup
<div class="spectrum-Tabs spectrum-Tabs--sizeM spectrum-Tabs--horizontal">
  <a href="#1" class="spectrum-Tabs-item is-selected">
    <span class="spectrum-Tabs-itemLabel">Tab 1</span>
  </a>
  <a href="#2" class="spectrum-Tabs-item">
    <span class="spectrum-Tabs-itemLabel">Tab 2</span>
  </a>
  <a href="#3" class="spectrum-Tabs-item">
    <span class="spectrum-Tabs-itemLabel">Tab 3</span>
  </a>
  <a href="#4" class="spectrum-Tabs-item">
    <span class="spectrum-Tabs-itemLabel">Tab 4</span>
  </a>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 28px; left: 0;"></div>
</div>

Migration Guide

T-shirt sizing

Tabs now support t-shirt sizing and require that you specify the size by adding a .spectrum-Tabs--size* class.

Change workflow icon size to medium

If you use a workflow icon with tab items, please replace .spectrum-Icon--sizeS with .spectrum-Icon--sizeM.

Compact Tabs

Compact tabs should not be used without .spectrum-Tabs--quiet.