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

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-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "active-sub-item-example-2",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "active-sub-item-example-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "active-sub-item-example-3",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "active-sub-item-example-3"
        }
      }
    }
  ],
  "attributes": {
    "aria-label": "Menu navigation",
    "id": "mi-sub-menu"
  }
}) }}

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

Grande

Usando clases para mostrar los items grandes.

Mostrar códigodel ejemplo: Grande

Contenido

Nunjucks macro
{% from "components/menu-navigation/_macro.menu-navigation.njk" import componentMenuNavigation %}
{{ componentMenuNavigation({
  "idPrefix": "large-example",
  "items": [
    {
      "text": "Item 1",
      "id": "large-example-item-1",
      "classes": "c-menu-navigation__button--lg -mr-sm",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "large-example-item-1"
        }
      }
    },
    {
      "text": "Item 2",
      "id": "large-example-item-2",
      "classes": "c-menu-navigation__button--lg -mr-sm",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "large-example-item-2"
        }
      }
    },
    {
      "text": "Item 3",
      "id": "large-example-item-3",
      "classes": "c-menu-navigation__button--lg -mr-sm",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "large-example-item-3"
        }
      }
    }
  ],
  "attributes": {
    "aria-label": "Menu navigation"
  }
}) }}

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