How to create Tabs in ReactJS ?

Last Updated : 05 Aug, 2024

Tabs make it easy to explore and switch between different views. Material UI for React has this component available for us and it is very easy to integrate. We can use Tabs Component in ReactJS using the following approach.

Prerequisites:

we have these approaches to create Tabs in React JS

Table of Content

Approach 1: Using custom Tab component with active parameter
Approah 2: Using Material UI Tab component

Steps to create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Project Structure:

Screenshot-from-2023-11-08-13-18-25

Approach 1: Using custom Tab component with active parameter

We will create custom tab components with the label as parameter and import to create multiple tab example. We will use CSS properties to show and hide the tab content.

Example: This example implements Tabs components usiing css styling.

CSS

/* Filename - App.css */

.App {
    text-align: center;
    margin: auto;
}
.geeks {
    color: green;
}

.tabs-container {
    width: 400px;
    margin: 20px auto;
}

.tabs {
    display: flex;
}

.tab {
    cursor: pointer;
    padding: 10px;
    margin-right: 10px;
    border: 1px solid #ddd;
    border-bottom: none;
    background-color: #f1f1f1;
}

.tab.active {
    background-color: #ddd;
}

.tab-content {
    border: 1px solid #ddd;
    padding: 10px;
}

JavaScript

// Filename - App.js

import React from "react";
import Tabs from "./Tabs";

const App = () => {
    const tabData = [
        { label: "Tab 1" },
        { label: "Tab 2" },
        { label: "Tab 3" },
    ];

    return (
        <div className="App">
            <h1 className="geeks">GeeksforGeeks</h1>
            <h1>React Tabs Example</h1>
            <Tabs tabs={tabData} />
        </div>
    );
};

export default App;

JavaScript

// Filename  - Tabs.js

import React, { useState } from "react";
import Tab from "./Tab";
import "./App.css";

const Tabs = ({ tabs }) => {
    const [activeTab, setActiveTab] = useState(1);

    const handleTabClick = (index) => {
        setActiveTab(index + 1);
    };

    return (
        <div className="tabs-container">
            <div className="tabs">
                {tabs.map((tab, index) => (
                    <Tab
                        key={index}
                        label={tab.label}
                        onClick={() =>
                            handleTabClick(index)
                        }
                        isActive={index === activeTab}
                    />
                ))}
            </div>
            <div className="tab-content">
                Tab {activeTab} is Active
            </div>
        </div>
    );
};

export default Tabs;

JavaScript

// Filename - Tab.js

import React, { useState } from "react";

const Tab = ({ label, onClick, isActive }) => (
    <div
        className={`tab ${isActive ? "active" : ""}`}
        onClick={onClick}
    >
        {label}
    </div>
);

export default Tab;

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output.

Approach 2: Using Material UI Tab component

To create Tabs in React we can also use the Tab components provided by material UI. we will pass the parameters like label, content and disable to create the required tabs on the page.

Step to install MUI: After creating the ReactJS application, Install the material-ui modules using the following command:

npm install @material-ui/core

The updated dependencies after installing required packages

{
    "dependencies": {
        "@material-ui/core": "^4.12.4",
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
    }
}

Example: This example implements multiple tabs using the MUI tab component.

JavaScript

import React from "react";
import Paper from "@material-ui/core/Paper";
import Tab from "@material-ui/core/Tab";
import Tabs from "@material-ui/core/Tabs";

const App = () => {
    const [value, setValue] = React.useState(2);

    return (
        <div
            style={{
                marginLeft: "40%",
            }}
        >
            <h2>How to Create Tabs in ReactJS?</h2>
            <Paper square>
                <Tabs
                    value={value}
                    textColor="primary"
                    indicatorColor="primary"
                    onChange={(event, newValue) => {
                        setValue(newValue);
                    }}
                >
                    <Tab label="Active TAB One" />
                    <Tab label="Active TAB Two" />
                    <Tab label="Disabled TAB!" disabled />
                    <Tab label="Active Tab Three" />
                </Tabs>
                <h3>TAB NO: {value} clicked!</h3>
            </Paper>
        </div>
    );
};

export default App;