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.

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.

Disabled Tab

A Tab can be disabled by setting disabled property.

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.

Centered

The centered property should be used for larger views.

Scrollable Tabs

Automatic Scroll Buttons

Left and right scroll buttons will automatically be presented on desktop and hidden on mobile. (based on viewport width)

Forced Scroll Buttons

Left and right scroll buttons will be presented regardless of the viewport width.

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.)

Customized tabs

Here is an example of customizing the component. You can learn more about this in the overrides documentation page.

👑 If you are looking for inspiration, you can check MUI Treasury's customization examples.

Vertical tabs

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:

Icon Tabs

Tab labels may be either all icons or all text.

API

• <Tab />
• <Tabs />