Menu-vertical examples

Show params

Params

params:
- name: hasUnderline
  type: boolean
  required: false
  description: If `true`, all items will be underlined except the disabled ones or the ones that have no href.
- name: idPrefix
  type: string
  required: false
  description: String to prefix id for each item if no id is specified on each item.
- name: items
  type: array
  required: true
  description: Array of nav items objects.
  params:
  - name: href
    type: string
    required: false
    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 label. 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 label. 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: hint
    type: object
    required: false
    description: Provide hint to each nav item.
    isComponent: true
  - name: expanded
    type: boolean
    required: false
    description: If true, nav sub will be expanded.
  - name: divider
    required: false
    description: If true, a divider border will be shown after the item.
  - name: sub
    type: boolean
    required: false
    description: If true, content provided will be revealed when the item is expanded.
  - name: sub.html
    type: string
    required: false
    description: Provide content for the sub reveal.
  - name: sub.classes
    type: string
    required: false
    description: Classes to add to the sub container.
  - name: sub.items
    type: array
    required: false
    description: Provide subitems for the sub reveal.
  - name: disabled
    type: boolean
    required: false
    description: If true, nav 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 container.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the nav container.

accessibilityCriteria: |
  ## sub reveals
  Must:
  - be visible as static content if JavaScript is unavailable or fails
  - be hidden if JavaScript is available and is collapsed
  - indicate if content is expanded or collapsed
  - indicate that there is collapsed content to interact with

  Note that alphagov have known issues against this criteria: https://github.com/alphagov/govuk_elements/issues/575

default

Show code

Macro

{% from "components/menu-vertical/_macro.menu-vertical.njk" import componentMenuVertical %}
{{ componentMenuVertical({
  "items": [
    {
      "href": "#",
      "text": "Item 1"
    },
    {
      "href": "#",
      "text": "Item 2"
    },
    {
      "href": "#",
      "text": "Item 3"
    }
  ],
  "attributes": {
    "aria-label": "Menu vertical"
  }
})  }}

Markup

<!-- menu-vertical -->
<nav aria-label="Menu vertical">
  <ul class="text-base">
    <li class="m-base">
      <a id="nav-item" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Item 1
      </a>
    </li>
    <li class="m-base">
      <a id="nav-item-2" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Item 2
      </a>
    </li>
    <li class="m-base">
      <a id="nav-item-3" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Item 3
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-vertical -->

with disabled item

Show code

Macro

{% from "components/menu-vertical/_macro.menu-vertical.njk" import componentMenuVertical %}
{{ componentMenuVertical({
  "items": [
    {
      "href": "#",
      "text": "Item 1"
    },
    {
      "href": "#",
      "text": "Item 2"
    },
    {
      "href": "#",
      "text": "Item 3",
      "disabled": true
    }
  ],
  "attributes": {
    "aria-label": "Menu vertical"
  }
})  }}

Markup

<!-- menu-vertical -->
<nav aria-label="Menu vertical">
  <ul class="text-base">
    <li class="m-base">
      <a id="nav-item" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Item 1
      </a>
    </li>
    <li class="m-base">
      <a id="nav-item-2" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Item 2
      </a>
    </li>
    <li class="m-base">
      <a id="nav-item-3" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black no-underline pointer-events-none"  aria-disabled="true" tabindex="-1" >
        Item 3
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-vertical -->

with active item

Show code

Macro

{% from "components/menu-vertical/_macro.menu-vertical.njk" import componentMenuVertical %}
{{ componentMenuVertical({
  "items": [
    {
      "href": "#",
      "text": "Item 1"
    },
    {
      "href": "#",
      "text": "Item 2",
      "active": true
    },
    {
      "href": "#",
      "text": "Item 3"
    }
  ],
  "attributes": {
    "aria-label": "Menu vertical"
  }
})  }}

Markup

