Menu Component

NOTE: Only limited JavaScript behaviour has been implemented in these examples. For detailed behaviour requirements, please visit our menu pattern .

Default Menu

The default menu is a stateless menu. Each item has a role of menuitem .

<div class="menu">
  <div class="menu__items" role="menu">
    <div class="menu__item" role="menuitem">
      <span> Item 1 </span>
    </div>
    <div class="menu__item" role="menuitem">
      <span> Item 2 </span>
    </div>
    <div class="menu__item" role="menuitem" aria-disabled="true">
      <span> Item 3 </span>
    </div>
    <div class="menu__item" role="menuitem">
      <span> Item 4 </span>
    </div>
  </div>
</div>

Badged Menu

A menu item can be badged using the badge module.

The menuitem element requires an additional menu__item--badged modifier.

<span class="menu">
  <div class="menu__items" role="menu">
    <div
      aria-label="Item 1 (3 notifications)"
      class="menu__item menu__item--badged"
      role="menuitem"
    >
      <span aria-hidden="true">
        Item 1
        <span class="badge"> 3 </span>
      </span>
    </div>
    <div
      aria-label="Item 2 (77 notifications)"
      class="menu__item menu__item--badged"
      role="menuitem"
    >
      <span aria-hidden="true">
        Item 2
        <span class="badge"> 77 </span>
      </span>
    </div>
    <div class="menu__item menu__item--badged" role="menuitem">
      <span> Item 3 </span>
    </div>
  </div>
</span>

Single-Select Menu

For single-select state, use role menuitemradio on each menu item.

<div class="menu">
  <div class="menu__items" role="menu">
    <div class="menu__item" role="menuitemradio" aria-checked="true">
      <span> Item 1 </span>
      <svg class="icon icon--16" height="10" width="14" aria-hidden="true">
        <use href="#icon-tick-16" />
      </svg>
    </div>
    <div class="menu__item" role="menuitemradio" aria-checked="false">
      <span> Item 2 </span>
      <svg class="icon icon--16" height="10" width="14" aria-hidden="true">
        <use href="#icon-tick-16" />
      </svg>
    </div>
    <div class="menu__item" role="menuitemradio" aria-checked="false">
      <span> Item 3 </span>
      <svg class="icon icon--16" height="10" width="14" aria-hidden="true">
        <use href="#icon-tick-16" />
      </svg>
    </div>
  </div>
</div>

Multi-Select Menu

For multi-select state, use role menuitemcheckbox on each menu item.

<div class="menu">
  <div class="menu__items" role="menu">
    <div class="menu__item" role="menuitemcheckbox" aria-checked="true">
      <span> Item 1 </span>
      <svg class="icon icon--16" height="10" width="14" aria-hidden="true">
        <use href="#icon-tick-16" />
      </svg>
    </div>
    <div class="menu__item" role="menuitemcheckbox" aria-checked="false">
      <span> Item 2 </span>
      <svg class="icon icon--16" height="10" width="14" aria-hidden="true">
        <use href="#icon-tick-16" />
      </svg>
    </div>
    <div class="menu__item" role="menuitemcheckbox" aria-checked="false">
      <span> Item 3 </span>
      <svg class="icon icon--16" height="10" width="14" aria-hidden="true">
        <use href="#icon-tick-16" />
      </svg>
    </div>
  </div>
</div>

Grouped Menu

Menu items can be separated into groups, using the hr tag.

<div class="menu">
  <div class="menu__items" role="menu">
    <div class="menu__item" role="menuitem">
      <span> Item 1 </span>
    </div>
    <hr class="menu__separator" role="separator" />
    <div
      class="menu__item"
      role="menuitemradio"
      aria-checked="true"
      data-makeup-group="sort"
    >
      <span> Item B1 </span>
      <svg class="icon icon--16" height="10" width="14" aria-hidden="true">
        <use href="#icon-tick-16" />
      </svg>
    </div>
    <div
      class="menu__item"
      role="menuitemradio"
      aria-checked="false"
      data-makeup-group="sort"
    >
      <span> Item B2 </span>
      <svg class="icon icon--16" height="10" width="14" aria-hidden="true">
        <use href="#icon-tick-16" />
      </svg>
    </div>
    <div
      class="menu__item"
      role="menuitemradio"
      aria-checked="false"
      data-makeup-group="sort"
    >
      <span> Item B3 </span>
      <svg class="icon icon--16" height="10" width="14" aria-hidden="true">
        <use href="#icon-tick-16" />
      </svg>
    </div>
    <hr class="menu__separator" role="separator" />
    <div
      class="menu__item"
      role="menuitemcheckbox"
      aria-checked="true"
      data-menuitemcheckbox-name="sort"
    >
      <span> Item 2 </span>
      <svg class="icon icon--16" height="10" width="14" aria-hidden="true">
        <use href="#icon-tick-16" />
      </svg>
    </div>
    <div
      class="menu__item"
      role="menuitemcheckbox"
      aria-checked="true"
      data-menuitemcheckbox-name="sort"
    >
      <span> Item 3 </span>
      <svg class="icon icon--16" height="10" width="14" aria-hidden="true">
        <use href="#icon-tick-16" />
      </svg>
    </div>
  </div>
