Components– Tabs

Tabs

Tabs make it easy to explore and switch between different views.

Tabs enable content organization at a high level, such as switching between views, data sets, or functional aspects of an app.

Present tabs as a single row above their associated content. Tab labels should succinctly describe the content within.

Because swipe gestures are used for navigating between tabs, don't pair tabs with content that also supports swiping.

Types

Fixed
Scrollable

Tab labels

Tab labels may include icons and text.

Color

Apply your app’s accent color, or a contrasting color, to text fields and the text field cursor.

Material Design tabs for easy view exploration

Usage Expand and collapse content An arrow that points down when collapsed and points up when expanded.

A tab provides the affordance for displaying grouped content. A tab label succinctly describes the tab’s associated grouping of content.

Mobile tabs

Material Design default app bar with fixed tab bar

Default app bar and fixed tab bar

Material Design: Extended app bar with fixed tabs

Extended app bar and fixed tab bar

Material Design fixed tab bar with scrolling content

Fixed tab bar pinned to top with scrolled content

Material Design inset search and fixed tab bar

Inset search, app bar, and fixed tab bar

Material Design default app bar with scrollable tabs

Default app bar and scrollable tab bar

Text color matches the tab indicator in Material Design

The text color is the same as the tab indicator.

Material Design app bar and fixed tab bar with icons

Default app bar and fixed tab bar with icons

Icon color matches the tab indicator in Material Design

The icon color is the same as the tab indicator.

Desktop tabs

Default app and tab bars in Material Design

Default app and tab bars

Material Design Tabs with More dropdown menu

Tabs with a More dropdown menu

Material Design Tabs with expanded More dropdown

Tabs with an expanded More dropdown menu

Material Design Tabs with Books from More menu

Tabs with Books selected from a More dropdown menu

Material Design tabs with overflow pagination

Tabs with overflow pagination

Material Design tabs with overflow pagination scrolled

Tabs with overflow pagination scrolled

Centered tab bar in Material Design

Tab bar centered

When to use

Use tabs to organize content at a high level, for example, to present different sections of a newspaper. Don’t use tabs for carousels or pagination of content. Those use cases involve viewing content, not navigating between groups of content.

For more detail about using tabs for navigating top-level views, see “Tabs” in Navigation - Patterns.

Don't use tabs with content that supports the swipe gesture, because swipe gestures are used for navigating between tabs. For example, avoid using tabs in a map where content is pannable, or a list where items can be dismissed with a swipe.

Fixed tabs should be used with a limited number of tabs and when consistent placement will aid muscle memory. Scrollable tabs should be used when there are many or a variable number of tabs.

Material Design tabs for switching content facets

Do.

The tabs switch between equally important facets of store content.

Material Design tabs for navigating store destinations

Don’t.

The tabs switch between destinations of varied importance within the store.

Tab characteristics

Tabs control the display of content in a consistent location.

Formatting specifications:

  • Present tabs as a single row. Wrap tab labels to a second line if needed, and then truncate.
  • Do not include a set of tabbed content within a tab
  • Highlight the tab corresponding to the visible content
  • Group tabs together hierarchically. Connect a group of tabs with its content.
  • Keep tabs adjacent to their content to maintain the relationship between the two
Material Design Tabs in a single row

Do.

Tabs are presented as a single row.

Material Design tabs are not shown in a single column

Don’t.

Tabs are not presented as a single column.

Material Design: Tabs should match displayed content

Do.

Use a content hierarchy such that tabs relate to the currently displayed content.

Tabs should not be nested in Material Design

Don’t.

Tabs should not be nested.

Content Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Content presented in tabs can vary widely, even between tabs. For example, tabs showing different years of an artist’s portfolio or tabs containing different types of settings.

All content within a set of tabs should be related under a larger organizing principle (for example, Settings or Directions), with each tab’s content mutually exclusive of the others'.

Tab labels should provide meaningful distinctions that logically organize associated content.

Tab labels may include icons and text. When choosing a text label, use short titles.

Avoid the need for cross-tab comparison of content. Significant cross-tab comparison may indicate the content would benefit from a different organization or presentation that places the content closer together.

Material Design: Long tab label may wrap to second line

Do.

A long label exceeding the maximum width of a tab may wrap to a second line before being truncated.

Material Design: Avoid resizing single-line labels

Don’t.

Don't resize single-line labels. If labels are too long, wrap text across two lines or use scrollable tabs

Wrap labels for better clarity in Material Design

Don’t.

Wrap labels before truncating them. Truncating labels too early can impede comprehension.

Material Design: Use text labels or icons, not both

Don’t.

Do not combine text labels with icons. Use either all text labels or all icon labels.

Types of tabs Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Depending on the platform and the context of use, tabbed content can be presented as either fixed tabs or scrollable tabs.

Fixed tabs

Fixed tabs display all tabs concurrently and are best used with content that benefits from quick pivots between tabs in fixed positions, such as switching transportation methods for directions in Google Maps.

