JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
    • 0
  • Score
    100M100P100Q48186F
  • 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:

  • Screen boundaries are not handled well, so that entries in hierarchies that stretch to the edge of the screen can be 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.
  • 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.
  • General parameterization of layout parameters like menu minimum and maximum width.

Getting started

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.