Interactive demo
This demo lets you preview the tab component, its variations, and configuration options. Each tab displays a different type of tab.
Usage
Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
Tabs in a set
Each tab should contain content that is distinct from other tabs in a set. For example, tabs can present different sections of news, different genres of music, or different themes of documents.
Combinations with other components
Tabs can be paired with components like top app bars, or nested in components like cards and sheets.
Principles
Scalable
As tabs can horizontally scroll, a UI can have as many tabs as needed.
Informative
Tabs organize content into categories to help users easily find different types of information.
Peers
Tabs are displayed next to each other as peers, in categories of equal importance.
Types
Tabs can be fixed or scrollable.
Fixed tabs
Fixed tabs display all tabs on one screen, with each tab at a fixed width. The width of each tab is determined by dividing the number of tabs by the screen width. They don’t scroll to reveal more tabs; the visible tab set represents the only tabs available.
Scrollable tabs
Scrollable tabs are displayed without fixed widths. They are scrollable, such that some tabs will remain off-screen until scrolled.
Anatomy
Text label
Text labels should clearly and succinctly describe the content of the tab they represent. Tab content should contain a cohesive set of items that share...
Text labels should clearly and succinctly describe the content of the tab they represent. Tab content should contain a cohesive set of items that share a common characteristic.
Tab labels appear in a single row. They can use a second line if needed, with truncated text. Alternatively, you can use scrollable tabs to allow room for longer titles.
Icons
Icons communicate the type of content a tab represents in a simple, recognizable way. However, they aren’t as effective as text labels at communicating complex...
Icons communicate the type of content a tab represents in a simple, recognizable way. However, they aren’t as effective as text labels at communicating complex content.
Active tab indicators
To differentiate an active tab from an inactive tab, apply an underline and color change to the active tab’s text and icon.
To differentiate an active tab from an inactive tab, apply an underline and color change to the active tab’s text and icon.
Behavior
Moving between tabs
Users can navigate between tabs by tapping a tab, or by performing a swipe gesture over content. Navigate to a tab by tapping on it....
Users can navigate between tabs by tapping a tab, or by performing a swipe gesture over content.
Tap a tab
Navigate to a tab by tapping on it.
Swipe within the content area
To navigate between tabs, users can swipe left or right within the content area.
Use caution when placing other swipeable content (such as interactive maps or list items) in the content area.
Scrolling
When a screen scrolls, tabs can either be fixed to the top of the screen, or scroll off the screen. If they scroll off the...
When a screen scrolls, tabs can either be fixed to the top of the screen, or scroll off the screen. If they scroll off the screen, they will return when the user scrolls upward.
Scaling and adaptation
For fixed tabs, the maximum width for each tab should be determined by the width of the widest tab...
Size constraints
For fixed tabs, the maximum width for each tab should be determined by the width of the widest tab. The group of tabs should use a fluid margin and align to the center or leading edge of the body region.
Placement
Tab layout
Tabs are displayed in a single row, with each tab connected to the content it represents. As a set, all tabs are unified by a...
Tabs are displayed in a single row, with each tab connected to the content it represents. As a set, all tabs are unified by a shared topic.
Tab placement
Tabs can be joined with components like top app bars, embedded in a specific UI region, or nested into components like cards and sheets. Tabs...
Tabs can be joined with components like top app bars, embedded in a specific UI region, or nested into components like cards and sheets. Tabs control the UI region displayed below them.
Tabs can be embedded in a specific UI region in order to control the content displayed in that region.
Fixed tabs
Usage
Fixed tabs display all tabs in a set simultaneously. They are best for switching between related content quickly, such as between transportation methods in a...
Fixed tabs display all tabs in a set simultaneously. They are best for switching between related content quickly, such as between transportation methods in a map. To navigate between fixed tabs, tap an individual tab, or swipe left or right in the content area.
Placement
Fixed tabs have equal width, which can be calculated either as: When using fixed tabs, ensure they can all be seen on mobile, without truncating...
Fixed tabs have equal width, which can be calculated either as:
- The width of the screen divided by the number of tabs
- The width of the widest tab label
When using fixed tabs, ensure they can all be seen on mobile, without truncating their text. Don’t use more than four fixed tabs at once.
Clustered fixed tabs
Clustered fixed tabs aren’t divided equally across the screen. The tab bar is centered, right-aligned, or left-aligned. Clustered fixed tabs should be used in wide...
Clustered fixed tabs aren’t divided equally across the screen. The tab bar is centered, right-aligned, or left-aligned.
Clustered fixed tabs should be used in wide horizontal layouts, such as landscape mode.
Scrollable tabs
Usage
When a set of tabs cannot fit on screen, use scrollable tabs. Scrollable tabs can use longer text labels and a larger number of tabs....
When a set of tabs cannot fit on screen, use scrollable tabs. Scrollable tabs can use longer text labels and a larger number of tabs. They are best used for browsing on touch interfaces.
Placement
Scrollable tabs display a subset of all tabs at once. The width of each tab is defined by the length of its text label.
Scrollable tabs display a subset of all tabs at once. The width of each tab is defined by the length of its text label.
Behavior
To navigate between a set of scrollable tabs, users swipe the set left or right. A tab set can be looped so when a user...
To navigate between a set of scrollable tabs, users swipe the set left or right. A tab set can be looped so when a user reaches the last tab in a set, the first tab is shown again.
To select an individual tab, tap it.
Tab placement on activation
When tapped, a scrollable tab should reposition itself to become fully visible on screen.
States
By default, tabs inherit enabled states with one active state.
The inactive state of a tab can inherit a hover, focus, and pressed state.
The active state of a tab can inherit a hover, focus, and pressed state.
Theming
Basil Material Theme
This recipe app’s tabs have been customized using Material Theming. Areas of customization include color and typography. Basil is a recipe app that uses Material...
This recipe app’s tabs have been customized using Material Theming. Areas of customization include color and typography.
Color
Basil’s tabs use custom color on five elements: the container, active text label, active tab indicator, inactive text label, and divider.
Element | Category | Attribute | Value |
---|---|---|---|
Container | Background | Color Opacity |
#FFFBE6 100% |
Active text label, active tab indicator | Primary | Color Opacity |
#356859 100% |
Inactive text label | On Surface | Color Opacity |
#29302E 82% |
Divider | On Surface | Color Opacity |
#29302E 12% |
Typography
Basil’s tabs uses custom typography for message and button text.
Element | Category | Attribute | Value |
---|---|---|---|
Button | Button | Typeface Font Size Case |
Montserrat Bold 14 All caps |
Specs
Fixed tabs
14dp #6200ee 14dp #19191999 #6200ee R98 G0 B238 #00000089 R0 G0 B0 A0.54 #6200ee R98 G0 B238 Elevation 0dp All measurements are displayed in device-independent...
- 360 Measurement 360
- 48 Measurement 48
- 48 Measurement 48
- 72 Measurement 72
- C Measurement C
- 24 Measurement 24
- 16 Measurement 16
- 16 Measurement 16
- 20 Measurement 20
- 12 Measurement 12
- 2 Measurement 2
- 12 Measurement 12
- 12 Measurement 12
#6200ee
R98 G0 B238
#00000089
R0 G0 B0 A0.54
#6200ee
R98 G0 B238
Scrollable tabs
14dp #19191999 14dp #6200ee #6200ee R98 G0 B238 Elevation 0dp All measurements are displayed in device-independent pixels (dps) 14dp #6200ee #6200ee R98 G0 B238 Elevation...
- 48 Measurement 48
- 360 Measurement 360
- 52 Measurement 52
- min-width:90dp Measurement min-width:90dp
- C Measurement C
#6200ee
R98 G0 B238
Tab item minimum width
- 48 Measurement 48
- 360 Measurement 360
- 52 Measurement 52
- min-width:90dp Measurement min-width:90dp
- C Measurement C
#6200ee
R98 G0 B238
Tab item maximum width
- 360 Measurement 360
- 48 Measurement 48
- 2 Measurement 2
- 16 Measurement 16
- 16 Measurement 16
- C Measurement C
#6200ee
R98 G0 B238