Tabs

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

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

Table of Contents

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.

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import Tabs from '@clayui/tabs';
import React, {useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	const [active, setActive] = useState(0);

	return (
		<Provider spritemap="/public/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

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import Tabs from '@clayui/tabs';
import React, {useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	const [active, setActive] = useState(0);

	return (
		<Provider spritemap="/public/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

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.

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import Tabs from '@clayui/tabs';
import React, {useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	const [active, setActive] = useState(0);

	return (
		<Provider spritemap="/public/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:

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import Tabs from '@clayui/tabs';
import Icon from '@clayui/icon';
import DropDown, {Align} from '@clayui/drop-down';
import React, {useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

const DropDownWithState = ({children, trigger, ...others}) => {
	return (
		<DropDown
			alignmentPosition={Align.BottomLeft}
			hasRightSymbols
			trigger={trigger}
			{...others}
		>
			{children}
		</DropDown>
	);
};

export default function App() {
	const [active, setActive] = useState(0);

	const dropdownTabsItems = [
		{
			disabled: true,
			label: 'Tab 5',
			tabkey: 5,
		},
		{
			label: 'Tab 6',
			tabkey: 6,
		},
		{
			label: 'Tab 7',
			tabkey: 7,
		},
	];

	return (
		<Provider spritemap="/public/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
Properties

activation

"manual" | "automatic" | undefined= "manual"

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

any

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

Returns
Element

Content

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

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

props *

IProps & RefAttributes<any>
Returns
ReactElement<any, string | JSXElementConstructor<any>> | null

List

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

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
Properties

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

Table of Contents