DropdownMenu

Dropdown menu with items, groups, submenus, and separators.

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.

TypeScript

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

`DropdownMenuTrigger`

Element that opens the dropdown menu.

TypeScript

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

`DropdownMenuContent`

Floating menu panel.

TypeScript

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

`DropdownMenuGroup`

Group of related menu items.

TypeScript

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

`DropdownMenuItem`

Individual menu item.

TypeScript

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.

TypeScript

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

Props

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

`DropdownMenuSeparator`

Divider between menu sections.

TypeScript

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

`DropdownMenuSub`

Submenu root.

TypeScript

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

`DropdownMenuSubTrigger`

Item that opens a submenu.

TypeScript

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

Props

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

`DropdownMenuSubContent`

Floating submenu panel.

TypeScript

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