Skip to content
Qirava lowercase logo

Quill docs

Menu

A popup action menu: a trigger (aria-haspopup / aria-expanded / aria-controls) opens a role=menu surface of role=menuitem rows. The active item is tracked with a roving tabindex; disabled items are skipped. The surface is hidden when closed.

Live demo#

Click "Actions" to open the menu, then use the arrow keys (Home/End jump to the ends) — the highlighted item gets a brand tint, and the disabled "Archive" row is skipped. Escape closes it.

Theme it#

Flip the component axes for this preview alone — the controls re-point scoped design tokens on the demo stage and the component itself restyles. Variant controls swap the component class, surface controls change the visual treatment, and motion controls change the interaction feel without leaking to the page.

Density
Radius
Surface
Motion
// This demo is scoped: these axes apply only to this preview.
el("div")
    .attr("data-q-size", "cozy")
    .attr("data-q-radius", "rounded")
    .attr("data-q-surface", "flat")
    .attr("data-q-motion", "smooth")
    .child(
        Menu::new("demo", /* items */).island("demo-island")
    )

Code#

Construct the component with its builder:

Menu::new(
    "row-actions",
    "Actions",
    vec![
        MenuItem::new("Rename"),
        MenuItem::new("Duplicate"),
        MenuItem::new("Archive").disabled(true),
        MenuItem::new("Delete"),
    ],
)
.island("row-actions-island")