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.

Simple Tabs

A simple example with no frills.

Item One

<AppBar position="static">
  <Tabs value={value} onChange={handleChange} aria-label="simple tabs example">
    <Tab label="Item One" {...a11yProps(0)} />
    <Tab label="Item Two" {...a11yProps(1)} />
    <Tab label="Item Three" {...a11yProps(2)} />
  </Tabs>
</AppBar>
<TabPanel value={value} index={0}>
  Item One
</TabPanel>
<TabPanel value={value} index={1}>
  Item Two
</TabPanel>
<TabPanel value={value} index={2}>
  Item Three
</TabPanel>

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 property.

<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" property 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 property 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

Left and right scroll buttons will automatically be presented on desktop and hidden on mobile. (based on viewport width)

Item One

Forced Scroll Buttons

Left and right scroll buttons will be presented regardless of the viewport width.

Item One

Prevent Scroll Buttons

Left and right scroll buttons will never be presented. All scrolling must be initiated through user agent scrolling mechanisms (e.g. left/right swipe, shift-mousewheel, etc.)

Item One

Customized tabs

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

<div className={classes.demo1}>
  <AntTabs value={value} onChange={handleChange} aria-label="ant example">
    <AntTab label="Tab 1" />
    <AntTab label="Tab 2" />
    <AntTab label="Tab 3" />
  </AntTabs>
  <Typography className={classes.padding} />
</div>
<div className={classes.demo2}>
  <StyledTabs value={value} onChange={handleChange} aria-label="styled tabs example">
    <StyledTab label="Workflows" />
    <StyledTab label="Datasets" />
    <StyledTab label="Connections" />
  </StyledTabs>
  <Typography className={classes.padding} />
</div>

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

Vertical tabs

Item One

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>