<!-- menu-vertical -->
<nav aria-label="Menu vertical">
  <ul class="text-base">
    <li class="m-base">
      <a id="nav-item" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Item 1
      </a>
    </li>
    <li class="m-base">
      <a id="nav-item-2" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline font-bold" aria-current="page"  >
        <strong>Item 2</strong>
      </a>
    </li>
    <li class="m-base">
      <a id="nav-item-3" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Item 3
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-vertical -->

with target in links

Show code

Macro

{% from "components/menu-vertical/_macro.menu-vertical.njk" import componentMenuVertical %}
{{ componentMenuVertical({
  "items": [
    {
      "href": "#",
      "text": "Item 1",
      "target": "_blank",
      "attributes": {
        "title": "Se abre en ventana nueva"
      }
    },
    {
      "href": "#",
      "text": "Item 2",
      "target": "_blank",
      "attributes": {
        "title": "Se abre en ventana nueva"
      }
    },
    {
      "href": "#",
      "text": "Item 3",
      "target": "_blank",
      "attributes": {
        "title": "Se abre en ventana nueva"
      }
    }
  ],
  "attributes": {
    "aria-label": "Menu vertical"
  }
})  }}

Markup

<!-- menu-vertical -->
<nav aria-label="Menu vertical">
  <ul class="text-base">
    <li class="m-base">
      <a id="nav-item" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"   target="_blank" title="Se abre en ventana nueva">
        Item 1
      </a>
    </li>
    <li class="m-base">
      <a id="nav-item-2" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"   target="_blank" title="Se abre en ventana nueva">
        Item 2
      </a>
    </li>
    <li class="m-base">
      <a id="nav-item-3" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"   target="_blank" title="Se abre en ventana nueva">
        Item 3
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-vertical -->

with divider

Show code

Macro

{% from "components/menu-vertical/_macro.menu-vertical.njk" import componentMenuVertical %}
{{ componentMenuVertical({
  "items": [
    {
      "href": "#",
      "text": "Item 1"
    },
    {
      "href": "#",
      "text": "Item 2",
      "divider": true
    },
    {
      "href": "#",
      "text": "Item 3"
    },
    {
      "href": "#",
      "text": "Item 4"
    }
  ],
  "attributes": {
    "aria-label": "Menu vertical"
  }
})  }}

Markup

<!-- menu-vertical -->
<nav aria-label="Menu vertical">
  <ul class="text-base">
    <li class="m-base">
      <a id="nav-item" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Item 1
      </a>
    </li>
    <li class="m-base">
      <a id="nav-item-2" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Item 2
      </a>
    </li>
    <li class="my-sm border-b border-neutral-base" aria-hidden="true">
      <div class="sr-only">Separador</div>
    </li>
    <li class="m-base">
      <a id="nav-item-3" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Item 3
      </a>
    </li>
    <li class="m-base">
      <a id="nav-item-4" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Item 4
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-vertical -->

with very long option text

Show code

Macro

{% from "components/menu-vertical/_macro.menu-vertical.njk" import componentMenuVertical %}
{{ componentMenuVertical({
  "items": [
    {
      "href": "#",
      "text": "No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus."
    },
    {
      "href": "#",
      "text": "No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum."
    },
    {
      "href": "#",
      "text": "No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis."
    }
  ],
  "attributes": {
    "aria-label": "Menu vertical"
  }
})  }}

Markup

<!-- menu-vertical -->
<nav aria-label="Menu vertical">
  <ul class="text-base">
    <li class="m-base">
      <a id="nav-item" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.
      </a>
    </li>
    <li class="m-base">
      <a id="nav-item-2" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.
      </a>
    </li>
    <li class="m-base">
      <a id="nav-item-3" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis.
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-vertical -->

with all parent items

Show code

Macro

