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.
A simple example with no frills.
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.
Fixed tabs should be used with a limited number of tabs and when consistent placement will aid muscle memory.
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.
Left and right scroll buttons will automatically be presented on desktop and hidden on mobile. (based on viewport width)
Left and right scroll buttons will be presented regardless of the viewport width.
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.)
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.
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: