📝 Sign Up | 🔐 Log In

← Root | ↑ Up

┌─────────────────────────────────────────────────────────────────────────┐ │ 📄 shadcn/directory/imskyleen/animate-ui/primitives/radix/dropdown-menu │ └─────────────────────────────────────────────────────────────────────────┘

File: dropdown-menu.md

Updated: 11/7/2025

╔══════════════════════════════════════════════════════════════════════════════════════════════╗
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

title: Dropdown Menu description: Displays a menu to the user — such as a set of actions or functions — triggered by a button. author: name: imskyleen url: https://github.com/imskyleen releaseDate: 2025-09-07

<ComponentPreview name="demo-primitives-radix-dropdown-menu" />

Installation

<ComponentInstallation name="primitives-radix-dropdown-menu" />

Usage

With Highlight

<DropdownMenu>
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>

  <DropdownMenuContent>
    <DropdownMenuHighlight>
      <DropdownMenuLabel>My Account</DropdownMenuLabel>

      <DropdownMenuSeparator />

      <DropdownMenuGroup>
        <DropdownMenuHighlightItem>
          <DropdownMenuItem>
            <span>Profile</span>
            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuHighlightItem>
        <DropdownMenuHighlightItem>
          <DropdownMenuItem>
            <span>Billing</span>
            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuHighlightItem>
        <DropdownMenuHighlightItem>
          <DropdownMenuItem>
            <span>Settings</span>
            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuHighlightItem>
        <DropdownMenuHighlightItem>
          <DropdownMenuItem>
            <span>Keyboard shortcuts</span>
            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuHighlightItem>
      </DropdownMenuGroup>

      <DropdownMenuSeparator />

      <DropdownMenuGroup>
        <DropdownMenuHighlightItem>
          <DropdownMenuItem>
            <span>Team</span>
          </DropdownMenuItem>
        </DropdownMenuHighlightItem>

        <DropdownMenuSub>
          <DropdownMenuHighlightItem>
            <DropdownMenuSubTrigger>
              <span>Invite users</span>
              <ChevronRight />
            </DropdownMenuSubTrigger>
          </DropdownMenuHighlightItem>

          <DropdownMenuSubContent>
            <DropdownMenuHighlightItem>
              <DropdownMenuItem>
                <span>Email</span>
              </DropdownMenuItem>
            </DropdownMenuHighlightItem>
            <DropdownMenuHighlightItem>
              <DropdownMenuItem>
                <span>Message</span>
              </DropdownMenuItem>
            </DropdownMenuHighlightItem>
            <DropdownMenuSeparator />
            <DropdownMenuHighlightItem>
              <DropdownMenuItem>
                <span>More...</span>
              </DropdownMenuItem>
            </DropdownMenuHighlightItem>
          </DropdownMenuSubContent>
        </DropdownMenuSub>

        <DropdownMenuHighlightItem>
          <DropdownMenuItem>
            <span>New Team</span>
            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuHighlightItem>
      </DropdownMenuGroup>

      <DropdownMenuSeparator />

      <DropdownMenuHighlightItem>
        <DropdownMenuItem>
          <span>Log out</span>
          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
        </DropdownMenuItem>
      </DropdownMenuHighlightItem>
    </DropdownMenuHighlight>
  </DropdownMenuContent>
</DropdownMenu>

Without Highlight

<DropdownMenu>
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>

  <DropdownMenuContent>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>

    <DropdownMenuSeparator />

    <DropdownMenuGroup>
      <DropdownMenuItem>
        <span>Profile</span>
        <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuItem>
        <span>Billing</span>
        <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuItem>
        <span>Settings</span>
        <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuItem>
        <span>Keyboard shortcuts</span>
        <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
      </DropdownMenuItem>
    </DropdownMenuGroup>

    <DropdownMenuSeparator />

    <DropdownMenuGroup>
      <DropdownMenuItem>
        <span>Team</span>
      </DropdownMenuItem>

      <DropdownMenuSub>
        <DropdownMenuSubTrigger>
          <span>Invite users</span>
          <ChevronRight />
        </DropdownMenuSubTrigger>

        <DropdownMenuSubContent>
          <DropdownMenuItem>
            <span>Email</span>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <span>Message</span>
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem>
            <span>More...</span>
          </DropdownMenuItem>
        </DropdownMenuSubContent>
      </DropdownMenuSub>

      <DropdownMenuItem>
        <span>New Team</span>
        <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
      </DropdownMenuItem>
    </DropdownMenuGroup>

    <DropdownMenuSeparator />

    <DropdownMenuItem>
      <span>Log out</span>
      <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

