Menu-horizontal examples

Show params

Params

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

default

Show code

Macro

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

Markup


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

with disabled item

Show code

Macro

{% from "components/menu-horizontal/_macro.menu-horizontal.njk" import componentMenuHorizontal %}
{{ componentMenuHorizontal({
  "items": [
    {
      "href": "http://www.google.com",
      "text": "Option 1"
    },
    {
      "href": "http://www.google.com",
      "text": "Option 2"
    },
    {
      "href": "http://www.google.com",
      "text": "Disabled Option 3",
      "disabled": true
    },
    {
      "href": "http://www.google.com",
      "text": "Option 4"
    },
    {
      "href": "http://www.google.com",
      "text": "Option 5"
    }
  ],
  "attributes": {
    "aria-label": "Menu horizontal"
  }
})  }}

Markup


<!-- menu-horizontal -->
<nav class="c-menu-horizontal" aria-label="Menu horizontal">
  <ul class="c-menu-horizontal__list lg:flex lg:flex-wrap">
    <li>
      <a id="menu-item" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
        <span class="flex items-center pointer-events-none">
          Option 1
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-2" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
        <span class="flex items-center pointer-events-none">
          Option 2
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-3" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none no-underline pointer-events-none" disabled="disabled" aria-disabled="true" tabindex="-1">
        <span class="flex items-center pointer-events-none">
          Disabled Option 3
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-4" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
        <span class="flex items-center pointer-events-none">
          Option 4
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-5" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
        <span class="flex items-center pointer-events-none">
          Option 5
        </span>
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-horizontal -->

with active item

Show code

Macro

{% from "components/menu-horizontal/_macro.menu-horizontal.njk" import componentMenuHorizontal %}
{{ componentMenuHorizontal({
  "items": [
    {
      "href": "http://www.google.com",
      "text": "Option 1"
    },
    {
      "href": "http://www.google.com",
      "text": "Option 2"
    },
    {
      "href": "http://www.google.com",
      "text": "Option 3"
    },
    {
      "href": "http://www.google.com",
      "text": "Active Option 4",
      "active": true
    },
    {
      "href": "http://www.google.com",
      "text": "Option 5"
    }
  ],
  "attributes": {
    "aria-label": "Menu horizontal"
  }
})  }}

Markup


<!-- menu-horizontal -->
<nav class="c-menu-horizontal" aria-label="Menu horizontal">
  <ul class="c-menu-horizontal__list lg:flex lg:flex-wrap">
    <li>
      <a id="menu-item" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
        <span class="flex items-center pointer-events-none">
          Option 1
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-2" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
        <span class="flex items-center pointer-events-none">
          Option 2
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-3" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
        <span class="flex items-center pointer-events-none">
          Option 3
        </span>
      </a>
    </li>
    <li>
      <span id="menu-item-4" class="c-menu-horizontal__active flex items-center relative py-sm lg:px-lg lg:py-base border border-transparent truncate font-semibold" aria-current="page">
        <strong>Active Option 4</strong>
      </span>
    </li>
    <li>
      <a id="menu-item-5" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
        <span class="flex items-center pointer-events-none">
          Option 5
        </span>
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-horizontal -->

with target in links

Show code

Macro

{% from "components/menu-horizontal/_macro.menu-horizontal.njk" import componentMenuHorizontal %}
{{ componentMenuHorizontal({
  "items": [
    {
      "href": "http://www.google.com",
      "text": "Option 1",
      "target": "_blank"
    },
    {
      "href": "http://www.google.com",
      "text": "Option 2",
      "target": "_blank"
    },
    {
      "href": "http://www.google.com",
      "text": "Option 3",
      "target": "_blank"
    },
    {
      "href": "http://www.google.com",
      "text": "Option 4",
      "target": "_blank"
    },
    {
      "href": "http://www.google.com",
      "text": "Option 5",
      "target": "_blank"
    }
  ],
  "attributes": {
    "aria-label": "Menu horizontal"
  }
})  }}

Markup


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

with classes applied

Modifier class applied: .c-menu-horizontal--tabs

Show code

Macro

{% from "components/menu-horizontal/_macro.menu-horizontal.njk" import componentMenuHorizontal %}
{{ componentMenuHorizontal({
  "classes": "c-menu-horizontal--tabs",
  "items": [
    {
      "href": "http://www.google.com",
      "text": "Option 1"
    },
    {
      "href": "http://www.google.com",
      "text": "Option 2",
      "active": true
    },
    {
      "href": "http://www.google.com",
      "text": "Option 3"
    },
    {
      "href": "http://www.google.com",
      "text": "Option 4",
      "disabled": true
    },
    {
      "href": "http://www.google.com",
      "text": "Option 5"
    }
  ],
  "attributes": {
    "aria-label": "Menu horizontal"
  }
})  }}

Markup


<!-- menu-horizontal -->
<nav class="c-menu-horizontal c-menu-horizontal--tabs" aria-label="Menu horizontal">
  <ul class="c-menu-horizontal__list lg:flex lg:flex-wrap">
    <li>
      <a id="menu-item" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
        <span class="flex items-center pointer-events-none">
          Option 1
        </span>
      </a>
    </li>
    <li>
      <span id="menu-item-2" class="c-menu-horizontal__active flex items-center relative py-sm lg:px-lg lg:py-base border border-transparent truncate font-semibold" aria-current="page">
        <strong>Option 2</strong>
      </span>
    </li>
    <li>
      <a id="menu-item-3" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
        <span class="flex items-center pointer-events-none">
          Option 3
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-4" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none no-underline pointer-events-none" disabled="disabled" aria-disabled="true" tabindex="-1">
        <span class="flex items-center pointer-events-none">
          Option 4
        </span>
      </a>
    </li>
    <li>
      <a id="menu-item-5" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
        <span class="flex items-center pointer-events-none">
          Option 5
        </span>
      </a>
    </li>
  </ul>
</nav>
<!-- /menu-horizontal -->

with idPrefix

See code to display the idPrefix applied

Show code

Macro

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

Markup


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

with individual ids

See code to display the ids applied

Show code

Macro

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

Markup


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

with attributes

See code to display the attributes applied

Show code

Macro

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

Markup


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