Menu-navigation

Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- menu-navigation -->
<nav data-module="c-menu-navigation" aria-label="Menu navigation">
  <ul class="flex flex-wrap gap-base c-menu-navigation__list">
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="default-example-item-1-sub-list" id="default-example-item-1" class="c-menu-navigation__button"><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 1</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="default-example-item-1-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" aria-labelledby="default-example-item-1">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-default-example-item-1-1">
              Subitem 1
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-default-example-item-1-2">
              Subitem 2
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-default-example-item-1-3">
              Subitem 3
            </a>
          </li>
        </ul>
      </div>
    </li>
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="default-example-item-2-sub-list" id="default-example-item-2" class="c-menu-navigation__button"><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 2</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="default-example-item-2-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" aria-labelledby="default-example-item-2">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-default-example-item-2-1">
              Subitem 1
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-default-example-item-2-2">
              Subitem 2
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-default-example-item-2-3">
              Subitem 3
            </a>
          </li>
        </ul>
      </div>
    </li>
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="default-example-item-3-sub-list" id="default-example-item-3" class="c-menu-navigation__button"><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 3</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="default-example-item-3-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" aria-labelledby="default-example-item-3">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-default-example-item-3-1">
              Subitem 1
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-default-example-item-3-2">
              Subitem 2
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-default-example-item-3-3">
              Subitem 3
            </a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</nav>
<!-- /menu-navigation -->
          

Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/menu-navigation/_macro.menu-navigation.njk" import componentMenuNavigation %}

{{ componentMenuNavigation({
  "idPrefix": "default-example",
  "items": [
    {
      "text": "Item 1",
      "id": "default-example-item-1",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "default-example-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "default-example-item-2",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "default-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "default-example-item-3",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "default-example-item-3"
        }
      }
    }
  ],
  "attributes": {
    "aria-label": "Menu navigation"
  }
}) }}

Ejemplo: "Con item deshabilitado", de código HTML, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- menu-navigation -->
<nav data-module="c-menu-navigation" aria-label="Menu navigation">
  <ul class="flex flex-wrap gap-base c-menu-navigation__list">
    <li class="relative">
      <a id="with-disabled-item-example-1" href="#" class="c-menu-navigation__button">
        <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 1</span>
      </a>
    </li>
    <li class="relative">
      <a id="with-disabled-item-example-2" href="#" class="c-menu-navigation__button">
        <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 2</span>
      </a>
    </li>
    <li class="relative">
      <a id="with-disabled-item-example-3" href="#" class="c-menu-navigation__button c-menu-navigation__button--disabled" role="link" aria-disabled="true" tabindex="-1">
        <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 3</span>
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-navigation -->
          

Ejemplo: "Con item deshabilitado", de código Nunjucks, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/menu-navigation/_macro.menu-navigation.njk" import componentMenuNavigation %}

{{ componentMenuNavigation({
  "idPrefix": "with-disabled-item-example",
  "items": [
    {
      "href": "#",
      "text": "Item 1"
    },
    {
      "href": "#",
      "text": "Item 2"
    },
    {
      "href": "#",
      "text": "Item 3",
      "disabled": true
    }
  ],
  "attributes": {
    "aria-label": "Menu navigation"
  }
}) }}

Ejemplo: "Con item activo", de código HTML, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- menu-navigation -->
<nav data-module="c-menu-navigation" aria-label="Menu navigation" id="mi-menu">
  <ul class="flex flex-wrap gap-base c-menu-navigation__list">
    <li class="relative">
      <a id="with-active-item-example-1" href="#" class="c-menu-navigation__button">
        <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 1</span>
      </a>
    </li>
    <li class="relative">
      <a id="with-active-item-example-2" href="#" class="c-menu-navigation__button c-menu-navigation__button--primary c-menu-navigation__button--has-selection" aria-current="page">
        <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 2</span>
      </a>
    </li>
    <li class="relative">
      <a id="with-active-item-example-3" href="#" class="c-menu-navigation__button">
        <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 3</span>
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-navigation -->
          

Ejemplo: "Con item activo", de código Nunjucks, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/menu-navigation/_macro.menu-navigation.njk" import componentMenuNavigation %}

{{ componentMenuNavigation({
  "idPrefix": "with-active-item-example",
  "items": [
    {
      "href": "#",
      "text": "Item 1"
    },
    {
      "href": "#",
      "text": "Item 2",
      "active": true
    },
    {
      "href": "#",
      "text": "Item 3"
    }
  ],
  "attributes": {
    "aria-label": "Menu navigation",
    "id": "mi-menu"
  }
}) }}

