Skip to main content
Table of Contents

Tabs

Use Tabs to organize related content in a single view. This helps users navigate related content without having to switch contexts.

Table of Contents
Used for this
  • To filter information into easily parsable views
  • To organize related content and controls within a single page
Not for this
  • To guide users through a task list, use a Stepper instead
  • As a secondary navigation bar that spans multiple pages. Use Anchors instead.

How to use it

Default

The typical usage of a Tab component.

Disabled

Individual tabs can be disabled to prevent users from interacting with them.

Orientation

Tab layout is horizontal by default and can also stack vertically.

Configuration

  • Name9.0.0-next.26•View source•View on npm
  • Installnpm install @zendeskgarden/react-tabs
  • Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
  • Importimport { Tabs } from '@zendeskgarden/react-tabs'

API

Tabs

Prop nameTypeDefaultDescription
isVertical
boolean
Arranges the tabs vertically
onChange
Handles tab selection
Parameters
selectedItem The selected tab's item value
selectedItem
any
Specifies the currently selected tab

Tabs.Tab

Extends HTMLAttributes<HTMLDivElement>

Prop nameTypeDefaultDescription
disabled
boolean
Indicates that the element is not interactive
item
any
Defines a unique value to identify the tab. Provided to the onChange event in the Tabs component.

Tabs.TabList

Extends HTMLAttributes<HTMLDivElement>

Tabs.TabPanel

Extends HTMLAttributes<HTMLDivElement>

Prop nameTypeDefaultDescription
item
any
Defines a value used to match a tab panel with its associated tab