# Ejemplo de código de Menú horizontal. DESY. Sistema de diseño del Gobierno de Aragón.

## Componentes Índice de páginas

Componentes

# Menú horizontal

Navegación

El menú horizontal está compuesto por una serie de elementos que enlazan con cada una de las secciones principales del sitio web. Se trata de una forma sencilla de organizar el contenido y facilitar su acceso.

# Menu-horizontal

Mostrar parámetros

## Parámetros Nunjucks del componente: "Menu-horizontal"

```yaml
params:
- name: idPrefix
  type: string
  required: false
  description: String to prefix id for each nav item if no id is specified on each item. If not passed, fall back to using the name option instead.
- name: items
  type: array
  required: true
  description: Array of nav items objects.
  params:
  - name: href
    type: string
    required: true
    description: Item link.
  - name: target
    type: string
    required: false
    description: The target where the item should link to.
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text to use within each nav item. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML to use within each nav item. If `html` is provided, the `text` argument will be ignored.
  - name: id
    type: string
    required: false
    description: Specific id attribute for the nav item. If omitted, then idPrefix option will be applied.
  - name: active
    type: boolean
    required: false
    description: If true, item will be active.
  - name: disabled
    type: boolean
    required: false
    description: If true, nav item will be disabled.
  - name: classes
    type: string
    required: false
    description: Classes to add to the item.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the item.
- name: classes
  type: string
  required: false
  description: Classes to add to the nav.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the nav tag.
```

### Por defecto [#](#por-defecto)

Mostrar códigodel ejemplo: Por defecto

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/menu-horizontal/_macro.menu-horizontal.njk" import componentMenuHorizontal %}
{{ componentMenuHorizontal({
  "items": [
    {
      "href": "http://www.google.com",
      "text": "Opción 1"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 2"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 3"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 4"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 5"
    }
  ],
  "attributes": {
    "aria-label": "Menú horizontal"
  }
}) }}
```

##### HTML

```html
<!-- menu-horizontal -->
<nav data-module="c-menu-horizontal" class="c-menu-horizontal" aria-label="Menú horizontal">
  <ul class="c-menu-horizontal__list lg:flex lg:flex-wrap">
    <li>
      <a id="menu-item-1" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 1
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-2" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 2
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-3" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 3
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-4" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 4
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-5" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 5
        </span>
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-horizontal -->
```

### Con item deshabilitado [#](#con-item-deshabilitado)

Mostrar códigodel ejemplo: Con item deshabilitado

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/menu-horizontal/_macro.menu-horizontal.njk" import componentMenuHorizontal %}
{{ componentMenuHorizontal({
  "items": [
    {
      "href": "http://www.google.com",
      "text": "Opción 1"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 2"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción deshabilitada 3",
      "disabled": true
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 4"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 5"
    }
  ],
  "attributes": {
    "aria-label": "Menú horizontal"
  }
}) }}
```

##### HTML

```html
<!-- menu-horizontal -->
<nav data-module="c-menu-horizontal" class="c-menu-horizontal" aria-label="Menú horizontal">
  <ul class="c-menu-horizontal__list lg:flex lg:flex-wrap">
    <li>
      <a id="menu-item-1" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 1
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-2" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 2
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-3" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden no-underline! pointer-events-none">
        <span class="flex items-center pointer-events-none">
          Opción deshabilitada 3
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-4" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 4
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-5" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 5
        </span>
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-horizontal -->
```

### Con item activo [#](#con-item-activo)

Añade active: true a un item para mostrarlo activo inicialmente. También puedes usar con javascript la función global `activateItemMenuHorizontal(elementMenu, idItemSeleccionado)` para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe `activateItemMenuHorizontal('mi-menu-horizontal', 'menu-item-2')` para desactivar el item actual y activar el segundo item de este ejemplo.

