Overlays

Dropdown Menu

A menu triggered by a button that displays a list of actions or options. Supports grouping, labels, and separators.

Sourcesrc/components/ui/dropdown-menu.tsx

Grouped Menu

Import

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@mikenotthepope/substrateui"

Composition

DropdownMenu
├── DropdownMenuTrigger
└── DropdownMenuContent
    ├── DropdownMenuLabel
    ├── DropdownMenuSeparator
    └── DropdownMenuItem

Direction

The submenu indicator is a ChevronRight, and it mirrors: a submenu opens toward the end of the line, which in RTL is leftward. The RTL icon audit classifies it flip in RTL.

What does not mirror is a shortcut hint. ⌘K is a key name, not a direction, so DropdownMenuShortcut moves to the start edge in RTL but its text stays as written.

API Reference

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state of the dropdown menu.
`onOpenChange`	`(open: boolean) => void`	—	Callback fired when the open state changes.