PopoverMenu

The PopoverMenu component is a combination of the Popover and Menu components. It’s a convenience component for the common use-case of displaying a menu inside a popover.

() => {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <Box position="relative" size="fitContent">
      <Button onClick={() => setIsOpen(!isOpen)}>Open Menu</Button>
      <PopoverMenu
        open={isOpen}
        onClose={() => setIsOpen(false)}
        anchor={{
          parent: Origin.bottomLeft,
          child: Origin.topLeft,
          offset: { y: "8px" },
        }}
        menu={{
          items: [
            { label: "Olive-sided Flycatcher" },
            { label: "Sage Sparrow" },
            { label: "Lark Bunting" },
          ],
        }}
      />
    </Box>
  );

}

Features

The PopoverMenu component is a convenience component for the common use-case of displaying a menu inside a popover. It combines the Popover and Menu components into a single, easy-to-use component. For more information about their features, see the documentation for each component.

Reference

PopoverMenuProps

The PopoverMenu component accepts all props from the Popover component, except for children.

Tokens

The PopoverMenu component uses tokens from both the popover and menu components.

Popover

Menu