Drawer Content Here
- Sign Out
Default Tabs

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.

    // ** 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 TabsSimple = () => {
      // ** State
      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 TabsSimple

Color

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.

    // ** 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 = () => {
      // ** State
      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

Full Width Tabs

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.

    // ** 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 = () => {
      // ** State
      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

Centered Tabs

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.

    // ** 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 = () => {
      // ** State
      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

Icon Tabs

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.

    // ** 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'

    // ** Icon Imports
    import Icon from 'src/@core/components/icon'

    const TabsIcon = () => {
      // ** State
      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={<Icon icon='tabler:phone' />} />
            <Tab value='2' label='Favorites' icon={<Icon icon='tabler:heart' />} />
            <Tab value='3' label='Contacts' icon={<Icon icon='tabler:user' />} />
          </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

Customized Tabs

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.

    // ** 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 { styled } from '@mui/material/styles'
    import Typography from '@mui/material/Typography'
    import MuiTabList from '@mui/lab/TabList'

    // Styled TabList component
    const TabList = styled(MuiTabList)(({ theme }) => ({
      borderBottom: '0 !important',
      '&, & .MuiTabs-scroller': {
        boxSizing: 'content-box',
        padding: theme.spacing(1.25, 1.25, 2),
        margin: {theme.spacing(-1.25, -1.25, -2)} !important
      },
      '& .MuiTabs-indicator': {
        display: 'none'
      },
      '& .Mui-selected': {
        boxShadow: theme.shadows[2],
        backgroundColor: theme.palette.primary.main,
        color: {theme.palette.common.white} !important
      },
      '& .MuiTab-root': {
        lineHeight: 1,
        borderRadius: theme.shape.borderRadius,
        '&:hover': {
          color: theme.palette.primary.main
        }
      }
    }))

    const TabsCustomized = () => {
      // ** State
      const [value, setValue] = useState('1')

      const handleChange = (event, newValue) => {
        setValue(newValue)
      }

      return (
        <TabContext value={value}>
          <TabList 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' />
          </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 TabsCustomized

Vertical Tabs

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.

    // ** React Imports
    import { useState } from 'react'

    // ** MUI Imports
    import Box from '@mui/material/Box'
    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 = () => {
      // ** State
      const [value, setValue] = useState('1')

      const handleChange = (event, newValue) => {
        setValue(newValue)
      }

      return (
        <TabContext value={value}>
          <Box sx={{ display: '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>
          </Box>
        </TabContext>
      )
    }

    export default TabsVertical

Customized Vertical Tabs

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.

    // ** React Imports
    import { useState } from 'react'

    // ** MUI Imports
    import Box from '@mui/material/Box'
    import Tab from '@mui/material/Tab'
    import TabPanel from '@mui/lab/TabPanel'
    import TabContext from '@mui/lab/TabContext'
    import { styled } from '@mui/material/styles'
    import Typography from '@mui/material/Typography'
    import MuiTabList from '@mui/lab/TabList'

    // Styled TabList component
    const TabList = styled(MuiTabList)(({ theme }) => ({
      borderRight: 0,
      '&, & .MuiTabs-scroller': {
        boxSizing: 'content-box',
        padding: theme.spacing(1.25, 1.25, 2),
        margin: {theme.spacing(-1.25, -1.25, -2)} !important
      },
      '& .MuiTabs-indicator': {
        display: 'none'
      },
      '& .Mui-selected': {
        boxShadow: theme.shadows[2],
        backgroundColor: theme.palette.primary.main,
        color: {theme.palette.common.white} !important
      },
      '& .MuiTab-root': {
        lineHeight: 1,
        borderRadius: theme.shape.borderRadius,
        '&:hover': {
          color: theme.palette.primary.main
        }
      }
    }))

    const TabsCustomizedVertical = () => {
      // ** State
      const [value, setValue] = useState('1')

      const handleChange = (event, newValue) => {
        setValue(newValue)
      }

      return (
        <TabContext value={value}>
          <Box sx={{ display: 'flex' }}>
            <TabList 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' />
            </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>
          </Box>
        </TabContext>
      )
    }

    export default TabsCustomizedVertical

Forced Scroll Buttons

Use `scrollButtons` and `variant='scrollable'` props with `TabList` component to have forced scrollable tabs.

Cake apple pie chupa chups biscuit liquorice tootsie roll liquorice sugar plum. Cotton candy wafer wafer jelly cake caramels brownie gummies.

    // ** 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'

    // ** Icon Imports
    import Icon from 'src/@core/components/icon'

    const TabsForcedScroll = () => {
      // ** State
      const [value, setValue] = useState('1')

      const handleChange = (event, newValue) => {
        setValue(newValue)
      }

      return (
        <TabContext value={value}>
          <TabList scrollButtons variant='scrollable' onChange={handleChange} aria-label='forced scroll tabs example'>
            <Tab value='1' label='Tab 1' icon={<Icon icon='tabler:phone' />} />
            <Tab value='2' label='Tab 2' icon={<Icon icon='tabler:heart' />} />
            <Tab value='3' label='Tab 3' icon={<Icon icon='tabler:thumb-up' />} />
            <Tab value='4' label='Tab 4' icon={<Icon icon='tabler:user' />} />
            <Tab value='5' label='Tab 5' icon={<Icon icon='tabler:thumb-down' />} />
          </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>
          <TabPanel value='4'>
            <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='5'>
            <Typography>
              Chocolate bar carrot cake candy canes sesame snaps. Cupcake pie gummi bears jujubes candy canes. Chupa chups
              sesame snaps halvah.
            </Typography>
          </TabPanel>
        </TabContext>
      )
    }

    export default TabsForcedScroll