Dropdown

The .c-dropdown is a button-triggered option menu using the Popover API + CSS Anchor Positioning. Use it for sort menus, filter pickers, and action choices that need icons or richer rows.

For ordinary forms, prefer a native <select>. If an app uses .c-dropdown as a select-like control, app JavaScript must sync aria-expanded, the checked or selected option, and a hidden input or other submitted value.

Semantic HTML

<div class="c-dropdown">
  <button
    class="c-dropdown__trigger"
    id="project-trigger"
    popovertarget="dd-1"
    aria-haspopup="menu"
    aria-controls="dd-1"
    aria-expanded="false"
  >
    <span class="c-dropdown__label">Project Alpha</span>
    <svg class="c-dropdown__chevron">...</svg>
  </button>
  <div
    popover
    class="c-dropdown__menu"
    id="dd-1"
    role="menu"
    aria-labelledby="project-trigger"
  >
    <button
      class="c-dropdown__option"
      type="button"
      role="menuitemradio"
      aria-checked="true"
    >
      Project Alpha
    </button>
    <button
      class="c-dropdown__option"
      type="button"
      role="menuitemradio"
      aria-checked="false"
    >
      Project Beta
    </button>
  </div>
</div>

Update aria-expanded when the popover opens or closes. For single-choice menus, use role="menuitemradio" plus aria-checked; for command/action menus, use role="menuitem" and do not present the component as a submitted form value unless you sync one.

Class contract