How to use Material UI tabs

Key takeaways:
Material UI is an open-source library that provides predefined and reusable React components for building attractive user interfaces.
Tabs help organize related content and enable users to switch between different components efficiently within a React application.
Tabs can be implemented using Tab, Tabs, TabPanel, and TabContext components. These components manage active states, display tab headers, and render content dynamically.
Customization options:
Scrollable tabs: Use the variant="scrollable" prop to make the tab bar scrollable.
Centered tabs: Apply the centered prop to center the tab bar on the page.
Active tab styling: Use the indicatorColor and textColor props to customize the color of the active tab.

Material UI is an open-source library that allows us to create attractive user interfaces by leveraging predefined and reusable React components. In this Answer, we'll learn how to integrate and use Material UI tabs in the React application.

Note: Before integrating Material UI tabs, install Material UI in your React application.

Material UI tabs

Material UI tabs are a versatile component for creating organized, user-friendly interfaces in React applications. They allow seamless navigation between related content and offer options like scrollable and centered layouts, making them ideal for modern, responsive designs.

How to create a basic material UI tab

To create a basic and simple tab view, we can use the code given below:

import React from 'react';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import TabPanel from '@mui/lab/TabPanel';
import TabContext from '@mui/lab/TabContext';

 function App(){
  const [value, setValue] = React.useState(1);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  
    return (
    <>
      <TabContext value={value}>
      
        <Tabs value={value} onChange={handleChange}>
          <Tab label="Home" value={1} />
          <Tab label="About Us" value={2}/>
          <Tab label="Contact Us"  value = {3}/>
        </Tabs>
      
        <TabPanel value={1}>Home Tab View</TabPanel>
        <TabPanel value={2}>About Us Tab View</TabPanel>
        <TabPanel value={3}>Contact Us Tab View</TabPanel>
      
      </TabContext>
    </>
    );
  }

export default App;

Code to create tabs and their views

Code explanation

Lines 2–5: We import Tab, Tabs, TabPanel and TabContext from @mui/material/Tab, @mui/material/Tabs, @mui/lab/TabPanel, @mui/lab/TabContext, respectively.
Line 16: TabContext component wraps around the tab interface and provides a context value to the TabPanel and Tabs to manage the active tab.
Lines 18–22: Tabs is used to represent the tabs in the header. It contains the Tab components that display individual tabs. The value prop in the Tabs component is used to set the active state to the Tab component with the same value. The onChange function changes the value state.
Lines 24–26: TabPanel contains the value prop, which helps in selecting the TabPanel component to be displayed. The TabPanel component whose value matches the value of TabContext is displayed on the screen.

How to make scrollable Material UI tabs

We can make the Tabs component scrollable by adding the variant prop and setting its value to scrollable. Please click the “Run” button to view the scrollable tab:

import React from 'react';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';

 function App(){
  const [value, setValue] = React.useState(1);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  
    return (
    <>
        <Tabs value={value} onChange={handleChange} variant = "scrollable">
          <Tab label="Home" value={1} />
          <Tab label="About Us" value={2}/>
          <Tab label="Contact Us"  value = {3}/>
          <Tab label="Settings" value={4} />
          <Tab label="Product" value={5}/>
          <Tab label="Complains"  value = {6}/>
          <Tab label="Dashboard"  value = {7}/>
          <Tab label="Vision" value={8} />
          <Tab label="Mission" value={9}/>
          <Tab label="Location"  value = {10}/>
        </Tabs>
    </>
    );
  }

export default App;

Code to make the tab bar scrollable

import React from 'react';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';

 function App(){
  const [value, setValue] = React.useState(1);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  
    return (
    <>
        <Tabs value={value} onChange={handleChange} centered>
          <Tab label="Home" value={1} />
          <Tab label="About Us" value={2}/>
          <Tab label="Contact Us"  value = {3}/>
          <Tab label="Settings" value={4} />
          <Tab label="Product" value={5}/>
          <Tab label="Complains"  value = {6}/>
        </Tabs>
    </>
    );
  }

export default App;

Code to center the tab bar

import React from 'react';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';

 function App(){
  const [value, setValue] = React.useState(1);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  
    return (
    <>
        <Tabs value={value} onChange={handleChange}   indicatorColor="secondary" textColor='secondary' centered>
          <Tab label="Home" value={1} />
          <Tab label="About Us" value={2}/>
          <Tab label="Contact Us"  value = {3}/>
          <Tab label="Settings" value={4} />
          <Tab label="Product" value={5}/>
          <Tab label="Complains"  value = {6}/>
        </Tabs>
    </>
    );
  }

export default App;

Code to change color of the active tab

Frequently asked questions

Haven’t found what you were looking for? Contact Us

Can I add icons to Material UI tabs?

Yes, we can add icons to Material UI tabs by including the icon prop inside the Tab component. We can either use Material UI icons or custom icons.

Is material UI easy to learn?

Yes, Material UI is relatively easy to learn, especially for developers familiar with React. It offers a comprehensive set of components and clear documentation.

Does Netflix use MUI?

Based on available information, Netflix does not use Material UI (MUI). Instead, the company relies on its own custom design system and UI components tailored to its specific needs and branding.

Free Resources

Learn in-demand tech skills in half the time

PRODUCTS

Mock Interview

New

Courses

Skill Paths

Projects

Assessments