desy-html

Nav

Mostrar parámetros

Parámetros del componente

              params:
- name: hasNav
  type: boolean
  required: false
  description: Defaults to `true`. If `false`, there will be no nav assuming the component will be wrapped with a custom nav with it's own aria-label.
- name: idPrefix
  type: string
  required: true
  description: String to prefix id for each item if no id is specified on each item. If not passed, fall back to using the name option instead.
- name: items
  type: array
  required: true
  description: Array of items objects.
  params:
  - name: href
    type: string
    required: true
    description: Item link. If `hasNav` is `true`, use `#` here.
  - 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 item. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML to use within each item. 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: active
    type: boolean
    required: false
    description: If true, item will be active.
  - name: disabled
    type: boolean
    required: false
    description: If true, item will be disabled.
  - name: divider
    type: boolean
    required: false
    description: If true, a divider border will be shown after the item.
  - name: classes
    type: string
    required: false
    description: Classes to add to the item.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the item.
- name: classes
  type: string
  required: false
  description: Classes to add to the nav tag container.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the nav tag container.

Por defecto

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro

{% from "components/nav/_macro.nav.njk" import componentNav %}

{{ componentNav({
  "idPrefix": "nav-default",
  "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": "Navegación local"
  }
}) }}

Con item deshabilitado

Mostrar códigodel ejemplo: Con item deshabilitado

Contenido

Nunjucks macro

{% from "components/nav/_macro.nav.njk" import componentNav %}

{{ componentNav({
  "idPrefix": "nav-with-disabled-item",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción deshabilitada 3",
      "disabled": true
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ],
  "attributes": {
    "aria-label": "Navegación local"
  }
}) }}

Con item activo

Añade active: true a un item para mostrarlo activo inicialmente. También puedes usar con javascript la función global activateItemNav(elementMenu, idItemSeleccionado) para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe activateItemNav("mi-menu", "nav-with-active-item-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/nav/_macro.nav.njk" import componentNav %}

{{ componentNav({
  "idPrefix": "nav-with-active-item",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4",
      "active": true
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ],
  "attributes": {
    "id": "mi-menu",
    "aria-label": "Navegación local"
  }
}) }}

Con target en enlaces

Mostrar códigodel ejemplo: Con target en enlaces

Contenido

Nunjucks macro

{% from "components/nav/_macro.nav.njk" import componentNav %}

{{ componentNav({
  "idPrefix": "nav-with-target-in-links",
  "items": [
    {
      "href": "#",
      "text": "Opción 1",
      "target": "_blank",
      "attributes": {
        "title": "Se abre en pestaña nueva"
      }
    },
    {
      "href": "#",
      "text": "Opción 2",
      "target": "_blank",
      "attributes": {
        "title": "Se abre en pestaña nueva"
      }
    },
    {
      "href": "#",
      "text": "Opción 3",
      "target": "_blank",
      "attributes": {
        "title": "Se abre en pestaña nueva"
      }
    },
    {
      "href": "#",
      "text": "Opción 4",
      "target": "_blank",
      "attributes": {
        "title": "Se abre en pestaña nueva"
      }
    },
    {
      "href": "#",
      "text": "Opción 5",
      "target": "_blank",
      "attributes": {
        "title": "Se abre en pestaña nueva"
      }
    }
  ],
  "attributes": {
    "aria-label": "Navegación local"
  }
}) }}

Con divisor

Mostrar códigodel ejemplo: Con divisor

Contenido

Nunjucks macro

{% from "components/nav/_macro.nav.njk" import componentNav %}

{{ componentNav({
  "idPrefix": "nav-with-divider",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3 con divisor",
      "divider": true
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ],
  "attributes": {
    "aria-label": "Navegación local"
  }
}) }}

Con clases de css aplicadas

Mostrar códigodel ejemplo: Con clases de css aplicadas

Contenido

Nunjucks macro

{% from "components/nav/_macro.nav.njk" import componentNav %}

{{ componentNav({
  "idPrefix": "nav-with-classes-applied",
  "classes": "p-base bg-primary-light",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2",
      "classes": "bg-white"
    },
    {
      "href": "#",
      "text": "Opción 3"
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Opción 5"
    }
  ],
  "attributes": {
    "aria-label": "Navegación local"
  }
}) }}

Con idprefix

Mostrar código para ver el idPrefix aplicado.

Mostrar códigodel ejemplo: Con idprefix

Contenido

Nunjucks macro

{% from "components/nav/_macro.nav.njk" import componentNav %}

{{ componentNav({
  "idPrefix": "site-menu-item-1",
  "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": "Navegación local"
  }
}) }}

Con ids individuales

Mostrar código para ver los id aplicados.

Mostrar códigodel ejemplo: Con ids individuales

Contenido

Nunjucks macro

{% from "components/nav/_macro.nav.njk" import componentNav %}

{{ componentNav({
  "idPrefix": "nav-with-individual-ids",
  "items": [
    {
      "href": "#",
      "text": "Opción 1",
      "id": "option-A"
    },
    {
      "href": "#",
      "text": "Opción 2",
      "id": "option-B"
    },
    {
      "href": "#",
      "text": "Opción 3",
      "id": "option-C"
    },
    {
      "href": "#",
      "text": "Opción 4",
      "id": "option-D"
    },
    {
      "href": "#",
      "text": "Opción 5",
      "id": "option-E"
    }
  ],
  "attributes": {
    "aria-label": "Navegación local"
  }
}) }}

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/nav/_macro.nav.njk" import componentNav %}

{{ componentNav({
  "idPrefix": "nav-with-attributes",
  "attributes": {
    "aria-label": "Navegación local"
  },
  "items": [
    {
      "href": "#",
      "text": "Opción 1",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    },
    {
      "href": "#",
      "text": "Opción 2",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    },
    {
      "href": "#",
      "text": "Opción 3",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    },
    {
      "href": "#",
      "text": "Opción 4",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    },
    {
      "href": "#",
      "text": "Opción 5",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    }
  ]
}) }}

Sin nav

Usa "hasNav": false si el Nav se abre con un Dropdown. No se usará el tag <nav>, sólo un simple <ul>, asumiendo que rodearás a tu componente manualmente con un <nav> personalizado con su propio aria-label si es necesario. También podemos usar clases para controlar la anchura del nav dentro del Dropdown.

Mostrar códigodel ejemplo: Sin nav

Contenido

Nunjucks macro

{% from "components/nav/_macro.nav.njk" import componentNav %}

{{ componentNav({
  "hasNav": false,
  "idPrefix": "site-menu-item-2",
  "items": [
    {
      "href": "#",
      "text": "Opción 1"
    },
    {
      "href": "#",
      "text": "Opción 2"
    },
    {
      "href": "#",
      "text": "Opción 3",
      "active": true
    },
    {
      "href": "#",
      "text": "Opción 4"
    },
    {
      "href": "#",
      "text": "Clases max-width aplicadas para evitar demasiada anchura dentro de los menus y forzar a saltos de línea"
    }
  ],
  "classes": "w-max max-w-64",
  "attributes": {
    "aria-label": "Navegación local"
  }
}) }}