Tabs

Tabs make it easy to explore and switch between different views.

Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.

Basic tabs

A basic example with no frills.

Item One

Wrapped labels

Long labels will automatically wrap on tabs. If the label is too long for the tab, it will overflow and the text will not be visible.

Item One

Disabled tab

A Tab can be disabled by setting disabled prop.

<Paper square>
  <Tabs
    value={value}
    indicatorColor="primary"
    textColor="primary"
    onChange={handleChange}
    aria-label="disabled tabs example"
  >
    <Tab label="Active" />
    <Tab label="Disabled" disabled />
    <Tab label="Active" />
  </Tabs>
</Paper>

Fixed tabs

Fixed tabs should be used with a limited number of tabs and when consistent placement will aid muscle memory.

Full width

The variant="fullWidth" prop should be used for smaller views. This demo also uses react-swipeable-views to animate the Tab transition, and allowing tabs to be swiped on touch devices.

Item One

Centered

The centered prop should be used for larger views.

<Paper className={classes.root}>
  <Tabs
    value={value}
    onChange={handleChange}
    indicatorColor="primary"
    textColor="primary"
    centered
  >
    <Tab label="Item One" />
    <Tab label="Item Two" />
    <Tab label="Item Three" />
  </Tabs>
</Paper>

Scrollable tabs

Automatic scroll buttons

By default, left and right scroll buttons are automatically presented on desktop and hidden on mobile. (based on viewport width)

<Tabs
  value={value}
  onChange={handleChange}
  variant="scrollable"
  scrollButtons="auto"
  aria-label="scrollable auto tabs example"
>
  <Tab label="Item One" />
  <Tab label="Item Two" />
  <Tab label="Item Three" />
  <Tab label="Item Four" />
  <Tab label="Item Five" />
  <Tab label="Item Six" />
  <Tab label="Item Seven" />
</Tabs>

Forced scroll buttons

Left and right scroll buttons be presented (reserve space) regardless of the viewport width with scrollButtons={true} allowScrollButtonsMobile:

<Tabs
  value={value}
  onChange={handleChange}
  variant="scrollable"
  scrollButtons
  allowScrollButtonsMobile
  aria-label="scrollable force tabs example"
>
  <Tab label="Item One" />
  <Tab label="Item Two" />
  <Tab label="Item Three" />
  <Tab label="Item Four" />
  <Tab label="Item Five" />
  <Tab label="Item Six" />
  <Tab label="Item Seven" />
</Tabs>

If you want to make sure the buttons are always visible, you should customize the opacity.

.MuiTabs-scrollButtons.Mui-disabled {
  opacity: 0.3;
}

Prevent scroll buttons

Left and right scroll buttons are never be presented with scrollButtons={false}. All scrolling must be initiated through user agent scrolling mechanisms (e.g. left/right swipe, shift-mousewheel, etc.)

<Tabs
  value={value}
  onChange={handleChange}
  variant="scrollable"
  scrollButtons={false}
  aria-label="scrollable prevent tabs example"
>
  <Tab label="Item One" />
  <Tab label="Item Two" />
  <Tab label="Item Three" />
  <Tab label="Item Four" />
  <Tab label="Item Five" />
  <Tab label="Item Six" />
  <Tab label="Item Seven" />
</Tabs>

Customized tabs

Here is an example of customizing the component. You can learn more about this in the overrides documentation page.

🎨 If you are looking for inspiration, you can check MUI Treasury's customization examples.

Vertical tabs

To make vertical tabs instead of default horizontal ones, there is orientation="vertical":

Item One

Note that you can restore the scrollbar with visibleScrollbar.

Nav Tabs

By default tabs use a button element, but you can provide your own custom tag or component. Here's an example of implementing tabbed navigation:

Page One Page Two Page Three

Page One

Icon Tabs

Tab labels may be either all icons or all text.

<Paper square className={classes.root}>
  <Tabs
    value={value}
    onChange={handleChange}
    variant="fullWidth"
    indicatorColor="primary"
    textColor="primary"
    aria-label="icon tabs example"
  >
    <Tab icon={<PhoneIcon />} aria-label="phone" />
    <Tab icon={<FavoriteIcon />} aria-label="favorite" />
    <Tab icon={<PersonPinIcon />} aria-label="person" />
  </Tabs>
</Paper>

<Paper square className={classes.root}>
  <Tabs
    value={value}
    onChange={handleChange}
    variant="fullWidth"
    indicatorColor="secondary"
    textColor="secondary"
    aria-label="icon label tabs example"
  >
    <Tab icon={<PhoneIcon />} label="RECENTS" />
    <Tab icon={<FavoriteIcon />} label="FAVORITES" />
    <Tab icon={<PersonPinIcon />} label="NEARBY" />
  </Tabs>
</Paper>

Accessibility

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#tabpanel)

The following steps are needed in order to provide necessary information for assistive technologies:

Label Tabs via aria-label or aria-labelledby.
Tabs need to be connected to their corresponding [role="tabpanel"] by setting the correct id, aria-controls and aria-labelledby.

An example for the current implementation can be found in the demos on this page. We've also published an experimental API in @material-ui/lab that does not require extra work.

Keyboard navigation

The components implement keyboard navigation using the "manual activation" behavior. If you want to switch to the "selection automatically follows focus" behavior you have pass selectionFollowsFocus to the Tabs component. The WAI-ARIA authoring practices have a detailed guide on how to decide when to make selection automatically follow focus.

Demo

The following two demos only differ in their keyboard navigation behavior. Focus a tab and navigate with arrow keys to notice the difference.

/* Tabs where selection follows focus */
<Tabs selectionFollowsFocus />
/* Tabs where each tab needs to be selected manually */
<Tabs />

Experimental API

@material-ui/lab offers utility components that inject props to implement accessible tabs following WAI-ARIA authoring practices.

Item One

<TabContext value={value}>
  <AppBar position="static">
    <TabList onChange={handleChange} aria-label="simple tabs example">
      <Tab label="Item One" value="1" />
      <Tab label="Item Two" value="2" />
      <Tab label="Item Three" value="3" />
    </TabList>
  </AppBar>
  <TabPanel value="1">Item One</TabPanel>
  <TabPanel value="2">Item Two</TabPanel>
  <TabPanel value="3">Item Three</TabPanel>
</TabContext>