Mostrar códigodel ejemplo: Con item activo

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/menu-horizontal/_macro.menu-horizontal.njk" import componentMenuHorizontal %}
{{ componentMenuHorizontal({
  "items": [
    {
      "href": "http://www.google.com",
      "text": "Opción 1"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 2"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 3"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 4",
      "active": true
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 5"
    }
  ],
  "attributes": {
    "aria-label": "Menú horizontal",
    "id": "mi-menu-horizontal"
  }
}) }}
```

##### HTML

```html
<!-- menu-horizontal -->
<nav data-module="c-menu-horizontal" class="c-menu-horizontal" aria-label="Menú horizontal" id="mi-menu-horizontal">
  <ul class="c-menu-horizontal__list lg:flex lg:flex-wrap">
    <li>
      <a id="menu-item-1" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 1
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-2" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 2
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-3" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 3
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-4" href="http://www.google.com" class="c-menu-horizontal__link c-menu-horizontal__active relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden" aria-current="page">
        <strong class="flex items-center pointer-events-none font-bold">Opción 4</strong>
      </a>
    </li>
    <li>
      <a id="menu-item-5" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 5
        </span>
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-horizontal -->
```

### Con target en enlaces [#](#con-target-en-enlaces)

Mostrar códigodel ejemplo: Con target en enlaces

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/menu-horizontal/_macro.menu-horizontal.njk" import componentMenuHorizontal %}
{{ componentMenuHorizontal({
  "items": [
    {
      "href": "http://www.google.com",
      "text": "Opción 1",
      "target": "_blank",
      "attributes": {
        "title": "Se abre en ventana nueva"
      }
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 2",
      "target": "_blank",
      "attributes": {
        "title": "Se abre en ventana nueva"
      }
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 3",
      "target": "_blank",
      "attributes": {
        "title": "Se abre en ventana nueva"
      }
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 4",
      "target": "_blank",
      "attributes": {
        "title": "Se abre en ventana nueva"
      }
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 5",
      "target": "_blank",
      "attributes": {
        "title": "Se abre en ventana nueva"
      }
    }
  ],
  "attributes": {
    "aria-label": "Menú horizontal"
  }
}) }}
```

##### HTML

```html
<!-- menu-horizontal -->
<nav data-module="c-menu-horizontal" class="c-menu-horizontal" aria-label="Menú horizontal">
  <ul class="c-menu-horizontal__list lg:flex lg:flex-wrap">
    <li>
      <a id="menu-item-1" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden" target="_blank" title="Se abre en ventana nueva">
        <span class="flex items-center pointer-events-none">
          Opción 1
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-2" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden" target="_blank" title="Se abre en ventana nueva">
        <span class="flex items-center pointer-events-none">
          Opción 2
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-3" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden" target="_blank" title="Se abre en ventana nueva">
        <span class="flex items-center pointer-events-none">
          Opción 3
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-4" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden" target="_blank" title="Se abre en ventana nueva">
        <span class="flex items-center pointer-events-none">
          Opción 4
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-5" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden" target="_blank" title="Se abre en ventana nueva">
        <span class="flex items-center pointer-events-none">
          Opción 5
        </span>
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-horizontal -->
```

### Con iconos en items [#](#con-iconos-en-items)

