Menu
A dropdown menu — Attio's ⋯ / sort / filter menu surface.
The dropdown behind Attio's ⋯ record actions, column, sort, and filter menus — the same popover surface as Select: radius 12, soft layered shadow, over 32px items (icon + label + optional shortcut). Give it a trigger element and menu items as children; it handles opening, keyboard, and outside-click for you.
Preview
last action: — · domain
Installation
bun add crispimport "crisp/styles.css";
import {
Menu, MenuItem, MenuCheckboxItem, MenuSeparator, MenuLabel,
} from "crisp";Usage
import { Menu, MenuItem, MenuSeparator, Button } from "crisp";
import { Copy, Trash2 } from "lucide-react";
<Menu trigger={<Button intent="neutral">Actions</Button>}>
<MenuItem icon={<Copy size={15} />} shortcut="⌘C" onSelect={copy}>
Copy link
</MenuItem>
<MenuSeparator />
<MenuItem icon={<Trash2 size={15} />} danger onSelect={remove}>
Delete
</MenuItem>
</Menu>;API
Menu
| Prop | Type | Default | Description |
|---|---|---|---|
trigger | ReactElement | — | The element that opens the menu (gets the aria + click wiring). |
align | "start" | "end" | "start" | Align to the left or right edge of the trigger. |
aria-label | string | — | Accessible name for the menu. |
MenuItem
| Prop | Type | Description |
|---|---|---|
icon | ReactNode | Leading icon (muted). |
shortcut | string | Right-aligned shortcut hint (e.g. ⌘C). |
danger | boolean | Red destructive styling. |
disabled | boolean | Dims and skips the item. |
onSelect | () => void | Runs on click / Enter. |
closeOnSelect | boolean | Keep the menu open after selecting (default closes). |
Also: MenuCheckboxItem (checked / onCheckedChange, stays open on toggle), MenuSeparator, and MenuLabel for section headers.
Notes
- Keyboard. Opens on click / ↓ / Enter and focuses the first item; ↑/↓ move (wrapping), Home/End jump, typing does typeahead, Enter/Space select, Esc closes and returns focus to the trigger, Tab closes.
- Placement. Opens below-left of the trigger, flips up when there's no room and right-aligns with
align="end"; closes on outside pointer-down. - Semantics.
role="menu"overrole="menuitem"/role="menuitemcheckbox"buttons (rovingtabIndex), matching the WAI-ARIA menu pattern.