DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Menú vertical

Navegación

Se compone de un listado de elementos anidados que poseerán los enlaces a cada una de las secciones del sitio web en concreto. El número de páginas que puede contener es mayor que en el menú horizontal, ya que no está limitado en espacio. Podría compararse a un índice.

Nav

Parámetros Nunjucks del componente: "Nav". Versión: 4.0.0

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

        {"val":"params:\n- name: hasNav\n  type: boolean\n  required: false\n  description: Defaults to `true`. If `false`, there will be no nav assuming the component will be wrapped with a custom nav with it's own aria-label.\n- name: idPrefix\n  type: string\n  required: true\n  description: String to prefix id for each item if no id is specified on each item. If not passed, fall back to using the name option instead.\n- name: items\n  type: array\n  required: true\n  description: Array of items objects.\n  params:\n  - name: href\n    type: string\n    required: true\n    description: Item link. If `hasNav` is `true`, use `#` here.\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 item. 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 item. 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: active\n    type: boolean\n    required: false\n    description: If true, item will be active.\n  - name: disabled\n    type: boolean\n    required: false\n    description: If true, item will be disabled.\n  - name: divider\n    type: boolean\n    required: false\n    description: If true, a divider border will be shown after the item.\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 tag container.\n- name: attributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the nav tag container.","length":2101}

Por defecto

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

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

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

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

<!-- nav -->
<nav data-module="c-nav" class="text-sm" aria-label="Navegación local">
  <ul>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-default-1">
        Opción 1
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-default-2">
        Opción 2
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-default-3">
        Opción 3
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-default-4">
        Opción 4
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-default-5">
        Opción 5
      </a>
    </li>
  </ul>
</nav>
<!-- /nav -->

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

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

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

{% from "components/nav/_macro.nav.njk" import componentNav %}

{{ componentNav({
  "idPrefix": "nav-default",
  "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": "Navegación local"
  }
}) }}
Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/nav/_macro.nav.njk" import componentNav %}

{{ componentNav({
  "idPrefix": "nav-default",
  "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": "Navegación local"
  }
}) }}

Con item deshabilitado

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

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

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

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

<!-- nav -->
<nav data-module="c-nav" class="text-sm" aria-label="Navegación local">
  <ul>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-disabled-item-1">
        Opción 1
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-disabled-item-2">
        Opción 2
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-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" aria-disabled="true" tabindex="-1" id="nav-with-disabled-item-3">
        Opción deshabilitada 3
        <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 hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-disabled-item-4">
        Opción 4
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-disabled-item-5">
        Opción 5
      </a>
    </li>
  </ul>
</nav>
<!-- /nav -->

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

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

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

{% from "components/nav/_macro.nav.njk" import componentNav %}

{{ componentNav({
  "idPrefix": "nav-with-disabled-item",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción deshabilitada 3",
      "disabled": true
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ],
  "attributes": {
    "aria-label": "Navegación local"
  }
}) }}
Mostrar códigodel ejemplo: Con item deshabilitado

Contenido

Nunjucks macro
{% from "components/nav/_macro.nav.njk" import componentNav %}

{{ componentNav({
  "idPrefix": "nav-with-disabled-item",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción deshabilitada 3",
      "disabled": true
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ],
  "attributes": {
    "aria-label": "Navegación local"
  }
}) }}

Con item activo

Añade active: true a un item para mostrarlo activo inicialmente. También puedes usar con javascript la función global activateItemNav(elementMenu, idItemSeleccionado) para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe activateItemNav('mi-menu', 'nav-with-active-item-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: "Nav", versión: 4.0.0, del sistema de diseño DESY

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

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

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

<!-- nav -->
<nav data-module="c-nav" class="text-sm" id="mi-menu" aria-label="Navegación local">
  <ul>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-active-item-1">
        Opción 1
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-active-item-2">
        Opción 2
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-active-item-3">
        Opción 3
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-current="page" id="nav-with-active-item-4">
        <strong class="font-bold">Opción 4</strong>
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-active-item-5">
        Opción 5
      </a>
    </li>
  </ul>
</nav>
<!-- /nav -->

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

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

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

{% from "components/nav/_macro.nav.njk" import componentNav %}

{{ componentNav({
  "idPrefix": "nav-with-active-item",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4",
      "active": true
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ],
  "attributes": {
    "id": "mi-menu",
    "aria-label": "Navegación local"
  }
}) }}
Mostrar códigodel ejemplo: Con item activo

