A filter menu forms the basis of the filter-menu-button module; we provide it here as a standalone version in the case it might be opened or rendered via other means (in a dialog for example).

Multi-Select Filter Menu

<span class="filter-menu">
  <div class="filter-menu__items" role="menu">
    <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
      <span class="filter-menu__checkbox">
        <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>
      <span class="filter-menu__text"> Item 1 </span>
    </div>
    <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
      <span class="filter-menu__checkbox">
        <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>
      <span class="filter-menu__text"> Item 2 </span>
    </div>
    <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
      <span class="filter-menu__checkbox">
        <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>
      <span class="filter-menu__text"> Item 3 </span>
    </div>
  </div>
</span>

Single-Select Filter Menu

<div class="filter-menu">
  <div class="filter-menu__items" role="menu">
    <div class="filter-menu__item" role="menuitemradio" aria-checked="false">
      <span class="filter-menu__radio">
        <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>
      <span class="filter-menu__text"> Item 1 </span>
    </div>
    <div class="filter-menu__item" role="menuitemradio" aria-checked="false">
      <span class="filter-menu__radio">
        <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>
      <span class="filter-menu__text"> Item 2 </span>
    </div>
    <div class="filter-menu__item" role="menuitemradio" aria-checked="false">
      <span class="filter-menu__radio">
        <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>
      <span class="filter-menu__text"> Item 3 </span>
    </div>
  </div>
</div>

Filter Menu with Disabled Options

<span class="filter-menu">
  <div class="filter-menu__items" role="menu">
    <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
      <span class="filter-menu__checkbox">
        <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>
      <span class="filter-menu__text"> Item 1 </span>
    </div>
    <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
      <span class="filter-menu__checkbox">
        <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>
      <span class="filter-menu__text"> Item 2 </span>
    </div>
    <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
      <span class="filter-menu__checkbox">
        <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>
      <span class="filter-menu__text"> Item 3 </span>
    </div>
  </div>
</span>

Filter Menu as Form

A form version is also available. It uses the checkbox and radio modules to render checkboxes or radios instead of ARIA menu items. The form version must contain a submit button.

<div class="filter-menu-form">
  <form name="filter-menu-form-1" action="https://www.ebay.com">
    <div class="filter-menu-form__items">
      <label
        for="filter-menu-form-checkbox-item-1"
        class="filter-menu-form__item"
      >
        <span class="checkbox">
          <input
            aria-label="Item 1"
            class="checkbox__control"
            type="checkbox"
            name="filter-menu-form-checkbox-item-1"
            id="filter-menu-form-checkbox-item-1"
          />
          <span class="checkbox__icon" hidden>
            <svg class="checkbox__unchecked" height="18" width="18">
              <use href="#icon-checkbox-unchecked-18" />
            </svg>
            <svg class="checkbox__checked" height="18" width="18">
              <use href="#icon-checkbox-checked-18" />
            </svg>
          </span>
        </span>
        <span class="filter-menu-form__text"> Item 1 </span>
      </label>
      <label
        for="filter-menu-form-checkbox-item-2"
        class="filter-menu-form__item"
      >
        <span class="checkbox">
          <input
            aria-label="Item 2"
            class="checkbox__control"
            type="checkbox"
            name="filter-menu-form-checkbox-item-2"
            id="filter-menu-form-checkbox-item-2"
          />
          <span class="checkbox__icon" hidden>
            <svg class="checkbox__unchecked" height="18" width="18">
              <use href="#icon-checkbox-unchecked-18" />
            </svg>
            <svg class="checkbox__checked" height="18" width="18">
              <use href="#icon-checkbox-checked-18" />
            </svg>
          </span>
        </span>
        <span class="filter-menu-form__text"> Item 2 </span>
      </label>
      <label
        for="filter-menu-form-checkbox-item-3"
        class="filter-menu-form__item"
      >
        <span class="checkbox">
          <input
            aria-label="Item 3"
            class="checkbox__control"
            type="checkbox"
            name="filter-menu-form-checkbox-item-3"
            id="filter-menu-form-checkbox-item-3"
          />
          <span class="checkbox__icon" hidden>
            <svg class="checkbox__unchecked" height="18" width="18">
              <use href="#icon-checkbox-unchecked-18" />
            </svg>
            <svg class="checkbox__checked" height="18" width="18">
              <use href="#icon-checkbox-checked-18" />
            </svg>
          </span>
        </span>
        <span class="filter-menu-form__text"> Item 3 </span>
      </label>
    </div>
    <button type="submit" class="filter-menu-form__footer">Apply</button>
  </form>
