Dropdown Menu
A component that reveals a list of options when activated, allowing users to select one or multiple items.
Example
Installation
Shortcut, Dialog, Field and Popover. Make sure you have installed and configured it before using this component.Shortcut
Dialog
Field
Popover
Install following dependencies:
npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motionAdd cn helper using clsx and twMerge for conditional class merging in Tailwind components.
Copy and paste the following code into your project.
npx libravelui@latest add dropdown-menuAnatomy
import {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuGroup,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubTrigger,
DropdownMenuSubContent,
} from "@/components/ui/core/dropdown-menu";<DropdownMenu>
<DropdownMenuTrigger>Open</DropdownMenuTrigger>
<DropdownMenuContent popover={{ placement: "top" }} withArrow>
<DropdownMenuGroup title="Account">
<DropdownMenuItem>
Profile
<DropdownMenuShortcut keys="⇧⌘P" />
</DropdownMenuItem>
<DropdownMenuItem>
Billing
<DropdownMenuShortcut keys="⌘B" />
</DropdownMenuItem>
<DropdownMenuItem>
Settings
<DropdownMenuShortcut keys="⌘S" />
</DropdownMenuItem>
<DropdownMenuItem>
Keyboard shortcuts
<DropdownMenuShortcut keys="⌘K" />
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup title="Team Management">
<DropdownMenuItem>Team</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
<DropdownMenuItem>Email</DropdownMenuItem>
<DropdownMenuItem>Message</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>More...</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuSub>
<DropdownMenuItem>
New Team
<DropdownMenuShortcut keys="⌘+T" />
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup title="Resources">
<DropdownMenuItem>GitHub</DropdownMenuItem>
<DropdownMenuItem>Support</DropdownMenuItem>
<DropdownMenuItem isDisabled>API</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup title="Danger Zone">
<DropdownMenuItem tone="destructive">
Log out
<DropdownMenuShortcut keys="⇧⌘Q" />
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>Another Examples
Custom trigger
Uses a custom trigger element, giving full control over the trigger’s appearance and behavior.
Multiple Selection
Allows users to select multiple items simultaneously from the menu. This is useful when more than one choice needs to be applied at once, such as filtering options, tagging, or batch actions.
Single Selection
Allows the user to select one option from the menu at a time, suitable for settings or filters where only a single choice is applicable.
Props
Loading types…
Context Menu
Instantly reveals a contextual menu at the precise location of your right-click, allowing users to quickly interact with actions that are relevant to the current element or interface state.
Accordion
An Accordion is a grouping of related disclosures. It supports both single and multiple expanded items.