ComponentsCore

Dropdown Menu

A component that reveals a list of options when activated, allowing users to select one or multiple items.

Example

Installation

Shortcut

Shortcut (also known as Keyboard or KBD) support ensures smooth navigation via the keyboard. It's essential for users who rely on keyboard-only interaction and appreciated by power users for quick, efficient access to features.

Dialog

A dialog is a component used to capture user input, present important information, confirm critical actions, or prompt users to make decisions — all without requiring them to leave the current screen or context.

Field

The Field component is fundamental and used by many other components. It applies consistent, reusable styles and appears in inputs, labels, descriptions, and other related elements.

Popover

A popover is a floating overlay element that appears next to a trigger element, providing additional contextual information or actions without navigating away from the current page.

Install following dependencies:

npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motion

Add cn helper using clsx and twMerge for conditional class merging in Tailwind components.

lib/utils.ts

Copy and paste the following code into your project.

components/ui/core/dropdown-menu.tsx
npx @libravelui@latest add dropdown-menu

Anatomy

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…

Edit on GitHub

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.