desy-html

Links-list

Mostrar parámetros

Parámetros del componente

              params:
- name: idPrefix
  type: string
  required: false
  description: String to prefix id for each item if no id is specified on each item.
- name: hasNav
  type: boolean
  required: false
  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.
- 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: disabled
    type: boolean
    required: false
    description: If true, nav will be disabled.
  - name: sub
    type: boolean
    required: false
    description: If true, content provided will be revealed when the item is expanded.
    - name: html
      type: string
      required: true
      description: Provide content for the sub.
    - name: classes
      type: string
      required: false
      description: Classes to add to the sub container.
  - name: icon
    type: object
    required: false
    description: This is the optional icon at left
    - name: html
      type: string
      required: true
      description: Use this html to insert a custom svg inline icon. If this is set, the type are not used.
    - name: containerClasses
      type: string
      required: false
      description: Classes applied to the parent div of icon. Useful to vertical align the icon.
  - name: containerClasses
    type: string
    required: false
    description: Classes to add to the parent `<li> of the item.
  - 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.

Por defecto

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro

{% from "components/links-list/_macro.links-list.njk" import componentLinksList %}

{{ componentLinksList({
  "idPrefix": "default",
  "items": [
    {
      "href": "#",
      "text": "Item 1"
    },
    {
      "href": "#",
      "text": "Item 2"
    },
    {
      "href": "#",
      "text": "Item 3"
    }
  ],
  "attributes": {
    "aria-label": "Menu destacado"
  }
}) }}

Con icono

Mostrar códigodel ejemplo: Con icono

Contenido

Nunjucks macro

{% from "components/links-list/_macro.links-list.njk" import componentLinksList %}

{{ componentLinksList({
  "idPrefix": "with-icon",
  "items": [
    {
      "href": "#",
      "text": "Item 1",
      "icon": {
        "html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" height=\"1em\" width=\"1em\" class=\"inline-block align-middle\"><path d=\"M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z\" fill=\"currentColor\"></path></svg>"
      }
    },
    {
      "href": "#",
      "text": "Item 2",
      "icon": {
        "html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" height=\"1em\" width=\"1em\" class=\"inline-block align-middle\"><path d=\"M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z\" fill=\"currentColor\"></path></svg>"
      }
    },
    {
      "href": "#",
      "text": "Item 3",
      "icon": {
        "html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" height=\"1em\" width=\"1em\" class=\"inline-block align-middle\"><path d=\"M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z\" fill=\"currentColor\"></path></svg>"
      }
    }
  ],
  "attributes": {
    "aria-label": "Menu destacado"
  }
}) }}

Con clases de css aplicadas

Mostrar códigodel ejemplo: Con clases de css aplicadas

Contenido

Nunjucks macro

{% from "components/links-list/_macro.links-list.njk" import componentLinksList %}

{{ componentLinksList({
  "idPrefix": "with-classes-applied",
  "items": [
    {
      "href": "#",
      "text": "Item grande con icono",
      "classes": "flex justify-between items-center py-base text-2xl",
      "icon": {
        "html": "<div class=\"flex items-center justify-center p-sm -ml-sm bg-neutral-lighter rounded-full text-4xl\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" height=\"1em\" width=\"1em\" class=\"inline-block align-middle\"><path d=\"M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z\" fill=\"currentColor\"></path></svg></div>"
      }
    },
    {
      "href": "#",
      "text": "Item grande con icono",
      "classes": "flex justify-between items-center py-base text-2xl",
      "icon": {
        "html": "<div class=\"flex items-center justify-center p-sm -ml-sm bg-neutral-lighter rounded-full text-4xl\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" height=\"1em\" width=\"1em\" class=\"inline-block align-middle\"><path d=\"M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z\" fill=\"currentColor\"></path></svg></div>"
      }
    },
    {
      "href": "#",
      "text": "Item grande con icono",
      "classes": "flex justify-between items-center py-base text-2xl",
      "icon": {
        "html": "<div class=\"flex items-center justify-center p-sm -ml-sm bg-neutral-lighter rounded-full text-4xl\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" height=\"1em\" width=\"1em\" class=\"inline-block align-middle\"><path d=\"M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z\" fill=\"currentColor\"></path></svg></div>"
      }
    }
  ],
  "attributes": {
    "aria-label": "Menu destacado"
  }
}) }}

Con containerclasses aplicado

Mostrar códigodel ejemplo: Con containerclasses aplicado

Contenido

Nunjucks macro

{% from "components/links-list/_macro.links-list.njk" import componentLinksList %}

{{ componentLinksList({
  "idPrefix": "with-containerclasses",
  "items": [
    {
      "href": "#",
      "text": "Item 1",
      "containerClasses": "px-base border border-neutral-base my-sm",
      "icon": {
        "html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" height=\"1em\" width=\"1em\" class=\"inline-block align-middle\"><path d=\"M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z\" fill=\"currentColor\"></path></svg>"
      }
    },
    {
      "href": "#",
      "text": "Item 2",
      "containerClasses": "my-base px-base border border-neutral-base rounded",
      "icon": {
        "html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" height=\"1em\" width=\"1em\" class=\"inline-block align-middle\"><path d=\"M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z\" fill=\"currentColor\"></path></svg>"
      }
    },
    {
      "href": "#",
      "text": "Item 3",
      "containerClasses": "px-base border border-neutral-base my-sm",
      "icon": {
        "html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" height=\"1em\" width=\"1em\" class=\"inline-block align-middle\"><path d=\"M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z\" fill=\"currentColor\"></path></svg>"
      }
    }
  ],
  "attributes": {
    "aria-label": "Menu destacado"
  }
}) }}

Con item deshabilitado

Mostrar códigodel ejemplo: Con item deshabilitado

Contenido

Nunjucks macro

{% from "components/links-list/_macro.links-list.njk" import componentLinksList %}

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

Sin href

Mostrar códigodel ejemplo: Sin href

Contenido

Nunjucks macro

{% from "components/links-list/_macro.links-list.njk" import componentLinksList %}

{{ componentLinksList({
  "idPrefix": "without-href",
  "items": [
    {
      "href": "#",
      "text": "Item 1"
    },
    {
      "text": "Item 2"
    },
    {
      "href": "#",
      "text": "Item 3"
    }
  ],
  "attributes": {
    "aria-label": "Menu destacado"
  }
}) }}

Con item activo

Mostrar códigodel ejemplo: Con item activo

Contenido

Nunjucks macro

{% from "components/links-list/_macro.links-list.njk" import componentLinksList %}

{{ componentLinksList({
  "idPrefix": "with-active-item",
  "items": [
    {
      "href": "#",
      "text": "Item 1"
    },
    {
      "href": "#",
      "text": "Item 2",
      "active": true
    },
    {
      "href": "#",
      "text": "Item 3"
    }
  ],
  "attributes": {
    "aria-label": "Menu destacado"
  }
}) }}

Con target en los enlaces

Mostrar códigodel ejemplo: Con target en los enlaces

Contenido

Nunjucks macro

{% from "components/links-list/_macro.links-list.njk" import componentLinksList %}

{{ componentLinksList({
  "idPrefix": "with-target-in-links",
  "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 destacado"
  }
}) }}

Con un texto de item muy largo

Mostrar códigodel ejemplo: Con un texto de item muy largo

Contenido

Nunjucks macro

{% from "components/links-list/_macro.links-list.njk" import componentLinksList %}

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

Con contenido descriptivo en cada item

Mostrar códigodel ejemplo: Con contenido descriptivo en cada item

Contenido

Nunjucks macro

{% from "components/links-list/_macro.links-list.njk" import componentLinksList %}

{{ componentLinksList({
  "idPrefix": "descriptive-example",
  "items": [
    {
      "href": "#",
      "text": "Item 1",
      "sub": {
        "html": "<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p>"
      }
    },
    {
      "href": "#",
      "text": "Item 2",
      "sub": {
        "html": "<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p>"
      }
    },
    {
      "href": "#",
      "text": "Item 3",
      "sub": {
        "html": "<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p>"
      }
    }
  ],
  "attributes": {
    "aria-label": "Menu destacado"
  }
}) }}

Con idprefix

Muestra el código para ver el idPrefix aplicado.

Mostrar códigodel ejemplo: Con idprefix

Contenido

Nunjucks macro

{% from "components/links-list/_macro.links-list.njk" import componentLinksList %}

{{ componentLinksList({
  "idPrefix": "site-menu-item",
  "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 destacado"
  }
}) }}

Con ids individuales

Muestra el código para ver los ids aplicados.

Mostrar códigodel ejemplo: Con ids individuales

Contenido

Nunjucks macro

{% from "components/links-list/_macro.links-list.njk" import componentLinksList %}

{{ componentLinksList({
  "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": "Menu destacado"
  }
}) }}

Con atributos

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

Mostrar códigodel ejemplo: Con atributos

Contenido

Nunjucks macro

{% from "components/links-list/_macro.links-list.njk" import componentLinksList %}

{{ componentLinksList({
  "attributes": {
    "aria-label": "Menu destacado"
  },
  "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"
      },
      "sub": {
        "attributes": {
          "data-attribute-1": "value-A",
          "data-attribute-2": "value-B",
          "data-attribute-3": "value-C"
        },
        "html": "<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p><p>Este es otro párrafo.</p>"
      }
    },
    {
      "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 el parámetro "hasNav": false para no rodear el componente con una etiqueta <nav>, asumiendo que el componente estará rodeado con un nav personalizado con su propio aria-label si lo necesita.

Mostrar códigodel ejemplo: Sin nav

Contenido

Nunjucks macro

{% from "components/links-list/_macro.links-list.njk" import componentLinksList %}

{{ componentLinksList({
  "idPrefix": "hasnav-false",
  "hasNav": false,
  "items": [
    {
      "href": "#",
      "text": "Item 1"
    },
    {
      "href": "#",
      "text": "Item 2"
    },
    {
      "href": "#",
      "text": "Item 3"
    }
  ],
  "attributes": {
    "aria-label": "Menu destacado"
  }
}) }}

Ejemplo mixto

Mostrar códigodel ejemplo: Ejemplo mixto

Contenido

Nunjucks macro

{% from "components/links-list/_macro.links-list.njk" import componentLinksList %}

{{ componentLinksList({
  "idPrefix": "mixed-example",
  "items": [
    {
      "href": "#",
      "html": "<strong>Deudas</strong>",
      "classes": "flex justify-between items-center py-base text-lg",
      "sub": {
        "html": "<p class=\"c-paragraph-base mb-0\">Tienes <span class=\"text-alert-base\">deudas fuera de plazo</span></p>"
      }
    },
    {
      "href": "#",
      "html": "<strong>Historial de pagos</strong>",
      "classes": "flex justify-between items-center py-base text-lg"
    },
    {
      "href": "#",
      "html": "<strong>Certificado de corriente de pago</strong>",
      "classes": "flex justify-between items-center py-base text-lg",
      "sub": {
        "html": "<p class=\"c-paragraph-base mb-0\">Tienes <strong>1 certificado disponible</strong>.</p>"
      }
    },
    {
      "href": "#",
      "html": "<strong>Valoraciones de inmuebles</strong>",
      "classes": "flex justify-between items-center py-base text-lg"
    },
    {
      "href": "#",
      "html": "<strong>Aplazamiento y fraccionamiento</strong>",
      "classes": "flex justify-between items-center py-base text-lg",
      "sub": {
        "html": "<p class=\"c-paragraph-base mb-0\">Tienes 1 deuda fraccionada, has pagado <strong>2 fracciones</strong> de 5.</p>"
      }
    }
  ],
  "attributes": {
    "aria-label": "Menu destacado"
  }
}) }}