Recipes

Menu items as prop

The Action Menu can accept an array of menu item data as a prop ([{ id, onClick, children }]) to render a simple, customizable list of actions.

Live Editor

function ActionMenuItemsAsPropExample() {
  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>
  );
}

Composable Action Menu

For more customization and control, the Action Menu can also be composed using menu primitives. This approach allows you to define custom layouts, add icons, or integrate with other components while keeping the menu behavior consistent.

Live Editor

function ActionMenuComposableExample() {
  return (
    <Box display="flex" justifyContent="center" alignItems="center" height="100%">
      <ActionMenu
        menuToggleElement={
          <MenuToggleButton>
            Open Menu
          </MenuToggleButton>
        }
      >
        <MenuContent>
          <MenuGroup title="Publishing" id="post-management">
            <MenuItem id="1">Schedule a New Post</MenuItem>
            <MenuItem id="2">View Drafts</MenuItem>
          </MenuGroup>
          <MenuGroup title="Listening" id="analytics-insights">
            <MenuItem id="3">View Analytics</MenuItem>
          </MenuGroup>
        </MenuContent>
      </ActionMenu>
    </Box>
  );
}

Popout placement

You can control the placement of the Action Menu popout using the popoutProps prop.

Live Editor

function ActionMenuPopoutPlacementExample() {
  return (
    <Box display="flex" justifyContent="center" alignItems="center" height="100%">
      <ActionMenu
        popoutProps={{
          placement: "top"
        }}
        menuToggleElement={
          <MenuToggleButton>
            Open Menu
          </MenuToggleButton>
        }
      >
        <MenuContent>
          <MenuGroup title="Publishing" id="post-management">
            <MenuItem id="1">Schedule a New Post</MenuItem>
            <MenuItem id="2">View Drafts</MenuItem>
          </MenuGroup>
          <MenuGroup title="Listening" id="analytics-insights">
            <MenuItem id="3">View Analytics</MenuItem>
          </MenuGroup>
        </MenuContent>
      </ActionMenu>
    </Box>
  );
}