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