Tabs
A component for managing multiple views or content sections in a single space using tabbed navigation.
The Tabs component is a powerful navigation tool that organizes content into multiple sections, allowing users to switch between different views seamlessly. It is highly flexible and customizable, supporting various layouts, dynamic positioning, and advanced styling options to fit a wide range of use cases, from simple content toggling to complex interfaces.
Usage
Basic usage example to quickly see how the Tabs component works.
Properties
Interactive configurator to explore customization options for the Tabs component.
Tabs Position
Showcase how to change the position of tabs (top, bottom, left, right) to better match the layout needs of your application.
Tabs Customs
Demonstrates how to customize the Tabs component, such as adding a floating indicator to tab triggers for a more dynamic and modern UI experience.
Tip:
You can combine floating indicators with animated transitions to create a smoother and more engaging tab switching experience.
Note:
When using custom tab indicators or advanced tab positioning, ensure that accessibility attributes like
aria-selectedandaria-controlsare properly handled to maintain a user-friendly and accessible interface.
Reminder:
Keep tab labels short and meaningful to help users quickly understand the available sections. Long labels may cause layout issues, especially on smaller screens.
API References
Styles API
type T = "root" | "list" | "tab" | "tabLabel" | "tabSection" | "panel";| Styles API | Type | Default | Annotation |
|---|---|---|---|
unstyled? | Partial<Record<T, boolean>> | false | if true, default styles will be removed |
className? | string | undefined | pass to root component <div> |
classNames? | Partial<Record<T, string>> | undefined | |
style? | CSSProperties | undefined | pass to root component <div> |
styles? | Partial<Record<T, CSSProperties>> | undefined |
Props API
| Props API | Type | Default | Annotation |
|---|---|---|---|
defaultValue? | string | null | Default value for uncontrolled component | |
value? | string | null | Value for controlled component | |
onChange? | (value: string | null) => void | Called when value changes | |
orientation? | 'vertical' | 'horizontal' | horizontal | Tabs orientation |
placement? | 'left' | 'right' | 'left' | Tabs.List placement relative to Tabs.Panel, applicable only when orientation="vertical" |
id? | string | generated randomly | Base id, used to generate ids to connect labels with controls |
loop? | boolean | true | Determines whether arrow key presses should loop though items (first to last and last to first) |
activateTabWithKeyboard? | boolean | true | Determines whether tab should be activated with arrow key press |
allowTabDeactivation? | boolean | false | Determines whether tab can be deactivated |
children? | React.ReactNode | undefined | Tabs content |
color? | Colors | `` | Changes colors of Tabs.Tab components when variant is pills or default, does nothing for other variants |
radius? | (string & {}) | number | `` | Key of valid CSS value to set border-radius |
inverted? | boolean | false | Determines whether tabs should have inverted styles |
keepMounted? | boolean | true | If set to false, Tabs.Panel content will be unmounted when the associated tab is not active |
Source Codes
Full working code example, including necessary markup and styles. You can copy and paste this code directly to start using the component immediately.