Action Menu

An Action Menu is a contextual list of user-triggered actions.

An Action Menu is typically shown when a user clicks a button and provides a lightweight way to surface secondary options related to a specific item or area of the UI without cluttering the main interface. While visually similar to single or multiselect menus, the Action Menu is optimized for action-driven interactions rather than selection or navigation.

View ActionMenu in Storybook

Live Editor

function ActionMenuExample() {
  const handleOnClick = (e, label) => {
    console.log(`${label} clicked`);
  };

  const itemsAsProp = [
    {
      id: "compose",
      onClick: (e) => handleOnClick(e, "Compose"),
      children: "Compose",
    },
    {
      id: "view-messages",
      onClick: (e) => handleOnClick(e, "View Messages"),
      children: "View Messages",
    },
    {
      id: "analyze-post",
      onClick: (e) => handleOnClick(e, "Analyze post"),
      children: "Analyze post",
    },
  ];

  return (
    <Box display="flex" justifyContent="center" alignItems="center" height="100%">
      <ActionMenu
        menuToggleElement={
          <MenuToggleButton>
            Open Menu
          </MenuToggleButton>
        }
        menuItems={itemsAsProp}
      />
    </Box>
  );
}

Properties​

Properties