Mostrar códigodel ejemplo: Con iconos en items

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/menu-horizontal/_macro.menu-horizontal.njk" import componentMenuHorizontal %}
{{ componentMenuHorizontal({
  "items": [
    {
      "href": "#",
      "html": "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14' width='1em' height='1em' class='inline-block align-baseline mr-sm' aria-label='Archivo' focusable='false' role='img'><g id='new-file--empty-common-file-content'><path id='Subtract' fill='currentColor' fill-rule='evenodd' d='M7.875 0H2.5C2.10218 0 1.72064 0.158035 1.43934 0.43934C1.15804 0.720644 1 1.10218 1 1.5V12.5C1 12.8978 1.15804 13.2794 1.43934 13.5607C1.72064 13.842 2.10217 14 2.5 14H11.5C11.8978 14 12.2794 13.842 12.5607 13.5607C12.842 13.2794 13 12.8978 13 12.5V5.125H8.5C8.15482 5.125 7.875 4.84518 7.875 4.5V0ZM12.5821 3.875L9.125 0.417893V3.875H12.5821Z' clip-rule='evenodd'></path></g></svg> Opción 1"
    },
    {
      "href": "#",
      "html": "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14'  width='1em' height='1em' class='inline-block align-baseline mr-sm' aria-label='Link' focusable='false' role='img'><g id='link-chain--create-hyperlink-link-make-unlink-connection-chain'><path id='Union-1' fill='currentColor' fill-rule='evenodd' d='M7.6715 2.7426L7.67146 2.74264L6.70715 3.70707C6.31665 4.09761 5.68348 4.09765 5.29293 3.70715C4.90239 3.31665 4.90235 2.68348 5.29285 2.29293L6.25721 1.32847L6.25725 1.32843C8.02849 -0.442809 10.9002 -0.442809 12.6715 1.32843C14.4427 3.09965 14.4427 5.97136 12.6715 7.7426L12.6715 7.74264L11.7071 8.70707C11.3166 9.09761 10.6835 9.09765 10.2929 8.70715C9.90239 8.31664 9.90235 7.68348 10.2929 7.29293L11.2572 6.32847L11.2572 6.32843C12.2474 5.33824 12.2474 3.73283 11.2572 2.74264C10.2671 1.75247 8.66169 1.75245 7.6715 2.7426ZM3.70696 5.29285C4.0975 5.68335 4.09754 6.31652 3.70704 6.70707L2.74268 7.67153L2.74264 7.67157C1.75245 8.66176 1.75245 10.2672 2.74264 11.2574C3.73282 12.2475 5.33819 12.2475 6.32839 11.2574L6.32843 11.2574L7.29274 10.2929C7.68324 9.90239 8.31641 9.90235 8.70696 10.2929C9.0975 10.6834 9.09754 11.3165 8.70704 11.7071L7.74268 12.6715L7.74264 12.6716C5.9714 14.4428 3.09966 14.4428 1.32843 12.6716C-0.442796 10.9003 -0.442809 8.02864 1.32839 6.2574L1.32843 6.25736L2.29274 5.29293C2.68324 4.90239 3.31641 4.90235 3.70696 5.29285ZM9.20711 6.20711C9.59763 5.81658 9.59763 5.18342 9.20711 4.79289C8.81658 4.40237 8.18342 4.40237 7.79289 4.79289L4.79289 7.79289C4.40237 8.18342 4.40237 8.81658 4.79289 9.20711C5.18342 9.59763 5.81658 9.59763 6.20711 9.20711L9.20711 6.20711Z' clip-rule='evenodd'></path></g></svg> Opción 2"
    },
    {
      "href": "#",
      "html": "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14' width='1em' height='1em' class='inline-block align-baseline mr-sm' aria-label='Solicitud' focusable='false' role='img'><g id='clipboard-text--edition-form-task-checklist-edit-clipboard'><path id='Union-2' fill='currentColor' fill-rule='evenodd' d='M5.5 0C4.94772 0 4.5 0.447716 4.5 1V1.5C4.5 2.05229 4.94772 2.5 5.5 2.5H8.5C9.05229 2.5 9.5 2.05229 9.5 1.5V1C9.5 0.447715 9.05229 0 8.5 0H5.5ZM2.75 1H3.25V1.5C3.25 2.74264 4.25736 3.75 5.5 3.75H8.5C9.74264 3.75 10.75 2.74264 10.75 1.5V1H11.25C12.0784 1 12.75 1.67157 12.75 2.5V12.5C12.75 13.3284 12.0784 14 11.25 14H2.75C1.92157 14 1.25 13.3284 1.25 12.5V2.5C1.25 1.67157 1.92157 1 2.75 1ZM3.875 8.50049C3.875 8.15531 4.15482 7.87549 4.5 7.87549H9.5C9.84518 7.87549 10.125 8.15531 10.125 8.50049C10.125 8.84567 9.84518 9.12549 9.5 9.12549H4.5C4.15482 9.12549 3.875 8.84567 3.875 8.50049ZM4.5 10.3755C4.15482 10.3755 3.875 10.6553 3.875 11.0005C3.875 11.3457 4.15482 11.6255 4.5 11.6255H9.5C9.84518 11.6255 10.125 11.3457 10.125 11.0005C10.125 10.6553 9.84518 10.3755 9.5 10.3755H4.5Z' clip-rule='evenodd'></path></g></svg> Opción 3"
    }
  ],
  "attributes": {
    "id": "mi-menu-icons",
    "aria-label": "Menú horizontal"
  }
}) }}
```

##### HTML

```html
<!-- menu-horizontal -->
<nav data-module="c-menu-horizontal" class="c-menu-horizontal" id="mi-menu-icons" aria-label="Menú horizontal">
  <ul class="c-menu-horizontal__list lg:flex lg:flex-wrap">
    <li>
      <a id="menu-item-1" href="#" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Archivo" focusable="false" role="img">
            <g id="new-file--empty-common-file-content">
              <path id="Subtract" fill="currentColor" fill-rule="evenodd" d="M7.875 0H2.5C2.10218 0 1.72064 0.158035 1.43934 0.43934C1.15804 0.720644 1 1.10218 1 1.5V12.5C1 12.8978 1.15804 13.2794 1.43934 13.5607C1.72064 13.842 2.10217 14 2.5 14H11.5C11.8978 14 12.2794 13.842 12.5607 13.5607C12.842 13.2794 13 12.8978 13 12.5V5.125H8.5C8.15482 5.125 7.875 4.84518 7.875 4.5V0ZM12.5821 3.875L9.125 0.417893V3.875H12.5821Z" clip-rule="evenodd"></path>
            </g>
          </svg> Opción 1
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-2" href="#" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Link" focusable="false" role="img">
            <g id="link-chain--create-hyperlink-link-make-unlink-connection-chain">
              <path id="Union-1" fill="currentColor" fill-rule="evenodd" d="M7.6715 2.7426L7.67146 2.74264L6.70715 3.70707C6.31665 4.09761 5.68348 4.09765 5.29293 3.70715C4.90239 3.31665 4.90235 2.68348 5.29285 2.29293L6.25721 1.32847L6.25725 1.32843C8.02849 -0.442809 10.9002 -0.442809 12.6715 1.32843C14.4427 3.09965 14.4427 5.97136 12.6715 7.7426L12.6715 7.74264L11.7071 8.70707C11.3166 9.09761 10.6835 9.09765 10.2929 8.70715C9.90239 8.31664 9.90235 7.68348 10.2929 7.29293L11.2572 6.32847L11.2572 6.32843C12.2474 5.33824 12.2474 3.73283 11.2572 2.74264C10.2671 1.75247 8.66169 1.75245 7.6715 2.7426ZM3.70696 5.29285C4.0975 5.68335 4.09754 6.31652 3.70704 6.70707L2.74268 7.67153L2.74264 7.67157C1.75245 8.66176 1.75245 10.2672 2.74264 11.2574C3.73282 12.2475 5.33819 12.2475 6.32839 11.2574L6.32843 11.2574L7.29274 10.2929C7.68324 9.90239 8.31641 9.90235 8.70696 10.2929C9.0975 10.6834 9.09754 11.3165 8.70704 11.7071L7.74268 12.6715L7.74264 12.6716C5.9714 14.4428 3.09966 14.4428 1.32843 12.6716C-0.442796 10.9003 -0.442809 8.02864 1.32839 6.2574L1.32843 6.25736L2.29274 5.29293C2.68324 4.90239 3.31641 4.90235 3.70696 5.29285ZM9.20711 6.20711C9.59763 5.81658 9.59763 5.18342 9.20711 4.79289C8.81658 4.40237 8.18342 4.40237 7.79289 4.79289L4.79289 7.79289C4.40237 8.18342 4.40237 8.81658 4.79289 9.20711C5.18342 9.59763 5.81658 9.59763 6.20711 9.20711L9.20711 6.20711Z" clip-rule="evenodd"></path>
            </g>
          </svg> Opción 2
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-3" href="#" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Solicitud" focusable="false" role="img">
            <g id="clipboard-text--edition-form-task-checklist-edit-clipboard">
              <path id="Union-2" fill="currentColor" fill-rule="evenodd" d="M5.5 0C4.94772 0 4.5 0.447716 4.5 1V1.5C4.5 2.05229 4.94772 2.5 5.5 2.5H8.5C9.05229 2.5 9.5 2.05229 9.5 1.5V1C9.5 0.447715 9.05229 0 8.5 0H5.5ZM2.75 1H3.25V1.5C3.25 2.74264 4.25736 3.75 5.5 3.75H8.5C9.74264 3.75 10.75 2.74264 10.75 1.5V1H11.25C12.0784 1 12.75 1.67157 12.75 2.5V12.5C12.75 13.3284 12.0784 14 11.25 14H2.75C1.92157 14 1.25 13.3284 1.25 12.5V2.5C1.25 1.67157 1.92157 1 2.75 1ZM3.875 8.50049C3.875 8.15531 4.15482 7.87549 4.5 7.87549H9.5C9.84518 7.87549 10.125 8.15531 10.125 8.50049C10.125 8.84567 9.84518 9.12549 9.5 9.12549H4.5C4.15482 9.12549 3.875 8.84567 3.875 8.50049ZM4.5 10.3755C4.15482 10.3755 3.875 10.6553 3.875 11.0005C3.875 11.3457 4.15482 11.6255 4.5 11.6255H9.5C9.84518 11.6255 10.125 11.3457 10.125 11.0005C10.125 10.6553 9.84518 10.3755 9.5 10.3755H4.5Z" clip-rule="evenodd"></path>
            </g>
          </svg> Opción 3
        </span>
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-horizontal -->
```

### Con clases de css aplicadas: tipo enlaces [#](#con-clases-de-css-aplicadas-tipo-enlaces)

Clase modificadora aplicada: `.c-menu-horizontal--links`

Mostrar códigodel ejemplo: Con clases de css aplicadas: tipo enlaces

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/menu-horizontal/_macro.menu-horizontal.njk" import componentMenuHorizontal %}
{{ componentMenuHorizontal({
  "classes": "c-menu-horizontal--links",
  "items": [
    {
      "href": "http://www.google.com",
      "text": "Opción 1"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 2",
      "active": true
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 3"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 4",
      "disabled": true
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 5"
    }
  ],
  "attributes": {
    "id": "mi-menu-links",
    "aria-label": "Menú horizontal"
  }
}) }}
```

