DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

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

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: 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

Mostrar códigodel ejemplo: Por defecto

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

Con item deshabilitado

Mostrar códigodel ejemplo: Con item deshabilitado

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

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.

Mostrar códigodel ejemplo: Con item activo

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

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.

Mostrar códigodel ejemplo: Con sub-item activo

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-item-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-item-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-item-2"
        }
      }
    }
  ],
  "attributes": {
    "aria-label": "Menu navigation",
    "id": "mi-sub-menu"
  }
}) }}

Con target en enlaces

Mostrar códigodel ejemplo: Con target en enlaces

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

Con divisores

Mostrar códigodel ejemplo: Con divisores

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

Peque

Usando clases para mostrar los items pequeños.

Mostrar códigodel ejemplo: Peque

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

Primario

Usando clases para mostrar los items primarios.

Mostrar códigodel ejemplo: Primario

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

Transparente

Usando clases para mostrar los items transparentes.

Mostrar códigodel ejemplo: Transparente

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

Con el último item a la derecha

Mostrar códigodel ejemplo: Con el último item a la derecha

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

Con un texto de item muy largo

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

Contenido

Nunjucks macro

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

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

Con deshabilitado o sin href en un padre e hijo

Mostrar códigodel ejemplo: Con deshabilitado o sin href en un padre e hijo

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

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.

Mostrar códigodel ejemplo: Con estilos de cabecera

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

Con idprefix

Mostrar código para ver el idPrefix aplicado

Mostrar códigodel ejemplo: Con idprefix

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

Con ids individuales

Mostrar códigodel ejemplo: Con ids individuales

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

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

Con items mixtos

Mostrar códigodel ejemplo: Con items mixtos

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