Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kenmanheimer/volto-navigation-dropdown
Plone website navigation dropdown menus
https://github.com/kenmanheimer/volto-navigation-dropdown
Last synced: 2 months ago
JSON representation
Plone website navigation dropdown menus
- Host: GitHub
- URL: https://github.com/kenmanheimer/volto-navigation-dropdown
- Owner: kenmanheimer
- License: mit
- Created: 2023-01-13T21:38:28.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-13T23:34:33.000Z (10 months ago)
- Last Synced: 2024-07-19T03:23:02.089Z (3 months ago)
- Language: JavaScript
- Size: 58.6 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-volto - volto-navigation-dropdown - Volto addon for Plone website navigation dropdown menus. (Addons)
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:
* As an npm package: [@myriadicity/volto-navigation-dropdown](https://www.npmjs.com/package/@myriadicity/volto-navigation-dropdown)
* On github: [kenmanheimer/volto-navigation-dropdown](https://github.com/kenmanheimer/volto-navigation-dropdown)
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)](https://community.plone.org/t/work-on-plone-6-navigation-menus/16169).
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](https://plone.org/download) up-and-running at http://localhost:8080/Plone
```Bash
docker compose up backend
```
1. Start Volto frontend
* If you already have a volto project, just update `package.json`:
```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
```
1. Go to http://localhost:3000
1. Happy editing!
## How to contribute
See [DEVELOP.md](https://github.com/kenmanheimer/volto-navigation-dropdown/blob/master/DEVELOP.md).
## Copyright and license
See [LICENSE](https://github.com/kenmanheimer/volto-navigation-dropdown/blob/master/LICENSE) for details.