How to Build Tabs in React with Material UI Tabs?

What is Material UI Tabs Component?

As developers, we often need to organize and segregate the content in an systematic way. In that case, a tab can be used. Tabs are a group of elements and they can be switched from one another for different content or view. A tab element can be viewed only one at a time.

Just like your browser tabs, we can create MUI tabs. Each tab can have content inside it. They are useful as content can be organized and users can navigate as per their needs.

Setting up a React App

React is a popular JavaScript library for creating interactive user interfaces. By using various component libraries provided by React, we can create different types of user interfaces.

Let us understand the step-by-step process of creating a React application first.

1. First, create a folder and open it in an IDE like Visual Studio Code. Then use the given command to create a React application.

2. Now move to the app created above(appname) by the following command.

3. The given command is used to start our React application.

In this way, our React application is created.

Installing Material UI Library

After our React application is created, we will install Material UI and its dependencies. The given command is used to install Material UI library.

Once the library is installed successfully, a confirmation message will be displayed in the terminal.

Building Tabs component with Material UI Tabs

To build MUI tabs, first we need to import two components-

• Tabs
• Tab

The above two elements are very important to create MUI tab.

We will import it as follows-

Tabs is the parent container which will contain all the children tags. It is used to wrap around the tag headers.

Tab is an individual element used for defining the table for each tab header. In short, Tabs is the parent container and Tab is/are the child/children component/s.

In the beginning, we will be creating four MUI tabs using the following code-

The above is the output where we can see four MUI tabs created.

Creating Contents

Now that we have set up our basic Tabs component, let's create content for each tab. In this example, we've used simple text content for demonstration purposes. You can replace it with your own components or data.

Customizing Material UI Tabs Components

Customizing Material UI Tabs components is an essential aspect of creating a user interface that aligns with your specific design and functionality requirements. Material UI Tabs provide a range of options and properties that allow you to tailor the appearance and behavior of your tabbed interface. In this section, we'll delve into the details of how to customize Material UI Tabs components effectively.

Custom styling can be achieved using Material UI's styling solution, such as makeStyles or styled-components. Here's how to customize the styling of Material UI Tabs :

• Import makeStyles :

• Apply Styles : Apply the styles to your Material UI Tabs components by calling the useStyles hook :

Using makeStyles allows you to define and apply custom styles to your Material UI Tabs components, giving you control over their appearance to match your design preferences.

Material UI Tabs Props

Material UI Tabs offer a variety of props that allow you to customize their appearance and behavior. These props are crucial for creating tabs that align with your design and functionality requirements. Here's a closer look at some of the key Material UI Tabs props :

• value : The value prop determines which tab is currently selected. It takes an index value corresponding to the currently active tab. By controlling this prop, you can programmatically change the active tab, enabling dynamic tab switching based on user interactions.
• onChange : The onChange prop specifies a callback function that is invoked when the tab selection changes. This function typically handles updates to the value prop, ensuring that it reflects the newly selected tab. It allows you to respond to tab selection events and implement custom behavior when tabs are clicked.
• indicatorColor : The indicatorColor prop sets the color of the tab indicator line that appears beneath the active tab. This indicator line provides a visual cue to users, indicating which tab is currently selected. You can choose from a range of color options to match your application's design and color scheme.
• textColor : The textColor prop defines the color of the tab labels, including both active and inactive tabs. This prop allows you to style the text within the tabs to ensure that it fits seamlessly into your design. You can customize the text color for both states, providing a consistent and visually appealing user experience.

These props play a significant role in customizing Material UI Tabs components to meet the specific requirements of your project. Whether you need to control the active tab, change tab indicator colors, or style tab text, these props provide the necessary flexibility.

State Management with Material UI Tabs

State management is essential when dealing with dynamic content within Material UI Tabs, especially when the content needs to be fetched from an API or updated based on user interactions. To integrate state management effectively, you can follow these steps:

• Using React State : Leverage React's built-in state management to handle tab-related state changes. Create a state variable, such as selectedTab, to keep track of the currently selected tab.
• Fetching Data : When content within tabs needs to be dynamic and fetched from an API, you can use asynchronous calls, such as fetch or Axios, within the component's lifecycle methods or useEffect to retrieve data. Update the state (selectedTab) as needed when data is fetched successfully or when the user interacts with the tabs.

Routing with Material UI Tabs

Integrating routing with Material UI Tabs is essential when you want to use tabs for navigation within a single page or for routing to different pages. You can achieve this using React Router, a popular routing library for React :

• Install React Router :

• Set Up Routes : Define routes for each tab in your application. You can map tabs to specific components or pages :

• Navigation : When a tab is clicked, React Router will handle the navigation, rendering the associated component or page based on the defined routes.

Changing the Active Tab Underline Border Color in Material UI

One common customization for Material UI Tabs is changing the color of the underline border that appears beneath the active tab. This border serves as a visual indicator, highlighting the currently selected tab. To achieve this customization, you can use the indicatorColor prop.

For instance, if you want to set the active tab's underline border color to red, you can do so by specifying the indicatorColor prop like this :

In this example, we've set the indicatorColor prop to "secondary," which corresponds to a red color in the Material UI theme. This change allows you to match the active tab's visual representation with your application's color scheme.

Customizing the underline border color provides a way to make the active tab stand out and enhances the overall user experience by providing clear visual feedback.

Changing the Active Tab Text Color in Material UI

Another important aspect of tab customization is changing the text color of the active tab. The text color affects how the tab labels are displayed, making it possible to distinguish between active and inactive tabs. To achieve this, you can use the textColor prop.

