Skip to content
Edit this page

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 OnePage TwoPage Three

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>

Experimental Tabs 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>

API