Dropdown Menu

Pro

A menu button with a sliding highlight, shortcuts, typeahead and full keyboard control.

Click the menu, or focus it and press the down arrow.

Q3 roadmap

Edited 2 hours ago by Mia

Customize

Trigger

Align

Icons

Shortcuts

Installation

Dropdown Menu is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy dropdown-menu.tsx into components/ui and run npm install motion.

See Pro pricing

Usage

import { DropdownMenu } from "@/components/ui/dropdown-menu";

<DropdownMenu
  label="Options"
  align="end"
  items={[
    { label: "Rename", shortcut: "⌘R", onSelect: rename },
    { label: "Duplicate", shortcut: "⌘D", onSelect: duplicate },
    "separator",
    { label: "Delete", danger: true, onSelect: remove },
  ]}
/>

Props

6 properties

Property	Type	Default	Description
label	ReactNode	—	Content of the trigger button.
items	({ label, icon?, shortcut?, onSelect?, danger?, disabled? } \| "separator")[]	—	Menu items in order. The string "separator" draws a divider.
align	"start" \| "center" \| "end"	"start"	Horizontal alignment of the menu against the trigger.
ariaLabel	string	—	Accessible name for the trigger when its label is only an icon.
triggerClassName	string	—	Replaces the default trigger classes and hides the chevron.
className	string	—	Extra classes for the wrapper.

Dependencies: motion