New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Vertical/Stacked tabs #4920
Comments
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. |
WG
UX input needed. @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.
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. |
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
The text was updated successfully, but these errors were encountered: