Tabs
Please refer to MUI's official docs for more details on component's usage guide and API documentation.
Tabs are managed with the help of a state.
Cake apple pie chupa chups biscuit liquorice tootsie roll liquorice sugar plum. Cotton candy wafer wafer jelly cake caramels brownie gummies.
- TSX
- JS
// React Imports
import { useState } from 'react'
import type { SyntheticEvent } from 'react'
// MUI Imports
import Tab from '@mui/material/Tab'
import TabList from '@mui/lab/TabList'
import TabPanel from '@mui/lab/TabPanel'
import TabContext from '@mui/lab/TabContext'
import Typography from '@mui/material/Typography'
const TabsBasic = () => {
// States
const [value, setValue] = useState<string>('1')
const handleChange = (event: SyntheticEvent, newValue: string) => {
setValue(newValue)
}
return (
<TabContext value={value}>
<TabList onChange={handleChange} aria-label='simple tabs example'>
<Tab value='1' label='Tab 1' />
<Tab value='2' label='Tab 2' />
<Tab disabled value='3' label='Disabled' />
</TabList>
<TabPanel value='1'>
<Typography>
Cake apple pie chupa chups biscuit liquorice tootsie roll liquorice sugar plum. Cotton candy wafer wafer jelly
cake caramels brownie gummies.
</Typography>
</TabPanel>
<TabPanel value='2'>
<Typography>
Chocolate bar carrot cake candy canes sesame snaps. Cupcake pie gummi bears jujubes candy canes. Chupa chups
sesame snaps halvah.
</Typography>
</TabPanel>
<TabPanel value='3'>
<Typography>
Danish tiramisu jujubes cupcake chocolate bar cake cheesecake chupa chups. Macaroon ice cream tootsie roll
carrot cake gummi bears.
</Typography>
</TabPanel>
</TabContext>
)
}
export default TabsBasic
// React Imports
import { useState } from 'react'
// MUI Imports
import Tab from '@mui/material/Tab'
import TabList from '@mui/lab/TabList'
import TabPanel from '@mui/lab/TabPanel'
import TabContext from '@mui/lab/TabContext'
import Typography from '@mui/material/Typography'
const TabsBasic = () => {
// States
const [value, setValue] = useState('1')
const handleChange = (event, newValue) => {
setValue(newValue)
}
return (
<TabContext value={value}>
<TabList onChange={handleChange} aria-label='simple tabs example'>
<Tab value='1' label='Tab 1' />
<Tab value='2' label='Tab 2' />
<Tab disabled value='3' label='Disabled' />
</TabList>
<TabPanel value='1'>
<Typography>
Cake apple pie chupa chups biscuit liquorice tootsie roll liquorice sugar plum. Cotton candy wafer wafer jelly
cake caramels brownie gummies.
</Typography>
</TabPanel>
<TabPanel value='2'>
<Typography>
Chocolate bar carrot cake candy canes sesame snaps. Cupcake pie gummi bears jujubes candy canes. Chupa chups
sesame snaps halvah.
</Typography>
</TabPanel>
<TabPanel value='3'>
<Typography>
Danish tiramisu jujubes cupcake chocolate bar cake cheesecake chupa chups. Macaroon ice cream tootsie roll
carrot cake gummi bears.
</Typography>
</TabPanel>
</TabContext>
)
}
export default TabsBasic
Use textColor='secondary'
and indicatorColor='secondary'
props with TabList
component for secondary tabs.
Cake apple pie chupa chups biscuit liquorice tootsie roll liquorice sugar plum. Cotton candy wafer wafer jelly cake caramels brownie gummies.
- TSX
- JS
// React Imports
import { useState } from 'react'
import type { SyntheticEvent } from 'react'
// MUI Imports
import Tab from '@mui/material/Tab'
import TabList from '@mui/lab/TabList'
import TabPanel from '@mui/lab/TabPanel'
import TabContext from '@mui/lab/TabContext'
import Typography from '@mui/material/Typography'
const TabsColor = () => {
// States
const [value, setValue] = useState<string>('1')
const handleChange = (event: SyntheticEvent, newValue: string) => {
setValue(newValue)
}
return (
<TabContext value={value}>
<TabList
textColor='secondary'
onChange={handleChange}
indicatorColor='secondary'
aria-label='secondary tabs example'
>
<Tab value='1' label='Tab 1' />
<Tab value='2' label='Tab 2' />
<Tab disabled value='3' label='Disabled' />
</TabList>
<TabPanel value='1'>
<Typography>
Cake apple pie chupa chups biscuit liquorice tootsie roll liquorice sugar plum. Cotton candy wafer wafer jelly
cake caramels brownie gummies.
</Typography>
</TabPanel>
<TabPanel value='2'>
<Typography>
Chocolate bar carrot cake candy canes sesame snaps. Cupcake pie gummi bears jujubes candy canes. Chupa chups
sesame snaps halvah.
</Typography>
</TabPanel>
<TabPanel value='3'>
<Typography>
Danish tiramisu jujubes cupcake chocolate bar cake cheesecake chupa chups. Macaroon ice cream tootsie roll
carrot cake gummi bears.
</Typography>
</TabPanel>
</TabContext>
)
}
export default TabsColor
// React Imports
import { useState } from 'react'
// MUI Imports
import Tab from '@mui/material/Tab'
import TabList from '@mui/lab/TabList'
import TabPanel from '@mui/lab/TabPanel'
import TabContext from '@mui/lab/TabContext'
import Typography from '@mui/material/Typography'
const TabsColor = () => {
// States
const [value, setValue] = useState('1')
const handleChange = (event, newValue) => {
setValue(newValue)
}
return (
<TabContext value={value}>
<TabList
textColor='secondary'
onChange={handleChange}
indicatorColor='secondary'
aria-label='secondary tabs example'
>
<Tab value='1' label='Tab 1' />
<Tab value='2' label='Tab 2' />
<Tab disabled value='3' label='Disabled' />
</TabList>
<TabPanel value='1'>
<Typography>
Cake apple pie chupa chups biscuit liquorice tootsie roll liquorice sugar plum. Cotton candy wafer wafer jelly
cake caramels brownie gummies.
</Typography>
</TabPanel>
<TabPanel value='2'>
<Typography>
Chocolate bar carrot cake candy canes sesame snaps. Cupcake pie gummi bears jujubes candy canes. Chupa chups
sesame snaps halvah.
</Typography>
</TabPanel>
<TabPanel value='3'>
<Typography>
Danish tiramisu jujubes cupcake chocolate bar cake cheesecake chupa chups. Macaroon ice cream tootsie roll
carrot cake gummi bears.
</Typography>
</TabPanel>
</TabContext>
)
}
export default TabsColor
Use variant='fullWidth'
prop with TabList
component to have full width tabs.
Cake apple pie chupa chups biscuit liquorice tootsie roll liquorice sugar plum. Cotton candy wafer wafer jelly cake caramels brownie gummies.
- TSX
- JS
// React Imports
import { useState } from 'react'
import type { SyntheticEvent } from 'react'
// MUI Imports
import Tab from '@mui/material/Tab'
import TabList from '@mui/lab/TabList'
import TabPanel from '@mui/lab/TabPanel'
import TabContext from '@mui/lab/TabContext'
import Typography from '@mui/material/Typography'
const TabsFullWidth = () => {
// States
const [value, setValue] = useState<string>('1')
const handleChange = (event: SyntheticEvent, newValue: string) => {
setValue(newValue)
}
return (
<TabContext value={value}>
<TabList variant='fullWidth' onChange={handleChange} aria-label='full width tabs example'>
<Tab value='1' label='Tab 1' />
<Tab value='2' label='Tab 2' />
<Tab value='3' label='Tab 3' />
</TabList>
<TabPanel value='1'>
<Typography>
Cake apple pie chupa chups biscuit liquorice tootsie roll liquorice sugar plum. Cotton candy wafer wafer jelly
cake caramels brownie gummies.
</Typography>
</TabPanel>
<TabPanel value='2'>
<Typography>
Chocolate bar carrot cake candy canes sesame snaps. Cupcake pie gummi bears jujubes candy canes. Chupa chups
sesame snaps halvah.
</Typography>
</TabPanel>
<TabPanel value='3'>
<Typography>
Danish tiramisu jujubes cupcake chocolate bar cake cheesecake chupa chups. Macaroon ice cream tootsie roll
carrot cake gummi bears.
</Typography>
</TabPanel>
</TabContext>
)
}
export default TabsFullWidth
// React Imports
import { useState } from 'react'
// MUI Imports
import Tab from '@mui/material/Tab'
import TabList from '@mui/lab/TabList'
import TabPanel from '@mui/lab/TabPanel'
import TabContext from '@mui/lab/TabContext'
import Typography from '@mui/material/Typography'
const TabsFullWidth = () => {
// States
const [value, setValue] = useState('1')
const handleChange = (event, newValue) => {
setValue(newValue)
}
return (
<TabContext value={value}>
<TabList variant='fullWidth' onChange={handleChange} aria-label='full width tabs example'>
<Tab value='1' label='Tab 1' />
<Tab value='2' label='Tab 2' />
<Tab value='3' label='Tab 3' />
</TabList>
<TabPanel value='1'>
<Typography>
Cake apple pie chupa chups biscuit liquorice tootsie roll liquorice sugar plum. Cotton candy wafer wafer jelly
cake caramels brownie gummies.
</Typography>
</TabPanel>
<TabPanel value='2'>
<Typography>
Chocolate bar carrot cake candy canes sesame snaps. Cupcake pie gummi bears jujubes candy canes. Chupa chups
sesame snaps halvah.
</Typography>
</TabPanel>
<TabPanel value='3'>
<Typography>
Danish tiramisu jujubes cupcake chocolate bar cake cheesecake chupa chups. Macaroon ice cream tootsie roll
carrot cake gummi bears.
</Typography>
</TabPanel>
</TabContext>
)
}
export default TabsFullWidth
Use centered
prop with TabList
component to have tabs on center.
Cake apple pie chupa chups biscuit liquorice tootsie roll liquorice sugar plum. Cotton candy wafer wafer jelly cake caramels brownie gummies.
- TSX
- JS
// React Imports
import { useState } from 'react'
import type { SyntheticEvent } from 'react'
// MUI Imports
import Tab from '@mui/material/Tab'
import TabList from '@mui/lab/TabList'
import TabPanel from '@mui/lab/TabPanel'
import TabContext from '@mui/lab/TabContext'
import Typography from '@mui/material/Typography'
const TabsCentered = () => {
// States
const [value, setValue] = useState<string>('1')
const handleChange = (event: SyntheticEvent, newValue: string) => {
setValue(newValue)
}
return (
<TabContext value={value}>
<TabList centered onChange={handleChange} aria-label='centered tabs example'>
<Tab value='1' label='Tab 1' />
<Tab value='2' label='Tab 2' />
<Tab value='3' label='Tab 3' />
</TabList>
<TabPanel value='1'>
<Typography>
Cake apple pie chupa chups biscuit liquorice tootsie roll liquorice sugar plum. Cotton candy wafer wafer jelly
cake caramels brownie gummies.
</Typography>
</TabPanel>
<TabPanel value='2'>
<Typography>
Chocolate bar carrot cake candy canes sesame snaps. Cupcake pie gummi bears jujubes candy canes. Chupa chups
sesame snaps halvah.
</Typography>
</TabPanel>
<TabPanel value='3'>
<Typography>
Danish tiramisu jujubes cupcake chocolate bar cake cheesecake chupa chups. Macaroon ice cream tootsie roll
carrot cake gummi bears.
</Typography>
</TabPanel>
</TabContext>
)
}
export default TabsCentered
// React Imports
import { useState } from 'react'
// MUI Imports
import Tab from '@mui/material/Tab'
import TabList from '@mui/lab/TabList'
import TabPanel from '@mui/lab/TabPanel'
import TabContext from '@mui/lab/TabContext'
import Typography from '@mui/material/Typography'
const TabsCentered = () => {
// States
const [value, setValue] = useState('1')
const handleChange = (event, newValue) => {
setValue(newValue)
}
return (
<TabContext value={value}>
<TabList centered onChange={handleChange} aria-label='centered tabs example'>
<Tab value='1' label='Tab 1' />
<Tab value='2' label='Tab 2' />
<Tab value='3' label='Tab 3' />
</TabList>
<TabPanel value='1'>
<Typography>
Cake apple pie chupa chups biscuit liquorice tootsie roll liquorice sugar plum. Cotton candy wafer wafer jelly
cake caramels brownie gummies.
</Typography>
</TabPanel>
<TabPanel value='2'>
<Typography>
Chocolate bar carrot cake candy canes sesame snaps. Cupcake pie gummi bears jujubes candy canes. Chupa chups
sesame snaps halvah.
</Typography>
</TabPanel>
<TabPanel value='3'>
<Typography>
Danish tiramisu jujubes cupcake chocolate bar cake cheesecake chupa chups. Macaroon ice cream tootsie roll
carrot cake gummi bears.
</Typography>
</TabPanel>
</TabContext>
)
}
export default TabsCentered
Use icon
prop with Tab
component for icons in the tab.
Cake apple pie chupa chups biscuit liquorice tootsie roll liquorice sugar plum. Cotton candy wafer wafer jelly cake caramels brownie gummies.
- TSX
- JS
// React Imports
import { useState } from 'react'
import type { SyntheticEvent } from 'react'
// MUI Imports
import Tab from '@mui/material/Tab'
import TabList from '@mui/lab/TabList'
import TabPanel from '@mui/lab/TabPanel'
import TabContext from '@mui/lab/TabContext'
import Typography from '@mui/material/Typography'
const TabsIcon = () => {
// States
const [value, setValue] = useState<string>('1')
const handleChange = (event: SyntheticEvent, newValue: string) => {
setValue(newValue)
}
return (
<TabContext value={value}>
<TabList onChange={handleChange} aria-label='icon tabs example'>
<Tab value='1' label='Recent' icon={<i className='ri-phone-line' />} />
<Tab value='2' label='Favorites' icon={<i className='ri-heart-line' />} />
<Tab value='3' label='Contacts' icon={<i className='ri-account-circle-line' />} />
</TabList>
<TabPanel value='1'>
<Typography>
Cake apple pie chupa chups biscuit liquorice tootsie roll liquorice sugar plum. Cotton candy wafer wafer jelly
cake caramels brownie gummies.
</Typography>
</TabPanel>
<TabPanel value='2'>
<Typography>
Chocolate bar carrot cake candy canes sesame snaps. Cupcake pie gummi bears jujubes candy canes. Chupa chups
sesame snaps halvah.
</Typography>
</TabPanel>
<TabPanel value='3'>
<Typography>
Danish tiramisu jujubes cupcake chocolate bar cake cheesecake chupa chups. Macaroon ice cream tootsie roll
carrot cake gummi bears.
</Typography>
</TabPanel>
</TabContext>
)
}
export default TabsIcon
// React Imports
import { useState } from 'react'
// MUI Imports
import Tab from '@mui/material/Tab'
import TabList from '@mui/lab/TabList'
import TabPanel from '@mui/lab/TabPanel'
import TabContext from '@mui/lab/TabContext'
import Typography from '@mui/material/Typography'
const TabsIcon = () => {
// States
const [value, setValue] = useState('1')
const handleChange = (event, newValue) => {
setValue(newValue)
}
return (
<TabContext value={value}>
<TabList onChange={handleChange} aria-label='icon tabs example'>
<Tab value='1' label='Recent' icon={<i className='ri-phone-line' />} />
<Tab value='2' label='Favorites' icon={<i className='ri-heart-line' />} />
<Tab value='3' label='Contacts' icon={<i className='ri-account-circle-line' />} />
</TabList>
<TabPanel value='1'>
<Typography>
Cake apple pie chupa chups biscuit liquorice tootsie roll liquorice sugar plum. Cotton candy wafer wafer jelly
cake caramels brownie gummies.
</Typography>
</TabPanel>
<TabPanel value='2'>
<Typography>
Chocolate bar carrot cake candy canes sesame snaps. Cupcake pie gummi bears jujubes candy canes. Chupa chups
sesame snaps halvah.
</Typography>
</TabPanel>
<TabPanel value='3'>
<Typography>
Danish tiramisu jujubes cupcake chocolate bar cake cheesecake chupa chups. Macaroon ice cream tootsie roll
carrot cake gummi bears.
</Typography>
</TabPanel>
</TabContext>
)
}
export default TabsIcon
Use styled
hook to customize your tabs.
Cake apple pie chupa chups biscuit liquorice tootsie roll liquorice sugar plum. Cotton candy wafer wafer jelly cake caramels brownie gummies.
- TSX
- JS
// React Imports
import { useState } from 'react'
import type { SyntheticEvent } from 'react'
// MUI Imports
import Tab from '@mui/material/Tab'
import TabPanel from '@mui/lab/TabPanel'
import TabContext from '@mui/lab/TabContext'
import Typography from '@mui/material/Typography'
// Component Imports
import CustomTabList from '@site/src/components/mui/TabList'
const TabsCustomized = () => {
// States
const [value, setValue] = useState<string>('1')
const handleChange = (event: SyntheticEvent, newValue: string) => {
setValue(newValue)
}
return (
<TabContext value={value}>
<CustomTabList pill='true' onChange={handleChange} aria-label='customized tabs example'>
<Tab value='1' label='Tab 1' />
<Tab value='2' label='Tab 2' />
<Tab value='3' label='Tab 3' />
</CustomTabList>
<TabPanel value='1'>
<Typography>
Cake apple pie chupa chups biscuit liquorice tootsie roll liquorice sugar plum. Cotton candy wafer wafer jelly
cake caramels brownie gummies.
</Typography>
</TabPanel>
<TabPanel value='2'>
<Typography>
Chocolate bar carrot cake candy canes sesame snaps. Cupcake pie gummi bears jujubes candy canes. Chupa chups
sesame snaps halvah.
</Typography>
</TabPanel>
<TabPanel value='3'>
<Typography>
Danish tiramisu jujubes cupcake chocolate bar cake cheesecake chupa chups. Macaroon ice cream tootsie roll
carrot cake gummi bears.
</Typography>
</TabPanel>
</TabContext>
)
}
export default TabsCustomized
// React Imports
import { useState } from 'react'
// MUI Imports
import Tab from '@mui/material/Tab'
import TabPanel from '@mui/lab/TabPanel'
import TabContext from '@mui/lab/TabContext'
import Typography from '@mui/material/Typography'
// Component Imports
import CustomTabList from '@site/src/components/mui/TabList'
const TabsCustomized = () => {
// States
const [value, setValue] = useState('1')
const handleChange = (event, newValue) => {
setValue(newValue)
}
return (
<TabContext value={value}>
<CustomTabList pill='true' onChange={handleChange} aria-label='customized tabs example'>
<Tab value='1' label='Tab 1' />
<Tab value='2' label='Tab 2' />
<Tab value='3' label='Tab 3' />
</CustomTabList>
<TabPanel value='1'>
<Typography>
Cake apple pie chupa chups biscuit liquorice tootsie roll liquorice sugar plum. Cotton candy wafer wafer jelly
cake caramels brownie gummies.
</Typography>
</TabPanel>
<TabPanel value='2'>
<Typography>
Chocolate bar carrot cake candy canes sesame snaps. Cupcake pie gummi bears jujubes candy canes. Chupa chups
sesame snaps halvah.
</Typography>
</TabPanel>
<TabPanel value='3'>
<Typography>
Danish tiramisu jujubes cupcake chocolate bar cake cheesecake chupa chups. Macaroon ice cream tootsie roll
carrot cake gummi bears.
</Typography>
</TabPanel>
</TabContext>
)
}
export default TabsCustomized
Use orientation='vertical'
prop with TabList
component to have vertical tabs.
Cake apple pie chupa chups biscuit liquorice tootsie roll liquorice sugar plum. Cotton candy wafer wafer jelly cake caramels brownie gummies.
- TSX
- JS
// React Imports
import { useState } from 'react'
import type { SyntheticEvent } from 'react'
// MUI Imports
import Tab from '@mui/material/Tab'
import TabList from '@mui/lab/TabList'
import TabPanel from '@mui/lab/TabPanel'
import TabContext from '@mui/lab/TabContext'
import Typography from '@mui/material/Typography'
const TabsVertical = () => {
// States
const [value, setValue] = useState<string>('1')
const handleChange = (event: SyntheticEvent, newValue: string) => {
setValue(newValue)
}
return (
<TabContext value={value}>
<div className='flex'>
<TabList orientation='vertical' onChange={handleChange} aria-label='vertical tabs example'>
<Tab value='1' label='Tab 1' />
<Tab value='2' label='Tab 2' />
<Tab value='3' label='Tab 3' />
</TabList>
<TabPanel value='1'>
<Typography>
Cake apple pie chupa chups biscuit liquorice tootsie roll liquorice sugar plum. Cotton candy wafer wafer
jelly cake caramels brownie gummies.
</Typography>
</TabPanel>
<TabPanel value='2'>
<Typography>
Chocolate bar carrot cake candy canes sesame snaps. Cupcake pie gummi bears jujubes candy canes. Chupa chups
sesame snaps halvah.
</Typography>
</TabPanel>
<TabPanel value='3'>
<Typography>
Danish tiramisu jujubes cupcake chocolate bar cake cheesecake chupa chups. Macaroon ice cream tootsie roll
carrot cake gummi bears.
</Typography>
</TabPanel>
</div>
</TabContext>
)
}
export default TabsVertical
// React Imports
import { useState } from 'react'
// MUI Imports
import Tab from '@mui/material/Tab'
import TabList from '@mui/lab/TabList'
import TabPanel from '@mui/lab/TabPanel'
import TabContext from '@mui/lab/TabContext'
import Typography from '@mui/material/Typography'
const TabsVertical = () => {
// States
const [value, setValue] = useState('1')
const handleChange = (event, newValue) => {
setValue(newValue)
}
return (
<TabContext value={value}>
<div className='flex'>
<TabList orientation='vertical' onChange={handleChange} aria-label='vertical tabs example'>
<Tab value='1' label='Tab 1' />
<Tab value='2' label='Tab 2' />
<Tab value='3' label='Tab 3' />
</TabList>
<TabPanel value='1'>
<Typography>
Cake apple pie chupa chups biscuit liquorice tootsie roll liquorice sugar plum. Cotton candy wafer wafer
jelly cake caramels brownie gummies.
</Typography>
</TabPanel>
<TabPanel value='2'>
<Typography>
Chocolate bar carrot cake candy canes sesame snaps. Cupcake pie gummi bears jujubes candy canes. Chupa chups
sesame snaps halvah.
</Typography>
</TabPanel>
<TabPanel value='3'>
<Typography>
Danish tiramisu jujubes cupcake chocolate bar cake cheesecake chupa chups. Macaroon ice cream tootsie roll
carrot cake gummi bears.
</Typography>
</TabPanel>
</div>
</TabContext>
)
}
export default TabsVertical
Use styled
hook to customize your tabs.
Cake apple pie chupa chups biscuit liquorice tootsie roll liquorice sugar plum. Cotton candy wafer wafer jelly cake caramels brownie gummies.
- TSX
- JS
// React Imports
import { useState } from 'react'
import type { SyntheticEvent } from 'react'
// MUI Imports
import Tab from '@mui/material/Tab'
import Typography from '@mui/material/Typography'
import TabPanel from '@mui/lab/TabPanel'
import TabContext from '@mui/lab/TabContext'
// Component Imports
import CustomTabList from '@site/src/components/mui/TabList'
const TabsCustomizedVertical = () => {
// States
const [value, setValue] = useState<string>('1')
const handleChange = (event: SyntheticEvent, newValue: string) => {
setValue(newValue)
}
return (
<TabContext value={value}>
<div className='flex'>
<CustomTabList
pill='true'
orientation='vertical'
onChange={handleChange}
aria-label='customized vertical tabs example'
>
<Tab value='1' label='Tab 1' />
<Tab value='2' label='Tab 2' />
<Tab value='3' label='Tab 3' />
</CustomTabList>
<TabPanel value='1'>
<Typography>
Cake apple pie chupa chups biscuit liquorice tootsie roll liquorice sugar plum. Cotton candy wafer wafer
jelly cake caramels brownie gummies.
</Typography>
</TabPanel>
<TabPanel value='2'>
<Typography>
Chocolate bar carrot cake candy canes sesame snaps. Cupcake pie gummi bears jujubes candy canes. Chupa chups
sesame snaps halvah.
</Typography>
</TabPanel>
<TabPanel value='3'>
<Typography>
Danish tiramisu jujubes cupcake chocolate bar cake cheesecake chupa chups. Macaroon ice cream tootsie roll
carrot cake gummi bears.
</Typography>
</TabPanel>
</div>
</TabContext>
)
}
export default TabsCustomizedVertical
// React Imports
import { useState } from 'react'
// MUI Imports
import Tab from '@mui/material/Tab'
import Typography from '@mui/material/Typography'
import TabPanel from '@mui/lab/TabPanel'
import TabContext from '@mui/lab/TabContext'
// Component Imports
import CustomTabList from '@site/src/components/mui/TabList'
const TabsCustomizedVertical = () => {
// States
const [value, setValue] = useState('1')
const handleChange = (event, newValue) => {
setValue(newValue)
}
return (
<TabContext value={value}>
<div className='flex'>
<CustomTabList
pill='true'
orientation='vertical'
onChange={handleChange}
aria-label='customized vertical tabs example'
>
<Tab value='1' label='Tab 1' />
<Tab value='2' label='Tab 2' />
<Tab value='3' label='Tab 3' />
</CustomTabList>
<TabPanel value='1'>
<Typography>
Cake apple pie chupa chups biscuit liquorice tootsie roll liquorice sugar plum. Cotton candy wafer wafer
jelly cake caramels brownie gummies.
</Typography>
</TabPanel>
<TabPanel value='2'>
<Typography>
Chocolate bar carrot cake candy canes sesame snaps. Cupcake pie gummi bears jujubes candy canes. Chupa chups
sesame snaps halvah.
</Typography>
</TabPanel>
<TabPanel value='3'>
<Typography>
Danish tiramisu jujubes cupcake chocolate bar cake cheesecake chupa chups. Macaroon ice cream tootsie roll
carrot cake gummi bears.
</Typography>
</TabPanel>
</div>
</TabContext>
)
}
export default TabsCustomizedVertical
Use component
prop to change the Tab
component to the component of your choice.
Cake apple pie chupa chups biscuit liquorice tootsie roll liquorice sugar plum. Cotton candy wafer wafer jelly cake caramels brownie gummies.
- TSX
- JS
// React Imports
import { useState } from 'react'
import type { MouseEvent, SyntheticEvent } from 'react'
// MUI Imports
import Tab from '@mui/material/Tab'
import TabList from '@mui/lab/TabList'
import TabPanel from '@mui/lab/TabPanel'
import TabContext from '@mui/lab/TabContext'
import Typography from '@mui/material/Typography'
const TabsNav = () => {
// States
const [value, setValue] = useState<string>('1')
const handleChange = (event: SyntheticEvent, newValue: string) => {
setValue(newValue)
}
return (
<TabContext value={value}>
<TabList onChange={handleChange} aria-label='nav tabs example'>
<Tab
value='1'
component='a'
label='Tab 1'
href='/drafts'
className='hover:shadow-none'
onClick={(e: MouseEvent<HTMLElement>) => e.preventDefault()}
/>
<Tab
value='2'
component='a'
label='Tab 2'
href='/trash'
className='hover:shadow-none'
onClick={(e: MouseEvent<HTMLElement>) => e.preventDefault()}
/>
<Tab
value='3'
component='a'
label='Tab 3'
href='/spam'
className='hover:shadow-none'
onClick={(e: MouseEvent<HTMLElement>) => e.preventDefault()}
/>
</TabList>
<TabPanel value='1'>
<Typography>
Cake apple pie chupa chups biscuit liquorice tootsie roll liquorice sugar plum. Cotton candy wafer wafer jelly
cake caramels brownie gummies.
</Typography>
</TabPanel>
<TabPanel value='2'>
<Typography>
Chocolate bar carrot cake candy canes sesame snaps. Cupcake pie gummi bears jujubes candy canes. Chupa chups
sesame snaps halvah.
</Typography>
</TabPanel>
<TabPanel value='3'>
<Typography>
Danish tiramisu jujubes cupcake chocolate bar cake cheesecake chupa chups. Macaroon ice cream tootsie roll
carrot cake gummi bears.
</Typography>
</TabPanel>
</TabContext>
)
}
export default TabsNav
// React Imports
import { useState } from 'react'
// MUI Imports
import Tab from '@mui/material/Tab'
import TabList from '@mui/lab/TabList'
import TabPanel from '@mui/lab/TabPanel'
import TabContext from '@mui/lab/TabContext'
import Typography from '@mui/material/Typography'
const TabsNav = () => {
// States
const [value, setValue] = useState('1')
const handleChange = (event, newValue) => {
setValue(newValue)
}
return (
<TabContext value={value}>
<TabList onChange={handleChange} aria-label='nav tabs example'>
<Tab
value='1'
component='a'
label='Tab 1'
href='/drafts'
className='hover:shadow-none'
onClick={e => e.preventDefault()}
/>
<Tab
value='2'
component='a'
label='Tab 2'
href='/trash'
className='hover:shadow-none'
onClick={e => e.preventDefault()}
/>
<Tab
value='3'
component='a'
label='Tab 3'
href='/spam'
className='hover:shadow-none'
onClick={e => e.preventDefault()}
/>
</TabList>
<TabPanel value='1'>
<Typography>
Cake apple pie chupa chups biscuit liquorice tootsie roll liquorice sugar plum. Cotton candy wafer wafer jelly
cake caramels brownie gummies.
</Typography>
</TabPanel>
<TabPanel value='2'>
<Typography>
Chocolate bar carrot cake candy canes sesame snaps. Cupcake pie gummi bears jujubes candy canes. Chupa chups
sesame snaps halvah.
</Typography>
</TabPanel>
<TabPanel value='3'>
<Typography>
Danish tiramisu jujubes cupcake chocolate bar cake cheesecake chupa chups. Macaroon ice cream tootsie roll
carrot cake gummi bears.
</Typography>
</TabPanel>
</TabContext>
)
}
export default TabsNav