</div>

Filter Menu with Footer

For multiple selection variation, you can also add an "Apply" button as a footer(to "apply" the selection(s)).

<span class="filter-menu">
  <div class="filter-menu__items" role="menu">
    <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
      <span class="filter-menu__checkbox">
        <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>
      <span class="filter-menu__text"> Item 1 </span>
    </div>
    <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
      <span class="filter-menu__checkbox">
        <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>
      <span class="filter-menu__text"> Item 2 </span>
    </div>
    <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
      <span class="filter-menu__checkbox">
        <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>
      <span class="filter-menu__text"> Item 3 </span>
    </div>
  </div>
  <button
    type="button"
    aria-label="Apply selections"
    class="filter-menu__footer"
  >
    Apply
  </button>
</span>

Filter Menu with Header and Footer

For multiple selection variation, you can also add a header to search the options.

<div class="filter-menu">
  <div class="filter-menu__header">
    <svg aria-hidden="true" class="icon icon--16" height="24" width="24">
      <use href="#icon-search-16" />
    </svg>
    <input
      type="text"
      class="filter-menu__search"
      placeholder="Search"
      aria-owns="filter-menu-search-items-1"
    />
    <button type="button" class="btn" aria-label="Clear search">
      <svg aria-hidden="true" class="icon icon--20" height="28" width="28">
        <use href="#icon-clear-20" />
      </svg>
    </button>
  </div>
  <div class="filter-menu__items" role="menu" id="filter-menu-search-items-1">
    <div
      class="filter-menu__item"
      role="menuitemcheckbox"
      aria-checked="false"
      data-makeup-group="filter"
    >
      <span class="filter-menu__checkbox">
        <svg class="icon icon--18 icon--unchecked" height="18" width="18">
          <icon-symbol name="checkbox-unchecked-18" />
        </svg>
        <svg class="icon icon--18 icon--checked" height="18" width="18">
          <icon-symbol name="checkbox-checked-18" />
        </svg>
      </span>
      <span class="filter-menu__text"> Item 1 </span>
    </div>
    <div
      class="filter-menu__item"
      role="menuitemcheckbox"
      aria-checked="false"
      data-makeup-group="filter"
    >
      <span class="filter-menu__checkbox">
        <svg class="icon icon--18 icon--unchecked" height="18" width="18">
          <icon-symbol name="checkbox-unchecked-18" />
        </svg>
        <svg class="icon icon--18 icon--checked" height="18" width="18">
          <icon-symbol name="checkbox-checked-18" />
        </svg>
      </span>
      <span class="filter-menu__text"> Item 2 </span>
    </div>
    <div
      class="filter-menu__item"
      role="menuitemcheckbox"
      aria-checked="false"
      data-makeup-group="filter"
    >
      <span class="filter-menu__checkbox">
        <svg class="icon icon--18 icon--unchecked" height="18" width="18">
          <icon-symbol name="checkbox-unchecked-18" />
        </svg>
        <svg class="icon icon--18 icon--checked" height="18" width="18">
          <icon-symbol name="checkbox-checked-18" />
        </svg>
      </span>
      <span class="filter-menu__text"> Item 3 </span>
    </div>
  </div>
  <button
    type="button"
    aria-label="Apply selections"
    class="filter-menu__footer"
  >
    Apply
  </button>
</div>