Ejemplo: "Con sub-item activo", de código HTML, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- menu-navigation -->
<nav data-module="c-menu-navigation" aria-label="Menu navigation" id="mi-sub-menu">
  <ul class="flex flex-wrap gap-base c-menu-navigation__list">
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="active-sub-item-example-1-sub-list" id="active-sub-item-example-1" class="c-menu-navigation__button"><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 1</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="active-sub-item-example-1-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" aria-labelledby="active-sub-item-example-1">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-active-sub-item-example-1-1">
              Subitem 1
            </a>
          </li>
          <li>
            <a aria-current="page" href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-active-sub-item-example-1-2">
              Subitem 2
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-active-sub-item-example-1-3">
              Subitem 3
            </a>
          </li>
        </ul>
      </div>
    </li>
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="active-sub-item-example-2-sub-list" id="active-sub-item-example-2" class="c-menu-navigation__button"><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 2</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="active-sub-item-example-2-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" aria-labelledby="active-sub-item-example-2">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-active-sub-item-example-2-1">
              Subitem 1
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-active-sub-item-example-2-2">
              Subitem 2
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-active-sub-item-example-2-3">
              Subitem 3
            </a>
          </li>
        </ul>
      </div>
    </li>
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="active-sub-item-example-3-sub-list" id="active-sub-item-example-3" class="c-menu-navigation__button"><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 3</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="active-sub-item-example-3-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" aria-labelledby="active-sub-item-example-3">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-active-sub-item-example-3-1">
              Subitem 1
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-active-sub-item-example-3-2">
              Subitem 2
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-active-sub-item-example-3-3">
              Subitem 3
            </a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</nav>
<!-- /menu-navigation -->
          

Ejemplo: "Con sub-item activo", de código Nunjucks, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/menu-navigation/_macro.menu-navigation.njk" import componentMenuNavigation %}

{{ componentMenuNavigation({
  "idPrefix": "with-active-sub-item-example",
  "items": [
    {
      "text": "Item 1",
      "id": "active-sub-item-example-1",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2",
            "active": true
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "active-sub-item-example-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "active-sub-item-example-2",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "active-sub-item-example-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "active-sub-item-example-3",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "active-sub-item-example-3"
        }
      }
    }
  ],
  "attributes": {
    "aria-label": "Menu navigation",
    "id": "mi-sub-menu"
  }
}) }}

Ejemplo: "Con target en enlaces", de código HTML, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- menu-navigation -->
<nav data-module="c-menu-navigation" aria-label="Menu navigation">
  <ul class="flex flex-wrap gap-base c-menu-navigation__list">
    <li class="relative">
      <a id="with-targets-in-links-example-1" href="#" class="c-menu-navigation__button" target="_blank" title="Se abre en ventana nueva">
        <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 1</span>
      </a>
    </li>
    <li class="relative">
      <a id="with-targets-in-links-example-2" href="#" class="c-menu-navigation__button" target="_blank" title="Se abre en ventana nueva">
        <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 2</span>
      </a>
    </li>
    <li class="relative">
      <a id="with-targets-in-links-example-3" href="#" class="c-menu-navigation__button" target="_blank" title="Se abre en ventana nueva">
        <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 3</span>
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-navigation -->
          

Ejemplo: "Con target en enlaces", de código Nunjucks, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/menu-navigation/_macro.menu-navigation.njk" import componentMenuNavigation %}

{{ componentMenuNavigation({
  "idPrefix": "with-targets-in-links-example",
  "items": [
    {
      "href": "#",
      "text": "Item 1",
      "target": "_blank",
      "attributes": {
        "title": "Se abre en ventana nueva"
      }
    },
    {
      "href": "#",
      "text": "Item 2",
      "target": "_blank",
      "attributes": {
        "title": "Se abre en ventana nueva"
      }
    },
    {
      "href": "#",
      "text": "Item 3",
      "target": "_blank",
      "attributes": {
        "title": "Se abre en ventana nueva"
      }
    }
  ],
  "attributes": {
    "aria-label": "Menu navigation"
  }
}) }}

Ejemplo: "Con divisores", de código HTML, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- menu-navigation -->
<nav data-module="c-menu-navigation" aria-label="Menu navigation">
  <ul class="flex flex-wrap gap-base c-menu-navigation__list">
    <li class="relative">
      <a id="with-dividers-example-1" href="#" class="c-menu-navigation__button">
        <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 1</span>
      </a>
    </li>
    <li class="relative">
      <a id="with-dividers-example-2" href="#" class="c-menu-navigation__button">
        <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 2</span>
      </a>
    </li>
    <li role="presentation" aria-hidden="true">
      <div class="absolute h-11 border-l border-neutral-base"></div>
    </li>
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="with-dividers-example-parent-sub-list" id="with-dividers-example-parent" class="c-menu-navigation__button"><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 3</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="with-dividers-example-parent-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" aria-labelledby="with-dividers-example-parent">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-with-dividers-example-parent-1">
              Subitem 1
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-with-dividers-example-parent-2">
              Subitem 2
            </a>
          </li>
          <li class="my-sm border-b border-neutral-base">
            <div class="sr-only">Separador</div>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-with-dividers-example-parent-3">
              Subitem 3
            </a>
          </li>
        </ul>
      </div>
    </li>
    <li class="relative">
      <a id="with-dividers-example-4" href="#" class="c-menu-navigation__button">
        <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 4</span>
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-navigation -->
          

Ejemplo: "Con divisores", de código Nunjucks, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/menu-navigation/_macro.menu-navigation.njk" import componentMenuNavigation %}

