Action Menu

<State initial={true}>
    {([open, setOpen]) => {
        const MenuItem = (props) => <ActionMenu.Item onClick={() => setOpen(false)} {...props} />;
        return (
            <ActionMenu
                el="span"
                open={open}
                trigger={
                    <Button iconName="expand_more" iconPosition="right" selected={open} onClick={() => setOpen(!open)}>Invoice Options</Button>
                }
            >
                <MenuItem>Email invoices</MenuItem>
                <MenuItem disabled>Print invoices</MenuItem>
                <MenuItem>Add to batch</MenuItem>
                <MenuItem>Assign invoice to</MenuItem>
            </ActionMenu>
        )}
    }
</State>

<State initial={true}>
    {([open, setOpen]) => {
        const MenuItem = (props) => <ActionMenu.Item onClick={() => setOpen(false)} {...props} />;
        return (
            <ActionMenu
                el="span"
                open={open}
                trigger={
                    <Button iconName="expand_more" iconPosition="right" selected={open} onClick={() => setOpen(!open)}>Invoice Options</Button>
                }
            >
                <MenuItem>Email invoices</MenuItem>
                <MenuItem disabled>Print invoices</MenuItem>
                <MenuItem>Add to batch</MenuItem>
                <MenuItem>Assign invoice to</MenuItem>
            </ActionMenu>
        )}
    }
</State>

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>

<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
        trigger={<ActionMenu.Item cascading>Item Five Cascading</ActionMenu.Item>}
        open
        direction="rb"
        portal={false}
    >
        <ActionMenu.Item>Item One</ActionMenu.Item>
        <ActionMenu.Item>Item Two</ActionMenu.Item>
        <ActionMenu.Item>Item Three</ActionMenu.Item>
    </ActionMenu>
</ActionMenu>

<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
        trigger={<ActionMenu.Item cascading>Item Five Cascading</ActionMenu.Item>}
        open
        direction="rb"
        portal={false}
    >
        <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}
                    portal
                    trigger={<Button selected={open === index} onClick={() => setOpen(open !== index ? index : null)}>{item[1]}</Button>}
                    open={open === index}
                    width={item[0]}
                >
                    <ActionMenu.Item>Item one</ActionMenu.Item>
                    <ActionMenu.Item>Item two</ActionMenu.Item>
                </ActionMenu>
            ))}
        </ButtonGroup>
    )}
</State>

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

Overflow Handling

<ActionMenu open portal={false}>
    <ActionMenu.Item>Item One</ActionMenu.Item>
    <ActionMenu.Item>Item long enough to wrap around to a second line</ActionMenu.Item>
    <ActionMenu.Item icon="phone">Item with Icon long enough to wrap around to a second line</ActionMenu.Item>
</ActionMenu>

<ActionMenu open portal={false}>
    <ActionMenu.Item>Item One</ActionMenu.Item>
    <ActionMenu.Item>Item long enough to wrap around to a second line</ActionMenu.Item>
    <ActionMenu.Item icon="phone">Item with Icon long enough to wrap around to a second line</ActionMenu.Item>
</ActionMenu>

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: true,
    closeMenuOnItemClick: false,
    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
                >
                    {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>

<State initial={{
    menuOpen: true,
    closeMenuOnItemClick: false,
    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
                >
                    {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';