# Dropdown menu

Monolith Dropdown menu component.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





<ComponentPreview name="dropdown-menu-demo">
  <div className="flex items-center gap-4 py-8">
    <DropdownMenuDemo />
  </div>
</ComponentPreview>



## Installation [#installation]

```bash
npx shadcn@latest add "https://ui.manpuc.me/r/dropdown-menu.json"
```

## Usage [#usage]

After you add the component with the CLI, import it from your UI folder:

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

```tsx
<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Open</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Billing</DropdownMenuItem>
    <DropdownMenuItem>Team</DropdownMenuItem>
    <DropdownMenuItem>Subscription</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>
```

## Examples [#examples]

### Checkboxes [#checkboxes]

<ComponentPreview name="dropdown-menu-checkboxes">
  <div className="flex items-center gap-4 py-8">
    <DropdownMenuCheckboxesDemo />
  </div>
</ComponentPreview>

### Radio Group [#radio-group]

<ComponentPreview name="dropdown-menu-radio-group">
  <div className="flex items-center gap-4 py-8">
    <DropdownMenuRadioGroupDemo />
  </div>
</ComponentPreview>

### Submenus [#submenus]

<ComponentPreview name="dropdown-menu-submenus">
  <div className="flex items-center gap-4 py-8">
    <DropdownMenuSubmenusDemo />
  </div>
</ComponentPreview>

## API Reference [#api-reference]

The `DropdownMenu` components extend standard Radix UI attributes. The `DropdownMenuItem` component adds the following props:

| Prop      | Type      | Default     | Description                                  |
| --------- | --------- | ----------- | -------------------------------------------- |
| `variant` | `enum`    | `"default"` | The visual style (`default`, `destructive`). |
| `inset`   | `boolean` | `false`     | Applies additional padding for alignment.    |