Dropdown Menu

A versatile dropdown menu component for actions, navigation, and settings. Built on Radix UI with customizable positioning and rich interactions.

Need a clean way to organize actions without cluttering your interface? Dropdown menus give users quick access to contextual options right where they need them.

A comprehensive dropdown with groups, shortcuts, and submenus:

Loading component...

"use client"import { Button } from "@/components/ui/button"import {  DropdownMenu,  DropdownMenuContent,  DropdownMenuGroup,  DropdownMenuItem,  DropdownMenuLabel,  DropdownMenuPortal,  DropdownMenuSeparator,  DropdownMenuShortcut,  DropdownMenuSub,  DropdownMenuSubContent,  DropdownMenuSubTrigger,  DropdownMenuTrigger,} from "@/components/ui/dropdown-menu"export default function DropdownMenuDemo() {  return (    <DropdownMenu>      <DropdownMenuTrigger asChild>        <Button variant="outline">Open</Button>      </DropdownMenuTrigger>      <DropdownMenuContent className="w-56" align="start">        <DropdownMenuLabel>My Account</DropdownMenuLabel>        <DropdownMenuGroup>          <DropdownMenuItem>            Profile            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>          </DropdownMenuItem>          <DropdownMenuItem>            Billing            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>          </DropdownMenuItem>          <DropdownMenuItem>            Settings            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>          </DropdownMenuItem>          <DropdownMenuItem>            Keyboard shortcuts            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>          </DropdownMenuItem>        </DropdownMenuGroup>        <DropdownMenuSeparator />        <DropdownMenuGroup>          <DropdownMenuItem>Team</DropdownMenuItem>          <DropdownMenuSub>            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>            <DropdownMenuPortal>              <DropdownMenuSubContent>                <DropdownMenuItem>Email</DropdownMenuItem>                <DropdownMenuItem>Message</DropdownMenuItem>                <DropdownMenuSeparator />                <DropdownMenuItem>More...</DropdownMenuItem>              </DropdownMenuSubContent>            </DropdownMenuPortal>          </DropdownMenuSub>          <DropdownMenuItem>            New Team            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>          </DropdownMenuItem>        </DropdownMenuGroup>        <DropdownMenuSeparator />        <DropdownMenuItem>GitHub</DropdownMenuItem>        <DropdownMenuItem>Support</DropdownMenuItem>        <DropdownMenuItem disabled>API</DropdownMenuItem>        <DropdownMenuSeparator />        <DropdownMenuItem>          Log out          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>        </DropdownMenuItem>      </DropdownMenuContent>    </DropdownMenu>  )}

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Built on Radix UI Dropdown Menu with full keyboard navigation, screen reader support, and collision detection for smart positioning.

npx shadcn@latest add dropdown-menu

They organize complex actions into digestible, contextual groups:

Space efficient - Pack many options into a compact, discoverable menu
Contextual actions - Surface relevant options based on current selection
Keyboard friendly - Full arrow key navigation and shortcuts support
Smart positioning - Automatically adjust to stay within viewport bounds
Accessible by design - ARIA compliant with proper focus management
Flexible structure - Support for groups, separators, and nested submenus
Visual hierarchy - Clear organization with labels and visual separation
Touch optimized - Appropriately sized targets for mobile interactions

Basic dropdown for common actions:

Loading component...

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Checkbox options

Perfect for toggleable settings and view options:

Loading component...

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Radio button selections

Single-choice options like themes or layouts:

Loading component...

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Visual cues make options easier to scan:

Loading component...

