Tabs
View in LexiconTabs organize similar content together into individual sections in the same page.
install | yarn add @clayui/tabs |
---|---|
version | |
use | import 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
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.
import {Provider} from '@clayui/core'; import Tabs from '@clayui/tabs'; import React from 'react'; export default function App() { const [active, setActive] = React.useState(0); return ( <Provider spritemap="/icons.svg"> <div className="p-4"> <> <Tabs active={active} onActiveChange={setActive}> <Tabs.Item innerProps={{ 'aria-controls': 'tabpanel-1', }} > Tab 1 </Tabs.Item> <Tabs.Item innerProps={{ 'aria-controls': 'tabpanel-2', }} > Tab 2 </Tabs.Item> <Tabs.Item innerProps={{ 'aria-controls': 'tabpanel-3', }} > Tab 3 </Tabs.Item> </Tabs> <Tabs.Content activeIndex={active} fade> <Tabs.TabPane aria-labelledby="tab-1"> 1. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu. </Tabs.TabPane> <Tabs.TabPane aria-labelledby="tab-2"> 2. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu. </Tabs.TabPane> <Tabs.TabPane aria-labelledby="tab-3"> 3. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu. </Tabs.TabPane> </Tabs.Content> </> </div> </Provider> ); }
Light Tabs
import {Provider} from '@clayui/core'; import Tabs from '@clayui/tabs'; import React from 'react'; export default function App() { const [active, setActive] = React.useState(0); return ( <Provider spritemap="/icons.svg"> <div className="p-4"> <> <Tabs active={active} displayType="light" onActiveChange={setActive}> <Tabs.List> <Tabs.Item innerProps={{ 'aria-controls': 'tabpanel-1', }} > Tab 1 </Tabs.Item> <Tabs.Item innerProps={{ 'aria-controls': 'tabpanel-2', }} > Tab 2 </Tabs.Item> <Tabs.Item innerProps={{ 'aria-controls': 'tabpanel-3', }} > Tab 3 </Tabs.Item> </Tabs.List> <Tabs.Panels> <Tabs.TabPanel aria-labelledby="tab-1"> 1. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu. </Tabs.TabPanel> <Tabs.TabPanel aria-labelledby="tab-2"> 2. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu. </Tabs.TabPanel> <Tabs.TabPanel aria-labelledby="tab-3"> 3. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu. </Tabs.TabPanel> </Tabs.Panels> </Tabs> </> </div> </Provider> ); }
Modern Tabs
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.
import {Provider} from '@clayui/core'; import Tabs from '@clayui/tabs'; import React from 'react'; export default function App() { const [active, setActive] = React.useState(0); return ( <Provider spritemap="/icons.svg"> <div className="p-4"> <> <Tabs active={active} modern onActiveChange={setActive}> <Tabs.Item innerProps={{ 'aria-controls': 'tabpanel-1', }} > Tab 1 </Tabs.Item> <Tabs.Item innerProps={{ 'aria-controls': 'tabpanel-2', }} > Tab 2 </Tabs.Item> <Tabs.Item innerProps={{ 'aria-controls': 'tabpanel-3', }} > Tab 3 </Tabs.Item> </Tabs> <Tabs.Content activeIndex={active} fade> <Tabs.TabPane aria-labelledby="tab-1"> 1. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu. </Tabs.TabPane> <Tabs.TabPane aria-labelledby="tab-2"> 2. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu. </Tabs.TabPane> <Tabs.TabPane aria-labelledby="tab-3"> 3. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu. </Tabs.TabPane> </Tabs.Content> </> </div> </Provider> ); }
Dropdown Tabs
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:
import {Provider} from '@clayui/core'; import Tabs from '@clayui/tabs'; import Icon from '@clayui/icon'; import DropDown, {Align} from '@clayui/drop-down'; import React from 'react'; const DropDownWithState = ({children, trigger, ...others}) => { return ( <DropDown alignmentPosition={Align.BottomLeft} hasRightSymbols trigger={trigger} {...others} > {children} </DropDown> ); }; export default function App() { const [active, setActive] = React.useState(0); const dropdownTabsItems = [ { disabled: true, label: 'Tab 5', tabkey: 5, }, { label: 'Tab 6', tabkey: 6, }, { label: 'Tab 7', tabkey: 7, }, ]; return ( <Provider spritemap="/icons.svg"> <div className="p-4"> <> <Tabs active={active} onActiveChange={setActive}> <Tabs.Item innerProps={{ 'aria-controls': 'tabpanel-1', }} > Tab 1 </Tabs.Item> <Tabs.Item innerProps={{ 'aria-controls': 'tabpanel-2', }} > Tab 2 </Tabs.Item> <Tabs.Item innerProps={{ 'aria-controls': 'tabpanel-3', }} > Tab 3 </Tabs.Item> <Tabs.Item innerProps={{ 'aria-controls': 'tabpanel-4', }} > Tab 4 </Tabs.Item> <DropDownWithState trigger={ <Tabs.Item active={[5, 6, 7].includes(active)} innerProps={{ 'aria-controls': 'tabpanel-5', }} > More <Icon symbol="caret-bottom" /> </Tabs.Item> } > <DropDown.ItemList> {dropdownTabsItems.map( ({disabled = false, label, tabkey}, i) => { return ( <DropDown.Item active={active === tabkey} aria-selected={active === tabkey} disabled={disabled} key={i} onClick={() => setActive(tabkey)} role="tab" symbolRight={active === tabkey ? 'check' : undefined} > {label} </DropDown.Item> ); } )} </DropDown.ItemList> </DropDownWithState> </Tabs> <Tabs.Content activeIndex={active} fade> <Tabs.TabPane aria-labelledby="tab-1"> 1. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu. </Tabs.TabPane> <Tabs.TabPane aria-labelledby="tab-2"> 2. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu. </Tabs.TabPane> <Tabs.TabPane aria-labelledby="tab-3"> 3. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu. </Tabs.TabPane> <Tabs.TabPane aria-labelledby="tab-4"> 4. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu. </Tabs.TabPane> <Tabs.TabPane aria-labelledby="tab-5"> 5. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu. </Tabs.TabPane> <Tabs.TabPane aria-labelledby="tab-6"> 6. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu. </Tabs.TabPane> <Tabs.TabPane aria-labelledby="tab-7"> 7. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu. </Tabs.TabPane> <Tabs.TabPane aria-labelledby="tab-8"> 8. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu. </Tabs.TabPane> </Tabs.Content> </> </div> </Provider> ); }
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).
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.
modern
boolean | undefined
Applies a modern style to the tab.
onActiveChange
InternalDispatch<number> | undefined
Callback is called when the active tab changes (controlled).
Returns
ElementContent
React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLDivElement>>
Parameters
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>> | nullItem
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>> | nullList
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>> | nullTabPane
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>> | nullContributors
Last edited May 11, 2025 at 5:57:01 PM