Dropdown Menu

A menu that appears below a trigger element with a list of actions.

Installation

tsx

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent,
  DropdownMenuItem,
  DropdownMenuDivider,
  DropdownMenuLabel,
} from "madagent";

Default

Cone Visualizer

Live cursor mode only.

Move your cursor in the arena to test submenu intent behavior.

Cone CheckInside

Invalid Moves0 / 2

Submenu DecisionKeep Open

Selected action: None

With Label and Destructive Item

With Disabled Item

Pointer-Friendly Submenu

Prop	Type	Default	Description
`icon`	`ReactNode`	-	Icon rendered before the label
`chip`	`ReactNode`	-	Optional chip/badge rendered after the label
`disabled`	`boolean`	`false`	Whether the item is disabled
`destructive`	`boolean`	`false`	Renders the item with destructive (red) styling
`onSelect`	`() => void`	-	Called when the item is selected
`children*`	`ReactNode`	-	Item label

RTL Support

Components automatically adapt to right-to-left languages using CSS logical properties.

Preview

Usage

tsx

<div style={{ display: "flex", justifyContent: "center", padding: 20 }}>
  <DropdownMenu>
    <DropdownMenuTrigger asChild>
      <Button>خيارات</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuItem icon={<Pencil size={14} />}>تحرير</DropdownMenuItem>
      <DropdownMenuSub>
        <DropdownMenuSubTrigger icon={<FolderArchive size={14} />}>
          إجراءات جماعية
        </DropdownMenuSubTrigger>
        <DropdownMenuSubContent>
          <DropdownMenuItem icon={<CheckCircle2 size={14} />}>
            وضع علامة كمدفوع
          </DropdownMenuItem>
          <DropdownMenuItem icon={<Trash2 size={14} />} destructive>
            حذف المحدد
          </DropdownMenuItem>
        </DropdownMenuSubContent>
      </DropdownMenuSub>
      <DropdownMenuItem disabled>مشاركة</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</div>

import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuItem, DropdownMenuDivider, DropdownMenuLabel, } from "madagent";

Prop

Type

Default

Description

icon

ReactNode

Icon rendered before the label

chip

ReactNode

Optional chip/badge rendered after the label

disabled

boolean

false

Whether the item is disabled

destructive

boolean

false

Renders the item with destructive (red) styling

onSelect

() => void

Called when the item is selected

children*

ReactNode

Item label

RTL Support

Components automatically adapt to right-to-left languages using CSS logical properties.

Preview

Usage

tsx

<div style={{ display: "flex", justifyContent: "center", padding: 20 }}>
  <DropdownMenu>
    <DropdownMenuTrigger asChild>
      <Button>خيارات</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuItem icon={<Pencil size={14} />}>تحرير</DropdownMenuItem>
      <DropdownMenuSub>
        <DropdownMenuSubTrigger icon={<FolderArchive size={14} />}>
          إجراءات جماعية
        </DropdownMenuSubTrigger>
        <DropdownMenuSubContent>
          <DropdownMenuItem icon={<CheckCircle2 size={14} />}>
            وضع علامة كمدفوع
          </DropdownMenuItem>
          <DropdownMenuItem icon={<Trash2 size={14} />} destructive>
            حذف المحدد
          </DropdownMenuItem>
        </DropdownMenuSubContent>
      </DropdownMenuSub>
      <DropdownMenuItem disabled>مشاركة</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</div>