Side bar items with sub pages are not clickable

[nobuto-m]

Describe the bug

Side bar items with sub pages are not clickable as a hyperlink, but the only arrow part is clickable. I'm seeing this as issues in multiple sites with the vanilla framework so I'm filing this to the framework although I'm not sure if this behavior comes from the framework itself or from the consumer side of the framework.

e.g.

• https://github.com/canonical/ubuntu.com/issues/13257
• https://github.com/canonical/charmhub.io/issues/1775

To Reproduce

Steps to reproduce the behavior:

1. Visit https://ubuntu.com/ceph/docs
2. Try to click "Install" in the side bar
3. Nothing happens

Expected behavior

The Install text should be clickable and expand the sub menu of it

Screenshots

[The Install text is not clickable but only the arrow button is]

Desktop (please complete the following information):

• OS: Ubuntu 22.04 LTS (development)
• Browser Firefox
• Version 123.0

[bartaz]

Thanks for the report. This behaviour is currently by design.

One of the requirements for the expandable navigation was to be able to link to a documentation page and being expandable. That's why clicking on navigation item (like "Install") is separate from expanding it.

In this particular implementation it seems that "Install" doesn't have a paged linked to, which is not a recommended use of this component. For situations like this we have the "accordion" version of side navigation, where navigation items are expandable, but don't navigate to pages.

https://vanillaframework.io/docs/examples/patterns/side-navigation/accordion

I see this issue being reported by different people via various channels, so I'll bring it up to Vanilla Working Group to see how we can better address it.

[danielmutis]

WG: The behaviour of the side navigation was intended to be consistent regardless of whether there is a page or not on the nav item. The design decision from the documentation team was that it is essential that every item of the navigation is also a page. By having the chevron behave sometimes in one way and sometimes in another is not recommended.

@evildmp just so you are aware.

[nobuto-m]

What does that mean practically? Is there any action to be taken by the framework or is the issue in the consumer side of the framework effectively?

[bartaz]

To my understanding this is a content issue. For this component to be used as intended all items in the navigation should be linked to a page.

[danielmutis]

WG: This depends on the documentation team's decisions on how the side nav behaves. We will close this issue, unless there is an agreement on changing the approach with docs.