# 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 %}
  <div id="megamenu-mini" class="hidden -mx-base">
    <div class="py-base text-xs px-base lg:text-sm text-neutral-dark border-t border-neutral-base">
      <div class="container mx-auto">
        <div class="absolute top-0 right-0 p-sm">
          <button id="close-button" data-toggle="collapse" data-target="#megamenu-mini" aria-expanded="false" aria-controls="megamenu-mini" onClick="getElementById('megamenu-mini-button').click(); getElementById('megamenu-mini-button').focus();" class="p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-hidden" aria-label="Cerrar menú" type="button">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"></path></svg>
          </button>
        </div>
        <nav class="flex flex-col lg:flex-row flex-wrap gap-base " aria-label="Menú principal">
          <div class=" flex-1 mb-sm">
            <h3 class="c-h4 mb-base text-black">Temas</h3>
              <ul class="relative space-y-base lg:columns-1 gap-base">
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#1">
                    Administración pública y transparencia
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#2">
                    Agricultura, ganadería y medio rural
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#3">
                    Ciencia y tecnología
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#4">
                    Comercio y consumo
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#5">
                    Cultura, turismo, deportes y ocio
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#6">
                    Educación y formación
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Empleo, empresa y otras entidades
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Impuestos y tasas
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Industria, energía y minería
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Medio ambiente
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Salud
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Seguridad y justicia
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Servicios sociales
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Transporte, territorio e infraestructuras
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Vivienda y urbanismo
                  </a>
                </li>
              </ul>
          </div>
          <div class=" flex-1 mb-sm">
            <h3 class="c-h4 mb-base text-black">Momentos vitales</h3>
              <ul class="relative space-y-base lg:columns-1 gap-base">
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Independizarse o mudarse por primera vez
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Buscar o mejorar el empleo
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Ser mayor de edad
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Emprender un negocio y trabajo autónomo
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Formalizar una relación
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Tener un bebé
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Acompañar en la primera infancia
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Jubilarse
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Cuidar de una persona en situación de dependencia y/o discapacidad
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Final de la vida
                  </a>
                </li>
              </ul>
          </div>
          <div class=" flex-1 mb-sm">
            <h3 class="c-h4 mb-base text-black">Sede electrónica - Trámites</h3>
              <ul class="relative space-y-base lg:columns-1 gap-base">
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#1">
                    Inicio Sede electrónica - Trámites
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#2">
                    Trámites por tema
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#3">
                    Trámites por tipo
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#4">
                    Servicios de la Sede electrónica
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#5">
                    Información y ayuda
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#6">
                    Accede a MiA, tu espacio digital<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#7">
                    Sistema Interno de Información
                  </a>
                </li>
              </ul>
          </div>
          <div class=" flex-1 mb-sm">
            <h3 class="c-h4 mb-base text-black">Institución</h3>
              <ul class="relative space-y-base lg:columns-1 gap-base">
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#1">
                    Gobierno de Aragón
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#2">
                    Estatuto de Aragón
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#3">
                    Organismos
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#4">
                    Municipios
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#5">
                    Identidad comunicación corporativa
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#6">
                    Presupuestos
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Cooperación transfronteriza. Acción exterior
                  </a>
                </li>
              </ul>
          </div>
        </nav>
      </div>
    </div>
  </div>

{% endset %}

