Menú de navegación

Navegación

Se usan específicamente para navegar en la aplicación, puede tener varias apariencias según el contexto.

Menu-navigation

Parámetros Nunjucks del componente: "Menu-navigation". Versión: 4.1.1

Los parámetros de Nunjucks para este componente están dentro de la siguiente etiqueta code en formato yaml.

        {"val":"params:\n- name: idPrefix\n  type: string\n  required: false\n  description: String to prefix id for each item if no id is specified on each item.\n- name: items\n  type: array\n  required: true\n  description: Array of nav items objects.\n  params:\n  - name: href\n    type: string\n    required: false\n    description: Item link.\n  - name: target\n    type: string\n    required: false\n    description: The target where the item should link to.\n  - name: text\n    type: string\n    required: true\n    description: If `html` is set, this is not required. Text to use within each nav item label. If `html` is provided, the `text` argument will be ignored.\n  - name: html\n    type: string\n    required: true\n    description: If `text` is set, this is not required. HTML to use within each nav item label. If `html` is provided, the `text` argument will be ignored.\n  - name: id\n    type: string\n    required: false\n    description: Specific id attribute for the item. If omitted, then idPrefix option will be applied.\n  - name: expanded\n    type: boolean\n    required: false\n    description: If true, nav sub will be expanded.\n  - name: divider\n    type: object\n    required: false\n    description: Divider item that separates items.\n    - name: text\n      type: string\n      required: true\n      description: If `html` is set, this is not required. Text to use within the divider. If `html` is provided, the `text` argument will be ignored.\n    - name: html\n      type: string\n      required: true\n      description: If `text` is set, this is not required. HTML to use within the divider. If `html` is provided, the `text` argument will be ignored.\n    - name: classes\n      type: string\n      required: false\n      description: Classes to add to the divider.\n  - name: sub\n    type: boolean\n    required: false\n    description: If true, content provided will be revealed when the item is expanded.\n  - name: sub.classes\n    type: string\n    required: false\n    description: Classes to add to the sub container.\n  - name: sub.items\n    type: array\n    required: false\n    description: Provide subitems for the sub reveal with same parameters as nav component, including divider.\n  - name: disabled\n    type: boolean\n    required: false\n    description: If true, nav will be disabled.\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to the item.\n  - name: attributes\n    type: object\n    required: false\n    description: HTML attributes (for example data attributes) to add to the item.\n- name: classes\n  type: string\n  required: false\n  description: Classes to add to the nav container.\n- name: attributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the nav container.\n- name: active\n  type: boolean\n  required: false\n  description: If true, item will be active.\n","length":2848}

Mostrar parámetros

Parámetros Nunjucks del componente: "Menu-navigation"

              params:
- name: idPrefix
  type: string
  required: false
  description: String to prefix id for each item if no id is specified on each item.
- name: items
  type: array
  required: true
  description: Array of nav items objects.
  params:
  - name: href
    type: string
    required: false
    description: Item link.
  - name: target
    type: string
    required: false
    description: The target where the item should link to.
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text to use within each nav item label. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML to use within each nav item label. If `html` is provided, the `text` argument will be ignored.
  - name: id
    type: string
    required: false
    description: Specific id attribute for the item. If omitted, then idPrefix option will be applied.
  - name: expanded
    type: boolean
    required: false
    description: If true, nav sub will be expanded.
  - name: divider
    type: object
    required: false
    description: Divider item that separates items.
    - name: text
      type: string
      required: true
      description: If `html` is set, this is not required. Text to use within the divider. If `html` is provided, the `text` argument will be ignored.
    - name: html
      type: string
      required: true
      description: If `text` is set, this is not required. HTML to use within the divider. If `html` is provided, the `text` argument will be ignored.
    - name: classes
      type: string
      required: false
      description: Classes to add to the divider.
  - name: sub
    type: boolean
    required: false
    description: If true, content provided will be revealed when the item is expanded.
  - name: sub.classes
    type: string
    required: false
    description: Classes to add to the sub container.
  - name: sub.items
    type: array
    required: false
    description: Provide subitems for the sub reveal with same parameters as nav component, including divider.
  - name: disabled
    type: boolean
    required: false
    description: If true, nav will be disabled.
  - name: classes
    type: string
    required: false
    description: Classes to add to the item.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the item.
