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"
}
}) }}
HTML
<!-- nav -->
<nav data-module="c-nav" class="text-sm" aria-label="Navegación local">
<ul>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-default-1">
Opción 1
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-default-2">
Opción 2
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-default-3">
Opción 3
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-default-4">
Opción 4
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-default-5">
Opción 5
</a>
</li>
</ul>
</nav>
<!-- /nav -->
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"
}
}) }}
HTML
<!-- nav -->
<nav data-module="c-nav" class="text-sm" aria-label="Navegación local">
<ul>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-disabled-item-1">
Opción 1
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-disabled-item-2">
Opción 2
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black pointer-events-none" aria-disabled="true" tabindex="-1" id="nav-with-disabled-item-3">
Opción deshabilitada 3
<svg viewBox="0 0 140 140" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="inline-block align-middle ml-sm text-neutral-base fill-current" aria-hidden="true" focusable="false">
<path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z" />
</svg>
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-disabled-item-4">
Opción 4
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-disabled-item-5">
Opción 5
</a>
</li>
</ul>
</nav>
<!-- /nav -->
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"
}
}) }}
HTML
<!-- nav -->
<nav data-module="c-nav" class="text-sm" id="mi-menu" aria-label="Navegación local">
<ul>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-active-item-1">
Opción 1
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-active-item-2">
Opción 2
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-active-item-3">
Opción 3
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-current="page" id="nav-with-active-item-4">
<strong class="font-bold">Opción 4</strong>
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-active-item-5">
Opción 5
</a>
</li>
</ul>
</nav>
<!-- /nav -->
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"
}
}) }}
HTML
<!-- nav -->
<nav data-module="c-nav" class="text-sm" aria-label="Navegación local">
<ul>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" target="_blank" id="nav-with-target-in-links-1" title="Se abre en pestaña nueva">
Opción 1
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" target="_blank" id="nav-with-target-in-links-2" title="Se abre en pestaña nueva">
Opción 2
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" target="_blank" id="nav-with-target-in-links-3" title="Se abre en pestaña nueva">
Opción 3
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" target="_blank" id="nav-with-target-in-links-4" title="Se abre en pestaña nueva">
Opción 4
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" target="_blank" id="nav-with-target-in-links-5" title="Se abre en pestaña nueva">
Opción 5
</a>
</li>
</ul>
</nav>
<!-- /nav -->
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"
}
}) }}
HTML
<!-- nav -->
<nav data-module="c-nav" class="text-sm" aria-label="Navegación local">
<ul>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-divider-1">
Opción 1
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-divider-2">
Opción 2
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-divider-3">
Opción 3 con divisor
</a>
</li>
<li class="my-sm border-b border-neutral-base" aria-hidden="true">
<div class="sr-only">Separador</div>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-divider-4">
Opción 4
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-divider-5">
Opción 5
</a>
</li>
</ul>
</nav>
<!-- /nav -->
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"
}
}) }}
HTML
<!-- nav -->
<nav data-module="c-nav" class="text-sm p-base bg-primary-light" aria-label="Navegación local">
<ul>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-classes-applied-1">
Opción 1
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black bg-white" id="nav-with-classes-applied-2">
Opción 2
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-classes-applied-3">
Opción 3
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-classes-applied-4">
Opción 4
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-classes-applied-5">
Opción 5
</a>
</li>
</ul>
</nav>
<!-- /nav -->
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"
}
}) }}
HTML
<!-- nav -->
<nav data-module="c-nav" class="text-sm" aria-label="Navegación local">
<ul>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="site-menu-item-1-1">
Opción 1
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="site-menu-item-1-2">
Opción 2
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="site-menu-item-1-3">
Opción 3
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="site-menu-item-1-4">
Opción 4
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="site-menu-item-1-5">
Opción 5
</a>
</li>
</ul>
</nav>
<!-- /nav -->
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"
}
}) }}
HTML
<!-- nav -->
<nav data-module="c-nav" class="text-sm" aria-label="Navegación local">
<ul>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="option-A">
Opción 1
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="option-B">
Opción 2
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="option-C">
Opción 3
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="option-D">
Opción 4
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="option-E">
Opción 5
</a>
</li>
</ul>
</nav>
<!-- /nav -->
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"
}
}
]
}) }}
HTML
<!-- nav -->
<nav data-module="c-nav" class="text-sm" aria-label="Navegación local">
<ul>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-attributes-1" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
Opción 1
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-attributes-2" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
Opción 2
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-attributes-3" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
Opción 3
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-attributes-4" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
Opción 4
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-with-attributes-5" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
Opción 5
</a>
</li>
</ul>
</nav>
<!-- /nav -->
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"
}
}) }}
HTML
<!-- nav -->
<ul data-module="c-nav" class="text-sm w-max max-w-64" aria-label="Navegación local">
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="site-menu-item-2-1">
Opción 1
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="site-menu-item-2-2">
Opción 2
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-current="page" id="site-menu-item-2-3">
<strong class="font-bold">Opción 3</strong>
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="site-menu-item-2-4">
Opción 4
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="site-menu-item-2-5">
Clases max-width aplicadas para evitar demasiada anchura dentro de los menus y forzar a saltos de línea
</a>
</li>
</ul>
<!-- /nav -->