║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

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

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

Installation

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

Usage

<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>

Examples

Dropdown Menu Checkbox

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

Dropdown Menu Radio

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

API Reference

DropdownMenu

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/radix/dropdown-menu#dropdownmenu" text="Animate UI API Reference - DropdownMenu Primitive" />

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

</div>

DropdownMenuTrigger

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/radix/dropdown-menu#dropdownmenutrigger" text="Animate UI API Reference - DropdownMenuTrigger Primitive" />

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

</div>

DropdownMenuContent

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/radix/dropdown-menu#dropdownmenucontent" text="Animate UI API Reference - DropdownMenuContent Primitive" />

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

</div>

<TypeTable type={{ sideOffset: { description: 'The offset of the dropdown menu content.', type: 'number', required: false, default: '4', }, 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>

DropdownMenuLabel

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/radix/dropdown-menu#dropdownmenulabel" text="Animate UI API Reference - DropdownMenuLabel Primitive" />

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

</div>

DropdownMenuSeparator

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/radix/dropdown-menu#dropdownmenuseparator" text="Animate UI API Reference - DropdownMenuSeparator Primitive" />

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

</div>

DropdownMenuGroup

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/radix/dropdown-menu#dropdownmenuhighlight" text="Animate UI API Reference - DropdownMenuHighlight Primitive" />

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

</div>

DropdownMenuItem

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/radix/dropdown-menu#dropdownmenuitem" text="Animate UI API Reference - DropdownMenuItem Primitive" />

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

</div>

<TypeTable type={{ variant: { description: 'The variant of the dropdown menu item.', type: 'default' | 'destructive', required: false, default: 'default', }, inset: { description: 'Whether the dropdown menu item is inset.', type: 'boolean', default: false, required: false, }, }} />

DropdownMenuItemIndicator

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/radix/dropdown-menu#dropdownmenuitemindicator" text="Animate UI API Reference - DropdownMenuItemIndicator Primitive" />

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

</div>

DropdownMenuCheckboxItem

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/radix/dropdown-menu#dropdownmenucheckboxitem" text="Animate UI API Reference - DropdownMenuCheckboxItem Primitive" />

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

</div>

DropdownMenuRadioGroup

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/radix/dropdown-menu#dropdownmenuradiogroup" text="Animate UI API Reference - DropdownMenuRadioGroup Primitive" />

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

</div>

DropdownMenuRadioItem

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/radix/dropdown-menu#dropdownmenuradioitem" text="Animate UI API Reference - DropdownMenuRadioItem Primitive" />

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

</div>

DropdownMenuShortcut

<ExternalLink href="https://animate-ui.com/docs/primitives/radix/dropdown-menu#dropdownmenushortcut" text="Animate UI API Reference - DropdownMenuShortcut Primitive" />

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

DropdownMenuSub

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/radix/dropdown-menu#dropdownmenusub" text="Animate UI API Reference - DropdownMenuSub Primitive" />

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

</div>

DropdownMenuSubTrigger

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/radix/dropdown-menu#dropdownmenusubtrigger" text="Animate UI API Reference - DropdownMenuSubTrigger Primitive" />

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

</div>

DropdownMenuSubContent

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/radix/dropdown-menu#dropdownmenusubcontent" text="Animate UI API Reference - DropdownMenuSubContent Primitive" />

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

</div>

<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

• Radix UI Dropdown Menu
• Credit to shadcn/ui for style inspiration.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║