{% set customNavigation %}
  <div class="flex flex-1 justify-start items-stretch">
    <div class="flex justify-center items-center">

      {{ componentToggle({
        "id": "megamenu-mini-button",
        "classes": "c-menu-navigation__button c-menu-navigation__button--header -mx-sm collapsed ",
        "offState": {
          "classes": "",
          "html": '<span class="inline-flex">Menú<svg class="inline-block -mr-2  align-middle -my-px pointer-events-none" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"></path></g></svg></span>'
        },
        "onState": {
          "classes": "",
          "html": '<span class="inline-flex">Menú<svg class="inline-block -mr-2  align-middle -my-px pointer-events-none rotate-180" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"></path></g></svg></span>'
        },
        "attributes": {
          "aria-controls": "megamenu-mini",
          "aria-expanded": "false",
          "role": "button",
          "onClick": "getElementById('megamenu-mini').classList.toggle('hidden');getElementById('close-button').focus();"
        }
      }) }}
    </div>
  </div>
{% 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
<!-- header-advanced -->
<header>
  <div>
    <nav aria-labelledby="skip-link">
      <!-- skip-link -->
      <a href="#content" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-hidden focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline" id="skip-link">Saltar al contenido principal</a>
      <!-- /skip-link -->
    </nav>
    <!-- header-mini -->
    <div>
      <div>
        <div class="bg-white border-b border-neutral-base">
          <div class="flex items-center px-base container mx-auto">
            <a href="https://www.aragon.es/" class="inline-block pt-2.5 pb-2 text-black focus:outline-hidden focus:shadow-outline-black">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="117" height="26" class="inline-block fill-current" role="img" aria-label="Gobierno de Aragón. Ir a aragon.es">
                <defs>
                  <clipPath id="b-logo-expanded">
                    <path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z" />
                  </clipPath>
                  <clipPath id="a-logo-expanded">
                    <path d="M0 0h144v32H0z" />
                  </clipPath>
                </defs>
                <g clip-path="url(#a-logo-expanded)">
                  <path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z" />
                  <g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)">
                    <g fill="#dd171b" fill-rule="evenodd">
                      <path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z" />
                    </g>
                  </g>
                  <path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd" />
                </g>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!-- /header-mini -->
    <div class="bg-heading-base bg-no-repeat bg-cover lg:bg-auto bg-center lg:bg-right bg-general lg:bg-general-lg  text-white">
      <div class="container mx-auto px-base">
        <div class="lg:flex lg:flex-wrap py-base lg:py-lg">
          <div class="flex lg:flex-1">
            <div>
              <h2 class=" text-2xl lg:text-3xl font-bold"><a href="/" class="hover:underline focus:outline-hidden focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base focus:text-black" title="Ir a la página de inicio">TÍtulo del portal</a></h2>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-neutral-lighter border-b border-neutral-base">
      <div class="container mx-auto px-base">
        <div class="flex items-center justify-between min-h-14">
          <div class="flex flex-wrap items-center">
          </div>
          <div class="flex flex-1 justify-start items-stretch">
            <div class="flex justify-center items-center">
              <!-- toggle -->
              <div data-module="c-toggle" class="relative c-toggle">
                <!-- Button -->
                <button
                  aria-expanded="false"
                  type="button"
                  class="c-toggle__button c-menu-navigation__button c-menu-navigation__button--header -mx-sm collapsed "
                  id="megamenu-mini-button" aria-controls="megamenu-mini" aria-expanded="false" role="button" onClick="getElementById(&#39;megamenu-mini&#39;).classList.toggle(&#39;hidden&#39;);getElementById(&#39;close-button&#39;).focus();">
                  <span class="c-button--is-not-pressed pointer-events-none"><span class="inline-flex">Menú<svg class="inline-block -mr-2  align-middle -my-px pointer-events-none" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
                        <g>
                          <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"></path>
                        </g>
                      </svg></span></span>
                  <span class="c-button--is-pressed hidden pointer-events-none"><span class="inline-flex">Menú<svg class="inline-block -mr-2  align-middle -my-px pointer-events-none rotate-180" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
                        <g>
                          <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"></path>
                        </g>
                      </svg></span></span>
                </button>
              </div>
              <!-- /toggle -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="h-full bg-neutral-lighter border-b border-neutral-base -mt-px">
      <div class="container h-full mx-auto px-base">
        <div class="relative h-full bg-cover bg-center bg-no-repeat">
          <div id="megamenu-mini" class="hidden -mx-base">
            <div class="py-base text-xs px-base lg:text-sm text-neutral-dark border-t border-neutral-base">
              <div class="container mx-auto">
                <div class="absolute top-0 right-0 p-sm">
                  <button id="close-button" data-toggle="collapse" data-target="#megamenu-mini" aria-expanded="false" aria-controls="megamenu-mini" onClick="getElementById('megamenu-mini-button').click(); getElementById('megamenu-mini-button').focus();" class="p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-hidden" aria-label="Cerrar menú" type="button">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" role="presentation">
                      <path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"></path>
                    </svg>
                  </button>
                </div>
                <nav class="flex flex-col lg:flex-row flex-wrap gap-base " aria-label="Menú principal">
                  <div class=" flex-1 mb-sm">
                    <h3 class="c-h4 mb-base text-black">Temas</h3>
                    <ul class="relative space-y-base lg:columns-1 gap-base">
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#1">
                          Administración pública y transparencia
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#2">
                          Agricultura, ganadería y medio rural
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#3">
                          Ciencia y tecnología
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#4">
                          Comercio y consumo
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#5">
                          Cultura, turismo, deportes y ocio
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#6">
                          Educación y formación
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#">
                          Empleo, empresa y otras entidades
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#">
                          Impuestos y tasas
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#">
                          Industria, energía y minería
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#">
                          Medio ambiente
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#">
                          Salud
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#">
                          Seguridad y justicia
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#">
                          Servicios sociales
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#">
                          Transporte, territorio e infraestructuras
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#">
                          Vivienda y urbanismo
                        </a>
                      </li>
                    </ul>
                  </div>
                  <div class=" flex-1 mb-sm">
                    <h3 class="c-h4 mb-base text-black">Momentos vitales</h3>
                    <ul class="relative space-y-base lg:columns-1 gap-base">
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#">
                          Independizarse o mudarse por primera vez
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#">
                          Buscar o mejorar el empleo
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#">
                          Ser mayor de edad
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#">
                          Emprender un negocio y trabajo autónomo
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#">
                          Formalizar una relación
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#">
                          Tener un bebé
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#">
                          Acompañar en la primera infancia
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#">
                          Jubilarse
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#">
                          Cuidar de una persona en situación de dependencia y/o discapacidad
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#">
                          Final de la vida
                        </a>
                      </li>
                    </ul>
                  </div>
                  <div class=" flex-1 mb-sm">
                    <h3 class="c-h4 mb-base text-black">Sede electrónica - Trámites</h3>
                    <ul class="relative space-y-base lg:columns-1 gap-base">
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#1">
                          Inicio Sede electrónica - Trámites
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#2">
                          Trámites por tema
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#3">
                          Trámites por tipo
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#4">
                          Servicios de la Sede electrónica
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#5">
                          Información y ayuda
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#6">
                          Accede a MiA, tu espacio digital<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img">
                            <g>
                              <path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path>
                            </g>
                          </svg>
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#7">
                          Sistema Interno de Información
                        </a>
                      </li>
                    </ul>
                  </div>
                  <div class=" flex-1 mb-sm">
                    <h3 class="c-h4 mb-base text-black">Institución</h3>
                    <ul class="relative space-y-base lg:columns-1 gap-base">
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#1">
                          Gobierno de Aragón
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#2">
                          Estatuto de Aragón
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#3">
                          Organismos
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#4">
                          Municipios
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#5">
                          Identidad comunicación corporativa
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#6">
                          Presupuestos
                        </a>
                      </li>
                      <li class="mb-xs">
                        <a class="c-link font-semibold" href="#">
                          Cooperación transfronteriza. Acción exterior
                        </a>
                      </li>
                    </ul>
                  </div>
                </nav>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<!-- /header-advanced -->
```

## 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`.