Dropdown Menu

A menu that opens from a trigger with a list of options

A dropdown menu component built with Ark UI. Use the convenience API with trigger and items for simple menus, or the compound API for custom layout, groups, and separators.

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

const items = [
  { value: "profile", label: "Profile" },
  { value: "settings", label: "Settings" },
  { value: "logout", label: "Log out" },
];

export default function Example() {
  return <DropdownMenu trigger="Options" items={items} />;
}

View Code

Installation

bash

liminal add dropdown-menu

Usage

Pass trigger (button content or element) and items (array of { value, label, disabled? }). Use onSelect to handle item selection.

<DropdownMenu
  trigger="Options"
  items={[
    { value: "a", label: "Option A" },
    { value: "b", label: "Option B" },
  ]}
  onSelect={({ value }) => console.log(value)}
/>

View Code

Examples

Convenience API

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

<DropdownMenu
  trigger={<Button variant="outline">Open menu</Button>}
  items={[
    { value: "edit", label: "Edit" },
    { value: "duplicate", label: "Duplicate" },
    { value: "delete", label: "Delete", disabled: true },
  ]}
/>

View Code

Compound API

Use MenuRoot, MenuTrigger, MenuContent, MenuItem, MenuItemText, and optionally MenuItemGroup, MenuItemGroupLabel, and MenuSeparator for full control.

tsx

import {
  MenuRoot,
  MenuTrigger,
  MenuContent,
  MenuItemGroup,
  MenuItem,
  MenuItemText,
  MenuSeparator,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";

export default function Example() {
  return (
    <MenuRoot>
      <MenuTrigger asChild>
        <Button variant="outline">Actions</Button>
      </MenuTrigger>
      <MenuContent>
        <MenuItemGroup>
          <MenuItem value="new">New file</MenuItem>
          <MenuItem value="open">Open</MenuItem>
        </MenuItemGroup>
        <MenuSeparator />
        <MenuItemGroup>
          <MenuItem value="logout">Log out</MenuItem>
        </MenuItemGroup>
      </MenuContent>
    </MenuRoot>
  );
}

API

Prop	Type	Default	Description
trigger	React.ReactNode	-	Content or element that opens the menu (convenience API).
items	{ value: string; label: React.ReactNode; disabled?: boolean }[]	-	Menu options (convenience API).
onSelect	(details: { value: string }) => void	-	Callback when an item is selected.
open	boolean	uncontrolled	Controlled open state (MenuRoot).
onOpenChange	(details) => void	-	Callback when open state changes (MenuRoot).