{{ componentMenuNavigation({
  "idPrefix": "with-dividers-example",
  "items": [
    {
      "href": "#",
      "text": "Item 1"
    },
    {
      "href": "#",
      "text": "Item 2",
      "divider": {
        "html": "<div class='absolute h-11 border-l border-neutral-base'></div>"
      }
    },
    {
      "text": "Item 3",
      "id": "with-dividers-example-parent",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2",
            "divider": true
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-dividers-example-parent"
        }
      }
    },
    {
      "href": "#",
      "text": "Item 4"
    }
  ],
  "attributes": {
    "aria-label": "Menu navigation"
  }
}) }}

Ejemplo: "Grande", de código HTML, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- menu-navigation -->
<nav data-module="c-menu-navigation" aria-label="Menu navigation">
  <ul class="flex flex-wrap gap-base c-menu-navigation__list">
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="large-example-item-1-sub-list" id="large-example-item-1" class="c-menu-navigation__button c-menu-navigation__button--lg -mr-sm"><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 1</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="large-example-item-1-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" aria-labelledby="large-example-item-1">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-large-example-item-1-1">
              Subitem 1
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-large-example-item-1-2">
              Subitem 2
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-large-example-item-1-3">
              Subitem 3
            </a>
          </li>
        </ul>
      </div>
    </li>
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="large-example-item-2-sub-list" id="large-example-item-2" class="c-menu-navigation__button c-menu-navigation__button--lg -mr-sm"><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 2</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="large-example-item-2-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" aria-labelledby="large-example-item-2">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-large-example-item-2-1">
              Subitem 1
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-large-example-item-2-2">
              Subitem 2
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-large-example-item-2-3">
              Subitem 3
            </a>
          </li>
        </ul>
      </div>
    </li>
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="large-example-item-3-sub-list" id="large-example-item-3" class="c-menu-navigation__button c-menu-navigation__button--lg -mr-sm"><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 3</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="large-example-item-3-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" aria-labelledby="large-example-item-3">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-large-example-item-3-1">
              Subitem 1
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-large-example-item-3-2">
              Subitem 2
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-large-example-item-3-3">
              Subitem 3
            </a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</nav>
<!-- /menu-navigation -->
          

Ejemplo: "Grande", de código Nunjucks, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/menu-navigation/_macro.menu-navigation.njk" import componentMenuNavigation %}

{{ componentMenuNavigation({
  "idPrefix": "large-example",
  "items": [
    {
      "text": "Item 1",
      "id": "large-example-item-1",
      "classes": "c-menu-navigation__button--lg -mr-sm",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "large-example-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "large-example-item-2",
      "classes": "c-menu-navigation__button--lg -mr-sm",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "large-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "large-example-item-3",
      "classes": "c-menu-navigation__button--lg -mr-sm",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "large-example-item-3"
        }
      }
    }
  ],
  "attributes": {
    "aria-label": "Menu navigation"
  }
}) }}

Ejemplo: "Peque", de código HTML, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- menu-navigation -->
<nav data-module="c-menu-navigation" aria-label="Menu navigation">
  <ul class="flex flex-wrap gap-base c-menu-navigation__list">
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="small-example-item-1-sub-list" id="small-example-item-1" class="c-menu-navigation__button c-menu-navigation__button--sm -mr-sm"><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 1</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="small-example-item-1-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" aria-labelledby="small-example-item-1">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-small-example-item-1-1">
              Subitem 1
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-small-example-item-1-2">
              Subitem 2
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-small-example-item-1-3">
              Subitem 3
            </a>
          </li>
        </ul>
      </div>
    </li>
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="small-example-item-2-sub-list" id="small-example-item-2" class="c-menu-navigation__button c-menu-navigation__button--sm -mr-sm"><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 2</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="small-example-item-2-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" aria-labelledby="small-example-item-2">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-small-example-item-2-1">
              Subitem 1
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-small-example-item-2-2">
              Subitem 2
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-small-example-item-2-3">
              Subitem 3
            </a>
          </li>
        </ul>
      </div>
    </li>
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="small-example-item-3-sub-list" id="small-example-item-3" class="c-menu-navigation__button c-menu-navigation__button--sm -mr-sm"><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 3</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="small-example-item-3-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" aria-labelledby="small-example-item-3">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-small-example-item-3-1">
              Subitem 1
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-small-example-item-3-2">
              Subitem 2
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-small-example-item-3-3">
              Subitem 3
            </a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</nav>
<!-- /menu-navigation -->
          

Ejemplo: "Peque", de código Nunjucks, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/menu-navigation/_macro.menu-navigation.njk" import componentMenuNavigation %}

{{ componentMenuNavigation({
  "idPrefix": "small-example",
  "items": [
    {
      "text": "Item 1",
      "id": "small-example-item-1",
      "classes": "c-menu-navigation__button--sm -mr-sm",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "small-example-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "small-example-item-2",
      "classes": "c-menu-navigation__button--sm -mr-sm",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "small-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "small-example-item-3",
      "classes": "c-menu-navigation__button--sm -mr-sm",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "small-example-item-3"
        }
      }
    }
  ],
  "attributes": {
    "aria-label": "Menu navigation"
  }
}) }}

