Vuetify: [Feature Request]: Add dynamic menu for v-tabs

[BennyAlex]

The v-tabs have an missing feature which is described in the material specifications:
A tab menu which can display additional items, which can be uses as a link like the normal tabs.

[nekosaur]

This is already possible. See example #7 on docs.

[KaelWD]

That example isn't quite the same thing
If you look at the screenshots it appears as though if you click the Books item it gets added to the tab bar, and News is moved into the menu

[BennyAlex]

@nekosaur
No, there is just a simple menu. But you can't use the list items as a real tabs-link. And the material specs showing that when clicking such a link, the item will jump inside the tabs-bar and is visibly active

[nekosaur]

Still possible https://codepen.io/anon/pen/qVVxxo?&editors=101

In my opinion this is a user implementation and not something we should natively support.

[BennyAlex]

@nekosaur
Why is this a user implementation? It stands right in the material-specs, and unfortunatelly vuetify's tabs aren't that highly customizeable. I try since 12 hours to get it to work but no luck

[KaelWD]

I made a better codepen based on neko's, I think this does what you want.

https://codepen.io/anon/pen/XzzZOz?editors=1010

[BennyAlex]

@nekosaur
In your example, the switching between the content of the tabs is not working and I dont think it is possible to fo this with the menu

[nekosaur]

My justification for not including it in the framework is that I see it as an example of possible content inside the tabs bar, not as a part of the spec itself. It is for example not defined in the specs section. And as @KaelWD showed it's a pretty painless implementation.

The rest of the @vuetifyjs/collaborators might feel differently though.

[BennyAlex]

@KaelWD @nekosaur
Thank you very mutch. The second example working fine.
Now I have another problem. I try to have
What I try to archive: Items with subitems should be a dropdown menu inside the tabs-bar. The menu activator itself has no link, only the subitems are clickable and will show their tabs-content when active. Items with only one subitem should show the subitem as a normal tab.

Here what I have so far: https://codepen.io/Benny98/pen/vWWRjO
Maybe you can help me?

[BennyAlex]

@KaelWD @nekosaur
Okay I got it to work what I wanted with help of a friend now.
Here is an example what we have done: https://codepen.io/Benny98/pen/vWWRjO

I have another idea for vuetify's tabs: Add a completely dynamic menu. When there are to many tabs to display them all in the tabs-bar, show the 'more' button instead of the current scroll behavior.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord