Skip to main content

​
Overview

The DropdownMenu component is built on top of Radix UI’s DropdownMenu primitive and provides a comprehensive set of components for creating accessible dropdown menus with various item types, separators, and sub-menus.

​
Components

The root component that manages the open/close state of the dropdown menu. Inherits all props from @radix-ui/react-dropdown-menu Root component. The button or element that triggers the dropdown menu.
​
asChild
boolean
When true, merges props with the child element instead of rendering a button.
Inherits all props from @radix-ui/react-dropdown-menu Trigger component. The container for dropdown menu items.
​
className
string
Additional CSS classes to apply to the content container.
​
sideOffset
number
default:"4"
The distance in pixels from the trigger.
​
ref
React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.Content>>
Ref forwarded to the underlying content element.
Inherits all props from @radix-ui/react-dropdown-menu Content component. A clickable item within the dropdown menu.
​
className
string
Additional CSS classes to apply to the item.
​
inset
boolean
When true, adds left padding to align with labeled items.
​
ref
React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.Item>>
Ref forwarded to the underlying item element.
Inherits all props from @radix-ui/react-dropdown-menu Item component. A menu item with a checkbox indicator.
​
className
string
Additional CSS classes to apply to the checkbox item.
​
checked
boolean | 'indeterminate'
The checked state of the checkbox.
​
ref
React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>>
Ref forwarded to the underlying checkbox item element.
Inherits all props from @radix-ui/react-dropdown-menu CheckboxItem component. A menu item with a radio button indicator. Must be used within a DropdownMenuRadioGroup.
​
className
string
Additional CSS classes to apply to the radio item.
​
ref
React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>>
Ref forwarded to the underlying radio item element.
Inherits all props from @radix-ui/react-dropdown-menu RadioItem component. A label for a group of menu items.
​
className
string
Additional CSS classes to apply to the label.
​
inset
boolean
When true, adds left padding to align with other items.
​
ref
React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.Label>>
Ref forwarded to the underlying label element.
Inherits all props from @radix-ui/react-dropdown-menu Label component. A visual separator between menu items.
​
className
string
Additional CSS classes to apply to the separator.
​
spacing
'md' | 'lg'
Controls the vertical spacing around the separator.
  • md: 1rem (16px) margin
  • lg: 2rem (32px) margin
​
ref
React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.Separator>>
Ref forwarded to the underlying separator element.
Inherits all props from @radix-ui/react-dropdown-menu Separator component. Displays a keyboard shortcut hint aligned to the right of a menu item.
​
className
string
Additional CSS classes to apply to the shortcut text.
Inherits all props from React.HTMLAttributes<HTMLSpanElement>. Groups related menu items together. Inherits all props from @radix-ui/react-dropdown-menu Group component. The root component for a submenu. Inherits all props from @radix-ui/react-dropdown-menu Sub component. The trigger for opening a submenu.
​
className
string
Additional CSS classes to apply to the sub-trigger.
​
inset
boolean
When true, adds left padding to align with other items.
​
ref
React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>>
Ref forwarded to the underlying sub-trigger element.
Inherits all props from @radix-ui/react-dropdown-menu SubTrigger component. The container for submenu items.
​
className
string
Additional CSS classes to apply to the sub-content.
​
ref
React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.SubContent>>
Ref forwarded to the underlying sub-content element.
Inherits all props from @radix-ui/react-dropdown-menu SubContent component. Portals the dropdown menu content to a different part of the DOM. Inherits all props from @radix-ui/react-dropdown-menu Portal component. Groups radio items together to ensure only one can be selected at a time. Inherits all props from @radix-ui/react-dropdown-menu RadioGroup component.

​
Usage

​
Basic Menu

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@repo/ui/dropdown-menu'
import { Button } from '@repo/ui/button'

function MyDropdown() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="filled" size="md">
          Open Menu
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuLabel>My Account</DropdownMenuLabel>
        <DropdownMenuSeparator spacing="md" />
        <DropdownMenuItem>Profile</DropdownMenuItem>
        <DropdownMenuItem>Settings</DropdownMenuItem>
        <DropdownMenuSeparator spacing="md" />
        <DropdownMenuItem>Log out</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

​
With Keyboard Shortcuts

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from '@repo/ui/dropdown-menu'
import { Button } from '@repo/ui/button'

function MenuWithShortcuts() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="filled">Actions</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem>
          Profile
          <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          Settings
          <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

​
With Submenu

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuPortal,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from '@repo/ui/dropdown-menu'
import { Button } from '@repo/ui/button'

function MenuWithSubmenu() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="filled">Options</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem>Team</DropdownMenuItem>
        <DropdownMenuSub>
          <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
          <DropdownMenuPortal>
            <DropdownMenuSubContent>
              <DropdownMenuItem>Email</DropdownMenuItem>
              <DropdownMenuItem>Message</DropdownMenuItem>
            </DropdownMenuSubContent>
          </DropdownMenuPortal>
        </DropdownMenuSub>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

​
Accessibility

The DropdownMenu component is built on Radix UI primitives and includes comprehensive accessibility features:
  • Full keyboard navigation support
  • Focus management
  • Screen reader announcements
  • ARIA attributes for proper semantics
  • Support for disabled items

​
Source

Implementation: /home/daytona/workspace/source/packages/ui/src/dropdown-menu/dropdown-menu.tsx Styles: /home/daytona/workspace/source/packages/ui/src/dropdown-menu/dropdown-menu.styles.tsx

Build docs developers (and LLMs) love

Get started for freeTalk to us