Skip to content
Edit this page

Tabs

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

Introduction

Joy UI provides four tabs-related components:

  • Tabs: A context provider that synchronizes the selected Tab with the corresponding TabPanel.
  • TabList: A container that consists of Tab items.
  • Tab: A button to toggle a selected tab.
  • TabPanel: A pane that displays on the screen when its value matches with the selected tab.
<Tabs>
  <TabList variant="soft" color="neutral">
    <Tab>...</Tab>
  </TabList>
</Tabs>

Playground

Color

size

Component

After installation, you can start building with this component using the following basic elements:

import Tabs from '@mui/joy/Tabs';
import TabList from '@mui/joy/TabList';
import Tab from '@mui/joy/Tab';

export default function MyApp() {
  return (
    <Tabs defaultValue={1}>
      <TabList>
        <Tab value={1}>Tab A</Tab>
        <Tab value={2}>Tab B</Tab>
        <Tab value={3}>Tab C</Tab>
      </TabList>
    </Tabs>
  );
}

Basic usage

The tabs structure follows WAI ARIA design pattern. To target the initially selected tab, specify the value prop to the TabPanel and use Tabs's defaultValue.

First tab panel
<Tabs aria-label="Basic tabs" defaultValue={0}>
  <TabList>
    <Tab>First tab</Tab>
    <Tab>Second tab</Tab>
    <Tab>Third tab</Tab>
  </TabList>
  <TabPanel value={0}>
    <b>First</b> tab panel
  </TabPanel>
  <TabPanel value={1}>
    <b>Second</b> tab panel
  </TabPanel>
  <TabPanel value={2}>
    <b>Third</b> tab panel
  </TabPanel>
</Tabs>

Variants

Both TabList and Tab accept global variant values, so you can mix and match to get the desired result.

Disabled tab

To disable a tab, use the disabled prop on the Tab component.

<Tabs aria-label="Disabled tabs" defaultValue={0}>
  <TabList>
    <Tab>First tab</Tab>
    <Tab disabled>Second tab</Tab>
    <Tab>Third tab</Tab>
  </TabList>
</Tabs>

Vertical

To set the tabs orientation to vertical, use the orientation="vertical" on the Tabs component. Keyboard navigation (e.g. arrow keys) will adapt automatically to the used orientation.

First tab panel

Icon

Since TabList uses the same style as the List component, you can use the icon directly as a child or use ListItemDecorator with a text.

<Tabs aria-label="Icon tabs" defaultValue={0}>
  <TabList>
    <Tab>
      <PhoneIcon />
    </Tab>
    <Tab>
      <FavoriteIcon />
    </Tab>
    <Tab>
      <PersonPinIcon />
    </Tab>
  </TabList>
</Tabs>

Accessibility

For ensuring proper accessibility, it's recommended by ARIA Authoring Practices Guide to associate a label to the Tabs component. To do that, there are two options:

Option one

Render a text element with an id and provide aria-labelledby="$is"to the Tabs component.

<Typography id="tabs-accessibility-label">Meaningful label</Typography>
<Tabs aria-labelledby="tabs-accessibility-label">...</Tabs>

Option two

When not displaying a text element on the screen, use aria-label directly on the Tabs component. Screen readers will then properly announce the label.

<Tabs aria-label="Meaningful label">...</Tabs>

CSS Variables

Play around with all the CSS variables available in the slider component to see how the design changes.

You can use those to customize the component on both the sx prop and the theme.

Tab A content
<Tabs >

CSS Variables

px

Controls TabList's gap and TabPanel's padding.

Common examples

Pricing tabs

Get started with the industry-standard React UI library, MIT-licensed.

$0 － Free forever

Page tabs

Deals

Mobile bottom navigation

Unstyled

The component also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size.