An Automatically Populated Nested Volto Navigation Menubar

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 functional version. It's a little rough but quite sufficient for my purposes.

About

I came to Plone 6 looking for a good platform for a browsable info-sharing website. Then and while I'm writing this (August 2023) standard Volto does not provide navigation by which you can discover and traverse a website below the top level. No available navbar addons provided automatic nested population of the menu. I required it so I've implemented a fully featured basic dropdown-menu navigation addon.

I would like to get this incorporated as part of Volto and hope to make time when possible to submit a pull request.

The Result: volto-navigation-dropdown

Plone 6 Volto website navigation menubar with dropdown menus for nested folders.
Site navigation with automatically populated nested menus that open on hover. Entries on the currently visited path are highlighted, updating as you select new locations.

See the npm module entry for details, including links to my github repository.

Implementation shortcomings as August 2023, version 0.3.1

  1. The react Semantic UI simple dropdowns don’t account for page margins, so that the exposed menus can overlap with and even be completely over the edge of the page. When the full top-level navbar is displayed, i.e. not collapsed to the hamburger menu, then there is no way to scroll the page to see them.

    It may be that more recent React Semantic UI versions don't have this problem, but even if they do I'm don't know if and when Volto will be able to migrate to them. That would be the best solution. Otherwise, this can probably be resolved using the dropdown menu on* handler attributes, like onClick, to check the menu location and adjust it if out of bounds.
  2. There are some menu layout irregularities:
    • Unintended indentation of entries for nested containers
    • Excessive right justification for folder icons in entries whose titles are wrapped.
  3. Need parameterization of general layout characteristics, in addition to (see npm package README.md)
    like menu text minimum and maximum wrap width and more, so it can be custom tailored by users.

For implementation background context see My Preliminary Implementations of A Nested Volto Navigation Menubar.