Contenido

Nunjucks macro
{% from "components/nav/_macro.nav.njk" import componentNav %}

{{ componentNav({
  "idPrefix": "nav-with-active-item",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4",
      "active": true
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ],
  "attributes": {
    "id": "mi-menu",
    "aria-label": "Navegación local"
  }
}) }}

Con target en enlaces

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

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

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

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

<!-- nav -->
<nav data-module="c-nav" class="text-sm" aria-label="Navegación local">
  <ul>
    <li>
      <a href="#" class="flex items-center px-base py-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="nav-with-target-in-links-1" title="Se abre en pestaña nueva">
        Opción 1
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-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="nav-with-target-in-links-2" title="Se abre en pestaña nueva">
        Opción 2
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-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="nav-with-target-in-links-3" title="Se abre en pestaña nueva">
        Opción 3
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-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="nav-with-target-in-links-4" title="Se abre en pestaña nueva">
        Opción 4
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-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="nav-with-target-in-links-5" title="Se abre en pestaña nueva">
        Opción 5
      </a>
    </li>
  </ul>
</nav>
<!-- /nav -->

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

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

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

{% from "components/nav/_macro.nav.njk" import componentNav %}

{{ componentNav({
  "idPrefix": "nav-with-target-in-links",
  "items": [
    {
      "href": "#",
      "text": "Opción 1",
      "target": "_blank",
      "attributes": {
        "title": "Se abre en pestaña nueva"
      }
    },
    {
      "href": "#",
      "text": "Opción 2",
      "target": "_blank",
      "attributes": {
        "title": "Se abre en pestaña nueva"
      }
    },
    {
      "href": "#",
      "text": "Opción 3",
      "target": "_blank",
      "attributes": {
        "title": "Se abre en pestaña nueva"
      }
    },
    {
      "href": "#",
      "text": "Opción 4",
      "target": "_blank",
      "attributes": {
        "title": "Se abre en pestaña nueva"
      }
    },
    {
      "href": "#",
      "text": "Opción 5",
      "target": "_blank",
      "attributes": {
        "title": "Se abre en pestaña nueva"
      }
    }
  ],
  "attributes": {
    "aria-label": "Navegación local"
  }
}) }}
Mostrar códigodel ejemplo: Con target en enlaces

Contenido

Nunjucks macro
{% from "components/nav/_macro.nav.njk" import componentNav %}

{{ componentNav({
  "idPrefix": "nav-with-target-in-links",
  "items": [
    {
      "href": "#",
      "text": "Opción 1",
      "target": "_blank",
      "attributes": {
        "title": "Se abre en pestaña nueva"
      }
    },
    {
      "href": "#",
      "text": "Opción 2",
      "target": "_blank",
      "attributes": {
        "title": "Se abre en pestaña nueva"
      }
    },
    {
      "href": "#",
      "text": "Opción 3",
      "target": "_blank",
      "attributes": {
        "title": "Se abre en pestaña nueva"
      }
    },
    {
      "href": "#",
      "text": "Opción 4",
      "target": "_blank",
      "attributes": {
        "title": "Se abre en pestaña nueva"
      }
    },
    {
      "href": "#",
      "text": "Opción 5",
      "target": "_blank",
      "attributes": {
        "title": "Se abre en pestaña nueva"
      }
    }
  ],
  "attributes": {
    "aria-label": "Navegación local"
  }
}) }}

Con divisor

Ejemplo: "Con divisor", de código HTML, para maquetar el componente: "Nav", versión: 4.0.0, del sistema de diseño DESY

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

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

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

<!-- nav -->
<nav data-module="c-nav" class="text-sm" aria-label="Navegación local">
  <ul>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-divider-1">
        Opción 1
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-divider-2">
        Opción 2
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-divider-3">
        Opción 3 con divisor
      </a>
    </li>
    <li class="my-sm border-b border-neutral-base" aria-hidden="true">
      <div class="sr-only">Separador</div>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-divider-4">
        Opción 4
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-divider-5">
        Opción 5
      </a>
    </li>
  </ul>
