Menu: The wrapper component that provides context, state, and focus management.
MenuList: The wrapper for the menu items. Must be a direct child of Menu.
MenuItem: The trigger that handles menu selection. Must be a direct child of a MenuList.
MenuGroup: A wrapper to group related menu items.
MenuDivider: A visual separator for menu items and groups.
MenuButton: The trigger for the menu list. Must be a direct child of Menu.

import {
  Menu,
  MenuList,
  MenuItem,
  MenuGroup,
  MenuDivider,
  MenuButton,
} from '@trendmicro/react-styled-ui';import {
  Menu,
  MenuList,
  MenuItem,
  MenuGroup,
  MenuDivider,
  MenuButton,
} from '@trendmicro/react-styled-ui';

Usage

Basic menu with an anchor


EDITABLE EXAMPLE
function basicMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const { isOpen, onClose, onToggle } = useDisclosure();
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
    onToggle();
  };
  const handleMenuItemClick = (event) => {
    const value = event.target.getAttribute('value');
    console.log(`Menu item #${value} clicked`);
  };

  return (
    <>
      <Button onClick={handleClick}>Select an option</Button>
      <Menu
        anchorEl={anchorEl}
        isOpen={isOpen}
        onClose={onClose}
      >
        <MenuList onClick={handleMenuItemClick}>
          <MenuItem value={1}>List item</MenuItem>
          <MenuItem value={2}>List item</MenuItem>
          <MenuItem valie={3}>List item</MenuItem>
        </MenuList>
      </Menu>
    </>
  );
}function basicMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const { isOpen, onClose, onToggle } = useDisclosure();
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
    onToggle();
  };
  const handleMenuItemClick = (event) => {
    const value = event.target.getAttribute('value');
    console.log(`Menu item #${value} clicked`);
  };

  return (
    <>
      <Button onClick={handleClick}>Select an option</Button>
      <Menu
        anchorEl={anchorEl}
        isOpen={isOpen}
        onClose={onClose}
      >
        <MenuList onClick={handleMenuItemClick}>
          <MenuItem value={1}>List item</MenuItem>
          <MenuItem value={2}>List item</MenuItem>
          <MenuItem valie={3}>List item</MenuItem>
        </MenuList>
      </Menu>
    </>
  );
}

Basic menu with `MenuButton`


EDITABLE EXAMPLE
<Stack shouldWrapChildren spacing="2x">
  <Menu>
    <MenuButton>Select an option</MenuButton>
    <MenuList maxHeight="200px" overflow="auto">
      <MenuItem>List item 1</MenuItem>
      <MenuItem>List item 2</MenuItem>
      <MenuItem>List item 3</MenuItem>
      <MenuItem>List item 4</MenuItem>
      <MenuItem>List item 5</MenuItem>
      <MenuItem>List item 6</MenuItem>
      <MenuItem>List item 7</MenuItem>
      <MenuItem>List item 8</MenuItem>
      <MenuItem>List item 9</MenuItem>
      <MenuItem>List item 10</MenuItem>
      <MenuItem>List item 11</MenuItem>
      <MenuItem>List item 12</MenuItem>
    </MenuList>
  </Menu>
  <Menu>
    <MenuButton variant="ghost">Select an option</MenuButton>
    <MenuList>
      <MenuItem>List item</MenuItem>
      <MenuItem>List item</MenuItem>
      <MenuItem>List item</MenuItem>
    </MenuList>
  </Menu>
</Stack><Stack shouldWrapChildren spacing="2x">
  <Menu>
    <MenuButton>Select an option</MenuButton>
    <MenuList maxHeight="200px" overflow="auto">
      <MenuItem>List item 1</MenuItem>
      <MenuItem>List item 2</MenuItem>
      <MenuItem>List item 3</MenuItem>
      <MenuItem>List item 4</MenuItem>
      <MenuItem>List item 5</MenuItem>
      <MenuItem>List item 6</MenuItem>
      <MenuItem>List item 7</MenuItem>
      <MenuItem>List item 8</MenuItem>
      <MenuItem>List item 9</MenuItem>
      <MenuItem>List item 10</MenuItem>
      <MenuItem>List item 11</MenuItem>
      <MenuItem>List item 12</MenuItem>
    </MenuList>
  </Menu>
  <Menu>
    <MenuButton variant="ghost">Select an option</MenuButton>
    <MenuList>
      <MenuItem>List item</MenuItem>
      <MenuItem>List item</MenuItem>
      <MenuItem>List item</MenuItem>
    </MenuList>
  </Menu>
