Tabs

Use to alternate among related views within the same context.

Web

Android

iOS

Examples

Use for most cases, especially when the number of tabs may be more than three.

Result

Properties

React

HTML

Props

children

React.ReactNode

Content to display in tabs

fitted

boolean

Fit tabs to container

True

False

selectedRequired

number

Index of selected tab

tabsRequired

TabDescriptor[]

List of tabs

onSelect

(selectedTabIndex: number) => void

Callback when tab is selected

Default tabs

Use for most cases, especially when the number of tabs may be more than three.

Default tabs on Android

Fitted tabs

Use when tabs contain a few (2 or 3) items within a narrow column.

Fixed tabs on Android

Default tabs

Use for most cases, especially when the number of tabs may be more than three.

Default tabs on iOS

Fitted tabs

Use when tabs contain a few (2 or 3) items within a narrow column.

Also known as Segmented controls on iOS.

Fixed tabs on iOS

Best practices

Tabs should:

Represent the same kind of content, such as a list-view with different filters applied. Don’t use tabs to group content that is dissimilar.
Only be active one at a time.
Not force merchants to jump back and forth to do a single task. Merchants should be able to complete their work and find what they need under each tab.
Not be used for primary navigation.

Content guidelines

Tabs

Tabs should:

Be clearly labeled to help differentiate the different sections beneath them.
Have short and scannable labels, generally kept to single word.
Relate to the section of Shopify they’re on. Imagine the page section title is an invisible noun after the tab. For example, the tabs for the orders section are:
- All
- Open
- Unfulfilled
- Unpaid

The tabs for the gift cards section are:

All
New
Partially used
Used
Disabled

And for the customers section, the tabs are:

All
New
Returning
Abandoned checkouts
Email subscribers

Where possible, follow this pattern when writing tabs.