Volto Light Theme: Fat Menu - How to make some navigation items go to the item on first click

For the Volto Light Theme, when the fat menu is enabled, standalone pages should be one click to open. Is there a manual setting to override the default behaviour of always opening a fat menu, even if there is only one item?

Here's a demo of what I'm experiencing:

Hoping there's a way to do this out of the box. If not, I'll have to do some customisations.

I get your point. The current implementation of the fat menu in VLT is optimized for very large websites/organizations where the first three levels of a website are always filled with lots of content. We rather have the problem that the fat menu becomes "too fat". It works well for this particular use case (as fat menus in general).

I agree that it currently does not suit the small website use case very well. I could imagine that we add a configuration option for this.

However, what kind of behavior would you expect to happen if you have a site with a top-navigation entry that lacks subitems?

1 Like

I would expect the default behaviour for a top-level link (that has no children) to be as follows -- clicking it would result in going directly to that link (no dropdown).

I'm also okay with an option to mark a top-level link to "act as a direct link".

I have doubts regarding usability if clicking on one navigation item would open the fat menu and another one goes directly to the link. This violates the basic UX principle that "things that look similar, should act similar". The user has not way to see what would happen when she clicks on a navigation item.

I understand the value of consistency and predictability:

Here are two approaches:

  1. Tiny arrow on Fat menus


    Fat menus have a little arrow next to them, items without an arrow are direct links.

  2. Fat menu on hover only
    An example of this approach is apple.com. They have a fat menu on hover but clicking is always a direct link, typically to an associated landing page.

1 Like

We are currently experimenting with an "open menu on hover" option in a client project. If that works well I could imagine that we add a new option to VLT to open the menu on hover instead of click. Feel free to open a feature-request issue on the VLT issue tracker.

I see how option 1 solves the problem. Though, tbh. I am not a big fan of this approach. The differentiation is too subtle IMO.

For now I've decided to implement the "tiny arrow on fat menus" option for my project by shadowing the VLT Navigation and adding the needed behaviour.
My navbar now looks like this and it's doing what I need:

I'm using a dropdown icon on the fat menus as my indicator. Still a work in progress, but I expect we'll settle into a consistent experience over the next couple weeks.

Part of the reason why I've decided to go with the tiny arrow option is what is needed for the alternative. You have to be very careful with the "open on hover" option. The UX has to be right otherwise it becomes uncomfortable to use (menus that flash unto the screen and disappear as you hover and unhover). Ideally a bit of transition/animation, to help the user to understand what is happening, can really help.