Component reference

Tabs

Material 3 Expressive Tabs component for organizing content across screens.

Material 3Web ComponentFramework agnostic

Usage

Flights

Hotels

Explore

Flights content

<m3-tabs active-tab="0" (tab-change)="onTabChange($event)">
  <m3-tab panel="one-panel" value="one">Tab One</m3-tab>
  <m3-tab panel="two-panel" value="two">Tab Two</m3-tab>
  <m3-tab panel="three-panel" value="three">Tab Three</m3-tab>
</m3-tabs>
<section id="one-panel">Tab One content</section>
<section id="two-panel" hidden>Tab Two content</section>
<section id="three-panel" hidden>Tab Three content</section>