Ejemplo: "Primario", de código HTML, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- menu-navigation -->
<nav data-module="c-menu-navigation" aria-label="Menu navigation">
  <ul class="flex flex-wrap gap-base c-menu-navigation__list">
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="primary-example-item-1-sub-list" id="primary-example-item-1" class="c-menu-navigation__button c-menu-navigation__button--primary"><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 1</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="primary-example-item-1-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" aria-labelledby="primary-example-item-1">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-primary-example-item-1-1">
              Subitem 1
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-primary-example-item-1-2">
              Subitem 2
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-primary-example-item-1-3">
              Subitem 3
            </a>
          </li>
        </ul>
      </div>
    </li>
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="primary-example-item-2-sub-list" id="primary-example-item-2" class="c-menu-navigation__button c-menu-navigation__button--primary c-menu-navigation__button--has-selection c-menu-navigation__button--primary"><span class="sr-only">Item activo: </span><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item activo 2</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="primary-example-item-2-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" aria-labelledby="primary-example-item-2">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-primary-example-item-2-1">
              Subitem 1
            </a>
          </li>
          <li>
            <a aria-current="page" href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-primary-example-item-2-2">
              Subitem 2
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-primary-example-item-2-3">
              Subitem 3
            </a>
          </li>
        </ul>
      </div>
    </li>
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="primary-example-item-3-sub-list" id="primary-example-item-3" class="c-menu-navigation__button c-menu-navigation__button--disabled c-menu-navigation__button--primary" aria-disabled="true" tabindex="-1"><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item deshabilitado 3</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="primary-example-item-3-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" aria-labelledby="primary-example-item-3">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-primary-example-item-3-1">
              Subitem 1
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-primary-example-item-3-2">
              Subitem 2
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-primary-example-item-3-3">
              Subitem 3
            </a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</nav>
<!-- /menu-navigation -->
          

Ejemplo: "Primario", de código Nunjucks, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/menu-navigation/_macro.menu-navigation.njk" import componentMenuNavigation %}

{{ componentMenuNavigation({
  "idPrefix": "primary-example",
  "items": [
    {
      "text": "Item 1",
      "id": "primary-example-item-1",
      "classes": "c-menu-navigation__button--primary",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "primary-example-item-1"
        }
      }
    },
    {
      "text": "Item activo 2",
      "id": "primary-example-item-2",
      "classes": "c-menu-navigation__button--primary",
      "active": true,
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2",
            "active": true
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "primary-example-item-2"
        }
      }
    },
    {
      "text": "Item deshabilitado 3",
      "id": "primary-example-item-3",
      "classes": "c-menu-navigation__button--primary",
      "disabled": true,
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "primary-example-item-3"
        }
      }
    }
  ],
  "attributes": {
    "aria-label": "Menu navigation"
  }
}) }}

Ejemplo: "Transparente", de código HTML, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- menu-navigation -->
<nav data-module="c-menu-navigation" aria-label="Menu navigation">
  <ul class="flex flex-wrap gap-base c-menu-navigation__list">
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="transparent-example-item-1-sub-list" id="transparent-example-item-1" class="c-menu-navigation__button c-menu-navigation__button--transparent"><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 1</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="transparent-example-item-1-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" aria-labelledby="transparent-example-item-1">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-transparent-example-item-1-1">
              Subitem 1
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-transparent-example-item-1-2">
              Subitem 2
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-transparent-example-item-1-3">
              Subitem 3
            </a>
          </li>
        </ul>
      </div>
    </li>
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="transparent-example-item-2-sub-list" id="transparent-example-item-2" class="c-menu-navigation__button c-menu-navigation__button--primary c-menu-navigation__button--has-selection c-menu-navigation__button--transparent"><span class="sr-only">Item activo: </span><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item activo 2</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="transparent-example-item-2-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" aria-labelledby="transparent-example-item-2">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-transparent-example-item-2-1">
              Subitem 1
            </a>
          </li>
          <li>
            <a aria-current="page" href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-transparent-example-item-2-2">
              Subitem 2
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-transparent-example-item-2-3">
              Subitem 3
            </a>
          </li>
        </ul>
      </div>
    </li>
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="transparent-example-item-3-sub-list" id="transparent-example-item-3" class="c-menu-navigation__button c-menu-navigation__button--disabled c-menu-navigation__button--transparent" aria-disabled="true" tabindex="-1"><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item deshabilitado 3</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="transparent-example-item-3-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" aria-labelledby="transparent-example-item-3">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-transparent-example-item-3-1">
              Subitem 1
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-transparent-example-item-3-2">
              Subitem 2
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-transparent-example-item-3-3">
              Subitem 3
            </a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</nav>
<!-- /menu-navigation -->
          

Ejemplo: "Transparente", de código Nunjucks, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/menu-navigation/_macro.menu-navigation.njk" import componentMenuNavigation %}

{{ componentMenuNavigation({
  "idPrefix": "transparent-example",
  "items": [
    {
      "text": "Item 1",
      "id": "transparent-example-item-1",
      "classes": "c-menu-navigation__button--transparent",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "transparent-example-item-1"
        }
      }
    },
    {
      "text": "Item activo 2",
      "id": "transparent-example-item-2",
      "classes": "c-menu-navigation__button--transparent",
      "active": true,
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2",
            "active": true
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "transparent-example-item-2"
        }
      }
    },
    {
      "text": "Item deshabilitado 3",
      "id": "transparent-example-item-3",
      "classes": "c-menu-navigation__button--transparent",
      "disabled": true,
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "transparent-example-item-3"
        }
      }
    }
  ],
  "attributes": {
    "aria-label": "Menu navigation"
  }
}) }}

