Volto 6: Simple Dropdown navigation

arky · January 10, 2022, 8:45am

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

Volto 14 Navigation

nileshgulia1 · January 10, 2022, 2:02pm

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

arky · January 10, 2022, 3:06pm

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

arky · January 10, 2022, 3:18pm

@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":[]}]}

tiberiuichim · January 10, 2022, 3:56pm

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

arky · January 11, 2022, 6:59am

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:

github.com/plone/volto

Dropdown Navigation

opened 06:57AM - 11 Jan 22 UTC

arky

04 type: enhancement

**Is your feature request related to a problem? Please describe.** The volto de…fault navigation only shows the top level navigation items. If secondary navigation elements are available (Example: News items are good example https://localhost:3000/news/breaking-news) they are not shown as dropdown menu item or subitem in mobile navigation. **Describe the solution you'd like** ![image](https://user-images.githubusercontent.com/808895/148895318-a21369d1-3ecf-4c73-b70a-f8df40673d86.png) Implementation of such drop down is available here and in volto-dropdownmenu addon. https://water.europa.eu/freshwater https://github.com/eea/volto-freshwater/blob/master/src/customizations/components/theme/Navigation/Navigation.jsx **Describe alternatives you've considered** You can override navigation as shown in the example solution or use available addons. But this feature is really basic (classic plone feature) that it needs to be shipped with volto. **Additional context** Full discussion of this feature in seen this community post. https://community.plone.org/t/volto-6-simple-dropdown-navigation/14685/4

erral · January 11, 2022, 9:06am

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

Here is the relevant code:

tiberiuichim · January 11, 2022, 9:34am

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

erral · January 11, 2022, 9:48am

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

mekell · December 22, 2022, 11:50am

What are the steps to have a navigation dropdownmenu running?

AFAICS https://plone.org/ shows navigation dropdownmenu:

tiberiuichim · December 22, 2022, 1:17pm

github.com

plone/plone.org/blob/main/frontend/src/customizations/volto/components/theme/Navigation/Navigation.jsx

/**
 * Navigation components.
 * @module components/theme/Navigation/Navigation
 * Customization:
 * - this is based on the customization in volto-dropdownmenu 2.4.3
 * - added class "computer" to hamburger-wrapper at line 141
 */

import React, { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { NavLink } from 'react-router-dom';
import { defineMessages, useIntl } from 'react-intl';
import { Menu, Button, Icon } from 'semantic-ui-react';
import cx from 'classnames';
import OutsideClickHandler from 'react-outside-click-handler';
import config from '@plone/volto/registry';

import { flattenToAppURL } from '@plone/volto/helpers';

import DropdownMenu from 'volto-dropdownmenu/components/DropdownMenu';

This file has been truncated. show original

arky · December 22, 2022, 1:32pm

You can find instructions in the addon repo.