Skin CSS Framework

Main Navigation

CSS Components

Guides

@ebay/skin/menu

DS v2.3

A menu is not a form control. If you wish to submit form data natively, without JavaScript, please consider checkbox , combobox , select , or radio instead.

Selecting a menu item command should update the page without a full page reload (i.e. acting similar to buttons, checkboxes or radios). If a full page load is required instead (i.e. acting like links), please refer to the fake menu .

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

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

A menu item can be badged using the badge module.

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

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

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

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

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

<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>

<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>

<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>

<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>

<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>

<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>