Tabs API
API documentation for the React Tabs component. Learn about the available props and the CSS API.
Import
import Tabs from '@mui/material/Tabs';
// or
import { Tabs } from '@mui/material';Component name
The nameMuiTabs can be used when providing default props or style overrides in the theme.Props
Props of the native component are also available.
| Name | Type | Default | Description |
|---|---|---|---|
| action | ref | Callback fired when the component mounts. This is useful when you want to trigger an action programmatically. It supports two actions: updateIndicator() and updateScrollButtons() | |
| allowScrollButtonsMobile | bool | false | If true, the scroll buttons aren't forced hidden on mobile. By default the scroll buttons are hidden on mobile and takes precedence over scrollButtons. |
| aria-label | string | The label for the Tabs as a string. | |
| aria-labelledby | string | An id or list of ids separated by a space that label the Tabs. | |
| centered | bool | false | If true, the tabs are centered. This prop is intended for large views. |
| children | node | The content of the component. | |
| classes | object | Override or extend the styles applied to the component. See CSS API below for more details. | |
| component | elementType | The component used for the root node. Either a string to use a HTML element or a component. | |
| indicatorColor | 'primary' | 'secondary' | 'primary' | Determines the color of the indicator. |
| onChange | func | Callback fired when the value changes. Signature: function(event: React.SyntheticEvent, value: any) => voidevent: The event source of the callback. Warning: This is a generic event not a change event. value: We default to the index of the child (number) | |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | The component orientation (layout flow direction). |
| ScrollButtonComponent | elementType | TabScrollButton | The component used to render the scroll buttons. |
| scrollButtons | 'auto' | false | true | 'auto' | Determine behavior of scroll buttons when tabs are set to scroll: - auto will only present them when not all the items are visible. - true will always present them. - false will never present them.By default the scroll buttons are hidden on mobile. This behavior can be disabled with allowScrollButtonsMobile. |
| selectionFollowsFocus | bool | false | If true the selected tab changes on focus. Otherwise it only changes on activation. |
| sx | object | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. | |
| TabIndicatorProps | object | {} | Props applied to the tab indicator element. |
| TabScrollButtonProps | object | {} | Props applied to the TabScrollButton element. |
| textColor | 'inherit' | 'primary' | 'secondary' | 'primary' | Determines the color of the Tab. |
| value | any | The value of the currently selected Tab. If you don't want any selected Tab, you can set this prop to false. | |
| variant | 'fullWidth' | 'scrollable' | 'standard' | 'standard' | Determines additional display behavior of the tabs: - scrollable will invoke scrolling properties and allow for horizontally scrolling (or swiping) of the tab bar. -fullWidth will make the tabs grow to use all the available space, which should be used for small views, like on mobile. - standard will render the default state. |
| visibleScrollbar | bool | false | If true, the scrollbar is visible. It can be useful when displaying a long vertical list of tabs. |
The
ref is forwarded to the root element.CSS
| Rule name | Global class | Description |
|---|---|---|
| root | .MuiTabs-root | Styles applied to the root element. |
| vertical | .MuiTabs-vertical | Styles applied to the root element if orientation="vertical". |
| flexContainer | .MuiTabs-flexContainer | Styles applied to the flex container element. |
| flexContainerVertical | .MuiTabs-flexContainerVertical | Styles applied to the flex container element if orientation="vertical". |
| centered | .MuiTabs-centered | Styles applied to the flex container element if centered={true} & !variant="scrollable". |
| scroller | .MuiTabs-scroller | Styles applied to the tablist element. |
| fixed | .MuiTabs-fixed | Styles applied to the tablist element if !variant="scrollable". |
| scrollableX | .MuiTabs-scrollableX | Styles applied to the tablist element if variant="scrollable" and orientation="horizontal". |
| scrollableY | .MuiTabs-scrollableY | Styles applied to the tablist element if variant="scrollable" and orientation="vertical". |
| hideScrollbar | .MuiTabs-hideScrollbar | Styles applied to the tablist element if variant="scrollable" and visibleScrollbar={false}. |
| scrollButtons | .MuiTabs-scrollButtons | Styles applied to the ScrollButtonComponent component. |
| scrollButtonsHideMobile | .MuiTabs-scrollButtonsHideMobile | Styles applied to the ScrollButtonComponent component if allowScrollButtonsMobile={true}. |
| indicator | .MuiTabs-indicator | Styles applied to the TabIndicator component. |
You can override the style of the component using one of these customization options:
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.