Tabs

Tabs organize content across different screens, data sets, and other interactions.


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.

Do.

Tab labels can include icons and text. Text labels should be short.

Don’t.

Don’t use tabs to move through sequential content that needs to be read in a particular order.

Do.

Present tabs as a single row above their associated content.

Don’t.

Avoid using tabs for comparing content across multiple tabs, such as different sizes of the same item.

Combinations with other components

Tabs can be paired with components like top app bars, or nested in components like cards and sheets.

Principles

Tabs should be scalable, informative, and comparable

Read More

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.

Read More

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

  1. Container

  2. Active icon (Optional if there’s a label)

  3. Active text label (Optional if there’s an icon)

  4. Active tab indicator

  5. Inactive icon (Optional if there’s a label)

  6. Inactive text label (Optional if there’s an icon)

  7. Tab item

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...

Read More

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.

Caution.

Although label text can wrap to a second line, scrollable tabs confine text to a single row.

Don’t.

Don’t resize text labels to fit them onto a single line. If labels are too long, wrap text to a second line or use scrollable tabs.

Don’t.

Don’t truncate labels unless required, as truncated text can impede comprehension.

Don’t.

Don’t mix tabs that contain only text, with tabs that contain only icons. Use either all text labels, all icon labels, or both, across all labels.

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...

Read More

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.

Tabs can use a combination of labels and icons.

Do.

Tabs can use icons to communicate content.

Don’t.

Don’t use tabs with both icons and text labels on only some tabs, but not others.

Caution.

Use caution when only representing tab content with icons, as an icon’s meaning may not be clear on every topic.

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.

Read More

To differentiate an active tab from an inactive tab, apply an underline and color change to the active tab’s text and icon.

An underline and color change differentiate an active tab from the inactive ones.


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....

Read More

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.

Gestures occur differently for each type of tab:

  • Fixed tabs don’t respond to the swipe gesture at all
  • Upon swipe, scrollable tabs scroll independent of the content area

Use caution when placing other swipeable content (such as interactive maps or list items) in the content area.

Caution.

Use caution when placing swipeable content in UIs that have tabs, as users could easily swipe the wrong component.

Don’t.

Avoid placing swipeable items in the content area of a UI that has tabs, as the user may mistakenly swipe the wrong component.

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...

Read More

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.

When tabs are attached to a top app bar, they can scroll off the screen with the bar and lock in place at the top of the screen.

Tabs can scroll offscreen on scroll, and reappear when the page is scrolled up.

Don’t.

Don’t scroll tabs behind a top app bar. When tabs are attached to a component, they should appear and move as a single unit.


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...

Read More

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.

Place tabs above content.

Caution.

Avoid nesting a tab within another tab.

Don’t.

Don’t place tabs below one another.

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...

Read More

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 below a top app bar

Don’t.

Don’t use tabs with short top app bars, or top app bars that transition to short top app bars on scroll.

Don’t.

Don’t attach tabs to bottom navigation as it can cause confusion about what action or tab controls which content.

Tabs can be embedded in a specific UI region in order to control the content displayed in that region.

Tabs embedded in a column, the content of which they can control when tapped. Scaled down to 62.5%

Don’t.

Don’t place tabs above content that they don’t control. If tabs only change a section of the UI, embed them within that section. Scaled down to 62.5%

Tabs nested in a card

Tabs nested in a sheet


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...

Read More

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.

Use fixed tabs when displaying a limited number of categories.

A fixed tab bar using iconography and labels

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...

Read More

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.

Don’t use more than four fixed tabs in a set.

Reduced in size to 62.5%

On wider layouts, fixed tabs increase in width, as their tab width is determined by the width of the screen.

Reduced in size to 62.5%

Caution.

Avoid letting fixed tabs cause confusion with content. These tab widths align to closely to the columns in this layout, such that the relationship between tabs and content could be misinterpreted.

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...

Read More

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.

On wider layouts, tabs may be centered on the tab bar.

Fixed tabs in a cluster can be aligned to the left or right.


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....

Read More

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.

A set of scrollable tabs

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.

Read More

Scrollable tabs display a subset of all tabs at once. The width of each tab is defined by the length of its text label.

Do.

On mobile and desktop, offset the first tab on the left to signal that tabs are scrollable.

Don’t.

Avoid using inconsistent padding on each tab.

On desktop, provide a visual indicator that more tabs are available off screen.

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...

Read More

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.

Active tabs reposition themselves to appear fully on screen.

Active tabs can move to the middle of the row when they become active.


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 hover, focus, and pressed states of an enabled tab

The active state of a tab can inherit a hover, focus, and pressed state.

The hover, focus, and pressed states of an active tab


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 browsing app that demonstrates...

Read More

This recipe app’s tabs have been customized using Material Theming. Areas of customization include color and typography.

Basil’s customized tabs

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


Spec

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...

Read More
  • 360
  • 48
  • 48
  • 72
  • C
  • 24
  • 16
  • 16
  • 20
  • 12
  • 2
  • 12
  • 12
  • #6200ee

    R98 G0 B238

  • #00000089

    R0 G0 B0 A0.54

  • #6200ee

    R98 G0 B238

flip
flipSpecs only available at larger screen size

All measurements are displayed in device-independent pixels (dps)

Minimum width

  • 90
  • 48
  • 16
  • 16
  • 2
  • C
  • #6200ee

    R98 G0 B238

flip
flipSpecs only available at larger screen size

All measurements are displayed in device-independent pixels (dps)

Maximum width

  • 360
  • 48
  • 2
  • 16
  • 16
  • C
  • #6200ee

    R98 G0 B238

flip
flipSpecs only available at larger screen size

All measurements are displayed in device-independent pixels (dps)

Scrollable tabs

14dp #19191999 14dp #6200ee #6200ee R98 G0 B238 Elevation 0dp All measurements are displayed in device-independent pixels (dps)

Read More
  • 48
  • 360
  • 52
  • min-width:90dp
  • C
  • #6200ee

    R98 G0 B238

flip
flipSpecs only available at larger screen size

All measurements are displayed in device-independent pixels (dps)


Implementation

Tabs implementation support for each platform is indicated below.

Android Material Component

Status: Code Available

IOS Material Component

Status: Code Available

Flutter Material Component

Status: Code Available

Web Material Component

Status: Under Development