Ejemplo: "Con el último item a la derecha", de código HTML, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- menu-navigation -->
<nav data-module="c-menu-navigation" class="c-menu-navigation--last-right" aria-label="Menu navigation">
  <ul class="flex flex-wrap gap-base c-menu-navigation__list">
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="right-example-item-1-sub-list" id="right-example-item-1" class="c-menu-navigation__button"><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 1</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="right-example-item-1-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" aria-labelledby="right-example-item-1">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-right-example-item-1-1">
              Subitem 1
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-right-example-item-1-2">
              Subitem 2
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-right-example-item-1-3">
              Subitem 3
            </a>
          </li>
        </ul>
      </div>
    </li>
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="right-example-item-2-sub-list" id="right-example-item-2" class="c-menu-navigation__button"><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 2</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="right-example-item-2-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" aria-labelledby="right-example-item-2">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-right-example-item-2-1">
              Subitem 1
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-right-example-item-2-2">
              Subitem 2
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-right-example-item-2-3">
              Subitem 3
            </a>
          </li>
        </ul>
      </div>
    </li>
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="right-example-item-3-sub-list" id="right-example-item-3" class="c-menu-navigation__button"><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 3</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="right-example-item-3-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" aria-labelledby="right-example-item-3">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-right-example-item-3-1">
              Subitem 1
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-right-example-item-3-2">
              Subitem 2
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-right-example-item-3-3">
              Subitem 3
            </a>
          </li>
        </ul>
      </div>
    </li>
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="right-example-item-4-sub-list" id="right-example-item-4" class="c-menu-navigation__button"><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 4</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="right-example-item-4-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" aria-labelledby="right-example-item-4">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-right-example-item-4-1">
              Subitem 1
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-right-example-item-4-2">
              Subitem 2
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-right-example-item-4-3">
              Subitem 3
            </a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</nav>
<!-- /menu-navigation -->
          

Ejemplo: "Con el último item a la derecha", de código Nunjucks, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/menu-navigation/_macro.menu-navigation.njk" import componentMenuNavigation %}

{{ componentMenuNavigation({
  "idPrefix": "right-example",
  "classes": "c-menu-navigation--last-right",
  "items": [
    {
      "text": "Item 1",
      "id": "right-example-item-1",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "right-example-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "right-example-item-2",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "right-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "right-example-item-3",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "right-example-item-3"
        }
      }
    },
    {
      "text": "Item 4",
      "id": "right-example-item-4",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "right-example-item-4"
        }
      }
    }
  ],
  "attributes": {
    "aria-label": "Menu navigation"
  }
}) }}

Ejemplo: "Con un texto de item muy largo", de código HTML, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- menu-navigation -->
<nav data-module="c-menu-navigation" aria-label="Menu navigation">
  <ul class="flex flex-wrap gap-base c-menu-navigation__list">
    <li class="relative">
      <a id="with-very-ling-text-example-1" href="#" class="c-menu-navigation__button">
        <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.</span>
      </a>
    </li>
    <li class="relative">
      <a id="with-very-ling-text-example-2" href="#" class="c-menu-navigation__button">
        <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</span>
      </a>
    </li>
    <li class="relative">
      <a id="with-very-ling-text-example-3" href="#" class="c-menu-navigation__button">
        <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis.</span>
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-navigation -->
          

Ejemplo: "Con un texto de item muy largo", de código Nunjucks, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/menu-navigation/_macro.menu-navigation.njk" import componentMenuNavigation %}

{{ componentMenuNavigation({
  "idPrefix": "with-very-ling-text-example",
  "items": [
    {
      "href": "#",
      "text": "No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus."
    },
    {
      "href": "#",
      "text": "No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum."
    },
    {
      "href": "#",
      "text": "No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis."
    }
  ],
  "attributes": {
    "aria-label": "Menu navigation"
  }
}) }}

Ejemplo: "Con deshabilitado o sin href en un padre e hijo", de código HTML, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- menu-navigation -->
<nav data-module="c-menu-navigation" aria-label="Menu navigation">
  <ul class="flex flex-wrap gap-base c-menu-navigation__list">
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="nav-item-item-1-b-sub-list" id="nav-item-item-1-b" class="c-menu-navigation__button c-menu-navigation__button--disabled" aria-disabled="true" tabindex="-1"><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 1 deshabilitado</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="nav-item-item-1-b-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" aria-labelledby="nav-item-item-1-b">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-nav-item-item-1-b-1">
              Subitem 1
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black pointer-events-none" tabindex="-1" id="sub-nav-item-item-1-b-2">
              Subitem 2 deshabilitado
              <svg viewBox="0 0 140 140" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="inline-block align-middle flex-initial ml-sm text-neutral-base fill-current" aria-hidden="true" focusable="false">
                <path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z" />
              </svg>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-nav-item-item-1-b-3">
              Subitem 3
            </a>
          </li>
        </ul>
      </div>
    </li>
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="nav-item-item-2-b-sub-list" id="nav-item-item-2-b" class="c-menu-navigation__button"><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 2</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="nav-item-item-2-b-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" aria-labelledby="nav-item-item-2-b">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-nav-item-item-2-b-1">
              Subitem 1
            </a>
          </li>
          <li>
            <a href="" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-nav-item-item-2-b-2">
              Subitem 2 sin href
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-nav-item-item-2-b-3">
              Subitem 3
            </a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</nav>
