Components

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.

Action Menu is part of the greater Menu ecosystem.Learn more
import { ActionMenu } from '@sproutsocial/seeds-react-menu'
() => {
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

NameTypeDefaultDescriptionRequired?
menuToggleElement
React.ReactElement<any>
The element that is or contains an element that will toggle the menu when clicked. May contain labels, buttons, inputs or other content as needed.
popoutProps
Partial< Omit<TypePopoutProps, "isOpen" | "setIsOpen" | "content" | "children"> >
Props to pass through to the underlying Popout. Any Popout prop is valid except those explicitly omitted.
width
TypePopoutProps["width"]
The width of the Popout content. Defaults to 200px or the width of the toggle element, whichever is greater.
MenuRootComponent
React.ComponentType<TypeMenuRootProps>
({ children, menuToggleElement, popoutProps: { placement = "bottom", focusLockProps, ...popoutProps } = {}, width, ...contextProps }: TypeMenuRootProps) => { const { isOpen, openMenu, closeMenu, inputValue, hiddenItemsCount = 0, items, getMenuProps, } = contextProps; const toggleElementRef = React.useRef<HTMLElement>(null); const [finalWidth, setFinalWidth] = React.useState<typeof width>(); const min_width = 200; useLayoutEffect(() => { if (width) { setFinalWidth(width); } else if (toggleElementRef.current?.offsetWidth) { const toggleWidth = toggleElementRef.current.offsetWidth; setFinalWidth(Math.max(toggleWidth, min_width)); } else { setFinalWidth(min_width); } }, [width, toggleElementRef.current?.offsetWidth]); const menuContext = useMenu(contextProps); // Hack to suppress error: "downshift: You forgot to call the getMenuProps getter function on your component / element." getMenuProps?.({}, { suppressRefError: true }); return ( <MenuPopout placement={placement} isOpen={!!isOpen} openMenu={openMenu} closeMenu={closeMenu} content={ <MenuContentProvider menuContext={menuContext}> {children} </MenuContentProvider> } width={finalWidth} {...popoutProps} > {(toggleProps) => ( <MenuToggleProvider menuContext={{ ...menuContext, ...toggleProps, ref: mergeRefs<HTMLElement>( toggleProps.ref, toggleElementRef ) as RefObject<HTMLElement>, }} > {menuToggleElement} </MenuToggleProvider> )} </MenuPopout> ); }
Overrides the default MenuRoot component. Only necessary for specialized use cases.
children
React.ReactChild
React.ReactFragment
React.ReactPortal
Allows menu items to be passed in as children. Cannot be used with the menuItems prop.
menuItems
I[]
Allows menu items to be passed in as objects. Cannot be used with the children prop. The type of each menu item, I, must be or extend TypeMenuItemProps.
MenuItemComponent
React.ComponentType<I>
Allows a custom MenuItem component to be used when rendering using the menuItems prop. MenuItemComponent's prop type must match the type of the menuItems, I.

Recipes

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.

import { ActionMenu } from '@sproutsocial/seeds-react-menu'
() => {
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.

import { ActionMenu } from '@sproutsocial/seeds-react-menu'
() => {
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>
</Action>
</Box>
)
}

Popout placement

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

import { ActionMenu } from '@sproutsocial/seeds-react-menu'
() => {
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>
</Action>
</Box>
)
}