</Stack>

Group


EDITABLE EXAMPLE
<Menu>
  <MenuButton>Select an option</MenuButton>
  <MenuList>
    <MenuGroup title="title1">
      <MenuItem px="6x">List item</MenuItem>
      <MenuItem px="6x">List item</MenuItem>
      <MenuItem px="6x">List item</MenuItem>
    </MenuGroup>
    <MenuGroup title="title2">
      <MenuItem px="6x">List item</MenuItem>
      <MenuItem px="6x">List item</MenuItem>
      <MenuItem px="6x">List item</MenuItem>
    </MenuGroup>
  </MenuList>
</Menu><Menu>
  <MenuButton>Select an option</MenuButton>
  <MenuList>
    <MenuGroup title="title1">
      <MenuItem px="6x">List item</MenuItem>
      <MenuItem px="6x">List item</MenuItem>
      <MenuItem px="6x">List item</MenuItem>
    </MenuGroup>
    <MenuGroup title="title2">
      <MenuItem px="6x">List item</MenuItem>
      <MenuItem px="6x">List item</MenuItem>
      <MenuItem px="6x">List item</MenuItem>
    </MenuGroup>
  </MenuList>
</Menu>

Divider


EDITABLE EXAMPLE
<Menu>
  <MenuButton>Select an option</MenuButton>
  <MenuList>
    <MenuItem>List item</MenuItem>
    <MenuItem>List item</MenuItem>
    <MenuItem>List item</MenuItem>
    <MenuDivider />
    <MenuItem>List item</MenuItem>
    <MenuItem>List item</MenuItem>
    <MenuItem>List item</MenuItem>
  </MenuList>
</Menu><Menu>
  <MenuButton>Select an option</MenuButton>
  <MenuList>
    <MenuItem>List item</MenuItem>
    <MenuItem>List item</MenuItem>
    <MenuItem>List item</MenuItem>
    <MenuDivider />
    <MenuItem>List item</MenuItem>
    <MenuItem>List item</MenuItem>
    <MenuItem>List item</MenuItem>
  </MenuList>
</Menu>

Disabled

Add disabled property on MenuItem


EDITABLE EXAMPLE
<Menu>
  <MenuButton>Select an option</MenuButton>
  <MenuList>
    <MenuItem>List item</MenuItem>
    <MenuItem disabled>List item</MenuItem>
    <MenuItem>List item</MenuItem>
  </MenuList>
</Menu><Menu>
  <MenuButton>Select an option</MenuButton>
  <MenuList>
    <MenuItem>List item</MenuItem>
    <MenuItem disabled>List item</MenuItem>
    <MenuItem>List item</MenuItem>
  </MenuList>
</Menu>

Set the minimum width of the `MenuList` to the width of the `MenuButton`


EDITABLE EXAMPLE
<Menu display="inline-block">
  <MenuButton>Select an option</MenuButton>
  <MenuList minWidth="100%" whiteSpace="nowrap">
    <MenuItem>List item</MenuItem>
    <MenuItem>List item</MenuItem>
    <MenuItem>List item</MenuItem>
  </MenuList>
</Menu><Menu display="inline-block">
  <MenuButton>Select an option</MenuButton>
  <MenuList minWidth="100%" whiteSpace="nowrap">
    <MenuItem>List item</MenuItem>
    <MenuItem>List item</MenuItem>
    <MenuItem>List item</MenuItem>
  </MenuList>
</Menu>

Menu with icon


EDITABLE EXAMPLE
<Menu>
  <MenuButton>Select an option</MenuButton>
  <MenuList>
    <MenuItem><Icon icon="delete" mr="2x"/>List item</MenuItem>
    <MenuItem><Icon icon="edit" mr="2x"/>List item</MenuItem>
    <MenuItem><Icon icon="share" mr="2x"/>List item</MenuItem>
  </MenuList>
