Tabs make it easy to explore and switch between different views or functional aspects of an app or to browse categorized data sets. Within react-md, tabs are implemented with several components to handle different use cases:

  • TabsContainer
  • Tabs
  • Tab
  • MenuTab

The TabsContainer is used when you want to have swipeable tabs and a full page view. This will manage the state of selecting and displaying a tab's content. The user can swipe left or right on mobile devices to advance/retract to other tabs.

The Tabs component is used to render your list of Tab.

The Tab component is used to display a tab, and then have its children extracted by the TabsContainer or Tabs component to be displayed. The children can also be null or undefined if you want to manage displaying the content on your own.

The MenuTab component is used when there are too many tabs on a desktop display. It will automatically be used by the Tabs component when the menuOverflow prop is enabled.

This will be the most simple example of showing how you can use the TabsContainer, Tabs, and Tab components together to display some content. When using tabs, you need to provide a unique id to each Tab or provide a tabId to the Tabs component. These ids are required for accessibility and help when you need additional control of the content (see next example).

Hello, World!

Since Tabs normally are a full page layout type of thing, the TabsContainer can be updated to include a toolbar and be fixed to the top of the page. This will apply some additional styles and class names to offset the tab panels and fix the toolbar + tabs to the top of the page.


Page Title

This is the Recents tab.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec orci quam, egestas sed vehicula cursus, sodales vel orci. Proin vitae aliquam lacus, efficitur mollis tortor. Duis at velit pulvinar, auctor justo a, euismod est. Donec convallis ut leo ac sodales. Vestibulum finibus sodales diam, a gravida mi mattis in. Vestibulum elementum sagittis lacus, vitae sagittis ante elementum nec. Donec et viverra eros, vitae tempus metus. Integer elementum mi a purus porta eleifend. Aenean diam est, sollicitudin ac ultrices eu, gravida a enim. Mauris enim ligula, sagittis ac eros imperdiet, lacinia dignissim libero. Praesent suscipit viverra velit elementum posuere.

Nulla consectetur velit at nibh cursus ultrices. Mauris dui nisi, finibus at ligula et, dapibus bibendum mi. Morbi et dolor sodales, fermentum libero in, mollis sapien. Ut cursus, nisi sed lacinia cursus, est eros tincidunt tellus, at rutrum dolor elit mattis quam. Etiam volutpat arcu ut ipsum euismod, a viverra tortor sagittis. Curabitur eget convallis leo, et ultricies justo. Duis at mollis justo, vel dapibus nulla. Fusce commodo libero posuere sollicitudin egestas. Aenean a ornare ligula. Sed ut dui et diam suscipit vestibulum et eu lorem. Vestibulum scelerisque vel eros sit amet tincidunt. Aenean sed lectus ac risus posuere molestie vitae in massa. Maecenas gravida ipsum eu tellus pulvinar, ullamcorper efficitur leo consequat. Proin iaculis a nisl et viverra. Fusce in eros eget elit iaculis ullamcorper ut vel ante.

There are times where you don't need the TabsContainer component to handle selecting active tab content for you and adding swiping. For these cases, you can just use the Tabs with a list of Tab that have no children. For this documentation site, I am using the Tabs component with react-router to change the route and display different content in the NavigationDrawer's content.

Check out the source code in this card to see how the DocumentationTabs was added.