</nav>
<!-- /nav -->

Ejemplo: "Con divisor", de código Nunjucks, para maquetar el componente: "Nav", versión: 4.0.0, del sistema de diseño DESY

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

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

{% from "components/nav/_macro.nav.njk" import componentNav %}

{{ componentNav({
  "idPrefix": "nav-with-divider",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3 con divisor",
      "divider": true
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ],
  "attributes": {
    "aria-label": "Navegación local"
  }
}) }}
Mostrar códigodel ejemplo: Con divisor

Contenido

Nunjucks macro
{% from "components/nav/_macro.nav.njk" import componentNav %}

{{ componentNav({
  "idPrefix": "nav-with-divider",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3 con divisor",
      "divider": true
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ],
  "attributes": {
    "aria-label": "Navegación local"
  }
}) }}

Con clases de css aplicadas

Ejemplo: "Con clases de css aplicadas", de código HTML, para maquetar el componente: "Nav", versión: 4.0.0, del sistema de diseño DESY

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

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

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

<!-- nav -->
<nav data-module="c-nav" class="text-sm p-base bg-primary-light" aria-label="Navegación local">
  <ul>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-classes-applied-1">
        Opción 1
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black bg-white" id="nav-with-classes-applied-2">
        Opción 2
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-classes-applied-3">
        Opción 3
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-classes-applied-4">
        Opción 4
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-classes-applied-5">
        Opción 5
      </a>
    </li>
  </ul>
</nav>
<!-- /nav -->

Ejemplo: "Con clases de css aplicadas", de código Nunjucks, para maquetar el componente: "Nav", versión: 4.0.0, del sistema de diseño DESY

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

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

{% from "components/nav/_macro.nav.njk" import componentNav %}

{{ componentNav({
  "idPrefix": "nav-with-classes-applied",
  "classes": "p-base bg-primary-light",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2",
      "classes": "bg-white"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ],
  "attributes": {
    "aria-label": "Navegación local"
  }
}) }}
Mostrar códigodel ejemplo: Con clases de css aplicadas

Contenido

Nunjucks macro
{% from "components/nav/_macro.nav.njk" import componentNav %}

{{ componentNav({
  "idPrefix": "nav-with-classes-applied",
  "classes": "p-base bg-primary-light",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2",
      "classes": "bg-white"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ],
  "attributes": {
    "aria-label": "Navegación local"
  }
}) }}

Con iconos en items

Ejemplo: "Con iconos en items", de código HTML, para maquetar el componente: "Nav", versión: 4.0.0, del sistema de diseño DESY

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

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

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

