Tabs

One panel at a time out of several, each with its own heading. Different content per tab, which is what separates it from a Segmented.

Basic

Pass items with a key, label and children for each tab, and set defaultActiveKey to choose the one that opens first.

Playground

Try the options together on one tab bar: type, color, tabPlacement, size, icons, centered and a disabled tab.

Floating

Set type="floating" for an underline as wide as the label, with a rounded highlight behind the label on hover.

Padded

Set type="padded" for a highlight that covers the whole padded tab on hover, with the underline spanning the same width.

Docked

Set type="docked" for padded tabs that fill down to the bar on hover, with a thicker indicator under the icon and label.

Vertical docked tabs

Set type="docked" with tabPlacement="end" for a side rail, where each tab is rounded on the side away from the rail.

Stacked icon

Pass classNames.item to stack each tab's icon above its label, like the tabs of a bottom navigation bar.

Color

Set color="primary" to paint the indicator and the active label in the primary color on any type, instead of the neutral default.

Card

Set type="card" to put each tab in a box and join the active one to its panel, like the tabs of a file folder.

Editable cards

Set type="editable-card" and handle onEdit to add tabs with the plus button and close them with the cross on each tab.

Size

Set size to small, medium or large to scale the tab bar, where large suits a page header and small a modal.

Placement

Set tabPlacement to top, end, bottom or start to move the tab bar to any side, with every type, card included.

Centered

Set centered to center the tabs in the bar, which suits a short set of tabs over a wide panel.

Disabled

Set disabled on an item in items to keep its tab visible but stop the reader from selecting it.

Icon tabs

Pass an Icon to an item's icon to put a glyph before its label, and it follows the active icon pack.

Icon only

Leave label empty and put the icon with hidden text in icon for icon-only tabs that screen readers can still name.

Extra content

Pass tabBarExtraContent a node for the end of the bar, or { left, right } for both ends, like a title and a New button.

Custom add button

Set hideAdd to remove the built-in plus button and add tabs from your own control, like a New tab button at the end of the bar.

Overflow

Tabs that do not fit the bar scroll, and the ones out of view go into a menu at the end of the bar, like twenty sections.

Indicator

Pass indicator a size, as a number or a function of the tab's width, and an align of start, center or end.
Pass renderTabBar to wrap the default bar in a sticky element, so it stays in view while a long panel scrolls.

Unmount hidden panels

Set destroyOnHidden to unmount a panel when its tab is not active, so anything typed in it is cleared when the reader comes back.

classNames and styles

Pass classNames or styles to style one part of the tabs, like a tinted header and body with a colored indicator.

In context

The component inside real screens, with the components it usually sits beside.

Workspace settings

Workspace settings with a count Badge in the tab labels, listing members, pending invitations, requests and an audit log.

API Reference

Tabs
Tabs's props. Rows marked antuikit in the Version column are added by the kit.
TabItemType
The fields of an entry in items.
MoreProps
The fields of more, besides any Dropdown prop.