Dropdown Menu

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

Installation

npx shadcn@latest add https://scrollxui.dev/registry/dropdown-menu.json

Usage

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
<DropdownMenu>
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Billing</DropdownMenuItem>
    <DropdownMenuItem>Team</DropdownMenuItem>
    <DropdownMenuItem>Subscription</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Examples

Checkboxes

Radio Group

API Reference

Dropdown Menu

The Dropdown Menu component displays a clickable trigger that reveals a list of selectable menu items.

Props

PropertyTypeDefaultDescription
childrenReactNoderequired
Content inside the component. Applies to all DropdownMenu components.
classNamestring-
Custom CSS classes for styling. Applies to all components.
insetbooleanfalse
Applies to DropdownMenuItem, DropdownMenuLabel, DropdownMenuSubTrigger.
variant"default" | "destructive""default"
Visual style of the item. Only applies to DropdownMenuItem.
checkedbooleanfalse
Indicates whether the checkbox is selected. Only applies to DropdownMenuCheckboxItem.
valuestringrequired
Value of the item. Applies to DropdownMenuRadioItem and DropdownMenuRadioGroup.
onValueChange(value: string) => void-
Callback when selected value changes. Only for DropdownMenuRadioGroup.
sideOffsetnumber4
Offset in pixels from the trigger element. Only applies to DropdownMenuContent.
maxHeightstring | number16rem
Maximum height for scrollable dropdown content. Only applies to DropdownMenuContent.

Built withby Ahdeetai.