<!-- nav -->
<nav data-module="c-nav" class="text-sm" id="mi-menu-icons" aria-label="Navegación local">
  <ul>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="with-icons-1">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Archivo" focusable="false" role="img">
          <g id="new-file--empty-common-file-content">
            <path id="Subtract" fill="currentColor" fill-rule="evenodd" d="M7.875 0H2.5C2.10218 0 1.72064 0.158035 1.43934 0.43934C1.15804 0.720644 1 1.10218 1 1.5V12.5C1 12.8978 1.15804 13.2794 1.43934 13.5607C1.72064 13.842 2.10217 14 2.5 14H11.5C11.8978 14 12.2794 13.842 12.5607 13.5607C12.842 13.2794 13 12.8978 13 12.5V5.125H8.5C8.15482 5.125 7.875 4.84518 7.875 4.5V0ZM12.5821 3.875L9.125 0.417893V3.875H12.5821Z" clip-rule="evenodd"></path>
          </g>
        </svg> Opción 1
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="with-icons-2">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Link" focusable="false" role="img">
          <g id="link-chain--create-hyperlink-link-make-unlink-connection-chain">
            <path id="Union-1" fill="currentColor" fill-rule="evenodd" d="M7.6715 2.7426L7.67146 2.74264L6.70715 3.70707C6.31665 4.09761 5.68348 4.09765 5.29293 3.70715C4.90239 3.31665 4.90235 2.68348 5.29285 2.29293L6.25721 1.32847L6.25725 1.32843C8.02849 -0.442809 10.9002 -0.442809 12.6715 1.32843C14.4427 3.09965 14.4427 5.97136 12.6715 7.7426L12.6715 7.74264L11.7071 8.70707C11.3166 9.09761 10.6835 9.09765 10.2929 8.70715C9.90239 8.31664 9.90235 7.68348 10.2929 7.29293L11.2572 6.32847L11.2572 6.32843C12.2474 5.33824 12.2474 3.73283 11.2572 2.74264C10.2671 1.75247 8.66169 1.75245 7.6715 2.7426ZM3.70696 5.29285C4.0975 5.68335 4.09754 6.31652 3.70704 6.70707L2.74268 7.67153L2.74264 7.67157C1.75245 8.66176 1.75245 10.2672 2.74264 11.2574C3.73282 12.2475 5.33819 12.2475 6.32839 11.2574L6.32843 11.2574L7.29274 10.2929C7.68324 9.90239 8.31641 9.90235 8.70696 10.2929C9.0975 10.6834 9.09754 11.3165 8.70704 11.7071L7.74268 12.6715L7.74264 12.6716C5.9714 14.4428 3.09966 14.4428 1.32843 12.6716C-0.442796 10.9003 -0.442809 8.02864 1.32839 6.2574L1.32843 6.25736L2.29274 5.29293C2.68324 4.90239 3.31641 4.90235 3.70696 5.29285ZM9.20711 6.20711C9.59763 5.81658 9.59763 5.18342 9.20711 4.79289C8.81658 4.40237 8.18342 4.40237 7.79289 4.79289L4.79289 7.79289C4.40237 8.18342 4.40237 8.81658 4.79289 9.20711C5.18342 9.59763 5.81658 9.59763 6.20711 9.20711L9.20711 6.20711Z" clip-rule="evenodd"></path>
          </g>
        </svg> Opción 2
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="with-icons-3">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Solicitud" focusable="false" role="img">
          <g id="clipboard-text--edition-form-task-checklist-edit-clipboard">
            <path id="Union-2" fill="currentColor" fill-rule="evenodd" d="M5.5 0C4.94772 0 4.5 0.447716 4.5 1V1.5C4.5 2.05229 4.94772 2.5 5.5 2.5H8.5C9.05229 2.5 9.5 2.05229 9.5 1.5V1C9.5 0.447715 9.05229 0 8.5 0H5.5ZM2.75 1H3.25V1.5C3.25 2.74264 4.25736 3.75 5.5 3.75H8.5C9.74264 3.75 10.75 2.74264 10.75 1.5V1H11.25C12.0784 1 12.75 1.67157 12.75 2.5V12.5C12.75 13.3284 12.0784 14 11.25 14H2.75C1.92157 14 1.25 13.3284 1.25 12.5V2.5C1.25 1.67157 1.92157 1 2.75 1ZM3.875 8.50049C3.875 8.15531 4.15482 7.87549 4.5 7.87549H9.5C9.84518 7.87549 10.125 8.15531 10.125 8.50049C10.125 8.84567 9.84518 9.12549 9.5 9.12549H4.5C4.15482 9.12549 3.875 8.84567 3.875 8.50049ZM4.5 10.3755C4.15482 10.3755 3.875 10.6553 3.875 11.0005C3.875 11.3457 4.15482 11.6255 4.5 11.6255H9.5C9.84518 11.6255 10.125 11.3457 10.125 11.0005C10.125 10.6553 9.84518 10.3755 9.5 10.3755H4.5Z" clip-rule="evenodd"></path>
          </g>
        </svg> Opción 3
      </a>
    </li>
  </ul>
</nav>
<!-- /nav -->

Ejemplo: "Con iconos en items", de código Nunjucks, para maquetar el componente: "Nav", versión: 4.0.0, del sistema de diseño DESY

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

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

{% from "components/nav/_macro.nav.njk" import componentNav %}