##### HTML

```html
<!-- menu-horizontal -->
<nav data-module="c-menu-horizontal" class="c-menu-horizontal c-menu-horizontal--links" id="mi-menu-links" aria-label="Menú horizontal">
  <ul class="c-menu-horizontal__list lg:flex lg:flex-wrap">
    <li>
      <a id="menu-item-1" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 1
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-2" href="http://www.google.com" class="c-menu-horizontal__link c-menu-horizontal__active relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden" aria-current="page">
        <strong class="flex items-center pointer-events-none font-bold">Opción 2</strong>
      </a>
    </li>
    <li>
      <a id="menu-item-3" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 3
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-4" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden no-underline! pointer-events-none">
        <span class="flex items-center pointer-events-none">
          Opción 4
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-5" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 5
        </span>
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-horizontal -->
```

### Con clases de css aplicadas: con separadores y texto pequeño [#](#con-clases-de-css-aplicadas-con-separadores-y-texto-pequeo)

Clase modificadora aplicada: `.c-menu-horizontal--links`. Clases aplicadas a cada item para cambiar el padding y añadir un borde lateral.

Mostrar códigodel ejemplo: Con clases de css aplicadas: con separadores y texto pequeño

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/menu-horizontal/_macro.menu-horizontal.njk" import componentMenuHorizontal %}
{{ componentMenuHorizontal({
  "classes": "c-menu-horizontal--links",
  "items": [
    {
      "href": "http://www.google.com",
      "text": "Opción 1",
      "classes": "lg:py-0! text-sm border-r border-r-neutral-base"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 2",
      "classes": "lg:py-0! text-sm border-r border-r-neutral-base",
      "active": true
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 3",
      "classes": "lg:py-0! text-sm border-r border-r-neutral-base"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 4",
      "classes": "lg:py-0! text-sm border-r border-r-neutral-base",
      "disabled": true
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 5",
      "classes": "lg:py-0! text-sm"
    }
  ],
  "attributes": {
    "id": "mi-menu-links-divider",
    "aria-label": "Menú horizontal"
  }
}) }}
```

##### HTML

```html
<!-- menu-horizontal -->
<nav data-module="c-menu-horizontal" class="c-menu-horizontal c-menu-horizontal--links" id="mi-menu-links-divider" aria-label="Menú horizontal">
  <ul class="c-menu-horizontal__list lg:flex lg:flex-wrap">
    <li>
      <a id="menu-item-1" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden lg:py-0! text-sm border-r border-r-neutral-base">
        <span class="flex items-center pointer-events-none">
          Opción 1
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-2" href="http://www.google.com" class="c-menu-horizontal__link c-menu-horizontal__active relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden lg:py-0! text-sm border-r border-r-neutral-base" aria-current="page">
        <strong class="flex items-center pointer-events-none font-bold">Opción 2</strong>
      </a>
    </li>
    <li>
      <a id="menu-item-3" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden lg:py-0! text-sm border-r border-r-neutral-base">
        <span class="flex items-center pointer-events-none">
          Opción 3
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-4" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden no-underline! pointer-events-none lg:py-0! text-sm border-r border-r-neutral-base">
        <span class="flex items-center pointer-events-none">
          Opción 4
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-5" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden lg:py-0! text-sm">
        <span class="flex items-center pointer-events-none">
          Opción 5
        </span>
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-horizontal -->
```

### Con clases de css aplicadas: navigation bar [#](#con-clases-de-css-aplicadas-navigation-bar)

Clase modificadora aplicada: `.c-menu-horizontal--navigation-bar`

Mostrar códigodel ejemplo: Con clases de css aplicadas: navigation bar

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/menu-horizontal/_macro.menu-horizontal.njk" import componentMenuHorizontal %}
{{ componentMenuHorizontal({
  "classes": "c-menu-horizontal--navigation-bar",
  "items": [
    {
      "href": "http://www.google.com",
      "text": "Opción 1"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 2",
      "active": true
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 3"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 4",
      "disabled": true
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 5"
    }
  ],
  "attributes": {
    "id": "mi-menu-navigation-bar",
    "aria-label": "Menú horizontal"
  }
}) }}
```

