# Patrones - Megamenú en portales. DESY. Sistema de diseño del Gobierno de Aragón. ## Patrones Índice de páginas Patrones # Megamenú en portales Ayudar a navegar y encontrar Bloque desplegable que permite mostrar un listado o contenido personalizado. [](https://www.aragon.es/) ## [TÍtulo del portal](/ "Ir a la página de inicio") Menú Menú Mostrar código del ejemplo: includes/\_pattern.megamenu.njk ## Contenido Nunjucks macro del ejemplo: includes/\_pattern.megamenu.njk HTML del ejemplo: includes/\_pattern.megamenu.njk ### Nunjucks macro del ejemplo: includes/\_pattern.megamenu.njk ```js {% from "components/toggle/_macro.toggle.njk" import componentToggle %} {% from "components/button/_macro.button.njk" import componentButton %} {% from "components/header-advanced/_macro.header-advanced.njk" import componentHeaderAdvanced %} {% from "components/nav/_macro.nav.njk" import componentNav %} {% from "components/menu-vertical/_macro.menu-vertical.njk" import componentMenuVertical %} {% set megamenu %} {% endset %} {% set customNavigation %}
{{ componentToggle({ "id": "megamenu-mini-button", "classes": "c-menu-navigation__button c-menu-navigation__button--header -mx-sm collapsed ", "offState": { "classes": "", "html": 'Menú' }, "onState": { "classes": "", "html": 'Menú' }, "attributes": { "aria-controls": "megamenu-mini", "aria-expanded": "false", "role": "button", "onClick": "getElementById('megamenu-mini').classList.toggle('hidden');getElementById('close-button').focus();" } }) }}
{% endset %} {{ componentHeaderAdvanced({ "title": { "homepageUrl": "/", "text": "TÍtulo del portal" }, "customNavigationHtml": customNavigation | safe, "sub": { "customNavigationHtml": megamenu | safe, "classes": "h-full bg-neutral-lighter border-b border-neutral-base -mt-px" } }) }} ``` ### HTML del ejemplo: includes/\_pattern.megamenu.njk ```html
``` ## Cuándo lo utilizamos [#](#cundo-lo-utilizamos) - En el menú de navegación de la [cabecera avanzada](componente-cabeceras-codigo.html), cuando la arquitectura de contenido del sitio es muy compleja. ## Qué componentes utilizamos [#](#qu-componentes-utilizamos) - [Interruptor](componente-toggle.html) - [Cabecera avanzada](componente-cabeceras-codigo.html) ## Qué debes tener en cuenta [#](#qu-debes-tener-en-cuenta) - Utiliza el parámetro `customNavigationHtml` de la cabecera avanzada para colocar un interruptor que muestre y oculte el megamenú. - Utiliza el parámetro `sub.customNavigationHtml` de la cabecera avanzada para colocar el listado de enlaces del megamenú. - El desplegable empuja al contenido, no lo superpone. - En anchuras pequeñas las columnas se apilan. Intenta no usar más de 4. ## Accesibilidad [#](#accesibilidad) - Al accionar el botón, el foco salta al botón X. - El megamenú se puede ocultar pulsando el botón X o volviendo a pulsar el botón Menú. En cualquier caso, el foco debe volver al botón Menú. - El botón Menú y el botón X necesitan los atributos `aria-expanded` y `aria-controls`.