How to create horizontal tabs in react js?

November 28, 2024

Hi Friends 👋,

Welcome To aHoisting!

To create horizontal tabs in react js, we will use CSS and HTML and useState to manage the text. It will create horizontal tabs in react js.

Today, I am going to show you, how to create horizontal tabs in react js.

Table of contents

Install and create a new React app.
Import react component.
Create a Component.

Let’s start with the first step.

Step 1: Install and create a new React app.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import react component.

After installing, you have to import your React component.

import React, { useState } from "react";

Step 3: Create a Component.

You can use style={styles.tabContainer} to create horizontal tabs in react js.

<div>
  <div style={styles.tabContainer}>
    <button
      style={{
            ...styles.tab,
            ...(activeTab === "Tab1" ? styles.activeTab : {}),
          }}
          onClick={() => handleTabClick("Tab1")}
        >
          Tab 1
        </button>
        <button
          style={{
            ...styles.tab,
            ...(activeTab === "Tab2" ? styles.activeTab : {}),
          }}
          onClick={() => handleTabClick("Tab2")}
        >
          Tab 2
        </button>
        <button
          style={{
            ...styles.tab,
            ...(activeTab === "Tab3" ? styles.activeTab : {}),
          }}
          onClick={() => handleTabClick("Tab3")}
        >
          Tab 3
        </button>
      </div>

      {/* Tab Content */}
      <div style={styles.content}>
        {activeTab === "Tab1" && <div>This is the content of Tab 1.</div>}
        {activeTab === "Tab2" && <div>This is the content of Tab 2.</div>}
        {activeTab === "Tab3" && <div>This is the content of Tab 3.</div>}
  </div>
</div>

Create horizontal tabs example.

The below code is an example of a React. You have to import react and use CSS and HTML and useState to create horizontal tabs in react js.

App.js

import React, { useState } from "react";

function HorizontalTabs() {
  const [activeTab, setActiveTab] = useState("Tab1");

  const handleTabClick = (tab) => {
    setActiveTab(tab);
  };

  return (
    <div>
      <div style={styles.tabContainer}>
        <button
          style={{
            ...styles.tab,
            ...(activeTab === "Tab1" ? styles.activeTab : {}),
          }}
          onClick={() => handleTabClick("Tab1")}
        >
          Tab 1
        </button>
        <button
          style={{
            ...styles.tab,
            ...(activeTab === "Tab2" ? styles.activeTab : {}),
          }}
          onClick={() => handleTabClick("Tab2")}
        >
          Tab 2
        </button>
        <button
          style={{
            ...styles.tab,
            ...(activeTab === "Tab3" ? styles.activeTab : {}),
          }}
          onClick={() => handleTabClick("Tab3")}
        >
          Tab 3
        </button>
      </div>

      {/* Tab Content */}
      <div style={styles.content}>
        {activeTab === "Tab1" && <div>This is the content of Tab 1.</div>}
        {activeTab === "Tab2" && <div>This is the content of Tab 2.</div>}
        {activeTab === "Tab3" && <div>This is the content of Tab 3.</div>}
      </div>
    </div>
  );
}

const styles = {
  tabContainer: {
    display: "flex",
    borderBottom: "2px solid #ccc",
  },
  tab: {
    flex: 1,
    padding: "10px 20px",
    cursor: "pointer",
    textAlign: "center",
    backgroundColor: "#f9f9f9",
    border: "none",
    borderBottom: "2px solid transparent",
    outline: "none",
  },
  activeTab: {
    borderBottom: "2px solid #007bff",
    fontWeight: "bold",
  },
  content: {
    padding: "20px",
    backgroundColor: "#f9f9f9",
    borderTop: "1px solid #ccc",
  },
};

export default HorizontalTabs;

In the above code example, I have used the CSS and HTML to create horizontal tabs in react js.

Check the output of the above code.

All the best 👍