Tabs

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

install	yarn add @clayui/tabs
version
use	`import Tabs from '@clayui/tabs';`

Table of Contents

Introduction
Tabs
Light Tabs
Modern Tabs
Dropdown Tabs
TabPanel
API Reference

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.

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

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.

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>
  );
}

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).

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

Table of Contents

Introduction
Tabs
Light Tabs
Modern Tabs
Dropdown Tabs
TabPanel
API Reference

Tabs

Introduction

Tabs

Light Tabs

Modern Tabs

Dropdown Tabs

TabPanel

API Reference

Tabs

Parameters

activation

active

defaultActive

displayType

fade

justified

modern

onActiveChange

Returns

Content

Parameters

activeIndex

children *

fade

Returns

Item

Parameters

active

disabled

href

innerProps

onClick

Returns

List

Parameters

children *

className

Returns

TabPane

Parameters

active

fade

Returns