[Component amendment]: Side navigation on sites

[eliman11]

Component/pattern to amend

Side navigation

Visual

Example: Side nav on https://canonical.com/documentation

Context

On mobile, the side navigation shows up as a button that says "Toggle side navigation". Wondering if we can either change the copy on this button if it's being set as the default value or replace it entirely with a hamburger or list icon? Also if it would make sense to make the menu sticky since the side navigation is commonly used to navigate through the page through anchor links. At the moment, the menu doesn't serve much purpose on mobile as you have to scroll up to open the nav, only to be taken down the page again.

[syncronize-issues-to-jira]

Thank you for reporting your feedback to us!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-19207.

This message was autogenerated

[danielmutis]

Triage:

• Navigation on mobile has to be considered more holistically, including bubble navs and side nav.
• In some cases there is a use case for having side navs on sections of a page, but in this case the behaviour is not as expected on mobile. The side nav scrolling to an anchor link is not expected behaviour.
• @juanruitina to add examples of places where this is needed (having a side nav that acts as a table of contents).
• It is not clear that side nav should be used as anchor links in a page. There needs to be more exploration of how this should behave. This component also has a bug, where it shows the wrong section as being highlighted.

@eliman11 to separate the issues between anchor links and side nav hamburger menus.

[juanruitina]

We used vertical tabs in:

• CVEs: here we can expect users to not necessarily read the page sequentially. These pages can also be potentially very, very long (with tables of hundreds of rows), so there's a strong need for a table of contents that is prominent.
• Alternative downloads, same rationale.
• Vendor/architecture-specific download pages such as RISC-V, AMD, or NVIDIA Jetson. Here we use them for regular tabbed content. In this case, we used vertical tabs because horizontal weren't scalable enough (would wrap or require scroll, neither of which is desirable at all). We decided vertical tabs were easier to scan and better visually than the alternative.
• Documentation practice under canonical.com, although I reckon the navigation in this section could be reworked, and I don't think vertical tabs are needed: content is concise enough. This page could benefit from a standard documentation layout, with page navigation on the left and subtlier table of contents on the right.

[juanruitina]

Related: #4920

[dgtlntv]

Design systems contribution meeting:

• Solved by new in page navigation: https://www.figma.com/design/gvs2FfJuQiSG9PhDTxsadn/Sites-in-page-navigation?m=auto&t=lv9C2PM3wh6IPJ2v-6
• @kim-isaac to add link to a PR as soon as it is up

[eliman11]

In page navigation PR - #5755