---
title: "DropdownMenu"
description: "Dropdown menu with items, groups, submenus, and separators."
section: "Libraries"
group: "UI components"
order: 512
---

## Usage

```tsx
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@aeontel/ui";

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Actions</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem onSelect={onEdit}>Edit</DropdownMenuItem>
    <DropdownMenuItem onSelect={onDuplicate}>Duplicate</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem onSelect={onDelete} variant="destructive">
      Delete
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>;
```

## Exports

### `DropdownMenu`

Dropdown menu root.

```ts
DropdownMenu(props: MenuPrimitive.Root.Props): JSX.Element
```

### `DropdownMenuTrigger`

Element that opens the dropdown menu.

```ts
DropdownMenuTrigger(props: MenuPrimitive.Trigger.Props): JSX.Element
```

### `DropdownMenuContent`

Floating menu panel.

```ts
DropdownMenuContent(props: MenuPrimitive.Popup.Props & Pick< MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" >): JSX.Element
```

### `DropdownMenuGroup`

Group of related menu items.

```ts
DropdownMenuGroup(props: MenuPrimitive.Group.Props): JSX.Element
```

### `DropdownMenuItem`

Individual menu item.

```ts
DropdownMenuItem(props: MenuPrimitive.Item.Props & { inset?: boolean; } & Pick<DropdownMenuItemBaseProps, "variant">): JSX.Element
```

**Props**

| Prop       | Type                                      | Default     | Description |
| ---------- | ----------------------------------------- | ----------- | ----------- |
| `inset?`   | `boolean \| undefined`                    | —           |             |
| `variant?` | `"default" \| "destructive" \| undefined` | `"default"` |             |

### `DropdownMenuLabel`

Section label inside a menu.

```ts
DropdownMenuLabel(props: MenuPrimitive.GroupLabel.Props & { inset?: boolean; }): JSX.Element
```

**Props**

| Prop     | Type                   | Default | Description |
| -------- | ---------------------- | ------- | ----------- |
| `inset?` | `boolean \| undefined` | —       |             |

### `DropdownMenuSeparator`

Divider between menu sections.

```ts
DropdownMenuSeparator(props: MenuPrimitive.Separator.Props): JSX.Element
```

### `DropdownMenuSub`

Submenu root.

```ts
DropdownMenuSub(props: MenuPrimitive.SubmenuRoot.Props): JSX.Element
```

### `DropdownMenuSubTrigger`

Item that opens a submenu.

```ts
DropdownMenuSubTrigger(props: MenuPrimitive.SubmenuTrigger.Props & { inset?: boolean; }): JSX.Element
```

**Props**

| Prop     | Type                   | Default | Description |
| -------- | ---------------------- | ------- | ----------- |
| `inset?` | `boolean \| undefined` | —       |             |

### `DropdownMenuSubContent`

Floating submenu panel.

```ts
DropdownMenuSubContent(props: React.ComponentProps<typeof DropdownMenuContent>): JSX.Element
```