desy-html

Menu-horizontal

Mostrar parámetros

Parámetros del componente

              params:
- name: idPrefix
  type: string
  required: false
  description: String to prefix id for each nav item if no id is specified on each item. If not passed, fall back to using the name option instead.
- name: items
  type: array
  required: true
  description: Array of nav items objects.
  params:
  - name: href
    type: string
    required: true
    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. 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. If `html` is provided, the `text` argument will be ignored.
  - name: id
    type: string
    required: false
    description: Specific id attribute for the nav item. If omitted, then idPrefix option will be applied.
  - name: active
    type: boolean
    required: false
    description: If true, item will be active.
  - name: disabled
    type: boolean
    required: false
    description: If true, nav item 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.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the nav tag.

Por defecto

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro

{% from "components/menu-horizontal/_macro.menu-horizontal.njk" import componentMenuHorizontal %}

{{ componentMenuHorizontal({
  "items": [
    {
      "href": "http://www.google.com",
      "text": "Opción 1"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 2"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 3"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 4"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 5"
    }
  ],
  "attributes": {
    "aria-label": "Menu horizontal"
  }
}) }}

Con item deshabilitado

Mostrar códigodel ejemplo: Con item deshabilitado

Contenido

Nunjucks macro

{% from "components/menu-horizontal/_macro.menu-horizontal.njk" import componentMenuHorizontal %}

{{ componentMenuHorizontal({
  "items": [
    {
      "href": "http://www.google.com",
      "text": "Opción 1"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 2"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción deshabilitada 3",
      "disabled": true
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 4"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 5"
    }
  ],
  "attributes": {
    "aria-label": "Menu horizontal"
  }
}) }}

Con item activo

Mostrar códigodel ejemplo: Con item activo

Contenido

Nunjucks macro

{% from "components/menu-horizontal/_macro.menu-horizontal.njk" import componentMenuHorizontal %}

{{ componentMenuHorizontal({
  "items": [
    {
      "href": "http://www.google.com",
      "text": "Opción 1"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 2"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 3"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 4 activa",
      "active": true
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 5"
    }
  ],
  "attributes": {
    "aria-label": "Menu horizontal"
  }
}) }}

Con target en enlaces

Mostrar códigodel ejemplo: Con target en enlaces

Contenido

Nunjucks macro

{% from "components/menu-horizontal/_macro.menu-horizontal.njk" import componentMenuHorizontal %}

{{ componentMenuHorizontal({
  "items": [
    {
      "href": "http://www.google.com",
      "text": "Opción 1",
      "target": "_blank"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 2",
      "target": "_blank"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 3",
      "target": "_blank"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 4",
      "target": "_blank"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 5",
      "target": "_blank"
    }
  ],
  "attributes": {
    "aria-label": "Menu horizontal"
  }
}) }}

Con clases de css aplicadas

Clase modificadora aplicada: .c-menu-horizontal--tabs

Mostrar códigodel ejemplo: Con clases de css aplicadas

Contenido

Nunjucks macro

{% from "components/menu-horizontal/_macro.menu-horizontal.njk" import componentMenuHorizontal %}

{{ componentMenuHorizontal({
  "classes": "c-menu-horizontal--tabs",
  "items": [
    {
      "href": "http://www.google.com",
      "text": "Opción 1"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 2",
      "active": true
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 3"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 4",
      "disabled": true
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 5"
    }
  ],
  "attributes": {
    "aria-label": "Menu horizontal"
  }
}) }}

Con clases aplicadas: tabs en móvil

Clases modificadoras aplicadas: .c-menu-horizontal--tabs-mobile y .c-menu-horizontal--scroll

Mostrar códigodel ejemplo: Con clases aplicadas: tabs en móvil

Contenido

Nunjucks macro

{% from "components/menu-horizontal/_macro.menu-horizontal.njk" import componentMenuHorizontal %}