API Reference

DropdownMenu

<ExternalLink href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu#root" text="Radix UI API Reference - DropdownMenu.Root" />

DropdownMenuTrigger

<ExternalLink href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu#trigger" text="Radix UI API Reference - DropdownMenu.Trigger" />

DropdownMenuPortal

<ExternalLink href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu#portal" text="Radix UI API Reference - DropdownMenu.Portal" />

<Callout type="info"> The `forceMount` property is not supported in the `DropdownMenuPortal` component, as it is used for animation. </Callout>

DropdownMenuContent

<ExternalLink href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu#content" text="Radix UI API Reference - DropdownMenu.Content" />

<TypeTable type={{ container: { description: 'Specify a container element to portal the content into.', type: 'HTMLElement', required: false, default: 'document.body', }, transition: { description: 'The transition of the dropdown menu content', type: 'Transition', required: false, default: '{ duration: 0.2 }', }, '...props': { description: 'The props of the dropdown menu content.', type: 'HTMLMotionProps<"div">', required: false, }, }} />

<Callout type="info"> The `forceMount` and `asChild` properties are not supported in the `DropdownMenuContent` component, as it is used for animation. </Callout>

DropdownMenuHighlight

<ExternalLink href="https://animate-ui.com/docs/primitives/effects/highlight#highlight" text="Animate UI API Reference - Highlight" />

<TypeTable type={{ transition: { description: 'The transition of the dropdown menu highlight', type: 'Transition', required: false, default: '{ type: "spring", stiffness: 350, damping: 35 }', }, }} />

DropdownMenuLabel

<ExternalLink href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu#label" text="Radix UI API Reference - DropdownMenu.Label" />

DropdownMenuSeparator

<ExternalLink href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu#separator" text="Radix UI API Reference - DropdownMenu.Separator" />

DropdownMenuGroup

<ExternalLink href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu#group" text="Radix UI API Reference - DropdownMenu.Group" />

DropdownMenuItem

<ExternalLink href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu#item" text="Radix UI API Reference - DropdownMenu.Item" />

DropdownMenuItemIndicator

<ExternalLink href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu#itemindicator" text="Radix UI API Reference - DropdownMenu.ItemIndicator" />

DropdownMenuHighlightItem

<ExternalLink href="https://animate-ui.com/docs/primitives/effects/highlight#highlightitem" text="Animate UI API Reference - HighlightItem" />

DropdownMenuCheckboxItem

<ExternalLink href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu#checkboxitem" text="Radix UI API Reference - DropdownMenu.CheckboxItem" />

DropdownMenuRadioGroup

<ExternalLink href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu#radiogroup" text="Radix UI API Reference - DropdownMenu.RadioGroup" />

DropdownMenuRadioItem

<ExternalLink href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu#radioitem" text="Radix UI API Reference - DropdownMenu.RadioItem" />

DropdownMenuShortcut

<TypeTable type={{ '...props': { description: 'The props of the dropdown menu shortcut.', type: 'React.ComponentProps<"span">', required: false, }, }} />

DropdownMenuSub

<ExternalLink href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu#sub" text="Radix UI API Reference - DropdownMenu.Sub" />

DropdownMenuSubTrigger

<ExternalLink href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu#subtrigger" text="Radix UI API Reference - DropdownMenu.SubTrigger" />

DropdownMenuSubContent

<ExternalLink href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu#subcontent" text="Radix UI API Reference - DropdownMenu.SubContent" />

<TypeTable type={{ transition: { description: 'The transition of the dropdown menu', type: 'Transition', required: false, default: '{ duration: 0.2 }', }, '...props': { description: 'The props of the dropdown menu sub content.', type: 'HTMLMotionProps<"div">', required: false, }, }} />

<Callout type="info"> The `forceMount` and `asChild` properties are not supported in the `DropdownMenuSubContent` component, as it is used for animation. </Callout>

Credits

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
╚══════════════════════════════════════════════════════════════════════════════════════════════╝

← Root | ↑ Up