Vertical tabs

[khawkins98]

Stumbled on these "vertical tabs" at IBM.com 's homepage

I think the idea could have merit, perhaps even combining with the vf-section-header to make "combinable containers"

ping @cindyebi

[cindyebi]

We discussed something similar last week about adding in-page navigation because there was a need for this component within the covid-19 data portal, which has a similar look, but instead of behaving as tabs, they navigate users to jump to a specific section within the same page. Perhaps @stefangutnick could give us an example of how it's implemented at the moment.

[stefangutnick]

Using a sort of similar pattern here as anchor links on the left-hand side:

https://dev.covid19dataportal.org/submit-data

In terms of UX, NNgroup have a few recommendations on them here:

https://www.nngroup.com/articles/in-page-links/

It's definitely a nice pattern to have access to, but the use cases are quite specific. Really have to make sure it's not creating confusing by adding another layer of navigation that might be overkill (haven't tested that on the portal yet).

[cindyebi]

Another example from the IBM website for the in-page navigation: https://www.ibm.com/cloud/learn/what-is-artificial-intelligence?lnk=hpmls_buwi_uken&lnk2=learn#toc-what-is-ar-DhYPPT4m

@khawkins98 I couldn't find the example for the screenshot above on the IBM site, do you mind adding the link to see how it's the vertical tabs are being used?

[khawkins98]

The IBM example (available on the US homepage: https://www.ibm.com/us-en?lnk=fcc) don't act as scroll anchors but as tabs.

On the anchor links in the covidportal, two quick thoughts:

1. That example and other components would benefit from "sticky" support in the VF; there's an issue at Component: allow vf-navigation and vf-link-list to be sticky #1561
2. The current recommended deep-link/anchor-link components are the rather confusingly name link-list--easy and link-list--very-easy https://stable.visual-framework.dev/components/vf-link-list/#vf-link-list--very-easy
   • There's already some pending thoughts to improve the behaviour and naming of these

[khawkins98]

Generic support of smooth scrolling is another thing to be made as well ...

[cindyebi]

This component could be very helpful for some use cases and it comes in handy since it's pretty intuitive and efficient for scanning: https://www.nngroup.com/articles/vertical-nav/

I'll provide some design mockups next week.

[khawkins98]

Isn't the pattern that NN references like the vf-tree, only without child elements?