Menu

Menu is a dropdown menu with support for items, checkboxes, radio groups, and nested submenus.

Installation

import { Menu } from "@o/pipeline/experimental/components/menu";

Usage

By default, a Button triggers the menu; pass a custom element to the render prop on Menu.Trigger to replace it.

Note

  • RadioGroup and CheckboxItem don’t provide uncontrolled behavior, so you manage the state yourself.

Item icons

All items accept an icon prop (aliased as iconStart) and an iconEnd prop for additional visual cues; either slot accepts any node, including an Avatar.

With iconStart and iconEnd

With an avatar as the icon

Content

size

Note

SubContent size is not inherited from Content, so configure it separately if needed.

collisionPadding

Adjust collisionPadding to provide a more comfortable distance from the outer page edge. Similarly to size, SubContent does not inherit this value from Content.

Custom trigger