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.)
If you have read the overrides documentation page but aren't confident jumping in, here's an example of how you can change the main color of the Tabs.
⚠️ While the material design specification encourages theming, this example is off the beaten path.
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: