tabs vertical

[zfranco55]

Describe the feature in detail (code, mocks, or screenshots encouraged)

Is possible implement vertical left/right side version of tabs component?

What type of pull request would this be?

Enhancement

Provide relevant links or additional information.

No response

[Sarenor]

Tabs have already been completed for v3, did we consider a vertical mode for them @endigo9740 ?

[zfranco55]

I hope implementation will be considered

[endigo9740]

It is being considered for v3, but poses a number of challenges to get the styling just right, while also keeping it customizable. It's not as simple as swapping from a row to column as you might think.

[zfranco55]

It seemed simple to me, reading this link:
https://www.w3schools.com/howto/howto_js_vertical_tabs.asp

[endigo9740]

@zfranco55 tabs are not a browser native UI component, which means there's no set standard on how they are designed and built. W3 Schools is simply demonstrating one of many different ways this interface can be constructed. For comparison, you can take a look at how Skeleton implements tabs here:

https://github.com/skeletonlabs/skeleton/tree/master/packages/skeleton/src/lib/components/Tab

Remember, we're building components, which means some level of abstraction around the HTML/CSS is happening here. Then we're applying our own theme and style prop systems on-top of this.

In order to support a vertical layout we would have to:

1. Provide a vertical prop which takes a true/false value on the TabGroup
2. Toggle the group template between flex row/column respectively
3. Pass the vertical prop down to each Tab component through the Svelte Context API
4. Then adjust the styling of the Tab component to move the active state indicator (underline) to the proper position

That last step is the most involved and becomes more troublesome if we wish to support both left and right alignment in the vertical state.

So again, I'll echo that it's technically possible, but likely beyond the scope of changes we're willing and able to implement in Skeleton v2. We are, as mentioned, considering this for Skelton v3 - as we're already rebuilding the components to take advantage of Svelte 5 and a number of other foundational changes to Skeleton itself. So we're taking that opportunity to introduce new features and structural changes.

If you need an interim solution, I might suggest Listbox, which operates in a similar manner:
https://www.skeleton.dev/components/listboxes