Components / overlays
Dropdown Menu
Floating list of actions or choices opened from a trigger (Button, Icon Button, Select).
import { DropdownMenu } from '@basiiik/ui';
The snippet an agent gets
From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.
import { DropdownMenu, IconButton, MenuItem } from '@basiiik/ui';
<DropdownMenu trigger={<IconButton icon={<MoreHorizontalIcon />} aria-label="More actions" />}><MenuItem>Rename</MenuItem><MenuItem destructive>Delete</MenuItem></DropdownMenu>- Example values were filled in for the required prop trigger: replace them with your own.
- MoreHorizontalIcon is a placeholder for your own icons or components; @basiiik/ui ships no icons.
- ARIA menu pattern: the trigger has aria-haspopup=menu; ArrowDown or ArrowUp open it; arrows, Home, End and type-ahead move; Enter or Space choose; Escape closes and returns focus; Tab closes. Compose it from MenuItem and MenuSeparator.
- Compose with: menu-item.
- Storybook: Overlays/Dropdown Menu.
Props
| Prop | Type | Notes |
|---|---|---|
size | "sm" | "md" | Default "md" |
trigger required | ReactElement<TriggerProps, string | React.JSXElementConstructor<any>> | |
children | ReactNode |
Other props
| Prop | Type | What it does |
|---|---|---|
placement | "top" | "bottom" | |
align | "start" | "end" | |
open | boolean | |
defaultOpen | boolean | |
onOpenChange | (open: boolean) => void | |
className | string |
States. ARIA menu pattern: the trigger has aria-haspopup=menu; ArrowDown or ArrowUp open it; arrows, Home, End and type-ahead move; Enter or Space choose; Escape closes and returns focus; Tab closes. Compose it from MenuItem and MenuSeparator.
Parts
MenuSeparator
A divider between groups of MenuItems inside a DropdownMenu.
<MenuSeparator />MenuSeparator props
| Prop | Type | What it does |
|---|---|---|
className | string |
Use it when
- A list of actions from one trigger
Do not use it when
- Choosing a form value (use Select)
- Navigation menus with many links (use Navbar or Sidebar)
Rules for agents
- The trigger is a Button or IconButton (with aria-label) that names what the menu is for
- Children are MenuItems, with MenuSeparator between groups of related actions
- Mark irreversible items with destructive, put them last after a MenuSeparator, and confirm them with a Modal
- Use selected on MenuItem for on/off options (a menuitemcheckbox), and keepOpen when several are toggled in a row
- shortcut only displays a hint; wire the keyboard shortcut yourself
Avoid
- Using a Dropdown Menu to choose a form value (use Select or Combobox)
- Navigation with many links in a menu (use Navbar or Sidebar Item)
- Nesting menus inside menus
- A menu with a single item (use a Button)
- Running a destructive item straight from the menu with no confirmation or Undo
Writing the content
- Items start with a verb: 'Rename', 'Duplicate', 'Delete'
- Keep items to one to three words
- Add an ellipsis when the item opens a dialog that asks for more input: 'Rename…'
- Use sentence case
Keyboard
- Enter, Space or ArrowDown opens
- Arrow keys move
- Home and End jump
- Escape closes and returns focus
Accessibility
- aria-expanded on the trigger
- aria-labelledby the trigger
Colour tokens it reads
color.bg.brand.subtlecolor.bg.subtlecolor.bg.surfacecolor.border.subtlecolor.icon.disabledcolor.icon.secondarycolor.text.brandcolor.text.dangercolor.text.disabledcolor.text.primarycolor.text.tertiaryRelated
overlays 2 Figma variants Try it in the live demo