Dropdown

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

Dropdown : Shows a list of choices on button click.

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.

menuItems – An array of MenuItem objects. Each item includes:
- title: Text label of the item.
- description: Optional subtitle or detail.
- icon: Optional React element (e.g., Lucide icon).
triggerText – Text displayed on the dropdown button.
menuTitle – Optional heading shown at the top of the dropdown menu.
buttonVariant – Controls button style. Options include: default , outline , ghost , etc.
buttonSize – Controls button size. Options include: default , sm , lg , etc.
className – Optional custom classes for the dropdown container.
...props – Inherits all standard HTML button attributes and event handlers.