React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google.
In React MUI Tabs Navigation, we use tabs to navigate between different screens or pages, etc. Not only this, but it also organizes and allows navigation between a group of content that has the same hierarchy or is related.
Tabs Navigation Variants:
- Basic Tabs: It is a basic tab with panels. It runs the tab navigation with a default style.
- Wrapped labels: If the label is too long for the tab, it will automatically be wrapped.
- Colored Tabs: These consists of colored tabs with panels. It has different variants like secondary, error, info, etc.
- Disabled Tabs: The tabs are disabled using this disabled prop. In this, the disabled tab doesn’t work.
- Fixed Tabs: Tabs that consists of a limited number of tabs, and when a consistent placement will aid muscle memory.
- Scrollable Tabs: These consists of scrollable tabs. There are three variants: Automatic scroll buttons, Forced scroll buttons, and Prevent scroll buttons.
- Customization: Custom styles are used to customize the breadcrumb.
- Vertical Tabs: The tabs can be aligned vertically. To do this use orientation=”vertical”.
- Nav Tabs: It is used for adding a custom tab component. As by default, tabs use a button element we can also use our custom tag or component.
- Icon Tabs: It has tabs labels with icons. Tab labels may either consist of all icons or all text.
- Icon position: There are four different positions: top, bottom, start, and end.
- Third-party routing library: The breadcrumbs are also used with react-router.
- Accessibility: For better accessibility make sure to add an aria-label description, and use keyboard navigation.
- Unstyled: The react MUI Base provides an unstyled version of the React Tabs component.
- API: To render tab navigation, the <Tab />, <TabContext />, <TabList />, <TabPanel />, <TabPanelUnstyled />, <TabScrollButton />, <TabUnstyled />, <Tabs />, <TabsListUnstyled />, <TabsUnstyled /> api’s are used.
Syntax:
<Tabs>
<Tab label="one" />
<Tab label="two" />
</Tabs>
<TabPanel value={value}>...</TabPanel>
<TabPanel value={value}>...</TabPanel>
Creating React Project:
Step 1: To create a react app, you need to install react modules through the npm command.
npm create-react-app project name
Step 2: After creating your react project, move into the folder to perform different operations.
cd project name
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install @mui/material @emotion/react @emotion/styled
Project Structure:
Step to Run Application: Open the terminal and type the following command.
npm start
Example 1: Below example demonstrates the React MUI colored tab with some disabled tabs.
- App.js
Javascript
import { Box, Tab, Tabs } from "@mui/material"; import React, { useState } from "react"; function App() { const [val, setVal] = useState('two'); const handleTab = (e, newVal) => { setVal(newVal); }; return ( <center> <div> <h1 style={{ color: 'green' }}> neveropen</h1> <h2>React MUI Tabs Navigation</h2> </div> <div> <Box> <Tabs value={val} onChange={handleTab} textColor="primary" indicatorColor="secondary" > <Tab value="one" label="Learn" /> <Tab value="two" label="Tutorials" /> <Tab value="three" label="Practice" disabled /> <Tab value="four" label="GBlog" /> </Tabs> </Box> </div> </center> ); } export default App; |
Output:
Example 2: Below example demonstrates the React MUI scrollable tab with icons.
- App.js
Javascript
import { Box, Tab, Tabs } from "@mui/material"; import React, { useState } from "react"; import { Home, Code, Notes, Call, LocalLibrary, RssFeed } from "@mui/icons-material"; function App() { const [val, setVal] = useState('two'); const handleTab = (e, newVal) => { setVal(newVal); }; return ( <center> <div> <h1 style={{ color: 'green' }}> neveropen</h1> <h2>React MUI Tabs Navigation</h2> </div> <div> <Box sx={{ maxWidth: 500 }}> <Tabs value={val} onChange={handleTab} textColor="primary" indicatorColor="secondary" variant="scrollable" > <Tab icon={<Home />} value="one" label="Home" /> <Tab icon={<LocalLibrary />} value="two" label="Learn" /> <Tab icon={<Notes />} value="three" label="Tutorials" /> <Tab icon={<Code />} value="four" label="Practice" /> <Tab icon={<RssFeed />} value="five" label="GBlog" disabled /> <Tab icon={<Call />} value="six" label="Contact" /> </Tabs> </Box> </div> </center> ); } export default App; |
Output:
Reference: https://mui.com/material-ui/react-tabs/
