Menu-horizontal
Mostrar parámetros
Parámetros del componente
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 #
Mostrar códigodel ejemplo: Por defecto
Contenido
Nunjucks macro
{% 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": "Menu horizontal"
}
}) }}
HTML
<!-- menu-horizontal -->
<nav class="c-menu-horizontal" aria-label="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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
<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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
<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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
<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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
<span class="flex items-center pointer-events-none">
Opción 5
</span>
</a>
</li>
</ul>
</nav>
<!-- /menu-horizontal -->
Con item deshabilitado #
Mostrar códigodel ejemplo: Con item deshabilitado
Contenido
Nunjucks macro
{% 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": "Menu horizontal"
}
}) }}
HTML
<!-- menu-horizontal -->
<nav class="c-menu-horizontal" aria-label="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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
<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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
<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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none no-underline pointer-events-none" disabled="disabled" aria-disabled="true" tabindex="-1">
<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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
<span class="flex items-center pointer-events-none">
Opción 5
</span>
</a>
</li>
</ul>
</nav>
<!-- /menu-horizontal -->
Con item activo #
Mostrar códigodel ejemplo: Con item activo
Contenido
Nunjucks macro
{% 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 activa",
"active": true
},
{
"href": "http://www.google.com",
"text": "Opción 5"
}
],
"attributes": {
"aria-label": "Menu horizontal"
}
}) }}
HTML
<!-- menu-horizontal -->
<nav class="c-menu-horizontal" aria-label="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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
<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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
<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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
<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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none" aria-current="page">
<strong class="font-bold">Opción 4 activa</strong>
</a>
</li>
<li>
<a id="menu-item-5" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
<span class="flex items-center pointer-events-none">
Opción 5
</span>
</a>
</li>
</ul>
</nav>
<!-- /menu-horizontal -->
Con target en enlaces #
Mostrar códigodel ejemplo: Con target en enlaces
Contenido
Nunjucks macro
{% from "components/menu-horizontal/_macro.menu-horizontal.njk" import componentMenuHorizontal %}
{{ componentMenuHorizontal({
"items": [
{
"href": "http://www.google.com",
"text": "Opción 1",
"target": "_blank"
},
{
"href": "http://www.google.com",
"text": "Opción 2",
"target": "_blank"
},
{
"href": "http://www.google.com",
"text": "Opción 3",
"target": "_blank"
},
{
"href": "http://www.google.com",
"text": "Opción 4",
"target": "_blank"
},
{
"href": "http://www.google.com",
"text": "Opción 5",
"target": "_blank"
}
],
"attributes": {
"aria-label": "Menu horizontal"
}
}) }}
HTML
<!-- menu-horizontal -->
<nav class="c-menu-horizontal" aria-label="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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none" target="_blank">
<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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none" target="_blank">
<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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none" target="_blank">
<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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none" target="_blank">
<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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none" target="_blank">
<span class="flex items-center pointer-events-none">
Opción 5
</span>
</a>
</li>
</ul>
</nav>
<!-- /menu-horizontal -->
Con clases de css aplicadas #
Clase modificadora aplicada: .c-menu-horizontal--tabs
Mostrar códigodel ejemplo: Con clases de css aplicadas
Contenido
Nunjucks macro
{% 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": {
"aria-label": "Menu horizontal"
}
}) }}
HTML
<!-- menu-horizontal -->
<nav class="c-menu-horizontal c-menu-horizontal--tabs" aria-label="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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
<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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none" aria-current="page">
<strong class="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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
<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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none no-underline pointer-events-none" disabled="disabled" aria-disabled="true" tabindex="-1">
<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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
<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 #
Clases modificadoras aplicadas: .c-menu-horizontal--tabs-mobile
y .c-menu-horizontal--scroll
Mostrar códigodel ejemplo: Con clases aplicadas: tabs en móvil
Contenido
Nunjucks macro
{% 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": {
"aria-label": "Menu horizontal"
}
}) }}
HTML
<!-- menu-horizontal -->
<nav class="c-menu-horizontal c-menu-horizontal--tabs-mobile c-menu-horizontal--scroll" aria-label="Menu 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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
<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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none" aria-current="page">
<strong class="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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
<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 #
Mostrar código para ver el idPrefix
aplicado
Mostrar códigodel ejemplo: Con idprefix
Contenido
Nunjucks macro
{% 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": "Menu horizontal"
}
}) }}
HTML
<!-- menu-horizontal -->
<nav class="c-menu-horizontal" aria-label="Menu 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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
<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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
<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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
<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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
<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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
<span class="flex items-center pointer-events-none">
Opción 5
</span>
</a>
</li>
</ul>
</nav>
<!-- /menu-horizontal -->
Con ids individuales #
Mostrar código para ver los id
aplicados
Mostrar códigodel ejemplo: Con ids individuales
Contenido
Nunjucks macro
{% 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": "Menu horizontal"
}
}) }}
HTML
<!-- menu-horizontal -->
<nav class="c-menu-horizontal" aria-label="Menu 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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
<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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
<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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
<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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
<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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
<span class="flex items-center pointer-events-none">
Opción 5
</span>
</a>
</li>
</ul>
</nav>
<!-- /menu-horizontal -->
Con atributos #
Muestra el código para ver cómo se aplican los atributos
Mostrar códigodel ejemplo: Con atributos
Contenido
Nunjucks macro
{% from "components/menu-horizontal/_macro.menu-horizontal.njk" import componentMenuHorizontal %}
{{ componentMenuHorizontal({
"attributes": {
"id": "nav-id-example",
"aria-label": "Menu 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
<!-- menu-horizontal -->
<nav class="c-menu-horizontal" id="nav-id-example" aria-label="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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none" 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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none" 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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none" 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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none" 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 py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none" 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 -->