- name: classes
  type: string
  required: false
  description: Classes to add to the nav container.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the nav container.
- name: active
  type: boolean
  required: false
  description: If true, item will be active.

Por defecto #

Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Menu Navigation", versión: 4.1.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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/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 align-middle 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 align-middle 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 align-middle 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: 4.1.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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"
  }
}) }}

Mostrar código

Contenido

Nunjucks macro

{% 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"
  }
}) }}

HTML

<!-- 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 align-middle 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 align-middle 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 align-middle 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 -->

Con item deshabilitado #

Ejemplo: "Con item deshabilitado", de código HTML, para maquetar el componente: "Menu Navigation", versión: 4.1.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: https://bitbucket.org/sdaragon/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 align-middle 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 align-middle 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 align-middle 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: 4.1.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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"
  }
}) }}

Mostrar código

Contenido

Nunjucks macro

{% 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"
  }
}) }}

HTML

<!-- 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 align-middle 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 align-middle 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 align-middle pointer-events-none">Item 3</span>
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-navigation -->

Con item activo #

Añade active: true a un item para mostrarlo activo inicialmente. También puedes usar con javascript la función global activateItemMenuNavigation(elementMenu, idItemSeleccionado) para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe activateItemMenuNavigation('mi-menu', 'with-active-item-example-3') para desactivar el item actual y activar el tercer item de este ejemplo.

Ejemplo: "Con item activo", de código HTML, para maquetar el componente: "Menu Navigation", versión: 4.1.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: https://bitbucket.org/sdaragon/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 align-middle 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 align-middle 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 align-middle 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: 4.1.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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"
  }
}) }}

Mostrar código

Contenido

Nunjucks macro

{% 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"
  }
}) }}

HTML

<!-- 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 align-middle 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 align-middle 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 align-middle pointer-events-none">Item 3</span>
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-navigation -->

Con sub-item activo #

Añade active: true a un sub-item para mostrarlo activo inicialmente. También puedes usar con javascript la función global activateSubItemMenuNavigation(elementMenu, idItemSeleccionado) para seleccionar un sub-item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe activateSubItemMenuNavigation('mi-sub-menu', 'sub-active-sub-item-example-2-2') para desactivar el sub-item actual y activar el tercer sub-item de este ejemplo.

Ejemplo: "Con sub-item activo", de código HTML, para maquetar el componente: "Menu Navigation", versión: 4.1.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: https://bitbucket.org/sdaragon/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 align-middle 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 align-middle 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 align-middle 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: 4.1.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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"
  }
}) }}

Mostrar código

Contenido

Nunjucks macro

{% 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"
  }
}) }}

HTML

<!-- 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 align-middle 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 align-middle 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 align-middle 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 -->

Con target en enlaces #

Ejemplo: "Con target en enlaces", de código HTML, para maquetar el componente: "Menu Navigation", versión: 4.1.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: https://bitbucket.org/sdaragon/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 align-middle 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 align-middle 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 align-middle 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: 4.1.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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"
  }
}) }}

Mostrar código

Contenido

Nunjucks macro

{% 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"
  }
}) }}

HTML

<!-- 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 align-middle 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 align-middle 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 align-middle pointer-events-none">Item 3</span>
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-navigation -->

Con divisores #

Ejemplo: "Con divisores", de código HTML, para maquetar el componente: "Menu Navigation", versión: 4.1.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: https://bitbucket.org/sdaragon/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 align-middle 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 align-middle 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 align-middle 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 role="presentation" aria-hidden="true" class="my-sm border-b border-neutral-base"></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 align-middle 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: 4.1.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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"
  }
}) }}

Mostrar código

