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

Descripción visual

Tres botones rectangulares dispuestos horizontalmente con bordes azules de 1px, fondo blanco y texto azul en negrita. Los botones tienen esquinas ligeramente redondeadas y espaciado uniforme entre ellos. El conjunto está contenido en un rectángulo con borde gris claro.

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

Descripción visual

Tres botones rectangulares dispuestos horizontalmente donde dos tienen bordes azules con texto azul en negrita y fondo blanco, mientras uno presenta borde gris claro con texto gris claro y fondo blanco. Los botones tienen esquinas ligeramente redondeadas con espaciado uniforme. El conjunto está contenido en un rectángulo con borde gris claro.

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.

Descripción visual

Tres botones rectangulares dispuestos horizontalmente donde dos tienen bordes azules con texto azul en negrita y fondo blanco, mientras uno presenta borde azul más grueso de 2px con texto azul oscuro en negrita y fondo blanco. Los botones tienen esquinas ligeramente redondeadas con espaciado uniforme. El conjunto está contenido en un rectángulo con borde gris claro.

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.

Descripción visual

Fila horizontal de tres botones rectangulares con bordes azul oscuro de 1px y fondo blanco. Cada botón muestra texto azul oscuro en peso normal con un símbolo de cierre "×" alineado a la derecha. Espaciado uniforme entre botones, altura consistente de aproximadamente 32px.

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

Descripción visual

Fila horizontal de tres botones rectangulares con bordes azul oscuro de 1px y fondo blanco. Texto azul oscuro en peso normal centrado dentro de cada botón. Botones de tamaño compacto con padding interno, separados por espacios en blanco uniformes.

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

Descripción visual

Fila horizontal de cuatro botones rectangulares con bordes azul oscuro de 1px y fondo blanco. Texto azul oscuro en peso normal, algunos botones incluyen símbolo de cierre "×" alineado a la derecha del texto. Botones de altura aproximada de 32px con espaciado horizontal uniforme entre elementos.

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.

Descripción visual

Barra de navegación con tres botones dispuestos horizontalmente. Cada botón tiene texto azul(Item 1, Item 2, Item 3) , borde azul de 1px, fondo blanco, y un indicador de dropdown(▼) . Los botones tienen padding generoso y tamaño de fuente considerable.

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.

Descripción visual

Barra de navegación con tres botones dispuestos horizontalmente. Cada botón tiene texto azul(Item 1, Item 2, Item 3) , borde azul de 1px, fondo blanco, y un indicador de dropdown(▼) . Los botones tienen padding compacto y tamaño de fuente reducido.

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.

Descripción visual

Barra de navegación con tres botones dispuestos horizontalmente. El primer botón tiene fondo azul oscuro sólido con texto blanco. Los dos botones siguientes tienen fondo azul-gris claro con texto blanco, todos con indicadores de dropdown(▼) y bordes visibles.

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.

Descripción visual

Menú de navegación horizontal con tres ítems de texto en color azul enlace, espaciados uniformemente. Fondo blanco o transparente sin bordes visibles. Los ítems aparecen como enlaces clickeables con texto de tamaño estándar y peso regular.

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

Descripción visual

Menú de navegación con cuatro ítems dentro de un contenedor con borde gris claro de 1px. Los tres primeros ítems(texto azul enlace) están alineados a la izquierda con espaciado mínimo entre ellos, mientras que el cuarto ítem está posicionado en el extremo derecho del contenedor. Fondo blanco y altura uniforme para todos los elementos.

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

Descripción visual

Menú de navegación con dos ítems dentro de un contenedor con borde gris claro de 1px y fondo blanco. El primer ítem presenta texto en gris atenuado indicando estado deshabilitado, seguido de un segundo ítem con texto en azul enlace activo. Altura uniforme del contenedor con padding interno visible.

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.

Descripción visual

Fila horizontal con tres selectores desplegables de tamaño pequeño. Cada selector tiene fondo blanco, borde gris claro de 1px, texto negro y flecha hacia abajo indicando menú. Selector de la derecha tiene alineación a la derecha, los otros dos a la izquierda.

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

Descripción visual

Fila horizontal de cinco botones rectangulares con borde azul de 1px y texto azul en negrita. Cada botón tiene fondo blanco, esquinas ligeramente redondeadas y padding uniforme. Los botones están espaciados uniformemente con separación mínima entre ellos.

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

Descripción visual

Fila horizontal de dos botones rectangulares con borde gris de 1px y texto negro. Cada botón tiene fondo blanco, esquinas ligeramente redondeadas y padding horizontal amplio. Los botones están separados por espacio pequeño entre ellos.

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

Descripción visual

Fila horizontal de cinco botones con borde azul de 1px y fondo blanco. Cada botón contiene texto azul en peso regular, etiquetados secuencialmente("Opción 1" hasta "Opción 5"). Los botones tienen espaciado uniforme entre ellos y esquinas ligeramente redondeadas.

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

Descripción visual

Fila horizontal de seis elementos interactivos con bordes azules de 1px y fondos blancos. Incluye botones con texto azul, botones con texto azul y flechas desplegables(indicador "▼"), y un elemento con etiqueta de ítem deshabilitado en texto gris con indicador "▼". Los elementos tienen espaciado consistente y esquinas redondeadas, presentando estados habilitado y deshabilitado visualmente diferenciados.

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