volto-dropdownmenu

Volto addon for a customizable dropdown menu.
Intended to be used with collective.volto.dropdownmenu

To be used with mrs-developer, see Volto docs for further usage informations.

Created with voltocli.

Installation

Afer installation, please add following lines into package.json to enable it.

``json

"addons": [ "volto-dropdownmenu" ],

`Usage`

> If you are using Volto < 16, then use v2.4.3 > > If you are using Volto < 12, then use v1.3.0

Simply load the addon in your project, then edit the configuration in /controlpanel/dropdown-menu-settings. Example configuration to be saved in Plone here.

To use the default template for the dropdown menu, add src/addons/volto-dropdownmenu/src/customizations in your package.json in customizationPaths.

`json "customizationPaths": [ "src/customizations", "src/addons/volto-dropdownmenu/src/customizations" ]`

To customize the MenuConfigurationForm component, you can now create your own component in your site and replace it using the Volto component registry in your site config file:

`javascript import MyMenuConfigurationForm from './src/MyMenuConfigurationForm';

config.registerComponent({ name: 'MenuConfigurationForm', component: MyMenuConfigurationForm, });`

`$3`

By default, navigations roots are clickable, but there's the possibility to make them not clickable. Enabling the field 'clickableNavigationRoots' in volto-dropdownmenu config, a field appears in configuration form and let editor to decide if make navigation roots clickable or not.

`json config.settings["volto-dropdownmenu"] = { "options": { "clickableNavigationRoots": true, //if true, a checkbox option in dropdown menu appears }, };``

Screenshots and demo

$3

!Addon controlpanel

$3

!Dropdown menu

$3

You can watch a demonstration video on YouTube

Usage

> If you are using Volto < 16, then use v2.4.3
>
> If you are using Volto < 12, then use v1.3.0

Simply load the addon in your project, then edit the configuration in /controlpanel/dropdown-menu-settings

.
Example configuration to be saved in Plone here.

To use the default template for the dropdown menu, add src/addons/volto-dropdownmenu/src/customizations in your package.json in customizationPaths.

json
  "customizationPaths": [
    "src/customizations",
    "src/addons/volto-dropdownmenu/src/customizations"
  ]

To customize the MenuConfigurationForm

 component, you can now create your own component in your site and replace it using the Volto component registry in your site config file:

javascript
import MyMenuConfigurationForm from './src/MyMenuConfigurationForm';

config.registerComponent({
  name: 'MenuConfigurationForm',
  component: MyMenuConfigurationForm,
});

$3

By default, navigations roots are clickable, but there's the possibility to make them not clickable.
Enabling the field 'clickableNavigationRoots' in volto-dropdownmenu config, a field appears in configuration form and let editor to decide if make navigation roots clickable or not.

json
  config.settings["volto-dropdownmenu"] = {
    "options": {
      "clickableNavigationRoots": true, //if true, a checkbox option in dropdown menu appears
    },
  };