[Tabs] Add vertical support

[waheed25]

material ui tabs default behaviour is horizontal but i want to use tabs in vertically align is there any props or ways for set tabs in vertically align i read the tabs documentation but didn't find any way to use tabs in vertically.
like this manner
https://codepen.io/rahul-sagore/pen/WwZXGa
i found an example on this link in html and css
Is there any solution of that???

[oliviertassinari]

@waheed25 I can't find any reference to vertical tabs in the material specification. It's something you can build on userland. It would be aweseome to share the implementation here once you have it :).

[vtrphan]

hi, i'm sure there is this vertical tab component
See: https://www.google.de/intl/en_de/policies/privacy/
It would be nice to have it for material-ui too

[oliviertassinari]

@vtrphan It's unlikely we will implement custom components like this one. We focus on implementing components that are highly used and requested. The idiomatic Material way to solve this component problem is to use a drawer + a list.

[nywooz]

@oliviertassinari , good explanation of the reasons behind this decision. Completely makes sense.

[hsiung]

Hi Olivier

You said "The idiomatic Material way to solve this component problem is to use a drawer + a list".

I don't agree. A Drawer is a navigation component. Tab is a container. It's bad design to use one for the other usage. The problem described by Waheed is a not just a cosmetic issue (horizontal tab -> vertical tab). The problem is the general one. How to represent 2 dimensional container. The Tab component is a solution to the 1 dimensional container. In most of the 50 projects I worked at in the last 20 years, I found the requirement to represent 2 dimensional containers. It's not just an exotic requirement. Our representation of the world is very often 2 dimensional. I would agree with you that 3 dimension is less trivial. But I do not agree that representing a container dependent on 2 parameters is not highly requested. If you would have it, you will use it!
Having stated the problem and the motivation, what is the solution? Nested Tabs is not recommended (as of Material Design guideline, and I agree). I think that vertical Tabs combined with horizontal Tabs is a convincing solution. It is constant with the container metaphor of Tabs and it looks very consistent with Material Design. An example of the implementation is the one of Rahul Sagore. https://codepen.io/rahul-sagore/pen/WwZXGa

Regards

[hafbau]

For future people looking for a simple way to make this work still with material-ui, here's a gist that worked for my case: https://gist.github.com/hafbau/1a332cf84455aafc2dcd2716ee14fcc1

[oliviertassinari]

We have recently changed our Roadmap. Given this feature seems to be requested and that the implementation cost is small, I think that we can reconsider it. I was looking at https://v1.quasar-framework.org/vue-components/tabs. It looks nice.

.

I have isolated @hafbau example into a codesandbox:

https://codesandbox.io/s/n9ww0pq7p4

[oliviertassinari]

A proposal implementation: #16628, feedback welcomed.