Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

How to Create MUI Tabs That Gives You Sleek Web Design

In this fast-paced world of software development, it is paramount to speed up development while still not losing efficiency and functionality. The importance of making use of tools, frameworks, and libraries that speed up development time cannot be over-emphasized.

Enter Material-UI (MUI), the library that allows you to create sleek, intuitive, and adaptive web applications.

MUI is a popular open-source React UI library that provides us with pre-built components, styles, and themes. MUI components use Google Material Design’s specifications.

What is Material UI?

MUI is a front-end library that you use for building React applications. It provides you with pre-built robust, customizable, and accessible React components that can you use to build your design system and develop your web applications faster.

MUI was started in 2014 by Hai Nguyen and since then, it has experienced significant growth, boasting 89k+ stars on GitHub, 1.5M+ weekly downloads, with a small bundle size of 93.7kB (Minified+ Gzipped).

The chart below ⬇ from NPM trends shows a comparison of the number of downloads of Material UI over the last year.

NPM Trends

MUI provides one component called Tabs that you can use to create a tab in Material-UI. In this article, we will learn how to build dynamic tabs using Material UI in React, we will cover the basics of importing the necessary components, creating a simple tab layout, handling tab selection, we’ll look at the Material UI tabs component, how they work, and how to create tab components with it in React.

If you use MUI for your project, consider using Purecode.ai to access over 10000+ AI-generated ready-made templates and components to speed up your development process.

Implementing MUI Tabs Component

Now you understand what MUI library is, its significance, and why it is a preferred choice for most developers. Let’s learn how to install React and the MUI library.

Prerequisite

Before creating MUI tabs, you need to have the following:

  • NPM installation on your machine.

  • Basic knowledge of JavaScript and React.

If you need help getting started with React, check out the video tutorial below.

Setting up a React App

In your terminal, enter the following command to create a new React application:

npx create-react-app my-app && cd my-app

Once your app is set up, run the application by entering either of these commands in your terminal:

yarn start

Or using npm:

npm start

Your server should launch in your browser at http://localhost:3000/, as shown below:

How to Install MUI

To get set up with MUI we can install it as an NPM package or use Yarn.

npm install @material-ui/core

or

yarn add @material-ui/core

Once the MUI library is successfully installed, you are all set to start using the MUI components in your React application.

Importing MUI Tabs Component

The first step is to import the Tabs component and its child component Tab. You can do this as follows:

import { Tabs, Tab } from "@material-ui/core";

These components will be essential for creating and managing tabs in your application.

Basic Tabs Example

import { AppBar, Tab, Tabs } from "@material-ui/core";

function App() {
  return (
    <div>
      <AppBar>
        <Tabs value={0}>
          <Tab label="Home" />
          <Tab label="About Us" />
          <Tab label="Contact Us" />
        </Tabs>
      </AppBar>
    </div>
  );
}

export default App;

This code snippet above ⬆ will render a tab bar within an AppBar. The value property determines the currently selected tab.

📝 Note: When you click on the tab in this example, the tab selection won’t change. To handle tab selection, you need to maintain a state variable for the current selected index, which we will cover next.

Managing Tab Selection

To make the tab interactive, you should maintain the tab selected index in a state variable. Here is an example below ⬇:

import { AppBar, Tab, Tabs } from "@material-ui/core";
import { useState } from "react";

function App() {
  const [index, setIndex] = useState(0);

  const onTabChange = (event, index) => {
    setIndex(index);
  };

  return (
    <div>
      <AppBar>
        <Tabs value={index} onChange={onTabChange}>
          <Tab label="Home" />
          <Tab label="About Us" />
          <Tab label="Contact Us" />
        </Tabs>
      </AppBar>
    </div>
  );
}

export default App;

Now, when you click on the tab, the tab selected index will update accordingly.

Managing Tab Selection

Displaying Different Components Based on Tab Selection

In the previous example, we updated the selected index, but we didn’t change the displayed content. To do that, we can conditionally render different components based on the tab selected index:

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { AppBar, Tab, Tabs, Typography, Box } from "@material-ui/core";
import "./styles.css";

const Panel = (props) => (
  <div hidden={props.value !== props.index}>
    <Typography>{props.children}</Typography>
  </div>
);

