How to make the tabs scrollable?

[andiras]

Hello there!

I have a feature with 10 tabs and when I change the window size or use phone, I can't see the last tabs and I can't scroll to the right.

Material has a "Scrollable" option available where it shows chevrons on both sides to navigate to the first/last tabs.

Do we have anything like this or any other suggestion? I tried making the tabs vertically but it was not good on the phone.

Thanks

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[rishabh-bijalwan12]

Can you provide a screenshot where you cannot scroll the tab to the right?

[andiras]

Here is an example.

Sandbox

I added a bunch of tabs and it shows properly when I have the windows with full width:

However, when I change the width it won't allow me to click or see the tabs on the right side:

Material has these left and right scroll buttons so I wondered if we had something similar or at least a scroll bar.

[jcuencagento]

<Tab className="scroll" panes={panes} /> works for me

[andiras]

@jcuencagento but you added the scroll style to show the scroll bar right? I did something similar with "overflow-y: hidden;" but I didn't like it. It would be good to have the chevrons on the left/right side to navigate through tabs.