{{ componentNav({
  "idPrefix": "with-icons",
  "items": [
    {
      "href": "#",
      "html": "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14' width='1em' height='1em' class='inline-block align-baseline mr-sm' aria-label='Archivo' focusable='false' role='img'><g id='new-file--empty-common-file-content'><path id='Subtract' fill='currentColor' fill-rule='evenodd' d='M7.875 0H2.5C2.10218 0 1.72064 0.158035 1.43934 0.43934C1.15804 0.720644 1 1.10218 1 1.5V12.5C1 12.8978 1.15804 13.2794 1.43934 13.5607C1.72064 13.842 2.10217 14 2.5 14H11.5C11.8978 14 12.2794 13.842 12.5607 13.5607C12.842 13.2794 13 12.8978 13 12.5V5.125H8.5C8.15482 5.125 7.875 4.84518 7.875 4.5V0ZM12.5821 3.875L9.125 0.417893V3.875H12.5821Z' clip-rule='evenodd'></path></g></svg> Opción 1"
    },
    {
      "href": "#",
      "html": "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14'  width='1em' height='1em' class='inline-block align-baseline mr-sm' aria-label='Link' focusable='false' role='img'><g id='link-chain--create-hyperlink-link-make-unlink-connection-chain'><path id='Union-1' fill='currentColor' fill-rule='evenodd' d='M7.6715 2.7426L7.67146 2.74264L6.70715 3.70707C6.31665 4.09761 5.68348 4.09765 5.29293 3.70715C4.90239 3.31665 4.90235 2.68348 5.29285 2.29293L6.25721 1.32847L6.25725 1.32843C8.02849 -0.442809 10.9002 -0.442809 12.6715 1.32843C14.4427 3.09965 14.4427 5.97136 12.6715 7.7426L12.6715 7.74264L11.7071 8.70707C11.3166 9.09761 10.6835 9.09765 10.2929 8.70715C9.90239 8.31664 9.90235 7.68348 10.2929 7.29293L11.2572 6.32847L11.2572 6.32843C12.2474 5.33824 12.2474 3.73283 11.2572 2.74264C10.2671 1.75247 8.66169 1.75245 7.6715 2.7426ZM3.70696 5.29285C4.0975 5.68335 4.09754 6.31652 3.70704 6.70707L2.74268 7.67153L2.74264 7.67157C1.75245 8.66176 1.75245 10.2672 2.74264 11.2574C3.73282 12.2475 5.33819 12.2475 6.32839 11.2574L6.32843 11.2574L7.29274 10.2929C7.68324 9.90239 8.31641 9.90235 8.70696 10.2929C9.0975 10.6834 9.09754 11.3165 8.70704 11.7071L7.74268 12.6715L7.74264 12.6716C5.9714 14.4428 3.09966 14.4428 1.32843 12.6716C-0.442796 10.9003 -0.442809 8.02864 1.32839 6.2574L1.32843 6.25736L2.29274 5.29293C2.68324 4.90239 3.31641 4.90235 3.70696 5.29285ZM9.20711 6.20711C9.59763 5.81658 9.59763 5.18342 9.20711 4.79289C8.81658 4.40237 8.18342 4.40237 7.79289 4.79289L4.79289 7.79289C4.40237 8.18342 4.40237 8.81658 4.79289 9.20711C5.18342 9.59763 5.81658 9.59763 6.20711 9.20711L9.20711 6.20711Z' clip-rule='evenodd'></path></g></svg> Opción 2"
    },
    {
      "href": "#",
      "html": "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14' width='1em' height='1em' class='inline-block align-baseline mr-sm' aria-label='Solicitud' focusable='false' role='img'><g id='clipboard-text--edition-form-task-checklist-edit-clipboard'><path id='Union-2' fill='currentColor' fill-rule='evenodd' d='M5.5 0C4.94772 0 4.5 0.447716 4.5 1V1.5C4.5 2.05229 4.94772 2.5 5.5 2.5H8.5C9.05229 2.5 9.5 2.05229 9.5 1.5V1C9.5 0.447715 9.05229 0 8.5 0H5.5ZM2.75 1H3.25V1.5C3.25 2.74264 4.25736 3.75 5.5 3.75H8.5C9.74264 3.75 10.75 2.74264 10.75 1.5V1H11.25C12.0784 1 12.75 1.67157 12.75 2.5V12.5C12.75 13.3284 12.0784 14 11.25 14H2.75C1.92157 14 1.25 13.3284 1.25 12.5V2.5C1.25 1.67157 1.92157 1 2.75 1ZM3.875 8.50049C3.875 8.15531 4.15482 7.87549 4.5 7.87549H9.5C9.84518 7.87549 10.125 8.15531 10.125 8.50049C10.125 8.84567 9.84518 9.12549 9.5 9.12549H4.5C4.15482 9.12549 3.875 8.84567 3.875 8.50049ZM4.5 10.3755C4.15482 10.3755 3.875 10.6553 3.875 11.0005C3.875 11.3457 4.15482 11.6255 4.5 11.6255H9.5C9.84518 11.6255 10.125 11.3457 10.125 11.0005C10.125 10.6553 9.84518 10.3755 9.5 10.3755H4.5Z' clip-rule='evenodd'></path></g></svg> Opción 3"
    }
  ],
  "attributes": {
    "id": "mi-menu-icons",
    "aria-label": "Navegación local"
  }
}) }}
Mostrar códigodel ejemplo: Con iconos en items