For example, if you want the active tab's text color to be green, you can do so like this :

In this case, the textColor prop is set to "secondary," indicating that the text color for active tabs will be green. This customization ensures that users can easily identify the selected tab, enhancing the clarity of your tabbed interface.

Changing the active tab's text color is especially useful when you want to draw attention to the current tab or create a visual hierarchy within your tabbed content.

Material UI Tabs Wrapped Labels Prop

Material UI Tabs offer the flexibility to wrap or not wrap tab labels based on the available space. By default, tab labels are wrapped to fit the available width, ensuring that they don't overflow their container. However, you can control this behavior using the wrapped prop.

For example, if you want to disable label wrapping, preventing tabs from wrapping to the next line, you can specify the wrapped prop like this :

With the wrapped prop set to false, tab labels will remain on a single line, even if they don't fit within the available space. This customization is useful when you want to maintain a specific tab layout and prevent labels from breaking onto multiple lines.

The wrapped prop allows you to have fine-grained control over the presentation of tab labels, ensuring that they align with your design preferences.

Material UI Tabs Centered Prop

The centered prop in Material UI Tabs enables you to center-align the tabs within their container. This prop is particularly useful when you want to achieve a centered tab layout, creating a balanced and visually appealing design.

To create centered tabs, you can set the centered prop like this :

With the centered prop set to true, the tabs will be horizontally centered within their container. This layout adjustment can enhance the aesthetics of your tabbed interface, providing a more symmetrical and visually pleasing appearance.

The centered prop simplifies the process of achieving centered tab layouts, making it easy to create a harmonious design that aligns with your overall user interface.

These customization options for Material UI Tabs props, changing the active tab's underline border color, changing the active tab text color, using the wrapped prop, and utilizing the centered prop, empower you to create tabbed interfaces that not only look great but also provide an excellent user experience tailored to your specific design requirements.

Creating Full-Width Tabs in Material UI

Creating full-width tabs in Material UI is a design choice that allows the tabs to occupy the entire horizontal space within their container. This layout can be particularly useful when you want to make the tabs span the entire width of a parent component, such as a header or a content area. Here's a detailed explanation of how to create full-width tabs in Material UI :

Using the fullWidth Prop : Material UI Tabs provide a prop called fullWidth that enables you to create full-width tabs. To implement this layout, add the fullWidth prop to your <Tabs> component, like so :

By setting fullWidth to true, you instruct Material UI to expand the tabs to fill the available horizontal space. This ensures that the tabs stretch across the entire width of their container, creating a layout where the tabs are evenly distributed from the left to the right.

• Effects on Tab Layout : When you use the fullWidth prop, the tab labels and indicator line will span the entire width of the container, and the space between tabs will be evenly distributed. This can be especially beneficial when you have a large number of tabs or when you want to make the most of the available screen real estate.
• Considerations : While full-width tabs can offer a visually appealing and spacious layout, it's essential to use them judiciously. Overusing full-width tabs in a design with limited horizontal space may lead to overcrowding and reduced readability. Therefore, it's crucial to assess your project's specific layout and design requirements to determine when full-width tabs are appropriate.

Creating Vertical Tabs in Material UI

Material UI Tabs also provide the option to create vertical tabs, which can be valuable for unique layout designs where horizontal tabs are not suitable. Vertical tabs are displayed in a vertical orientation, typically on the left or right side of a container. Here's a detailed explanation of how to create vertical tabs in Material UI :

Using the orientation Prop : To create vertical tabs, you can use the orientation prop provided by Material UI Tabs. This prop allows you to specify the orientation of the tabs. For vertical tabs, set the orientation prop to "vertical" :

By setting orientation to "vertical", you instruct Material UI to arrange the tabs vertically. This results in a layout where the tabs are stacked on top of each other in a vertical column.

• Effects on Tab Layout : Vertical tabs provide an alternative layout that can be particularly useful when you have limited horizontal space or when you want to create a navigation menu on the side of your application. Vertical tabs conserve horizontal space and can offer a unique and visually distinctive design.
• Considerations : While vertical tabs can be beneficial in specific scenarios, they may not be suitable for all designs. It's important to consider the user experience and usability when using vertical tabs, as they can impact the layout and flow of your application. Ensure that vertical tabs align with your project's overall design and navigation goals.

Disabling Tabs in Material UI Tabs

In some cases, you may need to disable specific tabs to prevent user interaction with them. Disabling tabs can be useful when you want to restrict access to certain sections of your application or when certain tabs are not relevant or accessible under specific conditions. Here's a detailed explanation of how to disable tabs in Material UI Tabs :

Using the disabled Prop : Material UI Tabs allow you to disable individual tabs by setting the disabled prop on the corresponding <Tab> component. For example, if you have three tabs and you want to disable the second tab, you can do so like this :

By adding the disabled prop to the second <Tab> component, you prevent users from clicking on or interacting with it. The disabled tab will appear visually distinct from the active and enabled tabs, typically with a muted appearance, to indicate that it's not selectable.

• Effects on User Interaction: Disabling tabs is a way to control the user's ability to access specific content or functionality. It can be beneficial in situations where certain tabs should remain inactive or inaccessible until specific conditions are met.
• Considerations: When using the disabled prop, it's essential to provide clear feedback to users about why a particular tab is disabled. Additionally, consider whether disabling tabs aligns with the overall user experience and usability of your application. Disabled tabs should be used thoughtfully to ensure a cohesive and intuitive interface.