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 neveropen</p>                           </TabPanel>                         <TabPanel>                             <p style={{ color: 'green' }}>                                 A computer science portal for neveropen.</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 neveropen</p>                           </TabPanel>                         <TabPanel>                             <p style={{ color: 'blue' }}>                                 A computer science portal for neveropen.</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:
Â
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
