Tips for creating multiple row tabs in Material UI Tabs

Question

Tips for creating multiple row tabs in Material UI Tabs

Currently, I have close to 30 tabs housed within Material UI Tabs. In order for the user to view all tabs, they must scroll two times. I am seeking a solution to display the tabs in two rows with a scroll, as opposed to one row with scroll. This would allow users to see most of the tabs with just one glance.
I have searched through the Material UI documentation but have not found a useful solution. I attempted to manually apply CSS styles, but unfortunately, I fell short in achieving my desired layout (my CSS skills are average).
To better illustrate my idea of having multiple row tabs, please refer to this sample image:
https://i.sstatic.net/Q6WBI.png
Any assistance on this matter would be greatly appreciated.

css reactjs tabs material-ui

Answer 1

Answer №1

To ensure proper wrapping in the tab container component using flexbox, you can add flexWrap: 'wrap':

<Tabs
  // hide the tab indicator to prevent issues with wrapped container
  TabIndicatorProps={{ sx: { display: 'none' } }}
  sx={{
    '& .MuiTabs-flexContainer': {
      flexWrap: 'wrap',
    },
  }}
  {...}
>

https://codesandbox.io/s/69733826-material-ui-responsive-tabs-5q57p?file=/demo.js

Answer 2

To ensure proper wrapping in the tab container component using flexbox, you can add flexWrap: 'wrap':

<Tabs
  // hide the tab indicator to prevent issues with wrapped container
  TabIndicatorProps={{ sx: { display: 'none' } }}
  sx={{
    '& .MuiTabs-flexContainer': {
      flexWrap: 'wrap',
    },
  }}
  {...}
>

https://codesandbox.io/s/69733826-material-ui-responsive-tabs-5q57p?file=/demo.js

Answer 3

Answer №2

Here's a little trick I used:

Instead of using one Tabs component, I used two and adjusted the indexes like this:

<Box sx={{ display: 'flex',justifyContent: 'center', flexWrap: 'wrap'}}>
    <Tabs value={value} onChange={handleChange}>
        <Tab label='Prices'/>
        <Tab label='Users'/>
        <Tab label='Plan'/>
    </Tabs>
    <Tabs value={value - 3 } onChange={handleChange2}>
        <Tab label='Employees'/>
    </Tabs>
</Box>

Then, I managed the change for this adjustment using the following code:

const handleChange = (event, newValue) => {
    setValue(newValue);
};
const handleChange2 = (event, newValue) => {
    setValue(newValue + 3);
};

All you need to do is replace the number 3 with the number of tabs in your first component.

Regards

Answer 4

Here's a little trick I used:

Instead of using one Tabs component, I used two and adjusted the indexes like this:

<Box sx={{ display: 'flex',justifyContent: 'center', flexWrap: 'wrap'}}>
    <Tabs value={value} onChange={handleChange}>
        <Tab label='Prices'/>
        <Tab label='Users'/>
        <Tab label='Plan'/>
    </Tabs>
    <Tabs value={value - 3 } onChange={handleChange2}>
        <Tab label='Employees'/>
    </Tabs>
</Box>

Then, I managed the change for this adjustment using the following code:

const handleChange = (event, newValue) => {
    setValue(newValue);
};
const handleChange2 = (event, newValue) => {
    setValue(newValue + 3);
};

All you need to do is replace the number 3 with the number of tabs in your first component.

Regards

Answer 5

Answer №3

Dealing with a similar issue myself. After going through the documentation, it seems that achieving this using Tabs/Tab features is not feasible. However, there are a couple of alternatives available:

Utilize properties variant="scrollable" and scrollButtons="auto" as mentioned earlier. This may not provide the expected result, but it does get the job done.
Create your own tabs by leveraging Grid. The example below illustrates an approach, though it is not a final solution and can be easily customized.


const useStyles = makeStyles((theme) => ({
  navigationLinkContainer: { 
    // Customize as needed
  },
  navigationLinkButtonActive: {
    color: '#ffffff',
    // Customize as needed
  },
 
}));

