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.
Used for this
- To filter information into easily parsable views
- To organize related content and controls within a single page
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.5.3•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 name | Type | Default | Description |
|---|---|---|---|
isVertical | boolean | false | Arranges the tabs vertically |
onChange | Handles tab selection Parameters selectedItem The selected tab's | ||
selectedItem | any | Specifies the currently selected tab |
Tabs.Tab
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
disabled | boolean | Indicates that the element is not interactive | |
item | any | Defines a unique value to identify the tab. Provided to the |
Tabs.TabList
Extends HTMLAttributes<HTMLDivElement>
Tabs.TabPanel
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
item | any | Defines a value used to match a tab panel with its associated tab |