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.

Basics

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

The Joy UI set of Tabs components follows the WAI ARIA design pattern guidelines.

Use the value prop on the Tab Panel and the defaultValue prop on the Tabs component to target the selected tab.

Disabled tab

Use the disabled prop to disable interaction and focus.

Customization

Variants

The <TabList /> and <Tab /> components accept the global variant prop values.

Vertical

Use the orientation="vertical" prop on the <Tabs /> component to make it vertical. Keyboard navigation using arrow keys adapts automatically.

Indicator placement

Use the underlinePlacement prop on the Tab List component to change the placement of the underline border on the Tabs.

Control the selected Tab indicator independently using the indicatorPlacement prop.

Depending on the placement of the underline and the selected indicator, you may need to change the flex direction of the Tabs component.

Sticky

Use the sticky prop to anchor the Tab List component at the top or bottom. This is ideal for use cases that involve longer content.

Tab flex

Use the tabFlex prop on the Tab List component to make the Tab elements fill the available space, as shown in the example below.

• In the first demo, the Tab elements fill the available space using tabFlex={1}.
• In the second demo, the Tab elements fill the available space equally using tabFlex="auto", but the width of each respective element is based on its content.

Icon

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

Scrollable tabs

Add the overflow: auto property to the Tab List component to make the tabs scrollable.

Polish it further by hiding the scrollbar with '&::-webkit-scrollbar': { display: 'none' }, and snapping the scroll to the edge of the Tab List component with CSS scroll snap properties.

CSS variables playground

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

Segmented controls

To mimic the segmented controls of iOS, add a border-radius to the Tab List component and set the selected Tab background to background.surface.

Browser tabs

In this example, the Tab's variant prop is set to outlined and the indicator is moved to the top via indicatorPlacement="top". The borders are then set to transparent based on the selected state.

Pricing tabs

This example removes the background of the selected Tab by targeting the aria-selected="true" attribute.

Centered tabs

To center the Tab components in the Tab List, add the flex: initial property to override the default flex-grow behavior. Then, on the list, add justifyContent: center.

Mobile bottom navigation

In this example, each Tab is painted with a color from the theme when selected.

Accessibility

To ensure proper accessibility, the ARIA Authoring Practices Guide recommends associating a label with the Tabs component. There are two options to accomplish this:

Using the id attribute

Add a text element close to the tabs with the id attribute. Then add the aria-labelledby attribute to the Tabs component. Make sure to use meaningful labels for both.

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

Using aria-label

If a text element does not accompany your Tabs component, use the aria-label attribute directly to make it readable by screen readers.

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

Unstyled

Use the Base UI Tabs for complete ownership of the component's design, with no Material UI styles to override. This unstyled version of the component is the ideal choice for heavy customization with a smaller bundle size.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <Tab />
• <TabList />
• <TabPanel />
• <Tabs />