I am currently incorporating Material-ui Tablist into my AppBar component. However, I am facing an issue with the responsiveness of the tabs. When there are too many tabs, some of them become hidden on smaller screens.
For more information on the component, you can refer to the documentation:
https://material-ui.com/components/tabs/
You can visually see the problem in action here:
https://codesandbox.io/s/nervous-hoover-809s0?file=/src/App.js
I am wondering if it is possible to implement a scrolling feature under the AppBar component or perhaps include navigation arrows when tabs exceed the visible area?
Potentially, the scroll or arrow functionality could be integrated within this part of the code snippet:
<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>
To get a clearer understanding, please check out the codesandbox example provided above.