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.

Icon can be vertical too.

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

#Secondary

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

#Guidelines

#When to use it

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

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

#Content

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

#Icons

• Only use icons from Heroicons.
• Don't override icon size.
• Prefer outline icons over solid ones.
• 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
children	—	ReactNode Menu button and list.

#MenuButton

Name	Default	Description
children	—	ReactNode Button text.
size	"md"	"sm" | "md" | "lg" Determines the height of the button.

#MenuActionsButton

Name	Default	Description
aria-label	"Actions"	string Button text for screen readers.
orientation	"horizontal"	"horizontal" | "vertical" Icon orientation.
size	"md"	"sm" | "md" | "lg" Determines the height of the button.
variant	"ghost"	"secondary" | "ghost" Button variant, which determines its appearance.

#MenuIconButton

Name	Default	Description
aria-label	—	string Button text for screen readers.
icon	—	ComponentType<SVGAttributes<SVGElement>> Icon to show inside of a button.
size	"md"	"sm" | "md" | "lg" Determines the height of the button.
variant	"ghost"	"secondary" | "ghost" Button variant, which determines its appearance.

#MenuList

Name	Default	Description
children	—	ReactNode Menu items.

#MenuItem

Name	Default	Description
isDisabled	—	boolean Determines if menu item is disabled.
children	—	ReactNode Menu item text.
icon	—	ComponentType<SVGProps<SVGSVGElement>> Icon.
variant	—	"normal" | "danger" Variant. Use `"danger"` for destructive or dangerous actions.
onClick	—	() => void Callback for when user clicks a menu item.

#MenuDivider

Name	Default	Description