Many websites need an automatically populated nested navigation menu, and the new Plone 6 frontend, Volto, did not provide one. I've implemented a fully featured version but am blocked by some flaws and seeking help to resolve them.
About
I came to Plone 6 looking for a good platform for a browsable info-sharing website. Currently Volto does not provide navigation by which you can discover and traverse a website below the top level, and there are no working addons to provide the functionality. For me, this is a showstopper. Starting with one of the malfunctioning addons, codesyntax/volto-menu-customization, I've implemented fully featured basic dropdown-menu navigation. However, I need help resolving a bug.
To convey the issue I've implemented two versions of an addon that implements the functionality, one demonstrating the problem and the other demonstrating an awkward workaround. I have a prototype website that includes the awkward workaround, where you can try out the navigation. The site also includes a copy of this exposition.
The version on the site that I am using, which I call "oblique", is not the one I advocate. Using it is too awkward and confusing. However, it is less intrusive on other use of the site, for reasons that will become clear below.
The Versions: Stubborn and Oblique
The quickest way to introduce the specifics is with the NPM addon packages for both variants. The versions of the addon each include a README.md that describes the general situation and their respective specific workaround:
- @myriadicity/volto-navigation-dropdown-stubborn - npm (npmjs.com)
- @myriadicity/volto-navigation-dropdown-oblique - npm (npmjs.com)
The sidebar for both of those package pages have a link to a github repository with the code for both, each in a separate branch.
The Problem With My Implementation
- Volto uses the React Semantic UI, which includes a decent Dropdown menus facility. Using that it's fairly easy to attach recursively populated dropdown menus to our default Volto navbar header entries.
- What's complicated is associating the right link behavior with the dropdown menu container entries.
- Inferring from the Volto NavItem objects (volto/NavItem.jsx at master · plone/volto), it looks like the link needs to be implemented as a React NavLink object (NavLink v6.6.2 | React Router).
- Fortunately, Dropdowns implement an as= option that we can use to add NavLink functionality to the Dropdown container entry:
1 <Dropdown simple
2 text={item.title}
3 [...]
4 as={NavLink}
5 key={item.url} >
- Doing this makes the menu items for the container entries traverse to the right place on selection, enabling customary navigation menus that people commonly use.
-
Unfortunately, the combination of
NavLinkandDropdowncauses the menus for selected pages to stay open, even on page refresh. You can't close the menus (and it's not a good option to require manually closing them, even if we found a way to do so).- I believe that the problem is because the NavLink objects signal being on the path of the currently visited page using the CSS class named "active", while Dropdown menus use that same class name to recognize and maintain active - open –state.
- So when the NavLink functionality recognizes active state, because it's by definition on the path to the item that's being selected, it adopts the CSS active class and that causes the Dropdown to remain open.
- This is an unfortunate collision in the use of a CSS class. I'm not sure that's causing the problem, but it makes sense to me that it would.
The Two Versions
The Stubborn Alternative
Whether or not the above analysis of the exact cause is correct, I have not found a way to prevent the menus from staying open when the NavLink functionality is added. You can see this behavior by including the @myriadicity/volto-navigation-dropdown-stubborn - npm (npmjs.com) addon in it Volto frontend.
Aside from the stubborn-open-menu behavior, I believe this functionality needs to be implemented as the navbar default behavior shipped with Volto. There are other rough edges – there is enough of a gap between where you hover to open the menu and the menu that it sometimes closes when moving the cursor to it. CSS tweaking would be needed to settle those kinds of things, but I expect that people with good CSS skills can take care of that. The more important piece is resolving the stubbornness.
The Oblique Alternative
One way to avoid the stubborn problem is to omit the NavLink functionality. That means people can't click on the primary entry for the container to visit it. Instead, we add a secondary entry for the container as the top, header-like item on its contents menu. Users can then select that secondary entry to visit the container. This is implemented in the @myriadicity/volto-navigation-dropdown-oblique - npm (npmjs.com) package, and what is currently running on my prototype instance.
It's not a good solution. Visitors will first be puzzled when they try to click on the primary entry for a container, as you would do on any regular navigation menu. If they notice the secondary entry they can click on that. Some won't notice the secondary entry and give up.
Trying Them and Wrap-up
I've been using both versions on my prototype site and can tolerate both. The stubborn version would quickly become untenable, though, as menus become longer and get in the way of site content and other stuff. So the oblique version is the one I'm regularly using. It's awkward but workable. I continue to frequently stumble, trying to select the primary container entries to visit the containers. Add to that the confusion it will cause on first encounter, and thwarting that it will cause some users, and it's clearly not a viable workaround for general use.
You can try the oblique versions on my prototype website by visiting do.myriadicity.net. To try the stubborn one you'll have to build a Plone 6 instance with the @myriadicity/volto-navigation-dropdown-stubborn - npm (npmjs.com) addon.
I believe that something like the stubborn option, without the non-closing bug, is necessary for Plone 6 uptake, and would welcome suggestions for resolving the problem. Feel free to fork my repository: kenmanheimer/volto-navigation-dropdown: Plone website navigation dropdown menus (github.com).