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.

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.

Variant

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.

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.

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.

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.

Common examples

Pricing tabs

Page tabs

Mobile bottom navigation

Unstyled