Skip to content
+

Tabs

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

  • Feedback
  • Bundle size
  • WAI-ARIA
  • Figma

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.
Content of Tab A
<Tabs>
  <TabList>
    <Tab
      variant="plain"
      color="neutral">...</Tab>
  </TabList>
  <TabPanel>...</TabPanel>
</Tabs>

Playground


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.

First tab panel
Press Enter to start editing

Disabled tab

Use the disabled prop to disable interaction and focus.

Press Enter to start editing

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.

First tab panel

Indicator placement

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

underlinePlacement Top

Control the selected Tab indicator independently using the indicatorPlacement prop.

IndicatorPlacement Top

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

Content of Tab A

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.

Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long content
Long 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.

Press Enter to start editing

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.

Press Enter to start editing

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.

Tab A content
<Tabs >

CSS variables


px
Controls TabList's gap and TabPanel's padding.
px
px
px

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.

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

$0 - Free forever

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.

Deals

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

API

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

Edit this page

Was this page helpful?


StepperBox

Blog

Store