Contenido

Nunjucks macro
{% from "components/nav/_macro.nav.njk" import componentNav %}

{{ componentNav({
  "idPrefix": "with-icons",
  "items": [
    {
      "href": "#",
      "html": "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14' width='1em' height='1em' class='inline-block align-baseline mr-sm' aria-label='Archivo' focusable='false' role='img'><g id='new-file--empty-common-file-content'><path id='Subtract' fill='currentColor' fill-rule='evenodd' d='M7.875 0H2.5C2.10218 0 1.72064 0.158035 1.43934 0.43934C1.15804 0.720644 1 1.10218 1 1.5V12.5C1 12.8978 1.15804 13.2794 1.43934 13.5607C1.72064 13.842 2.10217 14 2.5 14H11.5C11.8978 14 12.2794 13.842 12.5607 13.5607C12.842 13.2794 13 12.8978 13 12.5V5.125H8.5C8.15482 5.125 7.875 4.84518 7.875 4.5V0ZM12.5821 3.875L9.125 0.417893V3.875H12.5821Z' clip-rule='evenodd'></path></g></svg> Opción 1"
    },
    {
      "href": "#",
      "html": "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14'  width='1em' height='1em' class='inline-block align-baseline mr-sm' aria-label='Link' focusable='false' role='img'><g id='link-chain--create-hyperlink-link-make-unlink-connection-chain'><path id='Union-1' fill='currentColor' fill-rule='evenodd' d='M7.6715 2.7426L7.67146 2.74264L6.70715 3.70707C6.31665 4.09761 5.68348 4.09765 5.29293 3.70715C4.90239 3.31665 4.90235 2.68348 5.29285 2.29293L6.25721 1.32847L6.25725 1.32843C8.02849 -0.442809 10.9002 -0.442809 12.6715 1.32843C14.4427 3.09965 14.4427 5.97136 12.6715 7.7426L12.6715 7.74264L11.7071 8.70707C11.3166 9.09761 10.6835 9.09765 10.2929 8.70715C9.90239 8.31664 9.90235 7.68348 10.2929 7.29293L11.2572 6.32847L11.2572 6.32843C12.2474 5.33824 12.2474 3.73283 11.2572 2.74264C10.2671 1.75247 8.66169 1.75245 7.6715 2.7426ZM3.70696 5.29285C4.0975 5.68335 4.09754 6.31652 3.70704 6.70707L2.74268 7.67153L2.74264 7.67157C1.75245 8.66176 1.75245 10.2672 2.74264 11.2574C3.73282 12.2475 5.33819 12.2475 6.32839 11.2574L6.32843 11.2574L7.29274 10.2929C7.68324 9.90239 8.31641 9.90235 8.70696 10.2929C9.0975 10.6834 9.09754 11.3165 8.70704 11.7071L7.74268 12.6715L7.74264 12.6716C5.9714 14.4428 3.09966 14.4428 1.32843 12.6716C-0.442796 10.9003 -0.442809 8.02864 1.32839 6.2574L1.32843 6.25736L2.29274 5.29293C2.68324 4.90239 3.31641 4.90235 3.70696 5.29285ZM9.20711 6.20711C9.59763 5.81658 9.59763 5.18342 9.20711 4.79289C8.81658 4.40237 8.18342 4.40237 7.79289 4.79289L4.79289 7.79289C4.40237 8.18342 4.40237 8.81658 4.79289 9.20711C5.18342 9.59763 5.81658 9.59763 6.20711 9.20711L9.20711 6.20711Z' clip-rule='evenodd'></path></g></svg> Opción 2"
    },
    {
      "href": "#",
      "html": "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14' width='1em' height='1em' class='inline-block align-baseline mr-sm' aria-label='Solicitud' focusable='false' role='img'><g id='clipboard-text--edition-form-task-checklist-edit-clipboard'><path id='Union-2' fill='currentColor' fill-rule='evenodd' d='M5.5 0C4.94772 0 4.5 0.447716 4.5 1V1.5C4.5 2.05229 4.94772 2.5 5.5 2.5H8.5C9.05229 2.5 9.5 2.05229 9.5 1.5V1C9.5 0.447715 9.05229 0 8.5 0H5.5ZM2.75 1H3.25V1.5C3.25 2.74264 4.25736 3.75 5.5 3.75H8.5C9.74264 3.75 10.75 2.74264 10.75 1.5V1H11.25C12.0784 1 12.75 1.67157 12.75 2.5V12.5C12.75 13.3284 12.0784 14 11.25 14H2.75C1.92157 14 1.25 13.3284 1.25 12.5V2.5C1.25 1.67157 1.92157 1 2.75 1ZM3.875 8.50049C3.875 8.15531 4.15482 7.87549 4.5 7.87549H9.5C9.84518 7.87549 10.125 8.15531 10.125 8.50049C10.125 8.84567 9.84518 9.12549 9.5 9.12549H4.5C4.15482 9.12549 3.875 8.84567 3.875 8.50049ZM4.5 10.3755C4.15482 10.3755 3.875 10.6553 3.875 11.0005C3.875 11.3457 4.15482 11.6255 4.5 11.6255H9.5C9.84518 11.6255 10.125 11.3457 10.125 11.0005C10.125 10.6553 9.84518 10.3755 9.5 10.3755H4.5Z' clip-rule='evenodd'></path></g></svg> Opción 3"
    }
  ],
  "attributes": {
    "id": "mi-menu-icons",
    "aria-label": "Navegación local"
  }
}) }}