const NavigationLink = (props) => {
  const classes = useStyles();
  return (
    <Grid item className={classes.navigationLinkContainer}>
      <Button
        component={Link}
        onClick={props.onClick}
      >
        {props.children}
      </Button>
    </Grid>
  );
};

const NavigationHeaders = (props) => {
  const classes = useStyles();
  const { headers, className } = props;
  const [activeTab, setActiveTab] = React.useState('');

  const isActive = (headerId) => headerId === activeTab;

  return (
    <>
     <Grid container >
      {headers.map((header) => (
        <NavigationLink
          className={classnames(isActive(header.id) && classes.navigationLinkButtonActive)}
          key={header.id}
          onClick={() => setActiveTab(header.id)}
        >
          {header.title}
        </NavigationLink>
      ))}
     </Grid>
     {/* Display content based on activeTab */}
   </>
  );
};

Answer 6

Dealing with a similar issue myself. After going through the documentation, it seems that achieving this using Tabs/Tab features is not feasible. However, there are a couple of alternatives available:

Utilize properties variant="scrollable" and scrollButtons="auto" as mentioned earlier. This may not provide the expected result, but it does get the job done.
Create your own tabs by leveraging Grid. The example below illustrates an approach, though it is not a final solution and can be easily customized.


const useStyles = makeStyles((theme) => ({
  navigationLinkContainer: { 
    // Customize as needed
  },
  navigationLinkButtonActive: {
    color: '#ffffff',
    // Customize as needed
  },
 
}));

const NavigationLink = (props) => {
  const classes = useStyles();
  return (
    <Grid item className={classes.navigationLinkContainer}>
      <Button
        component={Link}
        onClick={props.onClick}
      >
        {props.children}
      </Button>
    </Grid>
  );
};

const NavigationHeaders = (props) => {
  const classes = useStyles();
  const { headers, className } = props;
  const [activeTab, setActiveTab] = React.useState('');

  const isActive = (headerId) => headerId === activeTab;

  return (
    <>
     <Grid container >
      {headers.map((header) => (
        <NavigationLink
          className={classnames(isActive(header.id) && classes.navigationLinkButtonActive)}
          key={header.id}
          onClick={() => setActiveTab(header.id)}
        >
          {header.title}
        </NavigationLink>
      ))}
     </Grid>
     {/* Display content based on activeTab */}
   </>
  );
};

Answer 7

Answer №4

After experimenting with various methods, I have come to the realization that achieving the desired outcome with Tabs/Tab is currently not feasible. I attempted to incorporate <br />, <hr />, <Divider />, and other functions to create breaks, attempted to create multiple rows of tabs (resulting in selection issues), tried wrapping Tabs in a span with max-width (resulting in selection issues as well), and explored numerous other options. Eventually, I resolved to implement scrolling for smaller screens.

By determining the smallest screen size that could display my tabs properly, I implemented scrolling for screens that are smaller.

const mql = window.matchMedia('(max-width: 2000px)');
const smallScreen = mql.matches;

<Tabs
  value={tabValue}
  onChange={handleTabChange}
  orientation="horizontal"
  variant={smallScreen ? 'scrollable' : 'standard'}
  centered={!smallScreen}
 >
   <Tab label="1" />
   <Tab label="2" />
   <Tab label="3" />
   <Tab label="4" />
   <Tab label="5" />
  </Tabs>

Although adding an event handler to adjust on resize is an option, it was not necessary for my specific scenario.

Answer 8

After experimenting with various methods, I have come to the realization that achieving the desired outcome with Tabs/Tab is currently not feasible. I attempted to incorporate <br />, <hr />, <Divider />, and other functions to create breaks, attempted to create multiple rows of tabs (resulting in selection issues), tried wrapping Tabs in a span with max-width (resulting in selection issues as well), and explored numerous other options. Eventually, I resolved to implement scrolling for smaller screens.