##### HTML

```html
<!-- menu-horizontal -->
<nav data-module="c-menu-horizontal" class="c-menu-horizontal c-menu-horizontal--navigation-bar" id="mi-menu-navigation-bar" aria-label="Menú horizontal">
  <ul class="c-menu-horizontal__list lg:flex lg:flex-wrap">
    <li>
      <a id="menu-item-1" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 1
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-2" href="http://www.google.com" class="c-menu-horizontal__link c-menu-horizontal__active relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden" aria-current="page">
        <strong class="flex items-center pointer-events-none font-bold">Opción 2</strong>
      </a>
    </li>
    <li>
      <a id="menu-item-3" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 3
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-4" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden no-underline! pointer-events-none">
        <span class="flex items-center pointer-events-none">
          Opción 4
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-5" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 5
        </span>
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-horizontal -->
```

### Con clases de css aplicadas: navigation bar con scroll horizontal [#](#con-clases-de-css-aplicadas-navigation-bar-con-scroll-horizontal)

Clases modificadora aplicadas: `.c-menu-horizontal--navigation-bar` y `.c-menu-horizontal--scroll`. Te advertimos que esta aplicación suele dar problemas de accesibilidad y la incluimos para evitar problemas en anchuras muy pequeñas. Asegúrate que los items no desbordan en las anchuras más habituales o bien usa el ejemplo anterior.

Mostrar códigodel ejemplo: Con clases de css aplicadas: navigation bar con scroll horizontal

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/menu-horizontal/_macro.menu-horizontal.njk" import componentMenuHorizontal %}
{{ componentMenuHorizontal({
  "classes": "c-menu-horizontal--navigation-bar c-menu-horizontal--scroll",
  "items": [
    {
      "href": "http://www.google.com",
      "text": "Opción 1"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 2",
      "active": true
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 3"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 4",
      "disabled": true
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 5"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 6"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 7"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 8"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 9"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 10"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 11"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 12"
    }
  ],
  "attributes": {
    "id": "mi-menu-navigation-bar",
    "aria-label": "Menú horizontal"
  }
}) }}
```

##### HTML

```html
<!-- menu-horizontal -->
<nav data-module="c-menu-horizontal" class="c-menu-horizontal c-menu-horizontal--navigation-bar c-menu-horizontal--scroll" id="mi-menu-navigation-bar" aria-label="Menú horizontal">
  <ul class="c-menu-horizontal__list lg:flex lg:flex-wrap">
    <li>
      <a id="menu-item-1" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 1
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-2" href="http://www.google.com" class="c-menu-horizontal__link c-menu-horizontal__active relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden" aria-current="page">
        <strong class="flex items-center pointer-events-none font-bold">Opción 2</strong>
      </a>
    </li>
    <li>
      <a id="menu-item-3" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 3
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-4" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden no-underline! pointer-events-none">
        <span class="flex items-center pointer-events-none">
          Opción 4
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-5" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 5
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-6" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 6
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-7" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 7
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-8" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 8
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-9" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 9
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-10" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 10
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-11" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 11
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-12" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 12
        </span>
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-horizontal -->
```

### Con clases de css aplicadas: tabs en escritorio [#](#con-clases-de-css-aplicadas-tabs-en-escritorio)

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

Mostrar códigodel ejemplo: Con clases de css aplicadas: tabs en escritorio

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/menu-horizontal/_macro.menu-horizontal.njk" import componentMenuHorizontal %}
{{ componentMenuHorizontal({
  "classes": "c-menu-horizontal--tabs",
  "items": [
    {
      "href": "http://www.google.com",
      "text": "Opción 1"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 2",
      "active": true
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 3"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 4",
      "disabled": true
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 5"
    }
  ],
  "attributes": {
    "id": "mi-menu-tabs-en-escritorio",
    "aria-label": "Menú horizontal"
  }
}) }}
```

##### HTML

