Dropdown Menu

A menu of actions or options, opened by a button.

$ pnpm dlx shadcn@latest add https://dashral.com/r/dropdown-menu.json

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/dropdown-menu.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/dropdown-menu

Usage

example.tsx

1import { Button } from "@/components/dashral/button"
2import { DropdownMenu } from "@/components/dashral/dropdown-menu"
3
4<DropdownMenu
5  trigger={<Button variant="outline">Options</Button>}
6  items={[
7    { label: "Edit", shortcut: "⌘E" },
8    { label: "Duplicate" },
9    { type: "separator" },
10    { label: "Delete", color: "destructive", onSelect: () => api.project.delete() },
11  ]}
12/>

Examples

Radio group

A controlled single-choice menu.

Workspace switcher

The current workspace and plan as the trigger; a radio group of workspaces and the workspace actions.

API reference

DropdownMenu

Also takes every prop of Radix Dropdown Menu(opens in a new tab).

Prop	Type	Default
`trigger`	`ReactElement` What opens it. Required.	—
`items`	`MenuItem[]` Required. A MenuItem is { label, icon?, shortcut?, color?: "destructive", onSelect?, href?, external?, active?, disabled? }, or a { type } of "checkbox", "radio" (a group with options), "row" (small items side by side), "label", "separator" or "submenu" (with items).	—
`linkAs`	`ElementType` Your router's link, for items with href. From a client component.	`"a"`
`side / align / sideOffset`	Where it opens.	`"bottom" / "center" / 4`
`open / onOpenChange`	Control it yourself.	—
`className`	`string` The menu panel's classes, e.g. a width.	—

MenuItems

Building block: renders MenuItem[] with a Radix menu's parts, for a menu of your own.

Keyboard

Keys	Action
`Enter`or`Space`or`↓`	Open (on the trigger)
`↓`or`↑`	Move between items
`Enter`or`Space`	Choose the item (toggle a checkbox or radio item)
`→`	Open a submenu
`←`	Close a submenu
`Escape`	Close the menu and return focus
`A–Z`	Jump to the item starting with that letter

Accessibility

role="menu"; the trigger has aria-haspopup and aria-expanded.

Motion

Opens with a fade, a scale from 95%, a 2px blur clearing and a 4px slide from its trigger's side, on the spring (--duration-standard); closes faster (--duration-fast, --ease-exit). No blur with reduced motion.