Nav examples

Show params

Params

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.

default

Show code

Macro

{% from "components/nav/_macro.nav.njk" import componentNav %}
{{ componentNav({
  "idPrefix": "nav-default",
  "items": [
    {
      "href": "#",
      "text": "Option 1"
    },
    {
      "href": "#",
      "text": "Option 2"
    },
    {
      "href": "#",
      "text": "Option 3"
    },
    {
      "href": "#",
      "text": "Option 4"
    },
    {
      "href": "#",
      "text": "Option 5"
    }
  ],
  "attributes": {
    "aria-label": "Navegación local"
  }
})  }}

Markup


<!-- nav -->
<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">
      Option 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">
      Option 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">
      Option 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">
      Option 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">
      Option 5
    </a>
  </li>
  </ul>
</nav>
<!-- /nav -->

with disabled item

Show code

Macro

{% from "components/nav/_macro.nav.njk" import componentNav %}
{{ componentNav({
  "idPrefix": "nav-with-disabled-item",
  "items": [
    {
      "href": "#",
      "text": "Option 1"
    },
    {
      "href": "#",
      "text": "Option 2"
    },
    {
      "href": "#",
      "text": "Disabled Option 3",
      "disabled": true
    },
    {
      "href": "#",
      "text": "Option 4"
    },
    {
      "href": "#",
      "text": "Option 5"
    }
  ],
  "attributes": {
    "aria-label": "Navegación local"
  }
})  }}

Markup


<!-- nav -->
<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">
      Option 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">
      Option 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">
      Disabled Option 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">
      Option 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">
      Option 5
    </a>
  </li>
  </ul>
</nav>
<!-- /nav -->

with active item

Show code

Macro

{% from "components/nav/_macro.nav.njk" import componentNav %}
{{ componentNav({
  "idPrefix": "nav-with-active-item",
  "items": [
    {
      "href": "#",
      "text": "Option 1"
    },
    {
      "href": "#",
      "text": "Option 2"
    },
    {
      "href": "#",
      "text": "Option 3"
    },
    {
      "href": "#",
      "text": "Active Option 4",
      "active": true
    },
    {
      "href": "#",
      "text": "Option 5"
    }
  ],
  "attributes": {
    "aria-label": "Navegación local"
  }
})  }}

Markup


<!-- nav -->
<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-active-item">
      Option 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">
      Option 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">
      Option 3
    </a>
  </li>
  <li>
    <span class="flex items-center px-base py-sm font-semibold"  aria-current="page"  id="nav-with-active-item-4">
      <strong>Active Option 4</strong>
    </span>
  </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">
      Option 5
    </a>
  </li>
  </ul>
</nav>
<!-- /nav -->

with target in links

Show code

Macro

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

Markup


<!-- nav -->
<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" title="Se abre en pestaña nueva">
      Option 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">
      Option 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">
      Option 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">
      Option 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">
      Option 5
    </a>
  </li>
  </ul>
</nav>
<!-- /nav -->

with divider

Show code

Macro

{% from "components/nav/_macro.nav.njk" import componentNav %}
{{ componentNav({
  "idPrefix": "nav-with-divider",
  "items": [
    {
      "href": "#",
      "text": "Option 1"
    },
    {
      "href": "#",
      "text": "Option 2"
    },
    {
      "href": "#",
      "text": "Option 3 with divider",
      "divider": true
    },
    {
      "href": "#",
      "text": "Option 4"
    },
    {
      "href": "#",
      "text": "Option 5"
    }
  ],
  "attributes": {
    "aria-label": "Navegación local"
  }
})  }}

Markup


<!-- nav -->
<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">
      Option 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">
      Option 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">
      Option 3 with divider
    </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">
      Option 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">
      Option 5
    </a>
  </li>
  </ul>
</nav>
<!-- /nav -->

with classes applied

Show code

Macro

{% from "components/nav/_macro.nav.njk" import componentNav %}
{{ componentNav({
  "idPrefix": "nav-with-classes-applied",
  "classes": "bg-warning-light",
  "items": [
    {
      "href": "#",
      "text": "Option 1"
    },
    {
      "href": "#",
      "text": "Option 2",
      "classes": "bg-warning-base"
    },
    {
      "href": "#",
      "text": "Option 3 with divider"
    },
    {
      "href": "#",
      "text": "Option 4"
    },
    {
      "href": "#",
      "text": "Option 5"
    }
  ],
  "attributes": {
    "aria-label": "Navegación local"
  }
})  }}

