Dropdown Menu

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

Installation

npx shadcn@latest add @scrollxui/dropdown-menu

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

Property	Type	Default	Description
`children`	ReactNode	`required`	Content inside the component. Applies to all DropdownMenu components.
`className`	string	`-`	Custom CSS classes for styling. Applies to all components.
`inset`	boolean	`false`	Applies to DropdownMenuItem, DropdownMenuLabel, DropdownMenuSubTrigger.
`variant`	"default" \| "destructive"	`"default"`	Visual style of the item. Only applies to DropdownMenuItem.
`checked`	boolean	`false`	Indicates whether the checkbox is selected. Only applies to DropdownMenuCheckboxItem.
`value`	string	`required`	Value of the item. Applies to DropdownMenuRadioItem and DropdownMenuRadioGroup.
`onValueChange`	(value: string) => void	`-`	Callback when selected value changes. Only for DropdownMenuRadioGroup.
`sideOffset`	number	`4`	Offset in pixels from the trigger element. Only applies to DropdownMenuContent.
`maxHeight`	string \| number	`16rem`	Maximum height for scrollable dropdown content. Only applies to DropdownMenuContent.