```html
<!-- menu-horizontal -->
<nav data-module="c-menu-horizontal" class="c-menu-horizontal c-menu-horizontal--tabs" id="mi-menu-tabs-en-escritorio" aria-label="Menú horizontal">
  <ul class="c-menu-horizontal__list lg:flex lg:flex-wrap">
    <li>
      <a id="menu-item-1" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 1
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-2" href="http://www.google.com" class="c-menu-horizontal__link c-menu-horizontal__active relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden" aria-current="page">
        <strong class="flex items-center pointer-events-none font-bold">Opción 2</strong>
      </a>
    </li>
    <li>
      <a id="menu-item-3" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 3
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-4" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden no-underline! pointer-events-none">
        <span class="flex items-center pointer-events-none">
          Opción 4
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-5" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 5
        </span>
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-horizontal -->
```

### Con clases aplicadas: tabs en móvil [#](#con-clases-aplicadas-tabs-en-mvil)

Clases modificadoras aplicadas: `.c-menu-horizontal--tabs-mobile` y `.c-menu-horizontal--scroll`. Te advertimos que esta aplicación suele dar problemas de accesibilidad y la incluimos para evitar problemas en anchuras muy pequeñas. Asegúrate que los items no desbordan en las anchuras más habituales.

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

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

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

##### HTML

```html
<!-- menu-horizontal -->
<nav data-module="c-menu-horizontal" class="c-menu-horizontal c-menu-horizontal--tabs-mobile c-menu-horizontal--scroll" id="mi-menu-tabs-en-movil" aria-label="Menú horizontal">
  <ul class="c-menu-horizontal__list lg:flex lg:flex-wrap">
    <li>
      <a id="menu-item-1" href="#" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          <span class="flex flex-col items-center"><span class="block"><svg class="w-6 h-6 mb-xs" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" focusable="false" width="1em" height="1em">
                <g transform="scale(2)">
                  <circle cx="2.5" cy="4" r="2.5" fill="currentColor" />
                  <path d="M8.5 5H23a1 1 0 0 0 0-2H8.5a1 1 0 0 0 0 2Z" fill="currentColor" />
                  <circle cx="2.5" cy="12" r="2.5" fill="currentColor" />
                  <path d="M23 11H8.5a1 1 0 0 0 0 2H23a1 1 0 0 0 0-2Z" fill="currentColor" />
                  <circle cx="2.5" cy="20" r="2.5" fill="currentColor" />
                  <path d="M23 19H8.5a1 1 0 0 0 0 2H23a1 1 0 0 0 0-2Z" fill="currentColor" />
                </g>
              </svg></span><span class="block text-sm">Seguimiento</span></span>
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-2" href="#" class="c-menu-horizontal__link c-menu-horizontal__active relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden" aria-current="page">
        <strong class="flex items-center pointer-events-none font-bold"><span class="flex flex-col items-center"><span class="block"><svg class="w-6 h-6 mb-xs" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" focusable="false" width="1em" height="1em">
                <path d="M11 8h3.5a1 1 0 0 0 0-2H11a1 1 0 0 0 0 2ZM11 12h7.5a1 1 0 0 0 0-2H11a1 1 0 0 0 0 2Z" fill="currentColor" transform="scale(2)" />
                <path d="M23.71 5.71 18.29.29a1 1 0 0 0-.7-.29H8a2 2 0 0 0-2 2v11.17c0 .19.1.33.25.33h1.5a.25.25 0 0 0 .25-.25v-11A.25.25 0 0 1 8.25 2h8.82a.31.31 0 0 1 .18.07l4.68 4.68a.31.31 0 0 1 .07.18v12.82a.25.25 0 0 1-.25.25h-6a.25.25 0 0 0-.25.25v1.5a.25.25 0 0 0 .25.25H22a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7Z" fill="currentColor" transform="scale(2)" />
                <path d="M13 15H6a1 1 0 0 1-.8-.4l-.9-1.2a1 1 0 0 0-.8-.4H1a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1Z" fill="currentColor" transform="scale(2)" />
              </svg></span><span class="block text-sm">Documentos</span></span></strong>
      </a>
    </li>
    <li>
      <a id="menu-item-3" href="#" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          <span class="flex flex-col items-center"><span class="block"><svg class="w-6 h-6 mb-xs" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" focusable="false" width="1em" height="1em">
                <path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM19.5 22h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h1.75a.25.25 0 0 1 .25.25V13a.5.5 0 0 0 .31.46.47.47 0 0 0 .54-.11l2-2a.27.27 0 0 1 .36 0l2 2a.47.47 0 0 0 .35.15.43.43 0 0 0 .19 0 .5.5 0 0 0 .25-.5V2.25a.25.25 0 0 1 .25-.25H15a.49.49 0 0 1 .36.15l4.53 4.53A.49.49 0 0 1 20 7v14.5a.5.5 0 0 1-.5.5Z" fill="currentColor" transform="scale(2)" />
              </svg></span><span class="block text-sm">Notificaciones</span></span>
        </span>
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-horizontal -->
```

