JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
    • 0
  • Score
    100M100P100Q48254F
  • License MIT

Volto website navigation dropdown menu

Package Exports

  • @myriadicity/volto-navigation-dropdown
  • @myriadicity/volto-navigation-dropdown/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@myriadicity/volto-navigation-dropdown) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

Available:

I posted some discussion about my reasons for developing this to the Plone community: Work On Plone 6 Navigation Menus - Development / Plone 6 UI (Volto).

Further work needed:

  • Does not respect Volto control panel Navigation depth setting.
    • It doesn't make sense to prevent navigation by menu beyond some arbitrary depth.
  • Screen boundaries are not handled well, so that entries in hierarchies that stretch to the edge of the screen could be unreachable and unselectable. This is a problem in the underlying React libraries but could be handled with edge detection and menu-opening changes. I haven't hit up against the limits in practical applications.
  • The styling is irregular and needs rationalizing.
    • In general the layout provisions are just expedient. They need to be thoroughly thought through and implemented by someone with ui design and styling expertise.
    • There's unintended and ragged indentation of entries for containers.
    • Excessive right justification for folder icons in entries whose titles are wrapped.
  • General parameterization is needed for layout parameters like menu minimum and maximum width.

Version 0.3 introduces a configurable menu layout change, governed by a setting variable:

  • config.settings.dropdownmenu.selfInContents true (the default) causes the first entry in the container's submenu to be for the container itself. Setting it to false inhibits that, so visitors would have to know that they can click on the container entry outside of the submenu to visit its page.

    The redundant inclusion of the container entry is default because some visitors might not realize that they can click on the superior entry. The redundant entry won't prevent anything, and anyone who is surprised by it will be able to easily figure it out and get used to it.

    To inhibit the redundant entry include:

    if (config.settings.dropdownmenu) {
  config.settings.dropdownmenu.selfInContents = false;
}

    in your instance configuration.

Try volto-navigation-dropdown with Docker

  git clone https://github.com/kenmanheimer/volto-navigation-dropdown.git
  cd volto-navigation-dropdown
  make
  make start

Go to http://localhost:3000

Add volto-navigation-dropdown to your Volto project

  1. Make sure you have a Plone backend up-and-running at http://localhost:8080/Plone

    docker compose up backend

  2. Start Volto frontend

  • If you already have a volto project, just update package.json:

    "addons": [
    "@kenmanheimer/volto-navigation-dropdown"
],

"dependencies": {
    "@kenmanheimer/volto-navigation-dropdown": "*"
}

  • If not, create one:

    npm install -g yo @plone/generator-volto
yo @plone/volto my-volto-project --canary --addon @kenmanheimer/volto-navigation-dropdown
cd my-volto-project

  1. Install new add-ons and restart Volto:

    yarn
yarn start

  2. Go to http://localhost:3000

  3. Happy editing!

How to contribute

See DEVELOP.md.

See LICENSE for details.