Component
Dropdown
An action menu triggered by a button. Supports keyboard navigation, danger items, dividers, icons, and right-alignment.
Default
Sizes
Disabled
Right-aligned
Usage
tsx
import { Dropdown } from 'starkit-ui';
<Dropdown
trigger="Actions"
items={[
{ key: 'edit', label: 'Edit', icon: '✏️' },
{ key: 'delete', label: 'Delete', danger: true },
{ key: 'divider', divider: true },
{ key: 'archive', label: 'Archive', disabled: true },
]}
onSelect={(key) => console.log(key)}
/>
Accessibility
- Arrow Up/Down — navigate menu items
- Home / End — jump to first/last item
- Enter / Space — select focused item
- Escape — close menu and return focus to trigger
- Click outside — closes the menu
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items * | DropdownItem[] | — | Menu items (key, label, icon, disabled, danger, divider) |
| trigger * | ReactNode | — | Trigger button label |
| onSelect | (key: string) => void | — | Callback when an item is selected |
| size | 'sm' | 'md' | 'lg' | 'md' | Size preset |
| disabled | boolean | false | Disable the dropdown |
| alignRight | boolean | false | Align menu to the right edge |