{% from "components/menu-vertical/_macro.menu-vertical.njk" import componentMenuVertical %}
{{ componentMenuVertical({
  "idPrefix": "parent-example",
  "items": [
    {
      "href": "#",
      "text": "Item 1",
      "id": "parent-example-item-1",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "parent-example-item-1"
        }
      }
    },
    {
      "href": "#",
      "text": "Item 2",
      "id": "parent-example-item-2",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "parent-example-item-2"
        }
      }
    },
    {
      "href": "#",
      "text": "Item 3",
      "id": "parent-example-item-3",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "parent-example-item-3"
        }
      }
    }
  ],
  "attributes": {
    "aria-label": "Menu vertical"
  }
})  }}

Markup

<!-- menu-vertical -->
<nav aria-label="Menu vertical">
  <ul class="text-base">
    <li class="m-base">
      <a id="parent-example-item-1" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Item 1
      </a>
        <ul aria-labelledby="parent-example-item-1">
            <li class="m-base origin-top-left text-sm">
                <a href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"  >
                  Subitem 1
                </a>
              </li>
            <li class="m-base origin-top-left text-sm">
                <a href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"  >
                  Subitem 2
                </a>
              </li>
            <li class="m-base origin-top-left text-sm">
                <a href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"  >
                  Subitem 3
                </a>
              </li>
       </ul>
    </li>
    <li class="m-base">
      <a id="parent-example-item-2" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Item 2
      </a>
        <ul aria-labelledby="parent-example-item-2">
            <li class="m-base origin-top-left text-sm">
                <a href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"  >
                  Subitem 1
                </a>
              </li>
            <li class="m-base origin-top-left text-sm">
                <a href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"  >
                  Subitem 2
                </a>
              </li>
            <li class="m-base origin-top-left text-sm">
                <a href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"  >
                  Subitem 3
                </a>
              </li>
       </ul>
    </li>
    <li class="m-base">
      <a id="parent-example-item-3" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Item 3
      </a>
        <ul aria-labelledby="parent-example-item-3">
            <li class="m-base origin-top-left text-sm">
                <a href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"  >
                  Subitem 1
                </a>
              </li>
            <li class="m-base origin-top-left text-sm">
                <a href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"  >
                  Subitem 2
                </a>
              </li>
            <li class="m-base origin-top-left text-sm">
                <a href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"  >
                  Subitem 3
                </a>
              </li>
       </ul>
    </li>
  </ul>
</nav>
<!-- /menu-vertical -->

with descriptive content

Show code

Macro

{% from "components/menu-vertical/_macro.menu-vertical.njk" import componentMenuVertical %}
{{ componentMenuVertical({
  "idPrefix": "descriptive-example",
  "items": [
    {
      "href": "#",
      "text": "Item 1",
      "sub": {
        "html": "<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p>"
      }
    },
    {
      "href": "#",
      "text": "Item 2",
      "sub": {
        "html": "<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p>"
      }
    },
    {
      "href": "#",
      "text": "Item 3",
      "sub": {
        "html": "<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p>"
      }
    }
  ],
  "attributes": {
    "aria-label": "Menu vertical"
  }
})  }}

Markup

<!-- menu-vertical -->
<nav aria-label="Menu vertical">
  <ul class="text-base">
    <li class="m-base">
      <a id="descriptive-example" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Item 1
      </a>
        <div class="mb-base px-xs origin-top-left text-sm text-neutral-dark" id="sub-descriptive-example">
          <p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p>
        </div>
    </li>
    <li class="m-base">
      <a id="descriptive-example-2" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Item 2
      </a>
        <div class="mb-base px-xs origin-top-left text-sm text-neutral-dark" id="sub-descriptive-example-2">
          <p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p>
        </div>
    </li>
    <li class="m-base">
      <a id="descriptive-example-3" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Item 3
      </a>
        <div class="mb-base px-xs origin-top-left text-sm text-neutral-dark" id="sub-descriptive-example-3">
          <p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p>
        </div>
    </li>
  </ul>
</nav>
<!-- /menu-vertical -->

with a children item active

Show code

Macro

{% from "components/menu-vertical/_macro.menu-vertical.njk" import componentMenuVertical %}
{{ componentMenuVertical({
  "idPrefix": "nav-item-with-children-active",
  "items": [
    {
      "href": "#",
      "text": "Item 1",
      "id": "nav-item-item-1-a",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2",
            "active": true
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "nav-item-item-1-a"
        }
      }
    },
    {
      "href": "#",
      "text": "Item 2",
      "id": "nav-item-item-2-a",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "nav-item-item-2-a"
        }
      }
    }
  ],
  "attributes": {
    "aria-label": "Menu vertical"
  }
})  }}

Markup

<!-- menu-vertical -->
<nav aria-label="Menu vertical">
  <ul class="text-base">
    <li class="m-base">
      <a id="nav-item-item-1-a" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Item 1
      </a>
        <ul aria-labelledby="nav-item-item-1-a">
            <li class="m-base origin-top-left text-sm">
                <a href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"  >
                  Subitem 1
                </a>
              </li>
            <li class="m-base origin-top-left text-sm">
                <a href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black font-bold" aria-current="page"  >
                  <strong>Subitem 2</strong>
                </a>
              </li>
            <li class="m-base origin-top-left text-sm">
                <a href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"  >
                  Subitem 3
                </a>
              </li>
       </ul>
    </li>
    <li class="m-base">
      <a id="nav-item-item-2-a" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Item 2
      </a>
        <ul aria-labelledby="nav-item-item-2-a">
            <li class="m-base origin-top-left text-sm">
                <a href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"  >
                  Subitem 1
                </a>
              </li>
            <li class="m-base origin-top-left text-sm">
                <a href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"  >
                  Subitem 2
                </a>
              </li>
            <li class="m-base origin-top-left text-sm">
                <a href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"  >
                  Subitem 3
                </a>
              </li>
       </ul>
    </li>
  </ul>
</nav>
<!-- /menu-vertical -->

with hasUnderline, with disabled or without href in a parent and child

Use hasUnderline true when you will have mixed, disabled or without href items and normal items.

Show code

Macro

{% from "components/menu-vertical/_macro.menu-vertical.njk" import componentMenuVertical %}
{{ componentMenuVertical({
  "idPrefix": "nav-item-without-href",
  "hasUnderline": true,
  "items": [
    {
      "href": "#",
      "text": "Item 1 disabled with href",
      "id": "nav-item-item-1-b",
      "disabled": true,
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "href": "#",
            "text": "Subitem 2 disabled with href",
            "disabled": true
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "nav-item-item-1-b"
        }
      }
    },
    {
      "text": "Item 2 without href",
      "id": "nav-item-item-2-b",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem 1"
          },
          {
            "text": "Subitem 2 without href"
          },
          {
            "href": "#",
            "text": "Subitem 3"
          }
        ],
        "attributes": {
          "aria-labelledby": "nav-item-item-2-b"
        }
      }
    }
  ],
  "attributes": {
    "aria-label": "Menu vertical"
  }
})  }}

Markup

<!-- menu-vertical -->
<nav aria-label="Menu vertical">
  <ul class="text-base">
    <li class="m-base">
      <a id="nav-item-item-1-b" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black underline no-underline pointer-events-none"  aria-disabled="true" tabindex="-1" >
        Item 1 disabled with href
      </a>
        <ul aria-labelledby="nav-item-item-1-b">
            <li class="m-base origin-top-left text-sm">
                <a href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black underline"  >
                  Subitem 1
                </a>
              </li>
            <li class="m-base origin-top-left text-sm">
                <a href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black underline no-underline pointer-events-none"  aria-disabled="true" tabindex="-1" >
                  Subitem 2 disabled with href
                </a>
              </li>
            <li class="m-base origin-top-left text-sm">
                <a href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black underline"  >
                  Subitem 3
                </a>
              </li>
       </ul>
    </li>
    <li class="m-base">
      <span id="nav-item-item-2-b" class="block px-xs" >
        Item 2 without href
      </span>
        <ul aria-labelledby="nav-item-item-2-b">
            <li class="m-base origin-top-left text-sm">
                <a href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black underline"  >
                  Subitem 1
                </a>
              </li>
            <li class="m-base origin-top-left text-sm">
                <span class="block px-xs">
                  Subitem 2 without href
                </span>
              </li>
            <li class="m-base origin-top-left text-sm">
                <a href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black underline"  >
                  Subitem 3
                </a>
              </li>
       </ul>
    </li>
  </ul>