Fixed tabs have equal width, calculated either as the view width divided by the number of tabs, or based on the widest tab label. To navigate between fixed tabs, touch the tab or swipe the content area left or right.

Material Design: Fixed tabs for mobile

Fixed tabs on mobile

Material Design: Fixed tabs for mobile

Fixed tabs on mobile

Scrollable tabs

Scrollable tabs display a subset of tabs at any given moment. They can contain longer tab labels and a larger number of tabs than fixed tabs. Scrollable tabs are best used for browsing contexts in touch interfaces when users don’t need to directly compare the tab labels.

To navigate between scrollable tabs, touch the tab or swipe the content area left or right. To scroll the tabs without navigating, swipe the tabs left or right.

Scrollable tabs on mobile

Scrollable tabs example in Material Design
Scrollable tabs example in Material Design

Examples of scrollable tabs

Specs Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Fixed tabs

The width of each tab can be calculated by taking the width of the view and dividing it by the number of tabs. Alternatively, make all tabs the width of the largest tab.

If the margin between the tab edge and view edge is 16dp or less, use full-width tabs instead of centered tabs.

Width minimum and maximum (inclusive of padding)

  • Maximum: 264dp
  • Minimum: 160dp for larger views, 72 dp for smaller views

Height

  • 48dp

Padding

  • 12dp left and right of text
  • 20dp from bottom for a single line of text, 12dp from bottom for two lines of text

Alignment

  • Full-width for smaller views
  • Centered for larger views

Indicator

  • Height: 2dp
  • Color: #fff or accent color
Material Design fixed tabs, text only, mobile portrait

Fixed tabs on mobile, text only, portrait orientation

Material Design mobile portrait with fixed text tabs

Mobile portrait example of fixed tabs, text only

Tabs with text only

Text

  • 14sp Roboto Medium
  • 12sp when wrapped across a maximum of two lines
  • All caps
  • Horizontally and vertically centered
  • Active color: #fff or accent color
  • Unfocused tab color: #fff 70%
Mobile tabs aligned with left keyline in Material Design

Mobile landscape example of same tabs aligned with left keyline

Mobile landscape example of centered tabs in Material Design

Mobile landscape example of same tabs centered

Tabs with icons and text

Height

  • 72dp

Icon

  • 24 x 24dp

Content alignment

  • Text and icon are centered horizontally in the tab

Padding

  • 10dp between icon and text
  • 16dp under text
Material Design fixed tabs with icons and text for mobile

Fixed tabs on mobile, icons and text

Material Design fixed tabs with icons and text on mobile

Fixed tabs on mobile, icons and text

Tabs with icons only

Height

  • 48dp

Icon

  • 24 x 24dp

Content alignment

  • Icon is centered horizontally and vertically in the tab

Padding

  • 12dp under icon
Material Design: Fixed mobile tabs with icons only

Fixed tabs on mobile, icons only

Material Design fixed mobile tabs with icons only

Fixed tabs on mobile, icons only

Scrollable tabs

The left-most tab content aligns with the keyline. Alignment varies between landscape and portrait to match the different keylines.

The width of each tab is independently calculated.

Width minimum and maximum (inclusive of padding)

  • Maximum (whichever fits and is smaller): 264dp or (the value of view size minus 56dp)
  • Minimum: 160dp for larger views, 72 dp for smaller views

Height

  • 48dp

Padding

  • 12dp left and right of text
  • 20dp from bottom for a single line of text, 12dp from bottom for two lines of text

Indicator

  • Height: 2dp
  • Color: #fff or accent color
Scrollable tab in Material Design

Scrollable tab

Scrollable tab with wrapped text, avoiding long labels - Material Design

Extremely long tab labels, as shown here, should be avoided. This max-width scrollable tab contains wrapped text.

Text

  • 14sp Roboto Medium
  • 12sp when wrapped across a maximum of two lines
  • All caps
  • Vertically and horizontally centered
  • Active color: #fff or accent color
  • Unfocused tab color: #fff 70%
Long tab labels should be avoided in Material Design

Extremely long tab labels, as shown here, should be avoided. These max-width tabs, depicted in landscape mode on mobile, are aligned with the left keyline.

Desktop

Width minimum and maximum (inclusive of padding)

  • Maximum (whichever fits and is smaller): 264dp or (the value of view size minus 56dp)
  • Minimum: 160dp for larger views, 72 dp for smaller views

Height

  • 48dp

Alignment

  • Centered or aligned with left keyline

Text

  • 13sp Roboto Medium
  • All caps
  • Horizontally and vertically centered
  • Wraps across a maximum of two lines
  • Active color: #fff or accent color
  • Unfocused tab color: #fff 70%

Padding

  • 24dp left and right of text
  • 20dp from bottom for a single line of text, 12dp from bottom for two lines of text
  • First tab text left padding: 80dp

Indicator

  • Height: 2dp
  • Color: #fff or accent color
Material Design desktop tabs

Desktop tabs

Tab touch target animation

Note: Implementations of this component may vary by platform. By using standard platform implementations, you will receive related future improvements.

Animation of tab touch target.