<!-- /menu-navigation -->
          

Ejemplo: "Con deshabilitado o sin href en un padre e hijo", de código Nunjucks, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/menu-navigation/_macro.menu-navigation.njk" import componentMenuNavigation %}

{{ componentMenuNavigation({
  "idPrefix": "nav-item-without-href",
  "items": [
    {
      "text": "Item 1 deshabilitado",
      "id": "nav-item-item-1-b",
      "disabled": true,
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2 deshabilitado",
            "disabled": true
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "nav-item-item-1-b"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "nav-item-item-2-b",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "text": "Subitem 2 sin href"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "nav-item-item-2-b"
        }
      }
    }
  ],
  "attributes": {
    "aria-label": "Menu navigation"
  }
}) }}

Ejemplo: "Con estilos de cabecera", de código HTML, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- menu-navigation -->
<nav data-module="c-menu-navigation" class="bg-neutral-lighter c-menu-navigation--last-right w-full" aria-label="Menu navigation" id="mi-menu-header">
  <ul class="flex flex-wrap gap-base c-menu-navigation__list">
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="header-custom-nav-item-1-sub-list" id="header-custom-nav-item-1" class="c-menu-navigation__button c-menu-navigation__button--header -mr-base"><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 1</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="header-custom-nav-item-1-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" aria-labelledby="header-custom-nav-item-1">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-header-custom-nav-item-1-1">
              Subitem 1
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-header-custom-nav-item-1-2">
              Subitem 2
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-header-custom-nav-item-1-3">
              Subitem 3
            </a>
          </li>
        </ul>
      </div>
    </li>
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="header-custom-nav-item-2-sub-list" id="header-custom-nav-item-2" class="c-menu-navigation__button c-menu-navigation__button--primary c-menu-navigation__button--has-selection c-menu-navigation__button--header -mr-base"><span class="sr-only">Item activo: </span><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item activo 2</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="header-custom-nav-item-2-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" aria-labelledby="header-custom-nav-item-2">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-header-custom-nav-item-2-1">
              Subitem 1
            </a>
          </li>
          <li>
            <a aria-current="page" href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-header-custom-nav-item-2-2">
              Subitem 2
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-header-custom-nav-item-2-3">
              Subitem 3
            </a>
          </li>
        </ul>
      </div>
    </li>
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="header-custom-nav-item-3-sub-list" id="header-custom-nav-item-3" class="c-menu-navigation__button c-menu-navigation__button--disabled c-menu-navigation__button--header -mr-base" aria-disabled="true" tabindex="-1"><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item deshabilitado 3</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="header-custom-nav-item-3-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" aria-labelledby="header-custom-nav-item-3">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-header-custom-nav-item-3-1">
              Subitem 1
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-header-custom-nav-item-3-2">
              Subitem 2
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-header-custom-nav-item-3-3">
              Subitem 3
            </a>
          </li>
        </ul>
      </div>
    </li>
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="header-custom-nav-item-4-sub-list" id="header-custom-nav-item-4" class="c-menu-navigation__button c-menu-navigation__button--header"><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item 4 right</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="header-custom-nav-item-4-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" aria-labelledby="header-custom-nav-item-4">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-header-custom-nav-item-4-1">
              Subitem 1
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-header-custom-nav-item-4-2">
              Subitem 2
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-header-custom-nav-item-4-3">
              Subitem 3
            </a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</nav>
<!-- /menu-navigation -->
          

Ejemplo: "Con estilos de cabecera", de código Nunjucks, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/menu-navigation/_macro.menu-navigation.njk" import componentMenuNavigation %}

{{ componentMenuNavigation({
  "idPrefix": "header-custom-nav",
  "classes": "bg-neutral-lighter c-menu-navigation--last-right w-full",
  "items": [
    {
      "text": "Item 1",
      "id": "header-custom-nav-item-1",
      "classes": "c-menu-navigation__button--header -mr-base",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "header-custom-nav-item-1"
        }
      }
    },
    {
      "text": "Item activo 2",
      "id": "header-custom-nav-item-2",
      "classes": "c-menu-navigation__button--header -mr-base",
      "active": true,
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2",
            "active": true
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "header-custom-nav-item-2"
        }
      }
    },
    {
      "text": "Item deshabilitado 3",
      "id": "header-custom-nav-item-3",
      "classes": "c-menu-navigation__button--header -mr-base",
      "disabled": true,
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "header-custom-nav-item-3"
        }
      }
    },
    {
      "text": "Item 4 right",
      "id": "header-custom-nav-item-4",
      "classes": "c-menu-navigation__button--header",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "header-custom-nav-item-4"
        }
      }
    }
  ],
  "attributes": {
    "aria-label": "Menu navigation",
    "id": "mi-menu-header"
  }
}) }}

