title: Material-ui Tabs - how can I put scroll of them
body: <p>I am using Material-ui Tablist for my in my AppBar component. 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.</p>
  <p>The component's docs:</p>
  <p><a href="https://material-ui.com/components/tabs/" rel="nofollow noreferrer">https://material-ui.com/components/tabs/</a></p>
  <p>You can see when I have so many tabs how it hides the lasts:</p>
  <p><a href="https://codesandbox.io/s/nervous-hoover-809s0?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/nervous-hoover-809s0?file=/src/App.js</a></p>
  <p>Is it possible to add something like a scroll under AppBar component or like a little arrows to left and right when there are other components that are invisible?</p>
  <p>Probably scroll or arrows should be added in this section:</p>
  <pre><code> &lt;AppBar position=&quot;static&quot;&gt;
              &lt;TabList onChange={handleChange} aria-label=&quot;simple tabs example&quot;&gt;
                &lt;Tab label=&quot;Business Info&quot; value=&quot;1&quot; icon={&lt;ContactMailIcon /&gt;} /&gt;
                &lt;Tab label=&quot;Financial&quot; value=&quot;2&quot; icon={&lt;MonetizationOnIcon /&gt;} /&gt;
                &lt;Tab
                  label=&quot;Participants&quot;
                  value=&quot;3&quot;
                  icon={&lt;AccessibilityIcon /&gt;}
                /&gt;
                &lt;Tab label=&quot;Statistics&quot; value=&quot;4&quot; icon={&lt;EqualizerIcon /&gt;} /&gt;
                &lt;Tab label=&quot;Alerts&quot; value=&quot;5&quot; icon={&lt;ReportProblemIcon /&gt;} /&gt;
                &lt;Tab label=&quot;Health Care&quot; value=&quot;6&quot; icon={&lt;FavoriteIcon /&gt;} /&gt;
                &lt;Tab label=&quot;Plans&quot; value=&quot;7&quot; icon={&lt;ListAltIcon /&gt;} /&gt;
                &lt;Tab
                  label=&quot;Benchmark&quot;
                  value=&quot;8&quot;
                  icon={&lt;ListAltIcon /&gt;}
                /&gt;
                &lt;Tab
                  label=&quot;Heatmap&quot;
                  value=&quot;9&quot;
                  icon={&lt;ListAltIcon /&gt;}
                /&gt;
                &lt;Tab
                  label=&quot;Diagnostic&quot;
                  value=&quot;10&quot;
                  icon={&lt;ListAltIcon /&gt;}
                /&gt;
              &lt;/TabList&gt;
            &lt;/AppBar&gt;
  </code></pre>
  <p>But you will have better point of view in codesandbox example.</p>