By determining the smallest screen size that could display my tabs properly, I implemented scrolling for screens that are smaller.

const mql = window.matchMedia('(max-width: 2000px)');
const smallScreen = mql.matches;

<Tabs
  value={tabValue}
  onChange={handleTabChange}
  orientation="horizontal"
  variant={smallScreen ? 'scrollable' : 'standard'}
  centered={!smallScreen}
 >
   <Tab label="1" />
   <Tab label="2" />
   <Tab label="3" />
   <Tab label="4" />
   <Tab label="5" />
  </Tabs>

Although adding an event handler to adjust on resize is an option, it was not necessary for my specific scenario.

Answer 9

Answer №5

Make sure to thoroughly review the documentation of any tool you utilize to prevent unnecessary issues in the future

For more in-depth information and complete code, check out https://material-ui.com/components/tabs/

<div className={classes.root}>
  <AppBar position="static">
    <Tabs value={value}
     onChange={handleChange} 
      aria-label="simple tabs example" 
      indicatorColor="primary"
      textColor="primary"
      variant="scrollable"
      scrollButtons="auto"
      aria-label="scrollable auto tabs example"
    >
      <Tab label="Item One" {...a11yProps(0)} />
      <Tab label="Item Two" {...a11yProps(1)} />
      <Tab label="Item Three" {...a11yProps(2)} />
    </Tabs>
  </AppBar>
  <TabPanel value={value} index={0}>
    Item One
  </TabPanel>
  <TabPanel value={value} index={1}>
    Item Two
  </TabPanel>
  <TabPanel value={value} index={2}>
    Item Three
  </TabPanel>
</div>

Edit: please pay attention to the variant specified in Tabs

Answer 10

Make sure to thoroughly review the documentation of any tool you utilize to prevent unnecessary issues in the future

For more in-depth information and complete code, check out https://material-ui.com/components/tabs/

<div className={classes.root}>
  <AppBar position="static">
    <Tabs value={value}
     onChange={handleChange} 
      aria-label="simple tabs example" 
      indicatorColor="primary"
      textColor="primary"
      variant="scrollable"
      scrollButtons="auto"
      aria-label="scrollable auto tabs example"
    >
      <Tab label="Item One" {...a11yProps(0)} />
      <Tab label="Item Two" {...a11yProps(1)} />
      <Tab label="Item Three" {...a11yProps(2)} />
    </Tabs>
  </AppBar>
  <TabPanel value={value} index={0}>
    Item One
  </TabPanel>
  <TabPanel value={value} index={1}>
    Item Two
  </TabPanel>
  <TabPanel value={value} index={2}>
    Item Three
  </TabPanel>
</div>

Edit: please pay attention to the variant specified in Tabs

Tips for creating multiple row tabs in Material UI Tabs

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Function activation in Element requires a double click to initiate

What is the best way to customize the color of the <DatePicker /> component?

Troubleshooting Div Element Width in CSS Not Functioning

Troubleshooting a background image problem in a TailwindCSS configuration file

Adjust the width of the dropdown menu in React-Bootstrap to match the width of the dropdown when changes occur

Timeout function failing to properly clear asynchronous code

Utilizing Props in React to Slice and Dice Data Within a Separate Component

Iterate through three images using the `background-image` property in my Div

prettyPhoto popup exceeds maximum width and height limitations

It is not possible to change the maximum height of a Popover in Material UI

Testing a component's conditional branches within the render function before it returns

Is it possible to utilize rbac permissions independently of the authProvider system?

What is the best way to display an input label or placeholder label consistently?

Choose the dropdown value that corresponds to the name of the subcollection from which to retrieve data

What seems to be the issue at hand? Could I be making a mistake? Are there alternative methods to approach this situation?

Send a parameter to the state from the component to access the object property key within a React array

Every time I reload the page, the tab indicator on Material-UI returns to the first tab item

Can CSS be used to communicate to JavaScript which media queries are currently in effect?

Trouble encountered while trying to animate an SVG path

Sluggish operation of the personalized element