</nav>
<!-- /menu-vertical -->

with classes applied

Show code

Macro

{% from "components/menu-vertical/_macro.menu-vertical.njk" import componentMenuVertical %}
{{ componentMenuVertical({
  "classes": "bg-warning-light",
  "items": [
    {
      "href": "#",
      "text": "Option 1"
    },
    {
      "href": "#",
      "text": "Option 2",
      "id": "classes-1",
      "classes": "bg-warning-base",
      "sub": {
        "classes": "border-l-4 border-alert-base bg-alert-light",
        "items": [
          {
            "href": "#",
            "text": "Simple link"
          },
          {
            "text": "Simple link",
            "classes": "border-2 border-alert-base text-alert-base bg-white",
            "active": true
          },
          {
            "href": "#",
            "text": "Simple link"
          }
        ],
        "attributes": {
          "aria-labelledby": "classes-1"
        }
      }
    },
    {
      "href": "#",
      "text": "Option 3"
    },
    {
      "href": "#",
      "text": "Option 4"
    },
    {
      "href": "#",
      "text": "Option 5"
    }
  ],
  "attributes": {
    "aria-label": "Menu vertical"
  }
})  }}

Markup

<!-- menu-vertical -->
<nav class="bg-warning-light" aria-label="Menu vertical">
  <ul class="text-base">
    <li class="m-base">
      <a id="nav-item" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Option 1
      </a>
    </li>
    <li class="m-base">
      <a id="classes-1" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black bg-warning-base hover:text-primary-base hover:underline"  >
        Option 2
      </a>
        <ul class="border-l-4 border-alert-base bg-alert-light" aria-labelledby="classes-1">
            <li class="m-base origin-top-left text-sm">
                <a href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"  >
                  Simple link
                </a>
              </li>
            <li class="m-base origin-top-left text-sm">
                <span class="block px-xs border-2 border-alert-base text-alert-base bg-white font-bold font-bold" aria-current="page">
                  <strong>Simple link</strong>
                </span>
              </li>
            <li class="m-base origin-top-left text-sm">
                <a href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"  >
                  Simple link
                </a>
              </li>
       </ul>
    </li>
    <li class="m-base">
      <a id="nav-item-3" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Option 3
      </a>
    </li>
    <li class="m-base">
      <a id="nav-item-4" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Option 4
      </a>
    </li>
    <li class="m-base">
      <a id="nav-item-5" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Option 5
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-vertical -->

with idPrefix

See code to display the idPrefix applied

Show code

Macro

{% from "components/menu-vertical/_macro.menu-vertical.njk" import componentMenuVertical %}
{{ componentMenuVertical({
  "idPrefix": "site-menu-item",
  "items": [
    {
      "href": "#",
      "text": "Option 1"
    },
    {
      "href": "#",
      "text": "Option 2"
    },
    {
      "href": "#",
      "text": "Option 3"
    },
    {
      "href": "#",
      "text": "Option 4"
    },
    {
      "href": "#",
      "text": "Option 5"
    }
  ],
  "attributes": {
    "aria-label": "Menu vertical"
  }
})  }}

Markup

<!-- menu-vertical -->
<nav aria-label="Menu vertical">
  <ul class="text-base">
    <li class="m-base">
      <a id="site-menu-item" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Option 1
      </a>
    </li>
    <li class="m-base">
      <a id="site-menu-item-2" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Option 2
      </a>
    </li>
    <li class="m-base">
      <a id="site-menu-item-3" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Option 3
      </a>
    </li>
    <li class="m-base">
      <a id="site-menu-item-4" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Option 4
      </a>
    </li>
    <li class="m-base">
      <a id="site-menu-item-5" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Option 5
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-vertical -->