Ejemplo: "Con idprefix", de código HTML, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- menu-navigation -->
<nav data-module="c-menu-navigation" aria-label="Menu navigation">
  <ul class="flex flex-wrap gap-base c-menu-navigation__list">
    <li class="relative">
      <a id="with-id-prefix-example-1" href="#" class="c-menu-navigation__button">
        <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Opción 1</span>
      </a>
    </li>
    <li class="relative">
      <a id="with-id-prefix-example-2" href="#" class="c-menu-navigation__button">
        <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Opción 2</span>
      </a>
    </li>
    <li class="relative">
      <a id="with-id-prefix-example-3" href="#" class="c-menu-navigation__button">
        <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Opción 3</span>
      </a>
    </li>
    <li class="relative">
      <a id="with-id-prefix-example-4" href="#" class="c-menu-navigation__button">
        <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Opción 4</span>
      </a>
    </li>
    <li class="relative">
      <a id="with-id-prefix-example-5" href="#" class="c-menu-navigation__button">
        <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Opción 5</span>
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-navigation -->
          

Ejemplo: "Con idprefix", de código Nunjucks, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/menu-navigation/_macro.menu-navigation.njk" import componentMenuNavigation %}

{{ componentMenuNavigation({
  "idPrefix": "with-id-prefix-example",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ],
  "attributes": {
    "aria-label": "Menu navigation"
  }
}) }}

Ejemplo: "Con ids individuales", de código HTML, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- menu-navigation -->
<nav data-module="c-menu-navigation" aria-label="Menu navigation">
  <ul class="flex flex-wrap gap-base c-menu-navigation__list">
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="ids-item-1-sub-list" id="ids-item-1" class="c-menu-navigation__button"><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Definidos explícitamente</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="ids-item-1-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" aria-labelledby="ids-item-1">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="ids-subitem-1">
              Subitem 1
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="ids-subitem-2">
              Subitem 2
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="ids-subitem-3">
              Subitem 3
            </a>
          </li>
        </ul>
      </div>
    </li>
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="ids-item-2-sub-list" id="ids-item-2" class="c-menu-navigation__button"><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Generados automáticamente</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="ids-item-2-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" aria-labelledby="ids-item-2">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-ids-item-2-1">
              Subitem 1
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-ids-item-2-2">
              Subitem 2
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-ids-item-2-3">
              Subitem 3
            </a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</nav>
<!-- /menu-navigation -->
          

Ejemplo: "Con ids individuales", de código Nunjucks, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/menu-navigation/_macro.menu-navigation.njk" import componentMenuNavigation %}

{{ componentMenuNavigation({
  "idPrefix": "ids-example",
  "items": [
    {
      "text": "Definidos explícitamente",
      "id": "ids-item-1",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1",
            "id": "ids-subitem-1"
          },
          {
            "href": "#",
            "text": "Subitem 2",
            "id": "ids-subitem-2"
          },
          {
            "href": "#",
            "text": "Subitem 3",
            "id": "ids-subitem-3"
          }
        ],
        "attributes": {
          "aria-labelledby": "ids-item-1"
        }
      }
    },
    {
      "text": "Generados automáticamente",
      "id": "ids-item-2",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "ids-item-2"
        }
      }
    }
  ],
  "attributes": {
    "aria-label": "Menu navigation"
  }
}) }}

Ejemplo: "Con atributos", de código HTML, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- menu-navigation -->
<nav data-module="c-menu-navigation" aria-label="Menu navigation">
  <ul class="flex flex-wrap gap-base c-menu-navigation__list">
    <li class="relative">
      <a id="with-attributes-example-1" href="#" class="c-menu-navigation__button" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
        <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Opción 1</span>
      </a>
    </li>
    <li class="relative">
      <a id="with-attributes-example-2" href="#" class="c-menu-navigation__button" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
        <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Opción 2</span>
      </a>
    </li>
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="with-attributes-example-3-sub-list" id="with-attributes-example-3" class="c-menu-navigation__button" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C"><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Opción 3</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="with-attributes-example-3-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-with-attributes-example-3-1" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
              Enlace simple
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-with-attributes-example-3-2">
              Enlace simple
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-with-attributes-example-3-3">
              Enlace simple
            </a>
          </li>
        </ul>
      </div>
    </li>
    <li class="relative">
      <a id="with-attributes-example-4" href="#" class="c-menu-navigation__button" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
        <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Opción 4</span>
      </a>
    </li>
    <li class="relative">
      <a id="with-attributes-example-5" href="#" class="c-menu-navigation__button" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
        <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Opción 5</span>
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-navigation -->
          

Ejemplo: "Con atributos", de código Nunjucks, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/menu-navigation/_macro.menu-navigation.njk" import componentMenuNavigation %}

{{ componentMenuNavigation({
  "idPrefix": "with-attributes-example",
  "attributes": {
    "aria-label": "Menu navigation"
  },
  "items": [
    {
      "href": "#",
      "text": "Opción 1",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    },
    {
      "href": "#",
      "text": "Opción 2",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    },
    {
      "text": "Opción 3",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      },
      "sub": {
        "attributes": {
          "data-attribute-1": "value-A",
          "data-attribute-2": "value-B",
          "data-attribute-3": "value-C"
        },
        "items": [
          {
            "href": "#",
            "text": "Enlace simple",
            "attributes": {
              "data-attribute-1": "value-A",
              "data-attribute-2": "value-B",
              "data-attribute-3": "value-C"
            }
          },
          {
            "href": "#",
            "text": "Enlace simple"
          },
          {
            "href": "#",
            "text": "Enlace simple"
          }
        ]
      }
    },
    {
      "href": "#",
      "text": "Opción 4",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    },
    {
      "href": "#",
      "text": "Opción 5",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    }
  ]
}) }}