{{ componentMenuHorizontal({
  "classes": "c-menu-horizontal--tabs-mobile c-menu-horizontal--scroll",
  "items": [
    {
      "href": "#",
      "html": "<span class=\"flex flex-col items-center\"><span class=\"block\"><svg class=\"w-6 h-6 mb-xs\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><g transform=\"scale(2)\"><circle cx=\"2.5\" cy=\"4\" r=\"2.5\" fill=\"currentColor\"/><path d=\"M8.5 5H23a1 1 0 0 0 0-2H8.5a1 1 0 0 0 0 2Z\" fill=\"currentColor\"/><circle cx=\"2.5\" cy=\"12\" r=\"2.5\" fill=\"currentColor\"/><path d=\"M23 11H8.5a1 1 0 0 0 0 2H23a1 1 0 0 0 0-2Z\" fill=\"currentColor\"/><circle cx=\"2.5\" cy=\"20\" r=\"2.5\" fill=\"currentColor\"/><path d=\"M23 19H8.5a1 1 0 0 0 0 2H23a1 1 0 0 0 0-2Z\" fill=\"currentColor\"/></g></svg></span><span class=\"block text-sm\">Seguimiento</span></span>"
    },
    {
      "href": "#",
      "html": "<span class=\"flex flex-col items-center\"><span class=\"block\"><svg class=\"w-6 h-6 mb-xs\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M11 8h3.5a1 1 0 0 0 0-2H11a1 1 0 0 0 0 2ZM11 12h7.5a1 1 0 0 0 0-2H11a1 1 0 0 0 0 2Z\" fill=\"currentColor\" transform=\"scale(2)\"/><path d=\"M23.71 5.71 18.29.29a1 1 0 0 0-.7-.29H8a2 2 0 0 0-2 2v11.17c0 .19.1.33.25.33h1.5a.25.25 0 0 0 .25-.25v-11A.25.25 0 0 1 8.25 2h8.82a.31.31 0 0 1 .18.07l4.68 4.68a.31.31 0 0 1 .07.18v12.82a.25.25 0 0 1-.25.25h-6a.25.25 0 0 0-.25.25v1.5a.25.25 0 0 0 .25.25H22a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7Z\" fill=\"currentColor\" transform=\"scale(2)\"/><path d=\"M13 15H6a1 1 0 0 1-.8-.4l-.9-1.2a1 1 0 0 0-.8-.4H1a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1Z\" fill=\"currentColor\" transform=\"scale(2)\"/></svg></span><span class=\"block text-sm\">Documentos</span></span>",
      "active": true
    },
    {
      "href": "#",
      "html": "<span class=\"flex flex-col items-center\"><span class=\"block\"><svg class=\"w-6 h-6 mb-xs\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM19.5 22h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h1.75a.25.25 0 0 1 .25.25V13a.5.5 0 0 0 .31.46.47.47 0 0 0 .54-.11l2-2a.27.27 0 0 1 .36 0l2 2a.47.47 0 0 0 .35.15.43.43 0 0 0 .19 0 .5.5 0 0 0 .25-.5V2.25a.25.25 0 0 1 .25-.25H15a.49.49 0 0 1 .36.15l4.53 4.53A.49.49 0 0 1 20 7v14.5a.5.5 0 0 1-.5.5Z\" fill=\"currentColor\" transform=\"scale(2)\"/></svg></span><span class=\"block text-sm\">Notificaciones</span></span>"
    }
  ],
  "attributes": {
    "aria-label": "Menu horizontal"
  }
}) }}

Con idprefix

Mostrar código para ver el idPrefix aplicado

Mostrar códigodel ejemplo: Con idprefix

Contenido

Nunjucks macro

{% from "components/menu-horizontal/_macro.menu-horizontal.njk" import componentMenuHorizontal %}

{{ componentMenuHorizontal({
  "idPrefix": "site-menu-item",
  "items": [
    {
      "href": "http://www.google.com",
      "text": "Opción 1"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 2"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 3"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 4"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 5"
    }
  ],
  "attributes": {
    "aria-label": "Menu horizontal"
  }
}) }}

Con ids individuales

Mostrar código para ver los id aplicados

Mostrar códigodel ejemplo: Con ids individuales

Contenido

Nunjucks macro

{% from "components/menu-horizontal/_macro.menu-horizontal.njk" import componentMenuHorizontal %}

{{ componentMenuHorizontal({
  "items": [
    {
      "href": "http://www.google.com",
      "text": "Opción 1",
      "id": "option-A"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 2",
      "id": "option-B"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 3",
      "id": "option-C"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 4",
      "id": "option-D"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 5",
      "id": "option-E"
    }
  ],
  "attributes": {
    "aria-label": "Menu horizontal"
  }
}) }}

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/menu-horizontal/_macro.menu-horizontal.njk" import componentMenuHorizontal %}

{{ componentMenuHorizontal({
  "attributes": {
    "id": "nav-id-example",
    "aria-label": "Menu horizontal"
  },
  "items": [
    {
      "href": "http://www.google.com",
      "text": "Opción 1",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 2",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 3",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 4",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 5",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    }
  ]
}) }}