Nested Tabs in ReactJS
In this article, we will see how to create nested tabs using React Tabs which is an accessible and easy tab component for ReactJS.
Modules Required:
- npm
- create-react-app
Creating React Application And Installing Module:
Step 1: Create a new react application by the following command using 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
Open the src folder and delete the following files:
- logo.svg
- setupTests.js
- App.test.js
- index.css
- reportWebVitals.js
- App.css
Project Structure: Your project structure tree should look like this:
Example: This is the example that will illustrate Nested tabs in ReactJS
index.js
import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const root = ReactDOM.createRoot( document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> ); |
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 zambiatek</p> </TabPanel> <TabPanel> <p style={{ color: 'green' }}> A computer science portal for zambiatek.</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 zambiatek</p> </TabPanel> <TabPanel> <p style={{ color: 'blue' }}> A computer science portal for zambiatek.</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:
