Tabs

Tabs organize groups of related content that are at the same level of hierarchy.

Media gallery screen with tabs labeled 'Video', 'Photos', and 'Audio'.

  1. Primary tabs
  2. Secondary tabs

View interactive demo inline.

Open interactive demo in new tab.

Tabs contain multiple primary or secondary tab children. Use the same type of tab in a tab bar.

<md-tabs>
  <md-primary-tab>Video</md-primary-tab>
  <md-primary-tab>Photos</md-primary-tab>
  <md-primary-tab>Audio</md-primary-tab>
</md-tabs>

<md-tabs>
  <md-secondary-tab>Birds</md-secondary-tab>
  <md-secondary-tab>Cats</md-secondary-tab>
  <md-secondary-tab>Dogs</md-secondary-tab>
</md-tabs>

Add an active attribute to change which tab is selected.

<md-tabs>
  <md-primary-tab>Video</md-primary-tab>
  <md-primary-tab active>Photos</md-primary-tab>
  <md-primary-tab>Audio</md-primary-tab>
</md-tabs>

To observe changes to tab selections, add an event listener to <md-tabs>, listening for the change event.

tabs.addEventListener('change', (event: Event) => {
  if (event.target.activeTabIndex === 2) {
    // ... perform logic only if index of selected item is 2.
  }
});

Tabs may optionally show an icon.

Icons communicate the type of content within a tab. Icons should be simple and recognizable.

<md-tabs>
  <md-primary-tab>
    <md-icon slot="icon">piano</md-icon>
    Keyboard
  </md-primary-tab>
  <md-primary-tab>
    <md-icon slot="icon">tune</md-icon>
    Guitar
  </md-primary-tab>
</md-tabs>

Tabs may optionally show icons without a label.

<md-tabs>
  <md-primary-tab>
    <md-icon slot="icon">piano</md-icon>
  </md-primary-tab>
  <md-primary-tab>
    <md-icon slot="icon">tune</md-icon>
  </md-primary-tab>
</md-tabs>

Primary tabs are placed at the top of the content pane under a top app bar. They display the main content destinations.

<md-tabs>
  <md-primary-tab>
    <md-icon slot="icon">piano</md-icon>
    Keyboard
  </md-primary-tab>
  <md-primary-tab>
    <md-icon slot="icon">tune</md-icon>
    Guitar
  </md-primary-tab>
</md-tabs>

Primary tabs can show their icons inline, like secondary tabs.

<md-tabs>
  <md-primary-tab inline-icon>
    <md-icon slot="icon">piano</md-icon>
    Keyboard
  </md-primary-tab>
  <md-primary-tab inline-icon>
    <md-icon slot="icon">tune</md-icon>
    Guitar
  </md-primary-tab>
</md-tabs>

Secondary tabs are used within a content area to further separate related content and establish hierarchy.

<md-tabs>
  <md-secondary-tab>
    <md-icon slot="icon">flight</md-icon>
    Travel
  </md-secondary-tab>
  <md-secondary-tab>
    <md-icon slot="icon">hotel</md-icon>
    Hotel
  </md-secondary-tab>
  <md-secondary-tab>
    <md-icon slot="icon">hiking</md-icon>
    Activities
  </md-secondary-tab>
</md-tabs>

Add an aria-label attribute to <md-tabs> and any individual tab whose label needs to be more descriptive, such as icon-only tabs.

<md-tabs aria-label="Content to view">
  <md-primary-tab aria-label="Photos">
    <md-icon slot="icon">photo</md-icon>
  </md-primary-tab>
  <md-primary-tab aria-label="Videos">
    <md-icon slot="icon">videocam</md-icon>
  </md-primary-tab>
  <md-primary-tab aria-label="Music">
    <md-icon slot="icon">audiotrack</md-icon>
  </md-primary-tab>
</md-tabs>

Every tab must reference a role="tabpanel" element with aria-controls. Tab panels must be labelled with aria-label or aria-labelledby.

It's common to reference the panel's tab with aria-labelledby.

<md-tabs aria-label="Content to view">
  <md-primary-tab id="photos-tab" aria-controls="photos-panel">
    Photos
  </md-primary-tab>
  <md-primary-tab id="videos-tab" aria-controls="videos-panel">
    Videos
  </md-primary-tab>
  <md-primary-tab id="music-tab" aria-controls="music-panel">
    Music
  </md-primary-tab>
</md-tabs>

<div id="photos-panel" role="tabpanel" aria-labelledby="photos-tab">
  ...
</div>
<div id="videos-panel" role="tabpanel" aria-labelledby="videos-tab" hidden>
  ...
</div>
<div id="music-panel" role="tabpanel" aria-labelledby="music-tab" hidden>
  ...
</div>

Tabs supports Material theming and can be customized in terms of color, typography, and shape.

TokenDefault value
--md-primary-tab-container-color--md-sys-color-surface
--md-primary-tab-label-text-font--md-sys-typescale-title-small-font
--md-primary-tab-active-indicator-color--md-sys-color-primary
--md-primary-tab-icon-color--md-sys-color-on-surface-variant
--md-primary-tab-container-shape--md-sys-shape-corner-none
<style>
:root {
  /* System tokens */
  --md-sys-color-surface: #f7faf9;
  --md-sys-color-primary: #005353;

  /* Component tokens */
  --md-primary-tab-label-text-font: cursive, system-ui;
  --md-primary-tab-label-text-size: 0.8em;
}
</style>

<md-tabs>
  <md-primary-tab>Tab 1</md-primary-tab>
  <md-primary-tab>Tab 2</md-primary-tab>
  <md-primary-tab>Tab 3</md-primary-tab>
</md-tabs>
TokenDefault value
--md-secondary-tab-container-color--md-sys-color-surface
--md-secondary-tab-label-text-font--md-sys-typescale-title-small-font
--md-secondary-tab-active-indicator-color--md-sys-color-primary
--md-secondary-tab-icon-color--md-sys-color-on-surface-variant
--md-secondary-tab-container-shape--md-sys-shape-corner-none
<style>
:root {
  /* System tokens */
  --md-sys-color-surface: #f7faf9;
  --md-sys-color-primary: #005353;

  /* Component tokens */
  --md-secondary-tab-label-text-font: cursive, system-ui;
  --md-secondary-tab-label-text-size: 0.8em;
}
</style>

<md-tabs>
  <md-secondary-tab>Tab 1</md-secondary-tab>
  <md-secondary-tab>Tab 2</md-secondary-tab>
  <md-secondary-tab>Tab 3</md-secondary-tab>
</md-tabs>
PropertyAttributeTypeDefaultDescription
autoActivateauto-activatebooleanfalseWhether or not to automatically select a tab when it is focused.
activeTabIndexactive-tab-indexnumberundefined
tabsTab[]undefinedThe tabs of this tab bar.
activeTabTabundefined
MethodParametersReturnsDescription
scrollToTabtabToScrollToPromise<void>Scrolls the toolbar, if overflowing, to the active tab, or the provided tab.
EventTypeBubblesComposedDescription
changeEventYesNoFired when the selected tab changes. The target's activeTabIndex or activeTab provide information about the selection change. The change event is fired when a user interaction like a space/enter key or click cause a selection change. The tab selection based on these actions can be cancelled by calling preventDefault on the triggering keydown or click event.
PropertyAttributeTypeDefaultDescription
inlineIconinline-iconbooleanfalseWhether or not the icon renders inline with label or stacked vertically.
isTabmd-tabbooleantrueThe attribute md-tab indicates that the element is a tab for the parent element, <md-tabs>. Make sure if you're implementing your own md-tab component that you have an md-tab attribute set.
activeactivebooleanfalseWhether or not the tab is selected.
hasIconhas-iconbooleanfalseIn SSR, set this to true when an icon is present.
iconOnlyicon-onlybooleanfalseIn SSR, set this to true when there is no label and only an icon.
selectedselectedbooleanundefined

MdSecondaryTab <md-secondary-tab>

Link to “MdSecondaryTab <md-secondary-tab>”
PropertyAttributeTypeDefaultDescription
isTabmd-tabbooleantrueThe attribute md-tab indicates that the element is a tab for the parent element, <md-tabs>. Make sure if you're implementing your own md-tab component that you have an md-tab attribute set.
activeactivebooleanfalseWhether or not the tab is selected.
hasIconhas-iconbooleanfalseIn SSR, set this to true when an icon is present.
iconOnlyicon-onlybooleanfalseIn SSR, set this to true when there is no label and only an icon.
selectedselectedbooleanundefined
About
IntroductionQuick StartRoadmapSupportBundle Sizes
Theming
Material ThemingColorTypographyShape
Components
ButtonsCheckboxChipsDialogsFloating action button (FAB)Icon ButtonsListsMenusProgress indicatorsRadioRippleSelectSlidersSwitchTabsText field