information
Material Design 3 Standard Component
Refer to the Material 3 Tabs guideline article provided by the Android operating system. Our design guideline serves as an extension, offering further details about specific topics.
[internal_only] In the Adaptive Layout Toolkit, you can find templates and examples of use cases for the M3 standard component. You can duplicate these using the Horizon theme with a Tonal option to create your own designs. [/internal_only]
Refer to the Material 3 Tabs guideline article provided by the Android operating system. Our design guideline serves as an extension, offering further details about specific topics.
[internal_only] In the Adaptive Layout Toolkit, you can find templates and examples of use cases for the M3 standard component. You can duplicate these using the Horizon theme with a Tonal option to create your own designs. [/internal_only]
Intro
Tabs let you organize page content into different related categories by representing them through a text label and/or an icon. Depending on the number of tabs that are shown, they can be either fixed or scrollable.
M3 primary tabs on compact screen (left) and secondary tabs on expanded screen (right)
Usage
Do
Use tabs to group similar content that is on the same hierarchical level.
Don't
- Don’t use tabs as a navigation component at the bottom of the screen, like a navigation bar.
- Don’t use tabs to categorize content that is not on the same hierarchical level or isn’t related.
- For accessibility, use easily recognizable icons and concise, meaningful labels.
- Place primary tabs used for categorizing main content destinations on top of panes under the top app bar.
- Place secondary tabs used to further divide specific categories within the content area within the body of the content.
- For concise labels, use fixed tabs.
- For longer labels, use scrollable tabs.