### Con idprefix [#](#con-idprefix)

Mostrar código para ver el `idPrefix` aplicado

Mostrar códigodel ejemplo: Con idprefix

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/menu-horizontal/_macro.menu-horizontal.njk" import componentMenuHorizontal %}
{{ componentMenuHorizontal({
  "idPrefix": "site-menu-item",
  "items": [
    {
      "href": "http://www.google.com",
      "text": "Opción 1"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 2"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 3"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 4"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 5"
    }
  ],
  "attributes": {
    "aria-label": "Menú horizontal"
  }
}) }}
```

##### HTML

```html
<!-- menu-horizontal -->
<nav data-module="c-menu-horizontal" class="c-menu-horizontal" aria-label="Menú horizontal">
  <ul class="c-menu-horizontal__list lg:flex lg:flex-wrap">
    <li>
      <a id="site-menu-item-1" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 1
        </span>
      </a>
    </li>
    <li>
      <a id="site-menu-item-2" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 2
        </span>
      </a>
    </li>
    <li>
      <a id="site-menu-item-3" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 3
        </span>
      </a>
    </li>
    <li>
      <a id="site-menu-item-4" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 4
        </span>
      </a>
    </li>
    <li>
      <a id="site-menu-item-5" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 5
        </span>
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-horizontal -->
```

### Con ids individuales [#](#con-ids-individuales)

Mostrar código para ver los `id` aplicados

Mostrar códigodel ejemplo: Con ids individuales

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/menu-horizontal/_macro.menu-horizontal.njk" import componentMenuHorizontal %}
{{ componentMenuHorizontal({
  "items": [
    {
      "href": "http://www.google.com",
      "text": "Opción 1",
      "id": "option-A"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 2",
      "id": "option-B"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 3",
      "id": "option-C"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 4",
      "id": "option-D"
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 5",
      "id": "option-E"
    }
  ],
  "attributes": {
    "aria-label": "Menú horizontal"
  }
}) }}
```

##### HTML

```html
<!-- menu-horizontal -->
<nav data-module="c-menu-horizontal" class="c-menu-horizontal" aria-label="Menú horizontal">
  <ul class="c-menu-horizontal__list lg:flex lg:flex-wrap">
    <li>
      <a id="option-A" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 1
        </span>
      </a>
    </li>
    <li>
      <a id="option-B" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 2
        </span>
      </a>
    </li>
    <li>
      <a id="option-C" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 3
        </span>
      </a>
    </li>
    <li>
      <a id="option-D" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 4
        </span>
      </a>
    </li>
    <li>
      <a id="option-E" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden">
        <span class="flex items-center pointer-events-none">
          Opción 5
        </span>
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-horizontal -->
```

### Con atributos [#](#con-atributos)

Muestra el código para ver cómo se aplican los atributos

Mostrar códigodel ejemplo: Con atributos

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/menu-horizontal/_macro.menu-horizontal.njk" import componentMenuHorizontal %}
{{ componentMenuHorizontal({
  "attributes": {
    "id": "nav-id-example",
    "aria-label": "Menú horizontal"
  },
  "items": [
    {
      "href": "http://www.google.com",
      "text": "Opción 1",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 2",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 3",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 4",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    },
    {
      "href": "http://www.google.com",
      "text": "Opción 5",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    }
  ]
}) }}
```

##### HTML

```html
<!-- menu-horizontal -->
<nav data-module="c-menu-horizontal" class="c-menu-horizontal" id="nav-id-example" aria-label="Menú horizontal">
  <ul class="c-menu-horizontal__list lg:flex lg:flex-wrap">
    <li>
      <a id="menu-item-1" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
        <span class="flex items-center pointer-events-none">
          Opción 1
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-2" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
        <span class="flex items-center pointer-events-none">
          Opción 2
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-3" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
        <span class="flex items-center pointer-events-none">
          Opción 3
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-4" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
        <span class="flex items-center pointer-events-none">
          Opción 4
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-5" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-hidden" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
        <span class="flex items-center pointer-events-none">
          Opción 5
        </span>
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-horizontal -->
```