</Menu><Menu>
  <MenuButton>Select an option</MenuButton>
  <MenuList>
    <MenuItem><Icon icon="delete" mr="2x"/>List item</MenuItem>
    <MenuItem><Icon icon="edit" mr="2x"/>List item</MenuItem>
    <MenuItem><Icon icon="share" mr="2x"/>List item</MenuItem>
  </MenuList>
</Menu>

Dropup Menu

Add the placement property with top-start


EDITABLE EXAMPLE
<Menu display="inline-block" placement="top-start">
  <MenuButton>Select an option</MenuButton>
  <MenuList minWidth="100%" whiteSpace="nowrap">
    <MenuItem>List item</MenuItem>
    <MenuItem>List item</MenuItem>
    <MenuItem>List item</MenuItem>
  </MenuList>
</Menu><Menu display="inline-block" placement="top-start">
  <MenuButton>Select an option</MenuButton>
  <MenuList minWidth="100%" whiteSpace="nowrap">
    <MenuItem>List item</MenuItem>
    <MenuItem>List item</MenuItem>
    <MenuItem>List item</MenuItem>
  </MenuList>
</Menu>

Menu with checkbox

Need to set closeOnSelect to false on Menu


EDITABLE EXAMPLE
function menuWithCheckbox() {
  const [checkedItems, setCheckedItems] = React.useState(['host', 'ip']);
  const handleChange = (e) => {
    const value = e.target.value;
    const items = [...checkedItems];
    items.indexOf(value) === -1 ? items.push(value) : items.splice(items.indexOf(value), 1);
    setCheckedItems(items);
  };
  return (
    <Menu closeOnSelect={false}>
      <MenuButton>Select an option</MenuButton>
      <MenuList>
        <CheckboxGroup size="sm" defaultValue={checkedItems}>
          <MenuItem><Checkbox value="host" onChange={e => handleChange(e)}>Endpoint name</Checkbox></MenuItem>
          <MenuItem><Checkbox value="ip" onChange={e => handleChange(e)}>IP address</Checkbox></MenuItem>
          <MenuItem><Checkbox value="os" onChange={e => handleChange(e)}>Operating system</Checkbox></MenuItem>
        </CheckboxGroup>
      </MenuList>
    </Menu>
  );
}function menuWithCheckbox() {
  const [checkedItems, setCheckedItems] = React.useState(['host', 'ip']);
  const handleChange = (e) => {
    const value = e.target.value;
    const items = [...checkedItems];
    items.indexOf(value) === -1 ? items.push(value) : items.splice(items.indexOf(value), 1);
    setCheckedItems(items);
  };
  return (
    <Menu closeOnSelect={false}>
      <MenuButton>Select an option</MenuButton>
      <MenuList>
        <CheckboxGroup size="sm" defaultValue={checkedItems}>
          <MenuItem><Checkbox value="host" onChange={e => handleChange(e)}>Endpoint name</Checkbox></MenuItem>
          <MenuItem><Checkbox value="ip" onChange={e => handleChange(e)}>IP address</Checkbox></MenuItem>
          <MenuItem><Checkbox value="os" onChange={e => handleChange(e)}>Operating system</Checkbox></MenuItem>
        </CheckboxGroup>
      </MenuList>
    </Menu>
  );
}

Menu with label inline


