Menu

ActionMenu - Admin Components

Note: This component is available since Medusa v2.21.0.

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
import { ActionMenu } from "@medusajs/dashboard/components"
import { PencilSquare, Trash } from "@medusajs/icons"

const BrandActions = ({ brand, onDelete }) => {
  return (
    <ActionMenu
      groups={[
        {
          actions: [
            {
              icon: <PencilSquare />,
              label: "Edit",
              to: `/brands/${brand.id}/edit`,
            },
          ],
        },
        {
          actions: [
            {
              icon: <Trash />,
              label: "Delete",
              onClick: () => onDelete(brand.id),
              disabled: brand.is_default,
              disabledTooltip:
                "You can't delete the default brand.",
            },
          ],
        },
      ]}
    />
  )
}

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:

groupsobject[]
The groups of actions to show in the dropdown. Medusa shows a separator between every two groups, and it doesn't render a group that has an empty actions array.
variant"transparent" | "primary"Optional
The variant of the default trigger button. Medusa ignores it when you pass your own trigger as children.

Default: transparent

childrenReact.ReactNodeOptional
A custom trigger element. If you don't pass one, Medusa shows a small icon button with a three-dot icon.

Related Components#

  • SectionRow: pass an ActionMenu as the row's actions.
Found a problem with this page?Report Issue
Edited Nov 14·Edit this page