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.
import { ActionMenu } from '@sproutsocial/racine'() => {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%"><ActionMenumenuToggleElement={<MenuToggleButton>Open Menu</MenuToggleButton>}menuItems={itemsAsProp}/></Box>)}
Properties
| Name | Type | Default | Description | Required? |
|---|---|---|---|---|
menuToggleElement | any | |||
popoutProps | Omit<TypePopoutProps, "isOpen" | "setIsOpen" | "content" | "children"> | |||
width | TypePopoutProps["width"] | |||
MenuRootComponent | TypeMenuRootProps | ({
children,
menuToggleElement,
popoutProps: { placement = "bottom", focusLockProps, ...popoutProps } = {},
width = "300px",
...contextProps
}: TypeMenuRootProps) => {
const {
isOpen,
openMenu,
closeMenu,
inputValue,
hiddenItemsCount = 0,
items,
} = contextProps;
const setIsOpen = useCallback(
(newIsOpen: boolean) => {
newIsOpen ? openMenu?.() : closeMenu?.();
},
[openMenu, closeMenu]
);
useEffect(() => {
if (!inputValue) return;
if (items && hiddenItemsCount >= items.length && isOpen) {
closeMenu?.();
}
}, [hiddenItemsCount, items?.length, isOpen, inputValue]);
const menuContext = useMenu(contextProps);
return (
<MenuPopout
placement={placement}
isOpen={!!isOpen}
openMenu={openMenu}
closeMenu={closeMenu}
content={
<MenuContentProvider menuContext={menuContext}>
{children}
</MenuContentProvider>
}
{...popoutProps}
>
{(toggleProps) => (
<MenuToggleProvider menuContext={{ ...menuContext, ...toggleProps }}>
{menuToggleElement}
</MenuToggleProvider>
)}
</MenuPopout>
);
} |
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.
import { ActionMenu } from '@sproutsocial/racine'() => {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%"><ActionMenumenuToggleElement={<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/racine'() => {return (<Box display="flex" justifyContent="center" alignItems="center" height="100%"><ActionMenumenuToggleElement={<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>)}