Menu

A list of actions in a dropdown, with keyboard navigation. The popup has no stroke. A highlighted row shows the accent dot to the left of the label. The trigger rests on the wash and shifts lightness on hover and focus. Items and triggers are Regular.

Anatomy

<UiMenuRoot>
  <UiMenuTrigger>Open</UiMenuTrigger>
  <UiMenuPortal>
    <UiMenuPositioner>
      <UiMenuPopup>
        <UiMenuItem>Action</UiMenuItem>
        <UiMenuSeparator />
        <UiMenuItem>Another</UiMenuItem>
      </UiMenuPopup>
    </UiMenuPositioner>
  </UiMenuPortal>
</UiMenuRoot>

Parts

• Root — owns open state. open / defaultOpen, disabled.
• Trigger — toggles the menu. openOnHover opens on pointer enter.
• Portal / Positioner / Popup — role="menu" below the trigger. Esc and outside click close.
• Item — role="menuitem". Click runs the action and closes. data-highlighted for keyboard and hover.
• Separator — a rule between groups.
• SubmenuRoot / SubmenuTrigger — nest another menu. It opens to the right of the trigger.

Enter and leave use data-starting-style / data-ending-style. No drop-shadow and no border.