Vuetify: [Feature Request] v-tabs Vertical option

[AGPDev]

Problem to solve

i need use other vue plugin to create vertical tabs in complex projects

Proposed solution

implement option to use

[nekosaur]

Please provide more information about this feature request. Do you have an example of what you want to achieve? What would the proposed new markup look like?

[AGPDev]

I make this using v-list, v-card and CSS

W4 Example working:
https://www.w3schools.com/howto/howto_js_vertical_tabs.asp

[Blaconix]

I recently stumbled with a case where vertical tabs would be really beneficial. If it's not implemented soon, I was thinking about having a list change the v-model of a container.

Vertical tabs would be a great addition, though!

[ArturGrigio]

We had a similar use case, ended up using the v-stepper with :vertical=true and hiding the numbers in front of the steps.

It ended up looking like this:

in this scenario, the tabs are the steps (Employee Detail, ..., ..., History)
and the tab item is the stepper content

[jacekkarczmarczyk]

I've created a component for my personal use: https://gist.github.com/jacekkarczmarczyk/eca6015c176e85ea78706e63383bbe5c

Usage:

        <vertical-tabs v-model="tab" :items="['foo', 'bar', 'baz', 'foo bar', 'foo baz', 'bar baz', 'foo bar baz', 'lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum']"></vertical-tabs>

        <vertical-tabs vertical-text height="300" v-model="tab" :items="['foo', 'bar', 'baz']"></vertical-tabs>

It doesn't support router nor many tabs props (like show-arrows, icons, etc), first version (with horizontal text) has fixed width 200px, but maybe some people will find it useful in their projects

[tjb1187]

Artur would you be kind enough to share some code for how you got your verticle tabs working? I'm trying to replicate but having a few issues? Thanks

[johnleider]

[johnleider]

Resolved in f22d754

[nimoos]

using still showing horizontal , i updated vuetify still having this issue

[MajesticPotatoe]

This is in 2.0 alpha build.
We kindly ask users to not comment on closed/resolved issues. If you believe that this issue has not been correctly resolved, please create a new issue showing the regression or reach out to us in our Discord community.

Thank you for your contribution and interest in improving Vuetify.