DropdownMenu
Button-triggered dropdown menu with keyboard navigation.
Examples
Basic dropdown
Simple dropdown with a list of actions; closes on outside click.
With icons
Each item prefixed with an icon for quick visual recognition.
With keyboard shortcuts
Keyboard shortcut hints displayed at the trailing edge of each item.
With submenu indicator
Items with nested submenus show a › chevron to signal drill-in.
With destructive item
Destructive action separated from safe actions by a divider.
With Checkboxes
With Radio Group
Installation
pnpm add @rokle/components @rokle/tokensInstalls with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.
Usage
import { DropdownMenu } from "@rokle/components";import { DropdownMenu } from "@rokle/components";
export function Example() {
return <DropdownMenu />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| trigger | ReactNode | - | Element that opens the menu. |
| items | MenuItem[] | - | Menu items with label and onClick. |