I am using Material-ui Tablist for my in my AppBar ponent. The problem is that I have too many Tabs and I want to make them responsive - when I have smaller screen some of them are just not visible.

The ponent's docs:

/

You can see when I have so many tabs how it hides the lasts:

=/src/App.js

Is it possible to add something like a scroll under AppBar ponent or like a little arrows to left and right when there are other ponents that are invisible?

Probably scroll or arrows should be added in this section:

 <AppBar position="static">
            <TabList onChange={handleChange} aria-label="simple tabs example">
              <Tab label="Business Info" value="1" icon={<ContactMailIcon />} />
              <Tab label="Financial" value="2" icon={<MonetizationOnIcon />} />
              <Tab
                label="Participants"
                value="3"
                icon={<AccessibilityIcon />}
              />
              <Tab label="Statistics" value="4" icon={<EqualizerIcon />} />
              <Tab label="Alerts" value="5" icon={<ReportProblemIcon />} />
              <Tab label="Health Care" value="6" icon={<FavoriteIcon />} />
              <Tab label="Plans" value="7" icon={<ListAltIcon />} />
              <Tab
                label="Benchmark"
                value="8"
                icon={<ListAltIcon />}
              />
              <Tab
                label="Heatmap"
                value="9"
                icon={<ListAltIcon />}
              />
              <Tab
                label="Diagnostic"
                value="10"
                icon={<ListAltIcon />}
              />
            </TabList>
          </AppBar>

But you will have better point of view in codesandbox example.

I am using Material-ui Tablist for my in my AppBar ponent. The problem is that I have too many Tabs and I want to make them responsive - when I have smaller screen some of them are just not visible.

The ponent's docs:

https://material-ui./ponents/tabs/

You can see when I have so many tabs how it hides the lasts:

https://codesandbox.io/s/nervous-hoover-809s0?file=/src/App.js

Is it possible to add something like a scroll under AppBar ponent or like a little arrows to left and right when there are other ponents that are invisible?

Probably scroll or arrows should be added in this section:

 <AppBar position="static">
            <TabList onChange={handleChange} aria-label="simple tabs example">
              <Tab label="Business Info" value="1" icon={<ContactMailIcon />} />
              <Tab label="Financial" value="2" icon={<MonetizationOnIcon />} />
              <Tab
                label="Participants"
                value="3"
                icon={<AccessibilityIcon />}
              />
              <Tab label="Statistics" value="4" icon={<EqualizerIcon />} />
              <Tab label="Alerts" value="5" icon={<ReportProblemIcon />} />
              <Tab label="Health Care" value="6" icon={<FavoriteIcon />} />
              <Tab label="Plans" value="7" icon={<ListAltIcon />} />
              <Tab
                label="Benchmark"
                value="8"
                icon={<ListAltIcon />}
              />
              <Tab
                label="Heatmap"
                value="9"
                icon={<ListAltIcon />}
              />
              <Tab
                label="Diagnostic"
                value="10"
                icon={<ListAltIcon />}
              />
            </TabList>
          </AppBar>

But you will have better point of view in codesandbox example.

• javascript
• css
• reactjs
• material-ui
• tabs

2 Answers 2

TabList accepts a prop variant="scrollable" which sets the scrollable property and also provide a little arrows indicator on sides.

Here is the demo of scrollable tabs:- https://material-ui./ponents/tabs/#automatic-scroll-buttons

<TabList variant="scrollable" onChange={handleChange} aria-label="simple tabs example">
  <Tab label="Business Info" value="1" icon={<ContactMailIcon />} />
  <Tab label="Financial" value="2" icon={<MonetizationOnIcon />} />
  <Tab label="Participants" value="3" icon={<AccessibilityIcon />} />
  <Tab label="Statistics" value="4" icon={<EqualizerIcon />} />
  <Tab label="Alerts" value="5" icon={<ReportProblemIcon />} />
  <Tab label="Health Care" value="6" icon={<FavoriteIcon />} />
  <Tab label="Plans" value="7" icon={<ListAltIcon />} />
  <Tab label="Benchmark" value="8" icon={<ListAltIcon />} />
  <Tab label="Heatmap" value="9" icon={<ListAltIcon />} />
  <Tab label="Diagnostic" value="10" icon={<ListAltIcon />} />
</TabList>

Here is the working codesandbox link:- https://codesandbox.io/s/affectionate-firefly-z61em?file=/src/App.js

@Rajiv's answer doesn't work on mobile. Apply scrollButtons={true} and the allowScrollButtonsMobile prop to display the left and right scroll buttons on all viewports:

<Tabs
  value={value}
  onChange={handleChange}
  variant="scrollable"
  scrollButtons
  allowScrollButtonsMobile
  aria-label="scrollable force tabs example"
>