Tabs API
API reference docs for the React Tabs component. Learn about the props, CSS, and other APIs of this exported module.
Component demos
Import
import Tabs from '@mui/material/Tabs';
// or
import { Tabs } from '@mui/material';
Props of the native component are also available.
Callback fired when the component mounts. This is useful when you want to trigger an action programmatically. It supports two actions: updateIndicator()
and updateScrollButtons()
Type:ref
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
.
Type:bool
Default:false
If true
, the tabs are centered. This prop is intended for large views.
Type:bool
Default:false
Override or extend the styles applied to the component.
See CSS API below for more details.
Type:object
The component used for the root node. Either a string to use a HTML element or a component.
Type:elementType
Determines the color of the indicator.
Type:'primary'
| 'secondary'
| string
Default:'primary'
Callback fired when the value changes.
Type:func
function(event: React.SyntheticEvent, value: any) => void
event
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)
The component orientation (layout flow direction).
Type:'horizontal'
| 'vertical'
Default:'horizontal'
The component used to render the scroll buttons.
Type:elementType
Default:TabScrollButton
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
.
Type:'auto'
| false
| true
Default:'auto'
If true
the selected tab changes on focus. Otherwise it only changes on activation.
Type:bool
The extra props for the slot components. You can override the existing props or add new ones.
Type:{ endScrollButtonIcon?: func
| object, startScrollButtonIcon?: func
| object }
Default:{}
The components used for each slot inside.
Type:{ EndScrollButtonIcon?: elementType, StartScrollButtonIcon?: elementType }
Default:{}
The system prop that allows defining system overrides as well as additional CSS styles.
See the `sx` page for more details.
Type:Array<func
| object
| bool>
| func
| object
The value of the currently selected Tab
. If you don't want any selected Tab
, you can set this prop to false
.
Type:any
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.
Type:'fullWidth'
| 'scrollable'
| 'standard'
Default:'standard'
ref
is forwarded to the root element.Theme default props
You can use MuiTabs
to change the default props of this component with the theme.
These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.
Styles applied to the flex container element if centered={true}
& !variant="scrollable"
.
Rule name:centered
Styles applied to the flex container element if orientation="vertical"
.
Rule name:flexContainerVertical
Styles applied to the tablist element if variant="scrollable"
and visibleScrollbar={false}
.
Rule name:hideScrollbar
Styles applied to the tablist element if variant="scrollable"
and orientation="horizontal"
.
Rule name:scrollableX
Styles applied to the tablist element if variant="scrollable"
and orientation="vertical"
.
Rule name:scrollableY
Styles applied to the ScrollButtonComponent component if allowScrollButtonsMobile={true}
.
Rule name:scrollButtonsHideMobile
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
styleOverrides
property in a custom theme.