Skip to main content

​
Overview

Action Menu provides a dropdown menu triggered by a button (default ”…” icon or custom trigger). It’s commonly used for table row actions, card overflow menus, and contextual operations.

​
Usage

import { AxActionMenu } from "axmed-design-system"
import { EditOutlined, DeleteOutlined } from "@ant-design/icons"

function OrderRow() {
  return (
    <AxActionMenu
      items={[
        { key: "edit", label: "Edit", icon: <EditOutlined /> },
        { key: "view", label: "View Details", icon: <EyeOutlined /> },
        { key: "duplicate", label: "Duplicate", icon: <CopyOutlined /> },
        { type: "divider" },
        { key: "delete", label: "Delete", icon: <DeleteOutlined />, danger: true },
      ]}
    />
  )
}

​
Custom Trigger

// Button trigger
<AxActionMenu
  trigger={<AxButton variant="secondary" size="sm">Actions</AxButton>}
  items={items}
/>

// Icon + text trigger
<AxActionMenu
  trigger={
    <AxButton variant="secondary" size="sm" icon={<MoreOutlined />}>
      More
    </AxButton>
  }
  items={items}
/>

​
With Dividers & Disabled

<AxActionMenu
  items={[
    { key: "edit", label: "Edit Bid", icon: <EditOutlined /> },
    { key: "view", label: "View Quote", icon: <EyeOutlined /> },
    { key: "send", label: "Send to Buyer", icon: <SendOutlined /> },
    { type: "divider" },
    { key: "duplicate", label: "Duplicate", icon: <CopyOutlined />, disabled: true },
    { type: "divider" },
    { key: "withdraw", label: "Withdraw Bid", icon: <StopOutlined />, danger: true },
    { key: "delete", label: "Delete", icon: <DeleteOutlined />, danger: true },
  ]}
/>

​
Table Row Actions

const rows = [
  { name: "Amoxicillin 500mg", status: "In Review", price: "$1.20/unit" },
  { name: "Metformin 850mg", status: "Awarded", price: "$0.85/unit" },
]

return (
  <table>
    {rows.map(row => (
      <tr key={row.name}>
        <td>{row.name}</td>
        <td>{row.status}</td>
        <td>{row.price}</td>
        <td>
          <AxActionMenu
            size="sm"
            items={[
              {
                key: "edit",
                label: "Edit Bid",
                icon: <EditOutlined />,
                onClick: () => editBid(row)
              },
              { key: "view", label: "View Details", icon: <EyeOutlined /> },
              { type: "divider" },
              { key: "withdraw", label: "Withdraw", icon: <StopOutlined />, danger: true },
            ]}
          />
        </td>
      </tr>
    ))}
  </table>
)

​
Export Actions

<Flex gap={12}>
  <AxButton>Add Product</AxButton>
  <AxActionMenu
    trigger={
      <AxButton variant="secondary" icon={<DownloadOutlined />}>
        Export
      </AxButton>
    }
    items={[
      { key: "csv", label: "Export as CSV", icon: <FileExcelOutlined /> },
      { key: "pdf", label: "Export as PDF", icon: <FilePdfOutlined /> },
      { type: "divider" },
      { key: "template", label: "Download Template", icon: <DownloadOutlined /> },
    ]}
  />
</Flex>

​
Bid Actions

<Flex align="center" gap={12}>
  <Flex vertical flex={1}>
    <AxText variant="body-sm" weight="medium">
      Amoxicillin 500mg — Tender #TND-2024-0892
    </AxText>
    <AxText variant="body-xs" color="secondary">
      Deadline: Dec 31, 2024
    </AxText>
  </Flex>
  <AxButton size="sm">Submit Bid</AxButton>
  <AxActionMenu
    size="sm"
    items={[
      { key: "edit", label: "Edit Draft", icon: <EditOutlined /> },
      { key: "view", label: "View Tender", icon: <EyeOutlined /> },
      { type: "divider" },
      { key: "withdraw", label: "Withdraw", icon: <StopOutlined />, danger: true },
    ]}
  />
</Flex>

​
Props

​
items
ActionItem[]
required
Array of menu items. Each item can be:
  • ActionItem: { key, label, icon?, danger?, disabled?, onClick? }
  • ActionDivider: { type: "divider" }
​
trigger
ReactNode
Custom trigger element. Defaults to a ”…” (MoreOutlined) icon button. Pass any ReactNode to override.
​
size
'sm' | 'md' | 'lg'
default:"'md'"
Size of the default trigger button. Ignored when a custom trigger is provided.
​
placement
DropdownPlacement
default:"'bottomRight'"
Menu placement: bottomRight, bottomLeft, topRight, topLeft, etc.
​
disabled
boolean
default:"false"
Disabled state — prevents opening
​
className
string
Additional class name on the dropdown overlay

​
Action Item Props

​
key
string
required
Unique key for the item
​
label
string
required
Visible label
​
icon
ReactNode
Optional icon before the label
​
danger
boolean
Renders in red with destructive intent (e.g., Delete, Withdraw)
​
disabled
boolean
Disabled state
​
onClick
() => void
Click handler

​
Best Practices

Use the default ”…” trigger for table rows and compact spaces
Group related actions with dividers (Edit/View, then Delete)
Place destructive actions (Delete, Withdraw) at the bottom with danger: true
Use icons for visual scanning — users recognize icons faster than text
Don’t nest menus more than one level — use separate menus instead
Avoid more than 7 items — long menus are hard to scan

​
Accessibility

  • Trigger button has aria-label="Actions"
  • Menu uses Ant Design Dropdown with built-in keyboard navigation
  • Danger items are visually distinguished with red text
  • Disabled items are properly announced by screen readers

​
API Reference

See the Action Menu API for the complete TypeScript interface.

​
Related Components

  • Button — Use as custom trigger
  • Table — Action Menu is commonly used in table rows

Build docs developers (and LLMs) love

Get started for freeTalk to us