Contenido

Nunjucks macro

{% 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"
  }
}) }}

HTML

<!-- 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 align-middle 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 align-middle 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 align-middle 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 role="presentation" aria-hidden="true" class="my-sm border-b border-neutral-base"></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 align-middle pointer-events-none">Item 4</span>
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-navigation -->

Grande #

Usando clases para mostrar los items grandes.

Ejemplo: "Grande", de código HTML, para maquetar el componente: "Menu Navigation", versión: 4.1.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: https://bitbucket.org/sdaragon/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 align-middle 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 align-middle 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 align-middle 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: 4.1.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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"
  }
}) }}

Mostrar código

Contenido

Nunjucks macro

{% 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"
  }
}) }}

HTML

<!-- 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 align-middle 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 align-middle 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 align-middle 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 -->

Peque #

Usando clases para mostrar los items pequeños.

Ejemplo: "Peque", de código HTML, para maquetar el componente: "Menu Navigation", versión: 4.1.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: https://bitbucket.org/sdaragon/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 align-middle 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 align-middle 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 align-middle 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: 4.1.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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"
  }
}) }}

Mostrar código

Contenido

Nunjucks macro

{% 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"
  }
}) }}

HTML

<!-- 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 align-middle 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 align-middle 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 align-middle 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 -->

Primario #

Usando clases para mostrar los items primarios.

Ejemplo: "Primario", de código HTML, para maquetar el componente: "Menu Navigation", versión: 4.1.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: https://bitbucket.org/sdaragon/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 align-middle 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 align-middle 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 align-middle 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: 4.1.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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"
  }
}) }}

Mostrar código

Contenido

Nunjucks macro

{% 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"
  }
}) }}

HTML

<!-- 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 align-middle 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 align-middle 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 align-middle 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 -->

Transparente #

Usando clases para mostrar los items transparentes.

Ejemplo: "Transparente", de código HTML, para maquetar el componente: "Menu Navigation", versión: 4.1.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: https://bitbucket.org/sdaragon/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 align-middle 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 align-middle 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 align-middle 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: 4.1.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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"
  }
}) }}

Mostrar código

Contenido

Nunjucks macro

{% 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"
  }
}) }}

HTML

<!-- 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 align-middle 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 align-middle 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 align-middle 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 -->

Con el último item a la derecha #

Ejemplo: "Con el último item a la derecha", de código HTML, para maquetar el componente: "Menu Navigation", versión: 4.1.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: https://bitbucket.org/sdaragon/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 align-middle 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 align-middle 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 align-middle 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 align-middle 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: 4.1.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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"
  }
}) }}

Mostrar código

Contenido

Nunjucks macro

{% 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"
  }
}) }}

HTML

<!-- 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 align-middle 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 align-middle 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 align-middle 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 align-middle 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 -->

Con deshabilitado o sin href en un padre e hijo #

Ejemplo: "Con deshabilitado o sin href en un padre e hijo", de código HTML, para maquetar el componente: "Menu Navigation", versión: 4.1.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: https://bitbucket.org/sdaragon/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 align-middle 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 align-middle 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: 4.1.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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"
  }
}) }}

Mostrar código

Contenido

Nunjucks macro

{% 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"
  }
}) }}

HTML

<!-- 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 align-middle 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 align-middle 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 -->

Con estilos de cabecera #

Un Menu navigation puede estar anidado en customNavigationHtml en el componente Header. Añade active: true a un sub-item para mostrarlo activo inicialmente. También puedes usar con javascript la función global activateSubItemMenuNavigation(elementMenu, idItemSeleccionado) para seleccionar un sub-item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe activateSubItemMenuNavigation('mi-menu-header', 'sub-header-custom-nav-item-1-1') para desactivar el sub-item actual y activar el primer sub-item del primer item de este ejemplo.

Ejemplo: "Con estilos de cabecera", de código HTML, para maquetar el componente: "Menu Navigation", versión: 4.1.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: https://bitbucket.org/sdaragon/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 align-middle 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 align-middle 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 align-middle 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 align-middle 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: 4.1.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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"
  }
}) }}