Con idprefix

Mostrar código para ver el idPrefix aplicado.

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

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

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

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

<!-- nav -->
<nav data-module="c-nav" class="text-sm" aria-label="Navegación local">
  <ul>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="site-menu-item-1-1">
        Opción 1
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="site-menu-item-1-2">
        Opción 2
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="site-menu-item-1-3">
        Opción 3
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="site-menu-item-1-4">
        Opción 4
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="site-menu-item-1-5">
        Opción 5
      </a>
    </li>
  </ul>
</nav>
<!-- /nav -->

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

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

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

{% from "components/nav/_macro.nav.njk" import componentNav %}

{{ componentNav({
  "idPrefix": "site-menu-item-1",
  "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": "Navegación local"
  }
}) }}
Mostrar códigodel ejemplo: Con idprefix

Contenido

Nunjucks macro
{% from "components/nav/_macro.nav.njk" import componentNav %}

{{ componentNav({
  "idPrefix": "site-menu-item-1",
  "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": "Navegación local"
  }
}) }}

Con ids individuales

Mostrar código para ver los id aplicados.

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

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

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

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

<!-- nav -->
<nav data-module="c-nav" class="text-sm" aria-label="Navegación local">
  <ul>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="option-A">
        Opción 1
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="option-B">
        Opción 2
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="option-C">
        Opción 3
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="option-D">
        Opción 4
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="option-E">
        Opción 5
      </a>
    </li>
  </ul>
</nav>
<!-- /nav -->

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

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

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

{% from "components/nav/_macro.nav.njk" import componentNav %}

{{ componentNav({
  "idPrefix": "nav-with-individual-ids",
  "items": [
    {
      "href": "#",
      "text": "Opción 1",
      "id": "option-A"
    },
    {
      "href": "#",
      "text": "Opción 2",
      "id": "option-B"
    },
    {
      "href": "#",
      "text": "Opción 3",
      "id": "option-C"
    },
    {
      "href": "#",
      "text": "Opción 4",
      "id": "option-D"
    },
    {
      "href": "#",
      "text": "Opción 5",
      "id": "option-E"
    }
  ],
  "attributes": {
    "aria-label": "Navegación local"
  }
}) }}
Mostrar códigodel ejemplo: Con ids individuales

Contenido

Nunjucks macro
{% from "components/nav/_macro.nav.njk" import componentNav %}

