React Material UI Tabs

Tabbed navigation is a common need in web development. You often will have too much content to show on a page, and you want to keep it organized by tabs. Make sure you have @mui/material installed in your react app. Let's get started.

First, make sure you have the necessary imports:

Next, let's take a look at some example usage inside of a react component:




The TabContext implicitly gives the Tab components below the value of the selected tab, and which tab panel should be visible. @mui/material handles this internally.

To handle tab selection, we attach an onChange event handler to the <TabList> component. The onChange function receives the event and newValue parameters and updates the tabValue state variable accordingly and the correct tab is then shown. The string values I have selected above are arbitrary. You can select any string or number to represent your tab value.

Stay tuned for more useful gists.