Tabs organize similar content together into individual sections in the same page.

installyarn add @clayui/tabs
versionNPM Version
useimport Tabs from '@clayui/tabs';

Introduction

Tabs is a controlled component, we left this component controlled because the user can use Dropdowns or another control to select a TabPane for render. Just creating states to manage it.

Use Tabs.Item for defining a TabPane’s trigger. For using this trigger as an anchor element, just define href property, otherwise, the trigger will be a button. Use Tabs.TabPane for wrapping the content that will be rendered by TabPane as the following example:

Tabs

Warning The displayType attribute has been deprecated after 3.89.0.

This is the default tab. The displayType attribute was deprecated after 3.89.0. You no longer need to use displayType="basic" to output this style.

Light Tabs

Modern Tabs

Warning The modern attribute has been deprecated after 3.89.0. The styles for the .nav-underline class have been removed.

For the modern variant of Tabs use the modern property. If you need to justify the text inside the Tabs.Item, use the justified property.

As a controlled component, Tabs allows you to control the active TabPane. Thereby, we can select the active TabPane by a Dropdown menu. For example:

TabPanel

Note that Tabs.TabPanel is an alias to Tabs.TabPane. The two are interchangeable.

API Reference

Tabs

typeof Tabs
Parameters

activation

"manual" | "automatic" | undefined

Flag to indicate the navigation behavior in the tab.

  • manual - it will just move the focus and tab activation is done just by pressing space or enter.
  • automatic - moves the focus to the tab and activates the tab.

active

number | undefined

The current tab active (controlled).

defaultActive

number | undefined

Initial active tab when rendering component (uncontrolled).

Deprecated

displayType

"basic" | "underline" | null | undefined

Determines how tab is displayed.

fade

boolean | undefined

Flag to indicate if fade classname that applies an fading animation should be applied.

justified

boolean | undefined

Justify the nav items according the tab content.

Deprecated

modern

boolean | undefined

Applies a modern style to the tab.

onActiveChange

InternalDispatch<number> | undefined

Callback is called when the active tab changes (controlled).

Returns
Element

Content

React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLDivElement>>
Parameters
Deprecated

activeIndex

number | undefined

Receives a number that indicates the tabkey to be rendered.

children *

React.ReactNode

Children elements received from ClayTabs.Content component.

fade

boolean | undefined

Flag to indicate if fade classname that applies an fading animation should be applied.

Returns
ReactElement<any, string | JSXElementConstructor<any>> | null

Item

React.ForwardRefExoticComponent<IProps & React.RefAttributes<any>>
Parameters

active

boolean | undefined

Flag to indicate if the component is active or not.

OBS: The active API in the new pattern has uncontrolled behavior, working just like defaultActive as in the prop declared in the root component.

disabled

boolean | undefined

Flag to indicate if the TabPane is disabled.

href

string | undefined

This value is used to be the target of the link.

innerProps

React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> | undefined

Props to be added to the item element that can be an anchor or a button.

onClick

((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined

Callback to be used when clicking to a Tab Item.

Returns
ReactElement<any, string | JSXElementConstructor<any>> | null

List

React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLUListElement>>
Parameters

children *

React.ReactNode

The tabs content.

className

string | undefined

The custom class.

Returns
ReactElement<any, string | JSXElementConstructor<any>> | null

TabPane

React.ForwardRefExoticComponent<ITabPaneProps & React.RefAttributes<HTMLDivElement>>
Parameters

active

boolean | undefined

Flag to indicate if active classname should be applied

fade

boolean | undefined

Flag to indicate if fade classname that applies a fading animation should be applied.

Returns
ReactElement<any, string | JSXElementConstructor<any>> | null
Edit this page on GitHub

Contributors

Matuzalém Teles, Diego Nascimento, Bryce Osterhaus, Patrick Yeo, Krešimir Čoko

Last edited May 11, 2025 at 5:57:01 PM