const ActionMenuExample = () => {
    state: { open: true }
    const [open, setOpen] = React.useState(true)
    return (
        <div style={{minHeight: '400px', position: 'relative'}}>
            <TabGroup
                action={
                    <div>
                        <Icon name="add_circle" className="fs-4 c-neutral-200 m-r-2" />
                        <ActionMenu
                            el="span"
                            open={open}
                            trigger={<Icon name="more_vert" onClick={() => setOpen(!open)} className="fs-4 c-neutral-200 cursor-pointer" />}
                        >
                            <ActionMenu.Item>Item</ActionMenu.Item>
                            <ActionMenu.Item disabled>Disabled</ActionMenu.Item>
                            <ActionMenu.Group>
                                <ActionMenu.Item disabled>(group without label)</ActionMenu.Item>
                                <ActionMenu.Item icon="help">With Icon</ActionMenu.Item>
                                <ActionMenu.Item icon="help" disabled>With Icon Disabled</ActionMenu.Item>
                            </ActionMenu.Group>
                            <ActionMenu.Group label="Group with Label">
                                <ActionMenu.Item icon="help" iconColor="red">With Icon Colored</ActionMenu.Item>
                                <ActionMenu.Item icon="help" iconColor="red" disabled>With Icon Colored Disabled</ActionMenu.Item>
                            </ActionMenu.Group>
                        </ActionMenu>
                    </div>
                }
            >
                <Tab active>Action Requested</Tab>
                <Tab>Insights</Tab>
            </TabGroup>
        </div>
    )
}
render (ActionMenuExample)
<div style={{minHeight: '300px'}}>
    <ActionMenu open>
        <ActionMenu.Item>Item One</ActionMenu.Item>
        <ActionMenu.Item>Item Two</ActionMenu.Item>
        <ActionMenu.Item>Item Three</ActionMenu.Item>
        <ActionMenu.Item disabled>Disabled Item Four</ActionMenu.Item>
        <ActionMenu.Item>Item Five</ActionMenu.Item>
    </ActionMenu>
</div>

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.

Importing

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