Dropdown

Animated Dropdown Reveals a menu of options or actions when activated by a button.

Installation

npx scrollx-ui@latest add dropdown

import Dropdown, { MenuItem } from "@/components/ui/dropdown";

<Dropdown
  menuItems={profileMenuItems}
  triggerText="User Menu"
  menuTitle="User Options"
  buttonVariant="outline"
  buttonSize="default"
/>

The Dropdown component displays a clickable trigger that reveals a list of selectable menu items with icons and descriptions.

Property	Type	Default	Description
`menuItems`	Array<{ title: string; description?: string; icon?: React.ReactNode }>	`required`	Array of items to display in the menu.
`triggerText`	string	`required`	Text shown on the dropdown trigger button.
`menuTitle`	string	`—`	Optional title at the top of the menu.
`buttonVariant`	"default" \| "outline" \| "ghost" \| string	`"default"`	Controls the visual style of the trigger button.
`buttonSize`	"default" \| "sm" \| "lg" \| string	`"default"`	Controls the size of the trigger button.
`className`	string	`—`	Optional custom class for the dropdown container.
`...props`	HTMLButtonElement attributes	`—`	Standard button props passed to the trigger.