"use client"import {   Cloud,   CreditCard,   Github,   Keyboard,   LifeBuoy,   LogOut,   Mail,   MessageSquare,   Plus,   PlusCircle,   Settings,   User,   UserPlus,   Users } from "lucide-react"import { Button } from "@/components/ui/button"import {  DropdownMenu,  DropdownMenuContent,  DropdownMenuGroup,  DropdownMenuItem,  DropdownMenuLabel,  DropdownMenuPortal,  DropdownMenuSeparator,  DropdownMenuShortcut,  DropdownMenuSub,  DropdownMenuSubContent,  DropdownMenuSubTrigger,  DropdownMenuTrigger,} from "@/components/ui/dropdown-menu"export default function DropdownMenuWithIcons() {  return (    <DropdownMenu>      <DropdownMenuTrigger asChild>        <Button variant="outline">          <User className="mr-2 h-4 w-4" />          Account        </Button>      </DropdownMenuTrigger>      <DropdownMenuContent className="w-56">        <DropdownMenuLabel>My Account</DropdownMenuLabel>        <DropdownMenuSeparator />        <DropdownMenuGroup>          <DropdownMenuItem>            <User className="mr-2 h-4 w-4" />            <span>Profile</span>            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>          </DropdownMenuItem>          <DropdownMenuItem>            <CreditCard className="mr-2 h-4 w-4" />            <span>Billing</span>            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>          </DropdownMenuItem>          <DropdownMenuItem>            <Settings className="mr-2 h-4 w-4" />            <span>Settings</span>            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>          </DropdownMenuItem>          <DropdownMenuItem>            <Keyboard className="mr-2 h-4 w-4" />            <span>Keyboard shortcuts</span>            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>          </DropdownMenuItem>        </DropdownMenuGroup>        <DropdownMenuSeparator />        <DropdownMenuGroup>          <DropdownMenuItem>            <Users className="mr-2 h-4 w-4" />            <span>Team</span>          </DropdownMenuItem>          <DropdownMenuSub>            <DropdownMenuSubTrigger>              <UserPlus className="mr-2 h-4 w-4" />              <span>Invite users</span>            </DropdownMenuSubTrigger>            <DropdownMenuPortal>              <DropdownMenuSubContent>                <DropdownMenuItem>                  <Mail className="mr-2 h-4 w-4" />                  <span>Email</span>                </DropdownMenuItem>                <DropdownMenuItem>                  <MessageSquare className="mr-2 h-4 w-4" />                  <span>Message</span>                </DropdownMenuItem>                <DropdownMenuSeparator />                <DropdownMenuItem>                  <PlusCircle className="mr-2 h-4 w-4" />                  <span>More...</span>                </DropdownMenuItem>              </DropdownMenuSubContent>            </DropdownMenuPortal>          </DropdownMenuSub>          <DropdownMenuItem>            <Plus className="mr-2 h-4 w-4" />            <span>New Team</span>            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>          </DropdownMenuItem>        </DropdownMenuGroup>        <DropdownMenuSeparator />        <DropdownMenuItem>          <Github className="mr-2 h-4 w-4" />          <span>GitHub</span>        </DropdownMenuItem>        <DropdownMenuItem>          <LifeBuoy className="mr-2 h-4 w-4" />          <span>Support</span>        </DropdownMenuItem>        <DropdownMenuItem disabled>          <Cloud className="mr-2 h-4 w-4" />          <span>API</span>        </DropdownMenuItem>        <DropdownMenuSeparator />        <DropdownMenuItem>          <LogOut className="mr-2 h-4 w-4" />          <span>Log out</span>          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>        </DropdownMenuItem>      </DropdownMenuContent>    </DropdownMenu>  )}

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Nested submenus

Organize complex hierarchies without overwhelming users:

Loading component...

"use client"import { Button } from "@/components/ui/button"import {  DropdownMenu,  DropdownMenuContent,  DropdownMenuGroup,  DropdownMenuItem,  DropdownMenuLabel,  DropdownMenuPortal,  DropdownMenuSeparator,  DropdownMenuSub,  DropdownMenuSubContent,  DropdownMenuSubTrigger,  DropdownMenuTrigger,} from "@/components/ui/dropdown-menu"export default function DropdownMenuSubmenu() {  return (    <DropdownMenu>      <DropdownMenuTrigger asChild>        <Button variant="outline">File Menu</Button>      </DropdownMenuTrigger>      <DropdownMenuContent className="w-56">        <DropdownMenuLabel>File</DropdownMenuLabel>        <DropdownMenuSeparator />        <DropdownMenuGroup>          <DropdownMenuItem>New File</DropdownMenuItem>          <DropdownMenuItem>Open File</DropdownMenuItem>          <DropdownMenuSub>            <DropdownMenuSubTrigger>Recent Files</DropdownMenuSubTrigger>            <DropdownMenuPortal>              <DropdownMenuSubContent>                <DropdownMenuItem>project-1.tsx</DropdownMenuItem>                <DropdownMenuItem>component.tsx</DropdownMenuItem>                <DropdownMenuItem>styles.css</DropdownMenuItem>                <DropdownMenuSeparator />                <DropdownMenuItem>Clear Recent</DropdownMenuItem>              </DropdownMenuSubContent>            </DropdownMenuPortal>          </DropdownMenuSub>        </DropdownMenuGroup>        <DropdownMenuSeparator />        <DropdownMenuGroup>          <DropdownMenuItem>Save</DropdownMenuItem>          <DropdownMenuItem>Save As...</DropdownMenuItem>          <DropdownMenuSub>            <DropdownMenuSubTrigger>Export</DropdownMenuSubTrigger>            <DropdownMenuPortal>              <DropdownMenuSubContent>                <DropdownMenuItem>Export as PDF</DropdownMenuItem>                <DropdownMenuItem>Export as PNG</DropdownMenuItem>                <DropdownMenuItem>Export as SVG</DropdownMenuItem>                <DropdownMenuSeparator />                <DropdownMenuSub>                  <DropdownMenuSubTrigger>More formats</DropdownMenuSubTrigger>                  <DropdownMenuPortal>                    <DropdownMenuSubContent>                      <DropdownMenuItem>JPEG</DropdownMenuItem>                      <DropdownMenuItem>WEBP</DropdownMenuItem>                      <DropdownMenuItem>GIF</DropdownMenuItem>                    </DropdownMenuSubContent>                  </DropdownMenuPortal>                </DropdownMenuSub>              </DropdownMenuSubContent>            </DropdownMenuPortal>          </DropdownMenuSub>        </DropdownMenuGroup>        <DropdownMenuSeparator />        <DropdownMenuItem>Print</DropdownMenuItem>        <DropdownMenuItem>Close</DropdownMenuItem>      </DropdownMenuContent>    </DropdownMenu>  )}

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