with individual ids

See code to display the ids applied

Show code

Macro

{% from "components/menu-vertical/_macro.menu-vertical.njk" import componentMenuVertical %}
{{ componentMenuVertical({
  "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": "Menu vertical"
  }
})  }}

Markup

<!-- menu-vertical -->
<nav aria-label="Menu vertical">
  <ul class="text-base">
    <li class="m-base">
      <a id="option-A" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Option 1
      </a>
    </li>
    <li class="m-base">
      <a id="option-B" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Option 2
      </a>
    </li>
    <li class="m-base">
      <a id="option-C" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Option 3
      </a>
    </li>
    <li class="m-base">
      <a id="option-D" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Option 4
      </a>
    </li>
    <li class="m-base">
      <a id="option-E" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Option 5
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-vertical -->

with attributes

See code to display the attributes applied

Show code

Macro

{% from "components/menu-vertical/_macro.menu-vertical.njk" import componentMenuVertical %}
{{ componentMenuVertical({
  "attributes": {
    "aria-label": "Menu vertical"
  },
  "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"
      },
      "sub": {
        "attributes": {
          "data-attribute-1": "value-A",
          "data-attribute-2": "value-B",
          "data-attribute-3": "value-C"
        },
        "items": [
          {
            "href": "#",
            "text": "Simple link",
            "attributes": {
              "data-attribute-1": "value-A",
              "data-attribute-2": "value-B",
              "data-attribute-3": "value-C"
            }
          },
          {
            "href": "#",
            "text": "Simple link"
          },
          {
            "href": "#",
            "text": "Simple link"
          }
        ]
      }
    },
    {
      "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

<!-- menu-vertical -->
<nav aria-label="Menu vertical">
  <ul class="text-base">
    <li class="m-base">
      <a id="nav-item" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"   data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
        Option 1
      </a>
    </li>
    <li class="m-base">
      <a id="nav-item-2" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"   data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
        Option 2
      </a>
    </li>
    <li class="m-base">
      <a id="nav-item-3" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"   data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
        Option 3
      </a>
        <ul data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
            <li class="m-base origin-top-left text-sm">
                <a href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"   data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
                  Simple link
                </a>
              </li>
            <li class="m-base origin-top-left text-sm">
                <a href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"  >
                  Simple link
                </a>
              </li>
            <li class="m-base origin-top-left text-sm">
                <a href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"  >
                  Simple link
                </a>
              </li>
       </ul>
    </li>
    <li class="m-base">
      <a id="nav-item-4" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"   data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
        Option 4
      </a>
    </li>
    <li class="m-base">
      <a id="nav-item-5" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"   data-attribute-1="value-A" data-attribute-2="value-B" data-attribute-3="value-C">
        Option 5
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-vertical -->

with mixed items

Show code

Macro

{% from "components/menu-vertical/_macro.menu-vertical.njk" import componentMenuVertical %}
{{ componentMenuVertical({
  "name": "with-sub-items",
  "idPrefix": "how-contacted",
  "items": [
    {
      "href": "#",
      "text": "Simple link"
    },
    {
      "text": "Item without href and disabled",
      "disabled": true
    },
    {
      "href": "#",
      "text": "Simple link"
    },
    {
      "href": "#",
      "text": "Parent with divider",
      "divider": true,
      "id": "with-sub-items-1",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Simple link"
          },
          {
            "href": "#",
            "text": "Simple link",
            "target": "_blank",
            "attributes": {
              "title": "Se abre en ventana nueva"
            }
          },
          {
            "href": "#",
            "text": "Simple link"
          },
          {
            "href": "#",
            "text": "Simple link",
            "divider": true
          },
          {
            "href": "#",
            "text": "Simple link"
          }
        ],
        "attributes": {
          "aria-labelledby": "with-sub-items-1"
        }
      }
    },
    {
      "href": "#",
      "text": "Simple link"
    },
    {
      "href": "#",
      "text": "Simple link"
    },
    {
      "href": "#",
      "text": "With html inside",
      "sub": {
        "html": "<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p><p>Este es otro párrafo.</p>"
      }
    },
    {
      "href": "#",
      "text": "Simple link"
    },
    {
      "href": "#",
      "text": "Simple link"
    },
    {
      "href": "#",
      "text": "Simple link"
    },
    {
      "text": "Parent without href",
      "id": "with-sub-items-2",
      "sub": {
        "items": [
          {
            "href": "#",
            "text": "Subitem"
          },
          {
            "href": "#",
            "text": "Active subitem",
            "active": true
          },
          {
            "text": "Subitem without href and disabled",
            "disabled": true
          }
        ],
        "attributes": {
          "aria-labelledby": "with-sub-items-2"
        }
      }
    }
  ],
  "attributes": {
    "aria-label": "Menu vertical"
  }
})  }}

