Menu

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

#

#

#

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.

Icon can be vertical too.

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

#

Use this variant to achieve a border around the menu button.

#

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

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

#

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.

#

#

  • 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.

#

  • If menu is used for in-page navigation or replacing part of the page content, use tabs instead.

#

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

#

  • 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.

#

NameDefaultDescription
computePositionOnMounttrueboolean

Compute the position of the menu on mount.

children

ReactNode

Menu button and list.

closeOnSelecttrueboolean

Close the menu when an item is selected.

NameDefaultDescription
children

ReactNode

Button text.

isDisabled

boolean

Toggles the disabled state.

variant"secondary""primary" | "secondary" | "tertiary"

The button variant.

size"md""sm" | "md" | "lg"

Determines the height of the button.

NameDefaultDescription
aria-label"Actions"string

Button text for screen readers.

isDisabled

boolean

Toggles the disabled state.

size"md""sm" | "md" | "lg"

Determines the height of the button.

variant"tertiary""secondary" | "tertiary"

Button variant, which determines its appearance.

onClick

(event: MouseEvent<HTMLButtonElement>) => void

Click event handler.

NameDefaultDescription
aria-label

string

Button text for screen readers.

icon

ComponentType<SVGAttributes<SVGElement>>

Icon to show inside of a button.

isDisabled

boolean

Toggles the disabled state.

size"md""sm" | "md" | "lg"

Determines the height of the button.

variant"tertiary""secondary" | "tertiary"

Button variant, which determines its appearance.

onClick

(event: MouseEvent<HTMLButtonElement>) => void

Click event handler.

NameDefaultDescription
children

ReactNode

Menu items.

NameDefaultDescription
isDisabled

boolean

Determines if menu item is disabled.

children

ReactNode

Menu item text.

icon

ComponentType<SVGAttributes<SVGElement>>

Icon.

variant

"normal" | "danger"

Variant. Use `"danger"` for destructive or dangerous actions.

onClick

(event: MouseEvent<HTMLButtonElement>) => void

Callback for when user clicks a menu item.

NameDefaultDescription

On this page