Markup


<!-- nav -->
<nav class="text-sm bg-warning-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">
      Option 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-warning-base" id="nav-with-classes-applied-2">
      Option 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">
      Option 3 with divider
    </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">
      Option 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">
      Option 5
    </a>
  </li>
  </ul>
</nav>
<!-- /nav -->

with idPrefix

See code to display the idPrefix applied

Show code

Macro

{% from "components/nav/_macro.nav.njk" import componentNav %}
{{ componentNav({
  "idPrefix": "site-menu-item-1",
  "items": [
    {
      "href": "#",
      "text": "Option 1"
    },
    {
      "href": "#",
      "text": "Option 2"
    },
    {
      "href": "#",
      "text": "Option 3"
    },
    {
      "href": "#",
      "text": "Option 4"
    },
    {
      "href": "#",
      "text": "Option 5"
    }
  ],
  "attributes": {
    "aria-label": "Navegación local"
  }
})  }}

Markup


<!-- nav -->
<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">
      Option 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">
      Option 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">
      Option 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">
      Option 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">
      Option 5
    </a>
  </li>
  </ul>
</nav>
<!-- /nav -->

with individual ids

Show code to display the ids applied in html

Show code

Macro

{% from "components/nav/_macro.nav.njk" import componentNav %}
{{ componentNav({
  "idPrefix": "nav-with-individual-ids",
  "items": [
    {
      "href": "#",
      "text": "Option 1",
      "id": "option-A"
    },
    {
      "href": "#",
      "text": "Option 2",
      "id": "option-B"
    },
    {
      "href": "#",
      "text": "Option 3",
      "id": "option-C"
    },
    {
      "href": "#",
      "text": "Option 4",
      "id": "option-D"
    },
    {
      "href": "#",
      "text": "Option 5",
      "id": "option-E"
    }
  ],
  "attributes": {
    "aria-label": "Navegación local"
  }
})  }}

Markup


<!-- nav -->
<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">
      Option 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">
      Option 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">
      Option 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">
      Option 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">
      Option 5
    </a>
  </li>
  </ul>
</nav>
<!-- /nav -->

with attributes

Show code to display the attributes applied in html

Show code

Macro

{% from "components/nav/_macro.nav.njk" import componentNav %}
{{ componentNav({
  "idPrefix": "nav-with-attributes",
  "attributes": {
    "aria-label": "Navegación local"
  },
  "items": [
    {
      "href": "#",
      "text": "Option 1",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    },
    {
      "href": "#",
      "text": "Option 2",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    },
    {
      "href": "#",
      "text": "Option 3",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    },
    {
      "href": "#",
      "text": "Option 4",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    },
    {
      "href": "#",
      "text": "Option 5",
      "attributes": {
        "data-attribute-1": "value-A",
        "data-attribute-2": "value-B",
        "data-attribute-3": "value-C"
      }
    }
  ]
})  }}

Markup


<!-- nav -->
<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" data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
      Option 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">
      Option 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">
      Option 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">
      Option 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">
      Option 5
    </a>
  </li>
  </ul>
</nav>
<!-- /nav -->

hasNav is false

Use this if it's opened with a dropdown button. No nav tag will be used, just a plain ul, assuming the component will be wrapped with a custom nav with it's own aria-label if it's needed. We also use classes to control the width of the nav inside the dropdown.

Show code

Macro

{% from "components/nav/_macro.nav.njk" import componentNav %}
{{ componentNav({
  "hasNav": false,
  "idPrefix": "site-menu-item-2",
  "items": [
    {
      "href": "#",
      "text": "Option 1"
    },
    {
      "href": "#",
      "text": "Option 2"
    },
    {
      "href": "#",
      "text": "Option 3",
      "active": true
    },
    {
      "href": "#",
      "text": "Option 4"
    },
    {
      "href": "#",
      "text": "Max width classes applied to avoid too much width inside menus and force to break line"
    }
  ],
  "classes": "w-max max-w-64",
  "attributes": {
    "aria-label": "Navegación local"
  }
})  }}

Markup


<!-- nav -->
<ul 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">
      Option 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">
      Option 2
    </a>
  </li>
  <li>
    <span class="flex items-center px-base py-sm font-semibold"  aria-current="page"  id="site-menu-item-2-3">
      <strong>Option 3</strong>
    </span>
  </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">
      Option 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">
      Max width classes applied to avoid too much width inside menus and force to break line
    </a>
  </li>
</ul>
<!-- /nav -->