Markup

<!-- menu-vertical -->
<nav aria-label="Menu vertical">
  <ul class="text-base">
    <li class="m-base">
      <a id="how-contacted" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Simple link
      </a>
    </li>
    <li class="m-base">
      <span id="how-contacted-2" class="block px-xs"  aria-disabled="true" tabindex="-1">
        Item without href and disabled
      </span>
    </li>
    <li class="m-base">
      <a id="how-contacted-3" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Simple link
      </a>
    </li>
    <li class="m-base">
      <a id="with-sub-items-1" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Parent with divider
      </a>
        <ul aria-labelledby="with-sub-items-1">
            <li class="m-base origin-top-left text-sm">
                <a href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"  >
                  Simple link
                </a>
              </li>
            <li class="m-base origin-top-left text-sm">
                <a href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"   target="_blank" title="Se abre en ventana nueva">
                  Simple link
                </a>
              </li>
            <li class="m-base origin-top-left text-sm">
                <a href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"  >
                  Simple link
                </a>
              </li>
            <li class="m-base origin-top-left text-sm">
                <a href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"  >
                  Simple link
                </a>
              </li>
              <li class="my-sm border-b border-neutral-base" aria-hidden="true">
                <div class="sr-only">Separador</div>
              </li>
            <li class="m-base origin-top-left text-sm">
                <a href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"  >
                  Simple link
                </a>
              </li>
       </ul>
    </li>
    <li class="my-sm border-b border-neutral-base" aria-hidden="true">
      <div class="sr-only">Separador</div>
    </li>
    <li class="m-base">
      <a id="how-contacted-5" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Simple link
      </a>
    </li>
    <li class="m-base">
      <a id="how-contacted-6" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Simple link
      </a>
    </li>
    <li class="m-base">
      <a id="how-contacted-7" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        With html inside
      </a>
        <div class="mb-base px-xs origin-top-left text-sm text-neutral-dark" id="sub-how-contacted-7">
          <p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p><p>Este es otro párrafo.</p>
        </div>
    </li>
    <li class="m-base">
      <a id="how-contacted-8" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Simple link
      </a>
    </li>
    <li class="m-base">
      <a id="how-contacted-9" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Simple link
      </a>
    </li>
    <li class="m-base">
      <a id="how-contacted-10" href="#" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline"  >
        Simple link
      </a>
    </li>
    <li class="m-base">
      <span id="with-sub-items-2" class="block px-xs" >
        Parent without href
      </span>
        <ul aria-labelledby="with-sub-items-2">
            <li class="m-base origin-top-left text-sm">
                <a href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"  >
                  Subitem
                </a>
              </li>
            <li class="m-base origin-top-left text-sm">
                <a href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black font-bold" aria-current="page"  >
                  <strong>Active subitem</strong>
                </a>
              </li>
            <li class="m-base origin-top-left text-sm">
                <span class="block px-xs" aria-disabled="true" tabindex="-1">
                  Subitem without href and disabled
                </span>
              </li>
       </ul>
    </li>
  </ul>
</nav>
<!-- /menu-vertical -->