GitHub icon

const Menu = (props) => {
		const { direction, trigger, portal = true, width, ...rest } = props;
		const [open, setOpen] = React.useState(props.open || false);
		const context = React.useContext(ActionMenuContext);
		const parentMenu = context.length > 0 && context.slice(-1)[0];
		const parentMenuContainer = parentMenu && parentMenu.itemsContainerRef.current;

		const handleClickOutside = (e) => {
			if (portal) {
				setOpen(false);
				if (e.key === 'ArrowLeft') return;
				if (parentMenuContainer && parentMenuContainer.contains(e.target)) return;
				parentMenu && parentMenu.onClickOutside(e);
			} else {
				if (parentMenuContainer && parentMenuContainer.contains(e.target)) {
					const nestedMenus = parentMenuContainer && Array.from(
						parentMenuContainer.querySelectorAll(
							'[data-anvil-component=ActionMenu]'
						)
					);
					if (nestedMenus && nestedMenus.length > 0 && !nestedMenus.some(el => el.contains(e.target)))
						return;
					setOpen(false);
					if (e.key === 'ArrowLeft') return;
					parentMenu && parentMenu.onClickOutside(e);
				}
			}
		};

		return (
			<ActionMenu
				{...rest}
				direction={direction || 'rb'}
				width={width || 'small'}
				open={open}
				onClickOutside={handleClickOutside}
				portal={portal}
				trigger={trigger({ onClick: () => setOpen(!open) })}
			/>
		);
	};

	const MenuItem = (props) => {
		const menuContext = React.useContext(ActionMenuContext);
		const handleClick = (e) => {
			props.onClick && props.onClick(e);
			if (props.cascading) return;
			menuContext.length > 0 && menuContext.slice(-1)[0].onClickOutside(e);
		};
		const handleExit = (e) => {
			props.onKeyDown && props.onKeyDown(e);
			if (e.key === 'Escape' || e.key === 'Tab') {
				menuContext.length > 0 && menuContext.slice(-1)[0].onClickOutside(e);
				if (e.shiftKey && e.key === 'Tab') e.preventDefault();
			}
		};

		return (
			<ActionMenu.Item
				{...props}
				onClick={handleClick}
				onKeyDown={handleExit}
			/>
		);
	};

	const message = () => alert('item clicked, now closing');

	const Example1 = () => (
		<Menu
			open
			direction="br"
			trigger={(props) =>
				<Button
					{...props}
					iconName="expand_more"
					iconPosition="right"
				>Invoice Options</Button>}
		>
			<MenuItem onClick={message}>Email invoice</MenuItem>
			<MenuItem onClick={message} disabled>Print invoice</MenuItem>
			<Menu
				direction="r"
				portal={false}
				trigger={(props) => (
					<MenuItem {...props} cascading>Add to batch</MenuItem>
				)}
			>
				<MenuItem onClick={message}>Batch 1</MenuItem>
				<MenuItem onClick={message}>Batch 2</MenuItem>
				<MenuItem onClick={message}>Batch 3</MenuItem>
				<Menu
					direction="r"
					portal={false}
					trigger={(props) => (
						<MenuItem {...props} cascading>
							More batches
						</MenuItem>
					)}
				>
					<MenuItem onClick={message}>Batch 4</MenuItem>
					<MenuItem onClick={message}>Batch 5</MenuItem>
					<MenuItem onClick={message}>Batch 6</MenuItem>
				</Menu>
			</Menu>
			<MenuItem onClick={message}>Assign invoice to</MenuItem>
		</Menu>
	);

	render (Example1);

Design Spec

With Icons and Subheaders

<ActionMenu open portal={false}>
	<ActionMenu.Group label="Text">
		<ActionMenu.Item icon="phone_android">
			<BodyText subdued size="xsmall">
				Monica’s cell
			</BodyText>
			(555) 123-4567
		</ActionMenu.Item>
	</ActionMenu.Group>
	<ActionMenu.Group label="Call">
		<ActionMenu.Item icon="phone">
			<BodyText subdued size="xsmall">
				Home
			</BodyText>
			(555) 123-4567
		</ActionMenu.Item>
		<ActionMenu.Item icon="phone_android">
			<BodyText subdued size="xsmall">
				Monica’s cell
			</BodyText>
			(555) 123-4567
		</ActionMenu.Item>
	</ActionMenu.Group>
	<ActionMenu.Group label="Email">
		<ActionMenu.Item icon="email">
			<BodyText subdued size="xsmall">
				Monica's personal
			</BodyText>
			monicadoe@gmail.com
		</ActionMenu.Item>
	</ActionMenu.Group>
</ActionMenu>

As a Submenu

<ActionMenu open portal={false}>
	<ActionMenu.Item>Item One</ActionMenu.Item>
	<ActionMenu.Item>Item Two</ActionMenu.Item>
	<ActionMenu.Item>Item Three</ActionMenu.Item>
	<ActionMenu.Item disabled>Item Four Disabled</ActionMenu.Item>
	<ActionMenu
		direction="rb"
		open
		portal={false}
		trigger={<ActionMenu.Item cascading>Item Five Cascading</ActionMenu.Item>}
	>
		<ActionMenu.Item>Item One</ActionMenu.Item>
		<ActionMenu.Item>Item Two</ActionMenu.Item>
		<ActionMenu.Item>Item Three</ActionMenu.Item>
	</ActionMenu>