Mostrar código

Contenido

Nunjucks macro

{% 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"
  }
}) }}

HTML

<!-- 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 align-middle 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 align-middle 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 align-middle 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 align-middle 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 -->

Con idprefix #

Mostrar código para ver el idPrefix aplicado

Ejemplo: "Con idprefix", de código HTML, para maquetar el componente: "Menu Navigation", versión: 4.1.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: https://bitbucket.org/sdaragon/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 align-middle 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 align-middle 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 align-middle 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 align-middle 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 align-middle 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: 4.1.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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"
  }
}) }}

Mostrar código

Contenido

Nunjucks macro

{% 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"
  }
}) }}

HTML

<!-- 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 align-middle 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 align-middle 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 align-middle 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 align-middle 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 align-middle pointer-events-none">Opción 5</span>
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-navigation -->

Con ids individuales #

Ejemplo: "Con ids individuales", de código HTML, para maquetar el componente: "Menu Navigation", versión: 4.1.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: https://bitbucket.org/sdaragon/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 align-middle 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 align-middle 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: 4.1.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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"
  }
}) }}

Mostrar código

Contenido

Nunjucks macro

{% 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"
  }
}) }}

HTML

<!-- 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 align-middle 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 align-middle 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 -->

Con atributos #

Muestra el código para ver cómo se aplican los atributos

Ejemplo: "Con atributos", de código HTML, para maquetar el componente: "Menu Navigation", versión: 4.1.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: https://bitbucket.org/sdaragon/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 align-middle 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 align-middle 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 align-middle 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 align-middle 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 align-middle 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: 4.1.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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"
      }
    }
  ]
}) }}

Mostrar código

Contenido

Nunjucks macro

{% 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"
      }
    }
  ]
}) }}

HTML

<!-- 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 align-middle 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 align-middle 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 align-middle 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 align-middle 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 align-middle pointer-events-none">Opción 5</span>
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-navigation -->

Con items mixtos #

Ejemplo: "Con items mixtos", de código HTML, para maquetar el componente: "Menu Navigation", versión: 4.1.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: https://bitbucket.org/sdaragon/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 align-middle 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 align-middle 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 align-middle 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 align-middle 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 role="presentation" aria-hidden="true" class="my-sm border-b border-neutral-base"></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 align-middle 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 align-middle 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 align-middle 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: 4.1.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/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"
  }
}) }}

Mostrar código

Contenido

Nunjucks macro

{% 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"
  }
}) }}

HTML

<!-- 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 align-middle 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 align-middle 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 align-middle 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 align-middle 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 role="presentation" aria-hidden="true" class="my-sm border-b border-neutral-base"></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 align-middle 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 align-middle 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 align-middle 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 -->

Componentes Índice de páginas

Menú de navegación

Menu-navigation

Parámetros Nunjucks del componente: "Menu-navigation". Versión: 4.1.1

Por defecto #

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

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

Contenido

Nunjucks macro

HTML

Con item deshabilitado #

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

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

Contenido

Nunjucks macro

HTML

Con item activo #

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

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

Contenido

Nunjucks macro

HTML

Con sub-item activo #

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

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

Contenido

Nunjucks macro

HTML

Con target en enlaces #

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

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

Contenido

Nunjucks macro

HTML

Con divisores #

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

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

Contenido

Nunjucks macro

HTML

Grande #

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

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

Contenido

Nunjucks macro

HTML

Peque #

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

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

Contenido

Nunjucks macro

HTML

Primario #

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

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

Contenido

Nunjucks macro

HTML

Transparente #

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

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

Contenido

Nunjucks macro

HTML

Con el último item a la derecha #

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

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

Contenido

Nunjucks macro

HTML

Con deshabilitado o sin href en un padre e hijo #

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

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

Contenido

Nunjucks macro

HTML

Con estilos de cabecera #

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

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

Contenido