Implementar un menu desplegable en Volto Light Theme

macagua · August 5, 2025, 11:01am

Hola a todos

Necesito implementar un menu desplegable con Volto Light Theme bien sea:

Fat Menu, que entiendo que implementa Volto Light Theme.
Dropdowns menu mediante el addon volto-dropdownmenu.

Solo se me activa el menu de navegación cuando andas con dispositivos móviles.

A continuación, describo mis versiones instaladas

Visión Global de Versiones

Volto 18.23.0
Plone 6.1.2
plone.restapi 9.15.1
CMF 3.7
Zope 5.13
Python 3.12.11 (main, Jun 18 2025, 19:09:13) [GCC 12.2.0]
PIL 11.2.1 (Pillow)

Complementos Volto

@plone/volto-slate 18.5.0
@eeacms/volto-accordion-block 10.4.6
volto-subblocks 2.1.0
volto-form-block 3.13.0
volto-multilingual-widget 3.2.1
volto-gdpr-privacy 2.2.15
@mbarde/volto-fullcalendar-block 1.0.1
@kitconcept/volto-banner-block 1.1.0
@kitconcept/volto-bm3-compat 1.0.0-alpha.1
@kitconcept/volto-button-block 4.0.0-alpha.0
@kitconcept/volto-carousel-block 2.0.0-alpha.3
@kitconcept/volto-heading-block 2.4.2
@kitconcept/volto-highlight-block 4.2.0
@kitconcept/volto-introduction-block 1.0.0
@kitconcept/volto-logos-block 3.0.0-alpha.0
@kitconcept/volto-separator-block 4.1.2
@kitconcept/volto-slider-block 1.0.0-alpha.0
@kitconcept/volto-light-theme 7.0.0-alpha.1

Podrían orientarme sobre que configuraciones debo habilitar, ya que no entiendo cómo hacerlo

@erral @sneridagh @frapell o alguien que este por aca que me ayude, le agradezco.

erral · August 5, 2025, 12:30pm

VLT ya tiene menú desplegable por defecto, solo que en modo fatmenu... lo puedes activar/desactuvar con un setting

macagua · August 5, 2025, 9:38pm

Fat Menu

@erral Si tienes razón, desde la version 2.0.0, el volto-light-theme tiene un Fat menu (por debajo de las secciones principales del sitio) provocado al hacer clic en uno de esas secciones. Se configuraba como una feature flags de la siguiente forma:

config.settings.enableFatMenu = true;

Eliminado todas las feature flags

Desde la version 6.0.0-alpha.20 se volvió obsoleto la configuración anterior.

VLT solía tener feature flags en la configuración de Volto para activar o desactivar algunas características del tema:

config.settings.intranetHeader
config.settings.enableFatMenu
config.settings.siteLabel

Se han eliminado como feature flags y se han trasladado a la configuración de personalización del sitio.

Esta activar la característica "Fat Menu" es proveída mediante el comportamiento voltolighttheme.header del complemento para el backend kitconcept.voltolighttheme.

Si requieres que ese comportamiento este activo debe agregar los siguientes códigos fuentes:

Agrega el archivo backend/src/yourpolicy/addonname/profiles/default/types/Plone_Site.xml, con el siguiente código fuente:

<?xml version="1.0" encoding="utf-8"?>
<object xmlns:i18n="http://xml.zope.org/namespaces/i18n"
        meta_type="Dexterity FTI"
        name="Plone Site"
        i18n:domain="plone"
>

  <!-- Basic properties -->
  <property name="title"
            i18n:translate=""
  >Plone Site</property>
  <property name="description"
            i18n:translate=""
  />

  <!-- Enabled behaviors -->
  <property name="behaviors"
            purge="true"
  >
    <element value="voltolighttheme.header" />
    <element value="plone.basic" />
    <element value="plone.categorization" />
    <element value="plone.dublincore" />
    <element value="plone.locking" />
    <element value="plone.relateditems" />
    <element value="plone.publication" />
    <element value="plone.ownership" />
    <element value="volto.blocks" />
  </property>
</object>

Modifica el archivo backend/pyproject.toml y agrega el siguiente cambio indicado con el signo de + en formato diff:

diff --git a/backend/pyproject.toml b/backend/pyproject.toml
index 135b4a2..ada406e 100644
--- a/backend/pyproject.toml
+++ b/backend/pyproject.toml
@@ -29,6 +29,7 @@ dependencies = [
    "plone.volto",
    "collective.volto.formsupport",
    "collective.honeypot",
+    "kitconcept.voltolighttheme",
]

[project.optional-dependencies]

Modifica el archivo backend/src/yourpolicy/addonname/dependencies.zcml y agrega el siguiente cambio indicado con el signo de + en formato diff:

diff --git a/backend/src/yourpolicy/addonname/dependencies.zcml b/backend/src/yourpolicy/addonname/dependencies.zcml
index e39d120..cb34af1 100644
--- a/backend/src/yourpolicy/addonname/dependencies.zcml
+++ b/backend/src/yourpolicy/addonname/dependencies.zcml
@@ -10,4 +10,5 @@
  <include package="collective.volto.gdprcookie" />
  <include package="collective.geolocationbehavior" />
  <include package="plone.formwidget.geolocation" />
+  <include package="kitconcept.voltolighttheme" />
</configure>

Modifica el archivo backend/src/yourpolicy/addonname/profiles/default/metadata.xml y agrega el siguiente cambio indicado con el signo de + en formato diff:

diff --git a/backend/src/yourpolicy/addonname/profiles/default/metadata.xml b/backend/src/yourpolicy/addonname/profiles/default/metadata.xml
index f712a58..4810037 100644
--- a/backend/src/yourpolicy/addonname/profiles/default/metadata.xml
+++ b/backend/src/yourpolicy/addonname/profiles/default/metadata.xml
@@ -11,5 +11,6 @@
    <dependency>profile-collective.volto.gdprcookie:default</dependency>
    <dependency>profile-collective.geolocationbehavior:default</dependency>
    <dependency>profile-plone.formwidget.geolocation:default</dependency>
+    <dependency>profile-kitconcept.voltolighttheme:default</dependency>
  </dependencies>
</metadata>

En el archivo frontend/packages/your-policy-addon-name/src/index.js, agregue el siguiente código fuente:

import type { ConfigType } from '@plone/registry';

export default function install(config: ConfigType) {

  ...

  // Expanders
  config.settings.apiExpanders = [
    ...config.settings.apiExpanders,
    {
      match: '',
      GET_CONTENT: ['inherit'],
      querystring: {
        'expand.inherit.behaviors':
          'voltolighttheme.header',
      },
    },
  ];

  ...

  return config;
}

Asi logre habilitar el Fat Menu efectivamente.

Muchas gracias por tu comentario, fue muy orientativo.