Volto 6: Simple Dropdown navigation

Does volto support simple drop down navigation in volto without using any addons?

Created a nested folders 'First Level' and 'Second Level'. Also changed the default navDepth in settings. Still volto only renders top level navigation items only.

         ...config.settings,
         navDepth: 3,
   
        }

Plone 6 Navigation
image

Volto 14 Navigation
image

@arky What navDepth do you have in controlpanel/navigation ?

I have changed the 'Navigation Depth' setting navigation control panel from default to 5. But it doesn't seems to have any effect.


  express:router dispatching GET /++api++/@navigation?expand.navigation.depth=3 +899ms
  express:router query  : /++api++/@navigation?expand.navigation.depth=3 +0ms
  express:router expressInit  : /++api++/@navigation?expand.navigation.depth=3 +0ms
  express:router serveStatic  : /++api++/@navigation?expand.navigation.depth=3 +1ms
  send stat "/home/arky/Code/Plone/Plone-6/frontend/public/++api++/@navigation" +0ms
  express:router router  : /++api++/@navigation?expand.navigation.depth=3 +1ms
  express:router dispatching GET /++api++/@navigation?expand.navigation.depth=3 +0ms
  express:router dispatching GET /++api++/@breadcrumbs +0ms
  express:router query  : /++api++/@breadcrumbs +0ms
  express:router expressInit  : /++api++/@breadcrumbs +0ms
  express:router serveStatic  : /++api++/@breadcrumbs +0ms
  send stat "/home/arky/Code/Plone/Plone-6/frontend/public/++api++/@breadcrumbs" +1ms
  express:router dispatching GET /++api++/@actions +0ms
  express:router query  : /++api++/@actions +0ms
  express:router expressInit  : /++api++/@actions +0ms
  express:router serveStatic  : /++api++/@actions +0ms
  send stat "/home/arky/Code/Plone/Plone-6/frontend/public/++api++/@actions" +0ms
  express:router router  : /++api++/@breadcrumbs +1ms
  express:router dispatching GET /++api++/@breadcrumbs +0ms
  express:router dispatching GET /++api++/ +0ms
  express:router query  : /++api++/ +0ms
  express:router expressInit  : /++api++/ +0ms
  express:router serveStatic  : /++api++/ +0ms
  send stat "/home/arky/Code/Plone/Plone-6/frontend/public/++api++/index.html" +0ms
  express:router router  : /++api++/@actions +1ms
  express:router dispatching GET /++api++/@actions +0ms
  express:router router  : /++api++/ +1ms
  express:router dispatching GET /++api++/ +0ms
  express:router dispatching GET /++api++/@actions +11ms
  express:router query  : /++api++/@actions +0ms
  express:router expressInit  : /++api++/@actions +0ms
  express:router serveStatic  : /++api++/@actions +0ms
  send stat "/home/arky/Code/Plone/Plone-6/frontend/public/++api++/@actions" +0ms
  express:router router  : /++api++/@actions +1ms
  express:router dispatching GET /++api++/@actions +0ms
  express:router dispatching GET /++api++/@types +1ms
  express:router query  : /++api++/@types +0ms
  express:router expressInit  : /++api++/@types +0ms
  express:router serveStatic  : /++api++/@types +0ms
  send stat "/home/arky/Code/Plone/Plone-6/frontend/public/++api++/@types" +0ms
  express:router router  : /++api++/@types +1ms
  express:router dispatching GET /++api++/@types +0ms

@nileshgulia1 Looking at react devtools, I see that navItems props are correctly populated:

...
{"title":"First Level","url":"/first-level","items":[{"title":"Second Level","url":"/first-level/second-level","items":[]}]}

As far as I know, there's no dropdown menus with Volto's default nav menu implementation.

I can point you to this customization, which implements it for WISE Freshwater, see volto-freshwater/Navigation.jsx at master · eea/volto-freshwater · GitHub

Thank you @tiberiuichim for pointers.

I believe this features is basic functionality that should be shipped with volto. Such functionality is present in Classic Plone.

Filled a bug request to in volto issue tracker:

We have some code that overrides Volto's main navigation to allow dropdown navigation with the default Plone settings.

Here is the relevant code:

Is the CSS generic? Could you add it to the ticket that @arky opened, together with your solution?

of course, the CSS has just a couple of lines, I will add them to the ticket.

1 Like

Plone Foundation Code of Conduct