API Reference

DropdownMenu

The root component that manages dropdown state and positioning.

Prop	Type	Default	Description
`open`	`boolean`	-	Whether the dropdown is open
`onOpenChange`	`(open: boolean) => void`	-	Callback when open state changes
`defaultOpen`	`boolean`	`false`	Default open state (uncontrolled)
`dir`	`"ltr" \| "rtl"`	`"ltr"`	Text direction for proper positioning
`modal`	`boolean`	`true`	Whether to render as modal
`children`	`React.ReactNode`	-	Dropdown trigger and content

DropdownMenuTrigger

Element that opens the dropdown when activated.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as child element instead of button
`children`	`React.ReactNode`	-	Trigger content

DropdownMenuContent

The popup content container that holds menu items.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment relative to trigger
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	Preferred side to open
`sideOffset`	`number`	`4`	Distance from trigger element
`alignOffset`	`number`	`0`	Offset from align position
`children`	`React.ReactNode`	-	Menu items and groups

DropdownMenuItem

Individual selectable item within the menu.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`disabled`	`boolean`	`false`	Whether item is disabled
`onSelect`	`(event: Event) => void`	-	Callback when item is selected
`textValue`	`string`	-	Optional value for typeahead search
`children`	`React.ReactNode`	-	Item content

DropdownMenuCheckboxItem

Menu item with checkbox for toggleable options.

Prop	Type	Default	Description
`checked`	`boolean \| "indeterminate"`	-	Checkbox state
`onCheckedChange`	`(checked: boolean) => void`	-	Callback when checkbox changes
`disabled`	`boolean`	`false`	Whether item is disabled
`children`	`React.ReactNode`	-	Item content

DropdownMenuRadioItem

Menu item for single-choice selections within a radio group.

Prop	Type	Default	Description
`value`	`string`	-	Unique value for this radio option
`disabled`	`boolean`	`false`	Whether item is disabled
`children`	`React.ReactNode`	-	Item content

DropdownMenuLabel

Non-interactive label for organizing menu sections.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`React.ReactNode`	-	Label text

DropdownMenuSeparator

Visual separator between menu sections.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

DropdownMenuShortcut

Display keyboard shortcuts for menu items.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`React.ReactNode`	-	Shortcut text (e.g., "⌘K")

DropdownMenuSub

Container for nested submenu functionality.

Prop	Type	Default	Description
`open`	`boolean`	-	Whether submenu is open
`onOpenChange`	`(open: boolean) => void`	-	Callback when submenu state changes
`children`	`React.ReactNode`	-	SubTrigger and SubContent

Positioning Options

Side	Description	Best Use Cases
`bottom`	Opens below trigger	Default for most buttons and actions
`top`	Opens above trigger	When bottom space is limited
`left`	Opens to the left	Right-aligned triggers, RTL layouts
`right`	Opens to the right	Left-aligned triggers, additional space

Key	Action
`Space`/`Enter`	Open dropdown or select item
`Arrow Down`	Move to next item
`Arrow Up`	Move to previous item
`Arrow Right`	Open submenu or move to parent level
`Arrow Left`	Close submenu or move to parent level
`Home`	Move to first item
`End`	Move to last item
`Escape`	Close dropdown
`Tab`	Close dropdown and move to next element
`A-Z`	Typeahead search to matching item

Component Hierarchy

Dropdown menus support rich nesting and organization:

DropdownMenuGroup - Logical grouping of related items
DropdownMenuRadioGroup - Container for radio button selections
DropdownMenuSub - Nested submenu with trigger and content
DropdownMenuPortal - Render submenu in different DOM location

Create intuitive and efficient menu experiences:

Clear labels - Use action-oriented text that describes what will happen
Logical grouping - Organize related items together with separators
Appropriate icons - Enhance recognition without cluttering the interface
Smart shortcuts - Include keyboard shortcuts for power users
Reasonable length - Keep menus scannable, use submenus for long lists
Disabled states - Show unavailable options with clear disabled styling
Responsive design - Ensure touch targets are large enough on mobile
Loading states - Handle async actions with proper loading indicators
Destructive actions - Use clear styling and confirmation for dangerous operations

Simple action menu

Checkbox options

Radio button selections

Icon-enhanced menu

Nested submenus

API Reference

DropdownMenu

DropdownMenuTrigger

DropdownMenuContent

DropdownMenuItem

DropdownMenuCheckboxItem

DropdownMenuRadioItem

DropdownMenuLabel

DropdownMenuSeparator

DropdownMenuShortcut

DropdownMenuSub

Positioning Options

Keyboard Navigation

Component Hierarchy

On this page

Dropdown Menu

Reactbutton

Reactdropdown-menu

Reactbutton

Reactdropdown-menu

Reactbutton

Reactdropdown-menu

Reactbutton

Reactdropdown-menu

Reactbutton

Reactdropdown-menu

Reactbutton

Reactdropdown-menu

On this page