Dropdown Menu

Displays a menu to the user — such as a set of actions or functions — triggered by a button.

@@directive("'use client'")

@react.component

Installation

npmyarnpnpmbun
npx shadcn@latest add @rescript-shadcn/DropdownMenu
Copy

Usage

Copy<DropdownMenu>
  <DropdownMenu.Trigger render={<Button variant=Outline />}>
    {"Open"->React.string}
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Group>
      <DropdownMenu.Label> {"My Account"->React.string} </DropdownMenu.Label>
      <DropdownMenu.Item> {"Profile"->React.string} </DropdownMenu.Item>
      <DropdownMenu.Item> {"Billing"->React.string} </DropdownMenu.Item>
      <DropdownMenu.Separator />
    </DropdownMenu.Group>
    <DropdownMenu.Group>
      <DropdownMenu.Item> {"Team"->React.string} </DropdownMenu.Item>
      <DropdownMenu.Item> {"Subscription"->React.string} </DropdownMenu.Item>
    </DropdownMenu.Group>
  </DropdownMenu.Content>
</DropdownMenu>

Examples

Basic

A basic dropdown menu with labels and separators.

@@directive("'use client'")

@react.component

Submenu

Use DropdownMenuSub to nest secondary actions.

@@directive("'use client'")

@react.component

Shortcuts

Add DropdownMenuShortcut to show keyboard hints.

@@directive("'use client'")

@react.component

Icons

Combine icons with labels for quick scanning.

@@directive("'use client'")

@react.component

Checkboxes

Use DropdownMenuCheckboxItem for toggles.

@@directive("'use client'")

@react.component

Checkboxes Icons

Add icons to checkbox items.

@@directive("'use client'")

type notifications = {

Radio Group

Use DropdownMenuRadioGroup for exclusive choices.

@@directive("'use client'")

@react.component

Radio Icons

Show radio options with icons.

@@directive("'use client'")

@react.component

Destructive

Use variant=Destructive for irreversible actions.

@@directive("'use client'")

@react.component

Avatar

An account switcher dropdown triggered by an avatar.

@@directive("'use client'")

@react.component

Complex

A richer example combining groups, icons, and submenus.

@@directive("'use client'")

type notifications = {

API Reference

See the Base UI documentation for the full API reference.