Menu

Menu presents a set of actions to perform on the currently visible or selected resource.

#Example

#Usage

#With icon button

There are use cases when a "More" or "Actions" menu is needed to show contextual actions relevant to the currently visible resource. Usually these menus don't actually say "More" or "Actions", but show an icon with three dots in it.

Hightouch UI offers a convenience component specifically for that use case called MenuActionsButton to replace MenuButton with.

If you need to use a custom icon, use MenuIconButton component.

#Secondary

Use this variant to achieve a border around the menu button. Routine action menus stay on secondary (the default) or tertiary — the emphasis belongs on the menu items, not the trigger. Reserve primary for a menu that is the page's main call-to-action, such as a Create menu.

#Badge Menu

Use this variant for badge menus.

#Disabled

The menu button (including actions and icon button) can be disabled.

You can also disable individual menu items, instead of disabling the entire button.

#Controlled vs Uncontrolled

The menu opens and closes automatically when the toggle button is clicked. However, the state may be controlled with the isOpen state.

#Placement

The menu position may be specified using the placement prop. The default is usually the correct option, but in the Journeys canvas the menu may have a centered state. If the menu is ever against the right side of the screen, use end to flip the orientation.

#Computing the position on mount

The menu renders the popover invisibly on mount. To prevent widening the window unintentionally, the menu computes its position on mount. This may be turned off by using computePositionOnMount.

#Autofocus menu item

To automatically focus a menu item on menu open, use the autofocus prop.

#Combinations

#Guidelines

#When to use

• When user needs to perform some actions on one or more selected items on the current page.
• As a replacement for button group, when there are too many buttons inside.

#When not to use

• If menu is used for in-page navigation or replacing part of the page content, use tabs instead.
• If the dropdown holds filter selections rather than one-shot actions, use a filter menu instead.
• Don't reach for MenuButton's primary on a routine action menu — triggers stay secondary (the default) or tertiary, and the emphasis belongs on the menu items (a destructive item takes variant="danger" inside the list). Reserve primary for a menu that is the page's main call-to-action, like a create/add split-style menu ("Add audience", "Create"). MenuIconButton is secondary/tertiary only.

#Content

• Use sentence case.
• Position dangerous menu items last and add a divider before them.

#Icons

• Only use icons from Hightouch UI.
• Don't override icon size.
• Menus look much better with icons, so try to find an icon that matches each menu item.
• If menu items are too similar in their meaning and would require repeating the same icon, skip icons altogether.

#Props

#Menu

Name	Default	Description
computePositionOnMount	true	booleanCompute the position of the menu on mount.
children	—	ReactNodeMenu button and list.
closeOnSelect	true	booleanClose the menu when an item is selected.
isLazy	true	booleanControls if the menu is lazy loaded.
isOpen	undefined	booleanControls the menu's open state. If the value is undefined, the menu will be uncontrolled.
onOpen	—	() => voidCallback fired when the menu opens. Only for controlled menus.
onClose	—	() => voidCallback fired when the menu closes. Only for controlled menus.
placement	"default"	"default" | "center" | "end"Placement of the menu.

#MenuButton

Name	Default	Description
variant	"secondary"	"primary" | "secondary" | "tertiary"The button variant.
size	"md"	"sm" | "md" | "lg"Determines the height of the button.
isLoading	—	booleanToggles the loading state.
isDisabled	—	booleanToggles the disabled state.
isJustified	—	booleanTake up an entire available container width.
children	—	ReactNodeButton text.
shape	"default"	"default" | "circle"Determines the shape of the button.
icon	—	ComponentType<SVGAttributes<SVGElement>>Primary icon that's displayed on the left. Only icon or imageUrl can be set at the same time.
imageUrl	—	stringURL to an image to display on the left. Only icon or imageUrl can be set at the same time.

#MenuActionsButton

Name	Default	Description
aria-label	"Actions"	stringButton text for screen readers.
variant	"tertiary"	"secondary" | "tertiary"Button variant, which determines its appearance.
onClick	—	(event: MouseEvent<HTMLButtonElement>) => voidClick event handler.
isLoading	false	booleanToggles the loading state.
isDisabled	false	booleanToggles the disabled state.
size	"md"	"2xs" | "xs" | "sm" | "md" | "lg"Determines the height of the button.
shape	"default"	"default" | "circle"Determines the shape of the button

#MenuIconButton

Name	Default	Description
variant	"tertiary"	"secondary" | "tertiary"Button variant, which determines its appearance.
onClick	—	(event: MouseEvent<HTMLButtonElement>) => voidClick event handler.
isLoading	false	booleanToggles the loading state.
isDisabled	false	booleanToggles the disabled state.
aria-label	—	stringButton's meaning for screen readers.
icon	—	ComponentType<SVGAttributes<SVGElement>>Button icon.
size	"md"	"2xs" | "xs" | "sm" | "md" | "lg"Determines the height of the button.
shape	"default"	"default" | "circle"Determines the shape of the button

#MenuList

Name	Default	Description
children	—	ReactNodeMenu items.

#MenuItem

Name	Default	Description
isDisabled	—	booleanDetermines if menu item is disabled.
children	—	ReactNodeMenu item text.
icon	—	ComponentType<SVGAttributes<SVGElement>>Icon.
iconColor	—	ColorProps["color"]Override the default icon color.
variant	—	"normal" | "danger"Variant. Use "danger" for destructive or dangerous actions.
onClick	—	(event: MouseEvent<HTMLButtonElement>) => voidCallback for when user clicks a menu item.
autofocus	—	booleanIf true, this menu item will automatically focus when the menu opens.

#MenuDivider

Name	Default	Description