</div>

Fake Menu

A fake menu is simply a list of links, styled to look like ARIA menu items.

<div class="fake-menu">
  <ul class="fake-menu__items">
    <li>
      <a
        class="fake-menu__item"
        href="https://www.ebay.com"
        aria-current="page"
      >
        <span> Link 1 </span>
        <svg class="icon icon--16" height="10" width="14" aria-hidden="true">
          <use href="#icon-tick-16" />
        </svg>
      </a>
    </li>
    <li>
      <a href="https://www.ebay.com" class="fake-menu__item"> Link 2 </a>
    </li>
    <li>
      <a href="https://www.ebay.com" class="fake-menu__item"> Link 3 </a>
    </li>
  </ul>
</div>

Filter menu - checkbox

To use a filter menu checkbox, use icon--checked and icon--unchecked elements inside each menuitemcheckbox

<span class="menu menu--filter">
  <div class="menu__items" role="menu">
    <div class="menu__item" role="menuitemcheckbox" aria-checked="true">
      <svg class="icon icon--18 icon--unchecked" height="18" width="18">
        <use href="#icon-checkbox-unchecked-18" />
      </svg>
      <svg class="icon icon--18 icon--checked" height="18" width="18">
        <use href="#icon-checkbox-checked-18" />
      </svg>
      <span> Menu Item 1 </span>
    </div>
    <div class="menu__item" role="menuitemcheckbox" aria-checked="true">
      <svg class="icon icon--18 icon--unchecked" height="18" width="18">
        <use href="#icon-checkbox-unchecked-18" />
      </svg>
      <svg class="icon icon--18 icon--checked" height="18" width="18">
        <use href="#icon-checkbox-checked-18" />
      </svg>
      <span> Menu Item 2 </span>
    </div>
    <div class="menu__item" role="menuitemcheckbox" aria-checked="false">
      <svg class="icon icon--18 icon--unchecked" height="18" width="18">
        <use href="#icon-checkbox-unchecked-18" />
      </svg>
      <svg class="icon icon--18 icon--checked" height="18" width="18">
        <use href="#icon-checkbox-checked-18" />
      </svg>
      <span> Menu Item 3 </span>
    </div>
  </div>
</span>

Filter menu button - radio

To use a filter menu button with radios, use filter-chip as the button and have icon--checked and icon--unchecked elements inside each menuitemradio

<span class="menu menu--filter">
  <div class="menu__items" role="menu">
    <div class="menu__item" role="menuitemradio" aria-checked="false">
      <svg class="icon icon--18 icon--unchecked" height="18" width="18">
        <use href="#icon-radio-unchecked-18" />
      </svg>
      <svg class="icon icon--18 icon--checked" height="18" width="18">
        <use href="#icon-radio-checked-18" />
      </svg>
      <span> Menu Item 1 </span>
    </div>
    <div class="menu__item" role="menuitemradio" aria-checked="true">
      <svg class="icon icon--18 icon--unchecked" height="18" width="18">
        <use href="#icon-radio-unchecked-18" />
      </svg>
      <svg class="icon icon--18 icon--checked" height="18" width="18">
        <use href="#icon-radio-checked-18" />
      </svg>
      <span> Menu Item 2 </span>
    </div>
    <div class="menu__item" role="menuitemradio" aria-checked="false">
      <svg class="icon icon--18 icon--unchecked" height="18" width="18">
        <use href="#icon-radio-unchecked-18" />
      </svg>
      <svg class="icon icon--18 icon--checked" height="18" width="18">
        <use href="#icon-radio-checked-18" />
      </svg>
      <span> Menu Item 3 </span>
    </div>
  </div>
</span>

Filter menu button - with footer

To add a filter menu button with a footer, include .menu__footer container

<span class="menu menu--filter">
  <div class="menu__items" role="menu">
    <div class="menu__item" role="menuitemcheckbox" aria-checked="true">
      <svg class="icon icon--18 icon--unchecked" height="18" width="18">
        <use href="#icon-checkbox-unchecked-18" />
      </svg>
      <svg class="icon icon--18 icon--checked" height="18" width="18">
        <use href="#icon-checkbox-checked-18" />
      </svg>
      <span> Menu Item 1 </span>
    </div>
    <div class="menu__item" role="menuitemcheckbox" aria-checked="true">
      <svg class="icon icon--18 icon--unchecked" height="18" width="18">
        <use href="#icon-checkbox-unchecked-18" />
      </svg>
      <svg class="icon icon--18 icon--checked" height="18" width="18">
        <use href="#icon-checkbox-checked-18" />
      </svg>
      <span> Menu Item 2 </span>
    </div>
    <div class="menu__item" role="menuitemcheckbox" aria-checked="false">
      <svg class="icon icon--18 icon--unchecked" height="18" width="18">
        <use href="#icon-checkbox-unchecked-18" />
      </svg>
      <svg class="icon icon--18 icon--checked" height="18" width="18">
        <use href="#icon-checkbox-checked-18" />
      </svg>
      <span> Menu Item 3 </span>
    </div>
  </div>
  <div class="menu__footer">
    <button class="btn btn--tertiary" type="submit">Apply</button>
  </div>
</span>