{{ componentNav({
  "idPrefix": "nav-with-individual-ids",
  "items": [
    {
      "href": "#",
      "text": "Opción 1",
      "id": "option-A"
    },
    {
      "href": "#",
      "text": "Opción 2",
      "id": "option-B"
    },
    {
      "href": "#",
      "text": "Opción 3",
      "id": "option-C"
    },
    {
      "href": "#",
      "text": "Opción 4",
      "id": "option-D"
    },
    {
      "href": "#",
      "text": "Opción 5",
      "id": "option-E"
    }
  ],
  "attributes": {
    "aria-label": "Navegación local"
  }
}) }}

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: "Nav", versión: 4.0.0, del sistema de diseño DESY

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

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

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

<!-- nav -->
<nav data-module="c-nav" class="text-sm" aria-label="Navegación local">
  <ul>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-attributes-1" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
        Opción 1
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-attributes-2" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
        Opción 2
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-attributes-3" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
        Opción 3
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-attributes-4" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
        Opción 4
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-attributes-5" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
        Opción 5
      </a>
    </li>
  </ul>
</nav>
<!-- /nav -->

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

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

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

{% from "components/nav/_macro.nav.njk" import componentNav %}

{{ componentNav({
  "idPrefix": "nav-with-attributes",
  "attributes": {
    "aria-label": "Navegación local"
  },
  "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"
      }
    },
    {
      "href": "#",
      "text": "Opción 3",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    },
    {
      "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ódigodel ejemplo: Con atributos

Contenido

Nunjucks macro
{% from "components/nav/_macro.nav.njk" import componentNav %}

{{ componentNav({
  "idPrefix": "nav-with-attributes",
  "attributes": {
    "aria-label": "Navegación local"
  },
  "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"
      }
    },
    {
      "href": "#",
      "text": "Opción 3",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    },
    {
      "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"
      }
    }
  ]
}) }}

Sin nav

Usa 'hasNav': false si el Nav se abre con un Dropdown. No se usará el tag <nav>, sólo un simple <ul>, asumiendo que rodearás a tu componente manualmente con un <nav> personalizado con su propio aria-label si es necesario. También podemos usar clases para controlar la anchura del nav dentro del Dropdown.

Ejemplo: "Sin nav", de código HTML, para maquetar el componente: "Nav", versión: 4.0.0, del sistema de diseño DESY

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

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

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

<!-- nav -->
<ul data-module="c-nav" class="text-sm w-max max-w-64" aria-label="Navegación local">
  <li>
    <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="site-menu-item-2-1">
      Opción 1
    </a>
  </li>
  <li>
    <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="site-menu-item-2-2">
      Opción 2
    </a>
  </li>
  <li>
    <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-current="page" id="site-menu-item-2-3">
      <strong class="font-bold">Opción 3</strong>
    </a>
  </li>
  <li>
    <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="site-menu-item-2-4">
      Opción 4
    </a>
  </li>
  <li>
    <a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="site-menu-item-2-5">
      Clases max-width aplicadas para evitar demasiada anchura dentro de los menus y forzar a saltos de línea
    </a>
  </li>
</ul>
<!-- /nav -->

Ejemplo: "Sin nav", de código Nunjucks, para maquetar el componente: "Nav", versión: 4.0.0, del sistema de diseño DESY

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

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

{% from "components/nav/_macro.nav.njk" import componentNav %}

{{ componentNav({
  "hasNav": false,
  "idPrefix": "site-menu-item-2",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3",
      "active": true
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Clases max-width aplicadas para evitar demasiada anchura dentro de los menus y forzar a saltos de línea"
    }
  ],
  "classes": "w-max max-w-64",
  "attributes": {
    "aria-label": "Navegación local"
  }
}) }}
Mostrar códigodel ejemplo: Sin nav

Contenido

Nunjucks macro
{% from "components/nav/_macro.nav.njk" import componentNav %}

{{ componentNav({
  "hasNav": false,
  "idPrefix": "site-menu-item-2",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3",
      "active": true
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Clases max-width aplicadas para evitar demasiada anchura dentro de los menus y forzar a saltos de línea"
    }
  ],
  "classes": "w-max max-w-64",
  "attributes": {
    "aria-label": "Navegación local"
  }
}) }}