ActionMenu - Admin Components

The ActionMenu component shows a dropdown of actions when the user clicks a trigger, which is a three-dot icon button by default. The Medusa Admin uses it in page headers, section headers, and table rows.

Code
import { ActionMenu } from "@medusajs/dashboard/components"

Example#

Use ActionMenu in a widget or UI route to show the actions of a record:

Code
1import { ActionMenu } from "@medusajs/dashboard/components"2import { PencilSquare, Trash } from "@medusajs/icons"3
4const BrandActions = ({ brand, onDelete }) => {5  return (6    <ActionMenu7      groups={[8        {9          actions: [10            {11              icon: <PencilSquare />,12              label: "Edit",13              to: `/brands/${brand.id}/edit`,14            },15          ],16        },17        {18          actions: [19            {20              icon: <Trash />,21              label: "Delete",22              onClick: () => onDelete(brand.id),23              disabled: brand.is_default,24              disabledTooltip:25                "You can't delete the default brand.",26            },27          ],28        },29      ]}30    />31  )32}

Medusa shows a separator between every two groups, and it doesn't render a group that has an empty actions array.

Props#

The component accepts the ActionMenuProps type:

Related Components#

• SectionRow: pass an ActionMenu as the row's actions.