Open In App

Nested Tabs in ReactJS

Improve
Improve
Like Article
Like
Save
Share
Report

Create nested tabs in React JS enhance and organize the structure of the web application. We can implement Nested Tabs in React using React Tabs form NPM which is an accessible and easy tab component for ReactJS.

Prerequisites:

Steps to Create React Application And Installing Module:

Step 1: Create a new react application by the following command using the terminal:

npx create-react-app demo 

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

cd demo

Step 3: Install the react-tabs from the npm.

npm i react-tabs

Project Structure:

The dependencies list in package.json file.

"dependencies": {
"@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-password-checklist": "^1.5.0",
"react-scripts": "5.0.1",
"react-tabs": "^6.0.2",
"web-vitals": "^2.1.4"
},

Example: This example will demonstrates Nested tabs in ReactJS

Javascript




// Filename - App.js
 
import React from "react";
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';
 
function App() {
    return (
        <>
            <h1 style={{ color: 'green',
                margin: '20px' }}>Nested Tabs</h1>
            <Tabs style={{ width: '500px' }}>
                <TabList style={{
                    fontSize: '20px',
                    margin: '20px',
                    color: "#1616b7",
                    borderRadius: '10px',
                }}>
                    <Tab style={{ background: '#a7f8a2',
                        borderRadius: '5px' }}>Tab 1</Tab>
                    <Tab style={{ background: '#f4faa0',
                        borderRadius: '5px' }}>Tab 2</Tab>
                </TabList>
                <TabPanel style={{ fontSize: '20px',
                    margin: '20px' }}>
                    <Tabs defaultIndex={1}>
                        <TabList>
                            <Tab style={{ background: '#f5e5f8',
                                borderRadius: '5px' }}>Nested-Tab1</Tab>
                            <Tab style={{ background: '#f2f9a0',
                                borderRadius: '5px' }}>Nested-Tab2</Tab>
                            <Tab style={{ background: '#f5e5f8',
                                borderRadius: '5px' }}>Nested-Tab3</Tab>
                        </TabList>
                        <TabPanel>
                            <p style={{ color: 'green' }}>
                                Welcome to GeeksforGeeks</p>
 
                        </TabPanel>
                        <TabPanel>
                            <p style={{ color: 'green' }}>
                                A computer science portal for geeks.</p>
 
                        </TabPanel>
                        <TabPanel>
                            <p style={{ color: 'green' }}>
                                Also known as GFG</p>
 
                        </TabPanel>
                    </Tabs>
                </TabPanel>
                <TabPanel style={{ fontSize: '20px',
                    margin: '20px' }}>
                    <Tabs>
                        <TabList>
                            <Tab style={{ background: '#f5e5f8',
                                borderRadius: '5px' }}>Nested-Tab_1</Tab>
                            <Tab style={{ background: '#f2f9a0',
                                borderRadius: '5px' }}>Nested-Tab_2</Tab>
                            <Tab style={{ background: '#f5e5f8',
                                borderRadius: '5px' }}>Nested-Tab_3</Tab>
                        </TabList>
                        <TabPanel>
                            <p style={{ color: 'blue' }}>
                                Welcome to GeeksforGeeks</p>
 
                        </TabPanel>
                        <TabPanel>
                            <p style={{ color: 'blue' }}>
                                A computer science portal for geeks.</p>
 
                        </TabPanel>
                        <TabPanel>
                            <p style={{ color: 'blue' }}>
                                Also known as GFG</p>
 
                        </TabPanel>
                    </Tabs>
                </TabPanel>
            </Tabs>
        </>
    );
}
 
export default App;


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:



Last Updated : 16 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads