Action Menu

Components

Action Menu

Code

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/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%">
			<ActionMenu
				menuToggleElement={
					<MenuToggleButton>
						Open Menu
					</MenuToggleButton>
				}
				menuItems={itemsAsProp}
			/>
		</Box>
	)
}

Properties

Name	Type	Default
`menuToggleElement`	`any`
`popoutProps`	`Omit<TypePopoutProps, "isOpen" \| "setIsOpen" \| "content" \| "children">`
`width`	`TypePopoutProps["width"]`
`MenuRootComponent`	`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]); useEffect(() => { if (!inputValue) return; if (items && hiddenItemsCount >= items.length && isOpen) { closeMenu?.(); } }, [hiddenItemsCount, items?.length, isOpen, inputValue]); 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> ); }

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/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%">
			<ActionMenu
				menuToggleElement={
					<MenuToggleButton>
						Open Menu
					</MenuToggleButton>
				}
				menuItems={itemsAsProp}
			/>
		</Box>
	)
}

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%">
			<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 popperProps prop.

import { ActionMenu } from '@sproutsocial/racine'

() => {
	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>
	)
}

Action Menu

Properties

Recipes

Menu items as prop

Composable Action Menu

Popout placement