Dropdown menu

A menu of actions opened from a trigger: items with icons, checkbox items, labels, separators, a destructive item.

WebStableOverlays

Web only — React, from @krizaka/ui/dropdown-menu. Stable: its API only changes in a major version.

Why it is here. Used by Orazaka.

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).

For the main action of a view: show it as a button.Use instead: Button
To search among many commands.Use instead: Command
For content that is not a list of actions (a form, details).Use instead: Popover
To pick a value in a form: use a select.Use instead: Field

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { DropdownMenu } from "@krizaka/ui/dropdown-menu";

A label, items with icons, a checkbox item, a separator and a destructive item.

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`	`"default" \| "danger"`	—	`danger` for a destructive action: the icon and the highlight carry the danger, the label stays legible.

Radix DropdownMenu: role="menu", menuitem, menuitemcheckbox; disabled items are skipped.
Icons in items are decorative (aria-hidden).

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.

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 IconButton trigger needs a label (“More actions”).

Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub