Skip to content

TabList API

API reference docs for the React TabList component. Learn about the props, CSS, and other APIs of this exported module.

Demos

Import

import TabList from '@mui/lab/TabList';
// or
import { TabList } from '@mui/lab';

Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the Tabs component are also available.

NameTypeDescription
childrennode

A list of <Tab /> elements.

The ref is forwarded to the root element.

Inheritance

While not explicitly documented above, the props of the Tabs component are also available in TabList. You can take advantage of this to target nested components.

CSS classes

These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.

Class nameRule nameDescription
.MuiTabList-centeredcenteredStyles applied to the flex container element if centered={true} & !variant="scrollable".
.MuiTabList-fixedfixedStyles applied to the tablist element if !variant="scrollable".
.MuiTabList-flexContainerflexContainerStyles applied to the flex container element.
.MuiTabList-flexContainerVerticalflexContainerVerticalStyles applied to the flex container element if orientation="vertical".
.MuiTabList-hideScrollbarhideScrollbarStyles applied to the tablist element if variant="scrollable" and visibleScrollbar={false}.
.MuiTabList-indicatorindicatorStyles applied to the TabIndicator component.
.MuiTabList-rootrootStyles applied to the root element.
.MuiTabList-scrollableXscrollableXStyles applied to the tablist element if variant="scrollable" and orientation="horizontal".
.MuiTabList-scrollableYscrollableYStyles applied to the tablist element if variant="scrollable" and orientation="vertical".
.MuiTabList-scrollButtonsscrollButtonsStyles applied to the ScrollButtonComponent component.
.MuiTabList-scrollButtonsHideMobilescrollButtonsHideMobileStyles applied to the ScrollButtonComponent component if allowScrollButtonsMobile={true}.
.MuiTabList-scrollerscrollerStyles applied to the tablist element.
.MuiTabList-verticalverticalStyles applied to the root element if orientation="vertical".

You can override the style of the component using one of these customization options:

Source code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.