Dropdown menu
A menu of actions opened from a trigger: items with icons, checkbox items, labels, separators, a destructive item.
Web only — React, from @krizaka/ui/dropdown-menu. Stable: its API only changes in a major version.
When to use
- For the secondary actions of an item or a page: edit, share, download, delete (a “more” button).
- For a few options toggled from a toolbar (
CheckboxItem).
When not to use
Installation
Install
npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { DropdownMenu } from "@krizaka/ui/dropdown-menu";Examples
Actions
A label, items with icons, a checkbox item, a separator and a destructive item.
import { Button } from "@krizaka/ui/button";
import { DropdownMenu } from "@krizaka/ui/dropdown-menu";
const icon = (d: string) => (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
<path d={d} />
</svg>
);
export default function DropdownMenuActions({ defaultOpen = false }: { defaultOpen?: boolean }) {
return (
<DropdownMenu.Root defaultOpen={defaultOpen} modal={false}>
<DropdownMenu.Trigger asChild>
<Button variant="outline">Actions</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content align="center">
<DropdownMenu.Label>Video</DropdownMenu.Label>
<DropdownMenu.Item>{icon("M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z")}Edit</DropdownMenu.Item>
<DropdownMenu.Item>{icon("M4 12v8h16v-8M16 6l-4-4-4 4M12 2v13")}Share</DropdownMenu.Item>
<DropdownMenu.Item disabled>{icon("M12 3v12M7 10l5 5 5-5M5 21h14")}Download</DropdownMenu.Item>
<DropdownMenu.CheckboxItem checked>Pinned to the profile</DropdownMenu.CheckboxItem>
<DropdownMenu.Separator />
<DropdownMenu.Item tone="danger">{icon("M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6")}Delete</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
);
}Props
DropdownMenuContent
| Prop | Type | Default | Description |
|---|---|---|---|
container | HTMLElement | null | — | The element the portal renders into (default: document.body). |
DropdownMenuItem
An action. tone="danger" for a destructive one; onSelect runs it (the menu closes).
| Prop | Type | Default | Description |
|---|---|---|---|
tone | "danger" | "default" | — | danger for a destructive action: the icon and the highlight carry the danger, the label stays legible. |
Accessibility
- Radix DropdownMenu:
role="menu",menuitem,menuitemcheckbox; disabled items are skipped. - Icons in items are decorative (
aria-hidden).
Keyboard
| Keys | Action |
|---|---|
| Enter / Space / Arrow down | Opens the menu from its trigger. |
| Arrow keys / Home / End | Move through the items; typing a letter jumps to an item. |
| Esc | Closes the menu and returns the focus to the trigger. |
Best practices
- Start each item with a verb; put the destructive one last, after a separator, with
tone="danger". - Keep the menu short: more than about seven items is a page or a palette.
- An
IconButtontrigger needs alabel(“More actions”).
Related components
Generated from the code of @krizaka/ui 2.0.0-beta.6: its meta.ts, its examples and its types.Edit this documentation on GitHub