EDITABLE EXAMPLE
function inlineLabelMenu() {
  const [menuItem, setMenuItem] = React.useState('Name');

  const handleClick = (event) => {
    if (event.key === 'Enter' || event.type === 'click') {setMenuItem(event.target.innerHTML)}
  };

  return (
    <Menu display="inline-block">
      <MenuButton><Text color="white:secondary" mr="1x">Search by:</Text>{menuItem}</MenuButton>
      <MenuList onClick={handleClick} minWidth="100%" whiteSpace="nowrap">
        <MenuItem onKeyDown={handleClick}>Name</MenuItem>
        <MenuItem onKeyDown={handleClick}>Address</MenuItem>
        <MenuItem onKeyDown={handleClick}>Postcode</MenuItem>
      </MenuList>
    </Menu>
  );
}function inlineLabelMenu() {
  const [menuItem, setMenuItem] = React.useState('Name');

  const handleClick = (event) => {
    if (event.key === 'Enter' || event.type === 'click') {setMenuItem(event.target.innerHTML)}
  };

  return (
    <Menu display="inline-block">
      <MenuButton><Text color="white:secondary" mr="1x">Search by:</Text>{menuItem}</MenuButton>
      <MenuList onClick={handleClick} minWidth="100%" whiteSpace="nowrap">
        <MenuItem onKeyDown={handleClick}>Name</MenuItem>
        <MenuItem onKeyDown={handleClick}>Address</MenuItem>
        <MenuItem onKeyDown={handleClick}>Postcode</MenuItem>
      </MenuList>
    </Menu>
  );
}

Offset position

Add skidding or distance to customize menu offset position


EDITABLE EXAMPLE
<Menu>
  <MenuButton>Select an option</MenuButton>
  <MenuList skidding={20} distance={8}>
    <MenuItem>List item</MenuItem>
    <MenuItem>List item</MenuItem>
    <MenuItem>List item</MenuItem>
  </MenuList>
</Menu><Menu>
  <MenuButton>Select an option</MenuButton>
  <MenuList skidding={20} distance={8}>
    <MenuItem>List item</MenuItem>
    <MenuItem>List item</MenuItem>
    <MenuItem>List item</MenuItem>
  </MenuList>
</Menu>

Accessibility

Keyboard Interaction

Key	Action
`Enter` or `Space`	When `MenuButton` receives focus, opens the menu and places focus on the first menu item
`ArrowDown`	When `MenuButton` receives focus, opens the menu and moves focus to the first menu item
`ArrowUp`	When `MenuButton` receives focus, opens the menu and moves focus to the last menu item
`Escape`	When the menu is open, closes the menu and sets focus to the `MenuButton`

ARIA roles

For MenuButton:

It has role set to button.
It has aria-haspopup set to either menu.
When the menu is displayed, MenuButton has aria-expanded set to true.
MenuButton has aria-controls set to the id of the MenuList.

For MenuList:

It contains the MenuItem has role menu.

Props

Name	Type	Default	Description
children	ReactNode		The children of the menu must be `MenuButton` or `MenuList`
isOpen	boolean		If `true`, the menu will be opened
autoSelect	boolean	`false`	The menu will select the first enabled item when it opens, the trigger item must be `MenuButton`
closeOnBlur	boolean	`true`	If `true`, the menu will close on outside click or blur
closeOnSelect	boolean	`true`	If `true`, the menu will close on menu item select
placement	PopperJS.placement	`bottom-start`	The placement of the `MenuList`. One of: `'top'`, `'bottom'`, `'right'`, `'left'`, `'top-start'`, `'top-end'`, `'bottom-start'`, `'bottom-end'`, `'right-start'`, `'right-end'`, `'left-start'`, `'left-end'`

MenuButton

Name	Type
children	ReactNode
onClick	React.MouseEventHandler
onKeyDown	React.KeyboardEventHandler

MenuList

Name	Type	Default	Description
children	ReactNode		The content of the `MenuList`, should be the `MenuItem` component
onClick	React.MouseEventHandler		Function to be called when you click on the menu item
onBlur	React.FocusEventHandler		Function to be called when you blur out of the menu list
skidding	number	`0`	Displaces the menu (in pixels) along the reference element. Used by `popper.js`
distance	number	`0`	Displaces the menu (in pixels) away from, or toward, the reference. Used by `popper.js`

MenuItem

Name	Type	Default
disabled	boolean	If `true`, the menu item will be disabled
onClick	React.MouseEventHandler	Function that is called on click and enter/space keypress
onKeyDown	React.KeyboardEventHander	Function that is called on keydown

MenuGroup

Name	Type	Default	Description
children	ReactNode	The content of the menu group, should be the `MenuItem` component
title	string	The title of the menu group

Menu

Import