</ActionMenu>

Width Options

Width options share the same properties found on the Popover.

<State initial={0}>
    {([open, setOpen]) => (
        <ButtonGroup>
            {[['xs', 'Extra Small'], ['s', 'Small'], ['m', 'Medium'], ['l', 'Large']].map((item, index) => (
                <ActionMenu
                    key={index}
                    trigger={<Button selected={open === index} onClick={() => setOpen(open !== index ? index : null)}>{item[1]}</Button>}
                    open={open === index}
					portal={false}
                    width={item[0]}
                >
					<ActionMenu.Item onClick={() => setOpen(false)}>Item one</ActionMenu.Item>
					<ActionMenu.Item onClick={() => setOpen(false)}>Item two</ActionMenu.Item>
                </ActionMenu>
            ))}
        </ButtonGroup>
    )}
</State>

Overflow Handling

Best Practices

The Action Menu component should:

Be easily discoverable. Action menus or right-click menus are often hardly discoverable. Especially in cases where there is no visual indication or a button to reveal the menu.
Have menu button placed to the right side of the affected item.
Present main actions before menu button, but secondary actions should be placed in an action menu itself.

For data entry in a Form, use the Select over the Action Menu.

Content Guidelines

Users should be able to use the button name to predict what the options in the menu will apply to.

Action menu buttons should follow the content guidelines for buttons.

Clearly name each item

Each item in the menu should be clearly named. Users should be able to predict what will happen when they click.

Each item should always start with a strong verb to describe the action. Add a noun to provide more context on what will be affected in cases where the verb alone isn’t clear enough. Format: [Verb] + [noun].

Use sentence case (capitalize only the first word and proper nouns) and avoid unnecessary words and articles such as the, an, or a.

Book job

View invoice

Rename file

Book

View an invoice

File name changes

Item names should match destination

Menu item names should be the same as the destination they take the user to.

“Add existing location” menu item opens a drawer with header “Add existing location”.

“Add existing location” menu item opens a drawer with header “Existing locations”.

Code

Handling click outside

Be careful with onClickOutside prop, especially when ActionMenu.Item are being used to open overlays, like Modal, Dialog, etc.

In this case ActionMenu needed to be closed explicitly before overlay to be opened. Check the example below:

<State initial={{
	menuOpen: false,
	closeMenuOnItemClick: true,
	modalOpen: false,
	drawerOpen: false,
	dialogOpen: false,
	takeoverOpen: false
}}>
	{([state, setState]) => {
		const onClickOutside = () => {
			console.log('onClickOutside()');
			state.menuOpen && setState(prev => ({...prev, menuOpen: false}));
		}

		const MenuTrigger = (
			<Button
				onClick={() => setState(prev => ({...prev, menuOpen: !prev.menuOpen}))}
			>
				Menu <Icon name="more_vert" size="24" className="m-l-half m-r--1" />
			</Button>
		);

		const overlays = [
			{ name: 'Modal', fn: () => setState(prev => ({...prev, modalOpen: !prev.modalOpen})) },
			{ name: 'Drawer', fn: () => setState(prev => ({...prev, drawerOpen: !prev.drawerOpen})) },
			{ name: 'Dialog', fn: () => setState(prev => ({...prev, dialogOpen: !prev.dialogOpen})) },
		];

		return (
			<div>
				<ToggleSwitch
					label="Close Menu on Item click"
					checked={state.closeMenuOnItemClick}
					onChange={() => setState(prev => ({...prev, closeMenuOnItemClick: !state.closeMenuOnItemClick}))}
				/>
				<br />
				<br />
				<ActionMenu
					sharp={false}
					width='s'
					direction='br'
					open={state.menuOpen}
					trigger={MenuTrigger}
					onClickOutside={onClickOutside}
					portal={false}
				>
					{overlays.map((i, ix) => (
						<ActionMenu.Item
							key={ix}
							onClick={() => {
								state.closeMenuOnItemClick && setState(prev => ({...prev, menuOpen: false}));
								i.fn();
							}}
						>
							Open {i.name}
						</ActionMenu.Item>
					))}
				</ActionMenu>
				<Modal
					title="Modal"
					open={state.modalOpen}
					closable
					onClose={() => overlays[0].fn()}
				>
					Modal Content
				</Modal>
				<Drawer
					header="Drawer"
					backdrop
					open={state.drawerOpen}
					onClose={() => overlays[1].fn()}
					footer={<Button onClick={overlays[1].fn}>Close Drawer</Button>}
				>
					Drawer Content
				</Drawer>
				<Dialog
					title="Dialog"
					open={state.dialogOpen}
					onClose={() => overlays[2].fn()}
					onPrimaryActionClick={overlays[2].fn}
					primaryActionName="Close Dialog"
				>
					Dialog Content
				</Dialog>
			</div>
		)}
	}
</State>

Importing

import { ActionMenu } from '@servicetitan/design-system';

Action Menu