function App() {
  const [index, setIndex] = useState(0);

  const onTabChange = (event, index) => {
    setIndex(index);
  };

  return (
    <Box>
      <AppBar position="fixed">
        <Tabs value={index} onChange={onTabChange}>
          <Tab label="Home" />
          <Tab label="About Us" />
          <Tab label="Contact Us" />
        </Tabs>
      </AppBar>

      <Box mt={15}>
        <Panel value={index} index={0}>
          <Typography variant={"h4"}>
            {"Choose from 10,000+ AI generated custom components."}
          </Typography>
        </Panel>
        <Panel value={index} index={1}>
          <Typography variant={"h5"}>{"Unleash the Power of AI"}</Typography>

          <Typography>
            {
              "With Purecode.ai, you gain access to over 10,000 AI-generated custom components. Our cutting-edge technology allows you to effortlessly search through this vast library to find the perfect custom tag components for your project. No more hours wasted on coding from scratch Scroll Buttons; we provide you with a wealth of resources to accelerate your development process."
            }
          </Typography>
        </Panel>
        <Panel value={index} index={2}>
          <Typography variant={"h5"}>
            {
              "For any inquiries or assistance, please contact us at info@purecode.ai. We're here to help!"
            }
          </Typography>
        </Panel>
      </Box>
    </Box>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

In this code example above ⬆, different Panel components are displayed based on the tab selected index.

Displaying Different Components Based on Tab Selection

Customizing Tab Layout

You can change the tab layout with several options provided by MUI:

Full-Width Tabs

To create full-width tab, set the variant prop to “fullWidth”. The variant=”fullWidth” prop should be used for smaller screen resolutions. See code example below ⬇

...

<AppBar position="fixed">
  <Tabs variant="fullWidth" value={index} onChange={onTabChange}>
    <Tab label="Home" />
    <Tab label="About Us" />
    <Tab label="Contact Us" />
  </Tabs>
</AppBar>
...

Without variant=”fullWidth”

Without variant=”fullWidth”

With variant=”fullWidth”

With variant=”fullWidth”

Centered Tabs

To center the tab, use the centered prop:

<AppBar position="fixed">
  <Tabs
      centered
      value={index}
      onChange={onTabChange}
  >
      <Tab label="Home" />
      <Tab label="About Us" />
      <Tab label="Contact Us" />
    </Tabs>
</AppBar>
...

Centered Tabs

Scrollable Tabs

If you have many tabs, you can make them scrollable by setting the variant prop to “scrollable”. The code example below demonstrates this:

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { AppBar, Tab, Tabs, Typography, Box } from "@material-ui/core";
import "./styles.css";

const Panel = (props) => (
  <div hidden={props.value !== props.index}>
    <Typography>{props.children}</Typography>
  </div>
);

function App() {
  const [index, setIndex] = useState(0);

  const onTabChange = (event, index) => {
    setIndex(index);
  };

  return (
    <Box>
      <AppBar position="fixed">
        <Tabs variant="scrollable" value={index} onChange={onTabChange}>
          <Tab label="Home" />
          <Tab label="About Us" />
          <Tab label="Contact Us" />
          <Tab label="Blogs" />
        </Tabs>
      </AppBar>

      <Box mt={15}>
        <Panel value={index} index={0}>
          <Typography variant={"h4"}>
            {"Choose from 10,000+ AI generated custom components."}
          </Typography>
        </Panel>
        <Panel value={index} index={1}>
          <Typography variant={"h5"}>{"Unleash the Power of AI"}</Typography>

          <Typography>
            {
              "With Purecode.ai, you gain access to over 10,000 AI-generated custom components. Our cutting-edge technology allows you to effortlessly search through this vast library to find the Scroll Buttons perfect components for your project. No more hours wasted on coding from scratch; we provide you with a wealth of resources to accelerate your development process."
            }
          </Typography>
        </Panel>
        <Panel value={index} index={2}>
          <Typography variant={"h5"}>
            {
              "For any inquiries or assistance, please contact us at info@purecode.ai. We're here to help!"
            }
          </Typography>
        </Panel>
        <Panel value={index} index={3}>
          <Typography variant={"h5"}>
            {
              "Taking Your Business To The Next Level"
            }
          </Typography>
        </Panel>
      </Box>
    </Box>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Scrollable Tabs

📝 Note: You can also remove the left and right buttons by adding scrollButtons=”off”. Fixed tab should be used with a limited number of tabs and when consistent placement will aid muscle memory. Scrollable tabs should be used when there are many or a variable number of tabs.

Adding Icons to Tabs

You can also add icons to the tab using MUI Icon.

Each Material icon also has a “theme”: Filled (default), Outlined, Rounded, Two-tone, and Sharp.

  • Filled theme (default) is exported as @mui/icons-material/Delete,

  • Outlined theme is exported as @mui/icons-material/DeleteOutlined,

  • Rounded theme is exported as @mui/icons-material/DeleteRounded,

  • Twotone theme is exported as @mui/icons-material/DeleteTwoTone,

  • Sharp theme is exported as @mui/icons-material/DeleteSharp.

Installation

Run one of the following commands to install Material SVG icons and save them to your package.json dependencies. This will allow you add icon tabs.

npm install @mui/icons-material

Upon successful installation, you need to import the icons with either of the two options like so:

import Icon from '@mui/material/Icon';
// or
import { Icon } from '@mui/material';

Then import the icon you wish to use like so:

📝 Note: The first option is preferable and recommended. Learn more from the MUI documentation.

You can include icons alongside tab labels using the icon prop or you can also use icons without labels if needed. Tab labels may either consist of all icons or all text.

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { AppBar, Tab, Tabs, Typography, Box } from "@material-ui/core";
import "./styles.css";
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
import HomeOutlinedIcon from "@mui/icons-material/HomeOutlined";
import AlternateEmailOutlinedIcon from "@mui/icons-material/AlternateEmailOutlined";

const Panel = (props) => (
  <div hidden={props.value !== props.index}>
    <Typography>{props.children}</Typography>
  </div>
);

function App() {
  const [index, setIndex] = useState(0);

  const onTabChange = (event, index) => {
    setIndex(index);
  };

  return (
    <Box>
      <AppBar position="fixed">
        <Tabs centered value={index} onChange={onTabChange}>
          <Tab label="Home" icon={<HomeOutlinedIcon />} />
          <Tab label="About Us" icon={<InfoOutlinedIcon />} />
          <Tab label="Contact Us" icon={<AlternateEmailOutlinedIcon />} />
        </Tabs>
      </AppBar>

      <Box mt={15}>
        <Panel value={index} index={0}>
          <Typography variant={"h4"}>
            {"Choose from 10,000+ AI generated custom components."}
          </Typography>
        </Panel>
        <Panel value={index} index={1}>
          <Typography variant={"h5"}>{"Unleash the Power of AI"}</Typography>

          <Typography>
            {
              "With Purecode.ai, you gain access to over 10,000 AI-generated custom components. Our cutting-edge technology allows you to effortlessly search through this vast library to find the perfect components for your nav tabs project. No more hours wasted on Scroll Buttons coding from scratch; we provide you with a wealth of resources to accelerate your development process."
            }
          </Typography>
        </Panel>
        <Panel value={index} index={2}>
          <Typography variant={"h5"}>
            {
              "For any inquiries or assistance, please contact us at info@purecode.ai. We're here to help!"
            }
          </Typography>
        </Panel>
        <Panel value={index} index={3}>
          <Typography variant={"h5"}>
            {"Taking Your Business To The Next Level"}
          </Typography>
        </Panel>
      </Box>
    </Box>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Adding Icons to Tabs

Disabled Tab

You can create a disabled tab by adding the disabled prop:

<Tabs centered value={index} onChange={onTabChange}>
  <Tab label="Home" icon={<HomeOutlinedIcon />} />
  <Tab label="About Us" icon={<InfoOutlinedIcon />} />
  <Tab disabled label="disabled tab" icon={<AlternateEmailOutlinedIcon />} />
</Tabs>

...

In the example above ⬆, we disabled the Contact Us tab.

Disabling a Tab

Disabled Tabs: These are disabled tabs, as such, they cannot be clicked upon as demonstrated in the image above ⬆.

Vertical Tabs

To create tab vertically aligned, set the orientation prop to ‘vertical’:

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { AppBar, Tab, Tabs, Typography, Box } from "@material-ui/core";
import "./styles.css";
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
import HomeOutlinedIcon from "@mui/icons-material/HomeOutlined";
import AlternateEmailOutlinedIcon from "@mui/icons-material/AlternateEmailOutlined";

const Panel = (props) => (
  <div hidden={props.value !== props.index}>
    <Typography>{props.children}</Typography>
  </div>
);

function App() {
  const [index, setIndex] = useState(0);

  const onTabChange = (event, index) => {
    setIndex(index);
  };

  return (
    <Box>
      <AppBar position="fixed">
        <Tabs orientation="vertical" value={index} onChange={onTabChange}>
          <Tab label="Home" icon={<HomeOutlinedIcon />} />
          <Tab label="About Us" icon={<InfoOutlinedIcon />} />
          <Tab disabled label="disabled icon={<AlternateEmailOutlinedIcon />} />
        </Tabs>
      </AppBar>

      <Box
        sx={{
          marginTop: "17rem"
        }}
      >
        <Panel value={index} index={0}>
          <Typography variant={"h4"}>
            {"Choose from 10,000+ AI generated custom components."}
          </Typography>
        </Panel>
        <Panel value={index} index={1}>
          <Typography variant={"h5"}>{"Unleash the Power of AI"}</Typography>

          <Typography>
            {
              "With Purecode.ai, you gain icon tabs access to over 10,000 AI-generated custom components. Our cutting-edge technology allows you to effortlessly search through this vast library to find the perfect components for your project. No more hours wasted on Scroll Buttons coding from scratch; we provide you with a wealth of resources to accelerate your development process."
            }
          </Typography>
        </Panel>
        <Panel value={index} index={2}>
          <Typography variant={"h5"}>
            {
              "For any inquiries or assistance, please contact us at info@purecode.ai. We're here to help!"
            }
          </Typography>
        </Panel>
        <Panel value={index} index={3}>
          <Typography variant={"h5"}>
            {"Taking Your Business To The Next Level"}
          </Typography>
        </Panel>
      </Box>
    </Box>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Vertical Tabs

Nav Tabs: They are used for adding a custom tab component. As by default, tab use a button element we can also use our custom tag or component.

Icon Tabs: It has tab labels with icons. Tab labels may either consist of all icons or all text.

Icon position: There are four different positions: top, bottom, start, and end.

How to Customize MUI Tabs

MUI Tab can be easily customized by using MUI Tab props and vanilla CSS. Let’s explore different aspects of customization:

Changing the Active Tab Underline Border Color and Text Color

You can change the active tab’s underlined border color and text color using MUI props or Vanilla CSS.

Using MUI Tabs Props to Change the Active Tab Underline Border Color

You can modify the active tab’s underlined border color by using the indicatorColor prop within the Tabs component:

<AppBar>
  <Tabs
    orientation="horizontal"
    indicatorColor="secondary"
    value={index}
    onChange={onTabChange}
  >
    <Tab label="Home" icon={<HomeOutlinedIcon />} />
    <Tab label="About Us" icon={<InfoOutlinedIcon />} />
    <Tab label="Contact Us" icon={<AlternateEmailOutlinedIcon />} />
  </Tabs>
</AppBar>

...

The indicatorColor accepts two color values: primary and secondary.

Changing the Active Tab Text Color

You can customize the active tab’s text color using the textColor prop within the Tabs component. In this code example below ⬇, we are still preserving the icon tabs.

<AppBar>
  <Tabs
    orientation="horizontal"
    indicatorColor="secondary"
    value={index}
    onChange={onTabChange}
  >
    <Tab label="Home" icon={<HomeOutlinedIcon />} />
    <Tab label="About Us" icon={<InfoOutlinedIcon />} />
    <Tab label="Contact Us" icon={<AlternateEmailOutlinedIcon />} />
  </Tabs>
</AppBar>

...

The textColor prop accepts three values: inherit, primary, and secondary. Setting it to ‘secondary’ will change the text color of the active tab.

Changing the Active Tab Text Color

Using Vanilla CSS to Change the Active Tab Underline Border Color

To customize the indicator color and active tab text color using Vanilla CSS:

.MuiTabs-indicator {
  background: #5CE638 !important;
}

The !important keyword is essential to make your styles take precedence over the default MUI styles.

Changing the Active Tab Text Color with Vanilla CSS

.Mui-selected {
  color: #5CE638 !important;
}

Changing the Active Tab Text Color with CSS

These CSS rules target the indicator and the active text color, allowing you to apply custom styles.

Customizing MUI Tabs components is a versatile way to match your application’s design requirements. You can choose the method that suits your project, whether it’s using MUI props or Vanilla CSS.

Next Steps

In this article, we took a deep dive into MUI Tab. You learned what the MUI library is, you also learned how to create and customize tab using MUI props. We also saw that it is possible to add MUI icons to your tab using the icon prop, and how to create tab components with it in React.

Don’t use tabs with content that supports the swipe gesture, because swipe gestures are used for navigating between tabs. For example, avoid using tabs in a map where content is pannable, or a list where items can be dismissed with a swipe.

Fixed tabs should be used with a limited number of tabs and when consistent placement will aid muscle memory. Scrollable tabs should be used when there are many or a variable number of tabs.

For the next steps, you can consider playing around with MUI to fully get the hang of the library. Happy coding 💻

Further Readings from our Blog

If you enjoyed reading this tutorial, consider similar readings about MUI from our blog:

We are launching our collection of 10,000+ AI-generated custom components for you to choose from for your next web project. Sign up now at Purecode.ai for you to be notified once we launch.

Emmanuel Uchenna

Emmanuel Uchenna

Emmanuel is an experienced and enthusiastic software developer and technical writer with 4+ proven years of professional experience. He focuses on full-stack web development. He is fluent in React, TypeScript, VueJS, and NodeJS and familiar with industry-standard technologies such as version control, headless CMS, and JAMstack. He is passionate about knowledge sharing.