Menu

What is this?

Menu triggers allow merchants to open a dropdown and start contextual actions that are rarely used or repeated for each item in a list.

Composition

Name	Description
MenuButton	Button that triggers the menu popover
Menu	Menu's popover
MenuItem	Represents a button rendered inside the MenuList
MenuDivider	Represents an hr used to separate the menu popover into sections

Variants

MenuButton has four possible variants: primary, secondary, tertiary and neutralTertiary. Primary is the default variant.

Loading...

Sizes

MenuButton has two possible sizes: normal and large. Normal is the default size.

Loading...

Icon only

You can use the labelHidden property to hide the MenuButton label

Loading...

Custom

It possible to use the label MenuButton property to set the button text. When a custom label is used, the icon changes to the IconCaretDown/Up.

Loading...

Disabled

Disable the MenuButton by setting the disabled property to true.

Loading...

Bleed

MenuButton can trespass the parent padding for some alignment and layout reasons, it is possible to achieve this behavior through the bleedX and bleedY property.

Loading...

Item

MenuItem has two possible variants: neutral and critical, to enable the critical variant, the critical property needs to be true.

Loading...

Item click

It is possible to set a custom action when a item is clicked.

Loading...

Item disabled

Disable the MenuItem by setting the disabled property to true.

Loading...

Usage

import {
  MenuButton,
  Menu,
  MenuItem,
  MenuDivider,
  useMenuState,
} from '@vtex/admin-ui'

function Example() {
  const state = useMenuState()

  return (
    <>
      <MenuButton state={state} />
      <Menu state={state}>
        <MenuItem label="Create" icon={<IconPlus />} />
        <MenuItem label="Edit" icon={<IconPencil />} />
        <MenuItem label="Download" icon={<IconArrowLineDown />} />
      </Menu>
    </>
  )
}

MenuButton Props

Name	Type	Description	Required	Default
state	MenuStateReturn	useMenuState hook return	✅	-
size	normal, large	Button size	🚫	normal
variant	primary, secondary, tertiary, neutralTertiary	Button variant	🚫	primary
label	string	Button label	🚫	More actions
labelHidden	boolean	Whether the label is visible or not	🚫	false
bleedX	boolean	Whether the Button should trespass the parent paddingX	🚫	false
bleedY	booelean	Whether the Button should trespass the parent paddingY	🚫	false

Menu Props

Name	Type	Description	Required	Default
state	MenuStateReturn	useMenuState hook return	✅	-

MenuItem Props

Name	Type	Description	Required	Default
label	string	Item label	✅	-
icon	ReactNode	Item icon	🚫	-
critical	boolean	Whether the item variant is critical	🚫	false

Accessibility

• Menu has role menu.
• MenuItem has role menuitem.
• Pressing Enter on MenuButton opens the Menu and places focus on its first item.
• When MenuItem has focus, Space and Enter triggers it.

Best Practices

You must always set the aria-label property in the Menu component.

function Example() {
  const state = useMenuState()

  return (
    <>
      <MenuButton state={state} />
      <Menu aria-label="actions" state={state}>
        <MenuItem label="Create" icon={<IconPlus />} />
        <MenuItem label="Edit" icon={<IconPencil />} />
        <MenuItem label="Download" icon={<IconArrowLineDown />} />
        <MenuDivider />
        <MenuItem label="Delete" icon={<IconTrash />} critical />
      </Menu>
    </>
  )
}

Keyboard Navigation

• ↓ moves focus to the next `MenuItem`.
• ↑ moves focus to the previous `MenuItem`.

• What is this?
• Composition
• Variants
• Sizes
• Icon only
• Custom
• Disabled
• Bleed
• Item
• Item click
• Item disabled