Ejemplo: "Con items mixtos", de código HTML, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- menu-navigation -->
<nav data-module="c-menu-navigation" aria-label="Menu navigation">
  <ul class="flex flex-wrap gap-base c-menu-navigation__list">
    <li class="relative">
      <a id="with-mixed-items-example-1" href="#" class="c-menu-navigation__button">
        <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Enlace simple</span>
      </a>
    </li>
    <li class="relative">
      <button id="with-mixed-items-example-2" class="c-menu-navigation__button c-menu-navigation__button--disabled" aria-disabled="true" tabindex="-1"><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Item sin href o deshabilitado</span>
        <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" />
          </g>
        </svg></button>
    </li>
    <li class="relative">
      <a id="with-mixed-items-example-3" href="#" class="c-menu-navigation__button">
        <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Enlace simple</span>
      </a>
    </li>
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="with-sub-items-1-sub-list" id="with-sub-items-1" class="c-menu-navigation__button"><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Padre con divisor</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="with-sub-items-1-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" aria-labelledby="with-sub-items-1">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-with-sub-items-1-1">
              Enlace simple
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" target="_blank" id="sub-with-sub-items-1-2" title="Se abre en ventana nueva">
              Enlace simple
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-with-sub-items-1-3">
              Enlace simple
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-with-sub-items-1-4">
              Enlace simple
            </a>
          </li>
          <li class="my-sm border-b border-neutral-base">
            <div class="sr-only">Separador</div>
          </li>
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-with-sub-items-1-5">
              Enlace simple
            </a>
          </li>
        </ul>
      </div>
    </li>
    <li role="presentation" aria-hidden="true">
      <div class="absolute h-11 border-l border-neutral-base"></div>
    </li>
    <li class="relative">
      <a id="with-mixed-items-example-5" href="#" class="c-menu-navigation__button">
        <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Enlace simple</span>
      </a>
    </li>
    <li class="relative">
      <a id="with-mixed-items-example-6" href="#" class="c-menu-navigation__button">
        <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Enlace simple</span>
      </a>
    </li>
    <li class="relative">
      <button aria-expanded="true" aria-haspopup="true" aria-controls="with-sub-items-2-sub-list" id="with-sub-items-2" class="c-menu-navigation__button"><span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">Padre</span>
        <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" />
          </g>
        </svg></button>
      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
        <ul id="with-sub-items-2-sub-list" class="c-menu-navigation__sub--list c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm" aria-labelledby="with-sub-items-2">
          <li>
            <a href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-with-sub-items-2-1">
              Subitem
            </a>
          </li>
          <li>
            <a aria-current="page" href="#" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="sub-with-sub-items-2-2">
              Subitem activo
            </a>
          </li>
          <li>
            <a href="" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black pointer-events-none" tabindex="-1" id="sub-with-sub-items-2-3">
              Subitem sin href o deshabilitado
              <svg viewBox="0 0 140 140" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="inline-block align-middle flex-initial ml-sm text-neutral-base fill-current" aria-hidden="true" focusable="false">
                <path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z" />
              </svg>
            </a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</nav>
<!-- /menu-navigation -->
          

Ejemplo: "Con items mixtos", de código Nunjucks, para maquetar el componente: "Menu Navigation", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/menu-navigation/_macro.menu-navigation.njk" import componentMenuNavigation %}

{{ componentMenuNavigation({
  "name": "with-sub-items",
  "idPrefix": "with-mixed-items-example",
  "items": [
    {
      "href": "#",
      "text": "Enlace simple"
    },
    {
      "text": "Item sin href o deshabilitado",
      "disabled": true
    },
    {
      "href": "#",
      "text": "Enlace simple"
    },
    {
      "text": "Padre con divisor",
      "divider": {
        "html": "<div class='absolute h-11 border-l border-neutral-base'></div>"
      },
      "id": "with-sub-items-1",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Enlace simple"
          },
          {
            "href": "#",
            "text": "Enlace simple",
            "target": "_blank",
            "attributes": {
              "title": "Se abre en ventana nueva"
            }
          },
          {
            "href": "#",
            "text": "Enlace simple"
          },
          {
            "href": "#",
            "text": "Enlace simple",
            "divider": true
          },
          {
            "href": "#",
            "text": "Enlace simple"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-sub-items-1"
        }
      }
    },
    {
      "href": "#",
      "text": "Enlace simple"
    },
    {
      "href": "#",
      "text": "Enlace simple"
    },
    {
      "text": "Padre",
      "id": "with-sub-items-2",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem"
          },
          {
            "href": "#",
            "text": "Subitem activo",
            "active": true
          },
          {
            "text": "Subitem sin href o deshabilitado",
            "disabled": true
          }
        ],
        "attributes": {
          "aria-labelledby": "with-sub-items-2"
        }
      }
    }
  ],
  "attributes": {
    "aria-label": "Menu navigation"
  }
}) }}