Tabs usage guidelines

Tabs organize content into distinct sections, allowing users to switch between different views of information within the same context or different pages within the same UI.

When to use

• To break down complex information into smaller, digestible chunks and present different categories of information that share the same overall context.
• To allow users to switch between different content views on a single page, such as “Overview”, “Details”, and “Settings”.
• To allow users to easily navigate between separate but related pages.

When not to use

• For global navigation between entirely different UIs or tools.
• When there are only two or three distinct content sections that could be effectively displayed using a simpler layout, such as with cards or disclosures.
• For filtering or sorting content within a single list. For this filters should be used instead.

Usage

Used for organizing content sections within a single page, such as different views of a dashboard, profile settings, or product details. The user stays on the same URL, but the displayed content changes.

Preview

Tab 1

Content for tab 1

Code

import { Tabs, Tab, TabList, TabPanel, TabPanels } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <Tabs aria-label="Tabs example">
      <TabList>
        <Tab id="tab-1">Tab 1</Tab>
        <Tab id="tab-2">Tab 2</Tab>
        <Tab id="tab-3">Tab 3</Tab>
      </TabList>
      <TabPanels>
        <TabPanel id="tab-1">Content for tab 1</TabPanel>
        <TabPanel id="tab-2">Content for tab 2</TabPanel>
        <TabPanel id="tab-3">Content for tab 3</TabPanel>
      </TabPanels>
    </Tabs>
  );
}

Link tabs

Used for top-level navigation where each tab represents a distinct page within a UI. Clicking a link tab updates the URL and navigates the user to a new page.

Preview

• Tab 1
• Tab 2
• Tab 3

Code

import { LinkTabs, LinkTab } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <LinkTabs aria-label="Link tabs example">
      <LinkTab href="#tab-1">Tab 1</LinkTab>
      <LinkTab href="#tab-2">Tab 2</LinkTab>
      <LinkTab href="#tab-3">Tab 3</LinkTab>
    </LinkTabs>
  );
}

Formatting and layout

Placement

Typically tabs are placed at the top of the page, but they can be placed lower down on the page if there is content above them that they do not interact with. Tabs are always placed at the top of the content group or page they control so that there is clear indication of what content or page will be changed. They should be horizontally aligned and visually distinct from the content they control.

Tab groups have a horizontal divider that visually connects each of the individual tabs. This divider should span the entire width of the container the tabs are in.

Content writing

• Use clear tab labels that are consistent across the tab group.
• Use icons that are obvious to users and related to the label.

Behaviors

Tab status

Each tab can optionally include a badge to show status, errors, or other supplementary information. To indicate that there is an error within a tab, use a badge rather than another indicator.

Do

Mappings

Lead time

2

Content for mappings tab

Overflow

If the available space doesn’t allow for all tabs to be put in a single row, the tabs can wrap into additional lines.