Tabs

Use to alternate among related views within the same context.


Examples

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

Drag to resize example
<Tabs
  selected={0}
  tabs={[
    {
      id: 'all-customers',
      title: 'All',
      accessibilityLabel: 'All customers',
      panelID: 'all-customers-content',
    },
    {
      id: 'accepts-marketing',
      title: 'Accepts marketing',
      panelID: 'accepts-marketing-content',
    },
    {
      id: 'repeat-customers',
      title: 'Repeat customers',
      panelID: 'repeat-customers-content',
    },
    {
      id: 'prospects',
      title: 'Prospects',
      panelID: 'prospects-content',
    }
  ]}
/>
Name
Type
Description
children*
React.ReactNode
Content to display in tabs
selected*
number
Index of selected tab
tabs*
TabDescriptor[]
List of tabs
fitted
boolean
Fit tabs to container
onSelect
function(selectedTabIndex: number)
Callback when tab is selected

Purpose

Put the merchant first by identifying the problem they face and the component that helps them solve it.

Problem

Merchants benefit from several different views into the same or closely related content to accomplish different tasks. They also need to be able to navigate to sub-views inside their current view.

Solution

Tabs are a way to show related subsections of interface in relation to each other and allow merchants to move easily between them.


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