# Dropdown Menu · JGuang UI

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

- Page: https://jiguang132.com/systems/jguang-ui/docs/components/base/dropdown-menu
- Based on: shadcn/ui documentation (MIT) @ bc0705384b51252af26dcc65425b216bf5eb063c

> Example `dropdown-menu-demo`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/dropdown-menu


## Installation


  

**Command**


  

**Manual**


```text
Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.
```


### Install the following dependencies:


```bash
npm install @base-ui/react
```


### Copy and paste the following code into your project.


[View complete source: components/ui/dropdown-menu.tsx](/r/jguang-ui/base/dropdown-menu.json)


### Update the import paths to match your project setup.


## Usage

```tsx showLineNumbers
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
```

```tsx showLineNumbers
<DropdownMenu>
  <DropdownMenuTrigger render={<Button variant="outline" />}>
    Open
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuGroup>
      <DropdownMenuLabel>My Account</DropdownMenuLabel>
      <DropdownMenuItem>Profile</DropdownMenuItem>
      <DropdownMenuItem>Billing</DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuItem>Team</DropdownMenuItem>
      <DropdownMenuItem>Subscription</DropdownMenuItem>
    </DropdownMenuGroup>
  </DropdownMenuContent>
</DropdownMenu>
```

## Composition

Use the following composition to build a `DropdownMenu`:

```text
DropdownMenu
├── DropdownMenuTrigger
└── DropdownMenuContent
    ├── DropdownMenuGroup
    │   ├── DropdownMenuLabel
    │   ├── DropdownMenuItem
    │   └── DropdownMenuItem
    ├── DropdownMenuSeparator
    ├── DropdownMenuGroup
    │   ├── DropdownMenuLabel
    │   ├── DropdownMenuCheckboxItem
    │   └── DropdownMenuCheckboxItem
    ├── DropdownMenuSeparator
    ├── DropdownMenuGroup
    │   ├── DropdownMenuLabel
    │   └── DropdownMenuRadioGroup
    │       ├── DropdownMenuRadioItem
    │       └── DropdownMenuRadioItem
    └── DropdownMenuSub
        ├── DropdownMenuSubTrigger
        └── DropdownMenuSubContent
            └── DropdownMenuGroup
                ├── DropdownMenuLabel
                ├── DropdownMenuItem
                └── DropdownMenuItem
```

## Basic

A basic dropdown menu with labels and separators.


> Example `dropdown-menu-basic`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/dropdown-menu


## Submenu

Use `DropdownMenuSub` to nest secondary actions.


> Example `dropdown-menu-submenu`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/dropdown-menu


## Shortcuts

Add `DropdownMenuShortcut` to show keyboard hints.


> Example `dropdown-menu-shortcuts`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/dropdown-menu


## Icons

Combine icons with labels for quick scanning.


> Example `dropdown-menu-icons`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/dropdown-menu


## Checkboxes

Use `DropdownMenuCheckboxItem` for toggles.


> Example `dropdown-menu-checkboxes`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/dropdown-menu


## Checkboxes Icons

Add icons to checkbox items.


> Example `dropdown-menu-checkboxes-icons`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/dropdown-menu


## Radio Group

Use `DropdownMenuRadioGroup` for exclusive choices.


> Example `dropdown-menu-radio-group`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/dropdown-menu


## Radio Icons

Show radio options with icons.


> Example `dropdown-menu-radio-icons`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/dropdown-menu


## Destructive

Use `variant="destructive"` for irreversible actions.


> Example `dropdown-menu-destructive`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/dropdown-menu


## Avatar

An account switcher dropdown triggered by an avatar.


> Example `dropdown-menu-avatar`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/dropdown-menu


## Complex

A richer example combining groups, icons, and submenus.


> Example `dropdown-menu-complex`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/dropdown-menu


## RTL

To enable RTL support in JGuang UI, see the [RTL configuration guide](/systems/jguang-ui/docs/rtl).


> Example `dropdown-menu-rtl`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/dropdown-menu


## API Reference

See the [Base UI documentation](https://base-ui.com/react/components/menu) for the full API reference.

---

Index of all JGuang resources: https://jiguang132.com/llms.txt