Vertical/Stacked tabs

[carkod]

Component/pattern to amend

Tabs pattern to have a stacked or vertical option (as called on ubuntu.com).

Visual

The "Choose a board" left-hand side list of elements.

You can find it already built basically on u.com

Context

Design sometimes creates this type of styling. For example https://www.figma.com/file/ZU2ufsTJD9tEkXPqhhDMZz/U.com---LXD-(rebranding)?node-id=474%3A4197&mode=dev

[anthonydillon]

Thanks for reporting @carkod. Isn't this just the side-navigation pattern?

[bartaz]

Thanks for reporting @carkod. Isn't this just the side-navigation pattern?

No, while visually it may look like side navigation, it's not side navigation. Side navigation was designed and built specifically for navigating between pages, it also includes layout responsive features, like a mobile off screen drawer. There can be only one side navigation on the page at once.

Vertical tabs may share the visual style, but likely will have different scripting behaviours and may need different responsive styling.

[danielmutis]

WG

• The connection to the content and understanding what content will be changed by it is unclear, especially when the end of the section is below the fold.
• Responsive behaviour: should it turn into a dropdown or regular tabs?

UX input needed. @juanruitina

[juanruitina]

We did this in some download pages because the tabs used before didn't scale well: we have very long labels or many tabs, worst case being RISC-V.

The connection to the content and understanding what content will be changed by it is unclear, especially when the end of the section is below the fold.

Not sure I share this. There's always an active tab whose label matches a heading on the right hand side. The layout and the interaction seems rather intuitive to me: the vertical tabs do resemble the side navigation, so it makes sense that everything that is in the remaining 9 columns is what changes by interacting with the tabs. If we wanted to add extra content outside the tabbed content, it could just take 12 columns below, and would be perceived as something distinct (this would be harder to achieve with horizontal tabs and our current visual style). Making tabs sticky could contribute to this too.

The behaviour in smaller viewports is something to discuss, yep: the dropdown seems good enough, but I personally don't love it. I see in Snapcraft that they turn into horizontal tabs, but that's not great either in this case, it would hide the options excessively.