Menu: The component that provides the menu functionality.
MenuButton: A button that composes Button, MenuToggle, and MenuToggleIcon to create a menu button.
MenuDivider: A divider that separates menu items.
MenuGroup: A component that groups menu items.
MenuItem: The individual menu items.
MenuList: A styled MenuContent that wraps the menu items.
MenuToggle: The toggle that opens the menu. This is usually a button or link.
MenuToggleIcon: An indicator that appears next to the toggle. This is usually a chevron or arrow.
Submenu: The component that provides the submenu functionality.
SubmenuList: The list of menu items that appear in the submenu.
SubmenuToggle: The toggle that opens the submenu when the menu item is hovered over.

import {
  Menu,
  MenuButton,
  MenuDivider,
  MenuGroup,
  MenuItem,
  MenuList,
  MenuToggle,
  MenuToggleIcon,
  Submenu,
  SubmenuList,
  SubmenuToggle,
  useMenu,
  useSubmenu,
} from '@trendmicro/react-styled-ui';import {
  Menu,
  MenuButton,
  MenuDivider,
  MenuGroup,
  MenuItem,
  MenuList,
  MenuToggle,
  MenuToggleIcon,
  Submenu,
  SubmenuList,
  SubmenuToggle,
  useMenu,
  useSubmenu,
} 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>

Cascading submenus

The following example shows a menu with cascading submenus.


EDITABLE EXAMPLE
<Flex
  justify="space-between"
>
  <Flex
    flexDirection="column"
  >
    <MenuItem>
      <Text>List item</Text>
    </MenuItem>
    <MenuItem>
      <Text>List item</Text>
    </MenuItem>
    <MenuDivider />
    <Submenu>
      <SubmenuToggle>
        <MenuItem>
          <Flex
            alignItems="center"
            columnGap="2x"
            justifyContent="space-between"
            width="100%"
          >
            <Text>Submenu</Text>
            <Icon icon="angle-right" />
          </Flex>
        </MenuItem>
      </SubmenuToggle>
      <SubmenuList width="max-content">
        <MenuItem>
          <Text>List item</Text>
        </MenuItem>
        <MenuItem>
          <Text>List item</Text>
        </MenuItem>
        <Submenu>
          <SubmenuToggle>
            <MenuItem>
              <Flex
                alignItems="center"
                columnGap="2x"
                justifyContent="space-between"
                width="100%"
              >
                <Text>Submenu</Text>
                <Icon icon="angle-right" />
              </Flex>
            </MenuItem>
          </SubmenuToggle>
          <SubmenuList width="max-content">
            <MenuItem>
              <Text>List item</Text>
            </MenuItem>
            <MenuItem>
              <Text>List item</Text>
            </MenuItem>
          </SubmenuList>
        </Submenu>
      </SubmenuList>
    </Submenu>
  </Flex>
  <Flex
    flexDirection="column"
  >
    <MenuItem pl="9x">
      <Text>List item</Text>
    </MenuItem>
    <MenuItem pl="9x">
      <Text>List item</Text>
    </MenuItem>
    <MenuDivider />
    <Submenu placement="left-start">
      <SubmenuToggle>
        <MenuItem>
          <Flex
            alignItems="center"
            columnGap="2x"
            justifyContent="space-between"
            width="100%"
          >
            <Icon icon="angle-left" />
            <Text>Submenu</Text>
          </Flex>
        </MenuItem>
      </SubmenuToggle>
      <SubmenuList width="max-content">
        <MenuItem pl="9x">
          <Text>List item</Text>
        </MenuItem>
        <MenuItem pl="9x">
          <Text>List item</Text>
        </MenuItem>
        <Submenu placement="left-start">
          <SubmenuToggle>
            <MenuItem>
              <Flex
                alignItems="center"
                columnGap="2x"
                justifyContent="space-between"
                width="100%"
              >
                <Icon icon="angle-left" />
                <Text>Submenu</Text>
              </Flex>
            </MenuItem>
          </SubmenuToggle>
          <SubmenuList
            width="max-content"
          >
            <MenuItem>
              <Text>List item</Text>
            </MenuItem>
            <MenuItem>
              <Text>List item</Text>
            </MenuItem>
          </SubmenuList>
        </Submenu>
      </SubmenuList>
    </Submenu>
  </Flex>
</Flex><Flex
  justify="space-between"
>
  <Flex
    flexDirection="column"
  >
    <MenuItem>
      <Text>List item</Text>
    </MenuItem>
    <MenuItem>
      <Text>List item</Text>
    </MenuItem>
    <MenuDivider />
    <Submenu>
      <SubmenuToggle>
        <MenuItem>
          <Flex
            alignItems="center"
            columnGap="2x"
            justifyContent="space-between"
            width="100%"
          >
            <Text>Submenu</Text>
            <Icon icon="angle-right" />
          </Flex>
        </MenuItem>
      </SubmenuToggle>
      <SubmenuList width="max-content">
        <MenuItem>
          <Text>List item</Text>
        </MenuItem>
        <MenuItem>
          <Text>List item</Text>
        </MenuItem>
        <Submenu>
          <SubmenuToggle>
            <MenuItem>
              <Flex
                alignItems="center"
                columnGap="2x"
                justifyContent="space-between"
                width="100%"
              >
                <Text>Submenu</Text>
                <Icon icon="angle-right" />
              </Flex>
            </MenuItem>
          </SubmenuToggle>
          <SubmenuList width="max-content">
            <MenuItem>
              <Text>List item</Text>
            </MenuItem>
            <MenuItem>
              <Text>List item</Text>
            </MenuItem>
          </SubmenuList>
        </Submenu>
      </SubmenuList>
    </Submenu>
  </Flex>
  <Flex
    flexDirection="column"
  >
    <MenuItem pl="9x">
      <Text>List item</Text>
    </MenuItem>
    <MenuItem pl="9x">
      <Text>List item</Text>
    </MenuItem>
    <MenuDivider />
    <Submenu placement="left-start">
      <SubmenuToggle>
        <MenuItem>
          <Flex
            alignItems="center"
            columnGap="2x"
            justifyContent="space-between"
            width="100%"
          >
            <Icon icon="angle-left" />
            <Text>Submenu</Text>
          </Flex>
        </MenuItem>
      </SubmenuToggle>
      <SubmenuList width="max-content">
        <MenuItem pl="9x">
          <Text>List item</Text>
        </MenuItem>
        <MenuItem pl="9x">
          <Text>List item</Text>
        </MenuItem>
        <Submenu placement="left-start">
          <SubmenuToggle>
            <MenuItem>
              <Flex
                alignItems="center"
                columnGap="2x"
                justifyContent="space-between"
                width="100%"
              >
                <Icon icon="angle-left" />
                <Text>Submenu</Text>
              </Flex>
            </MenuItem>
          </SubmenuToggle>
          <SubmenuList
            width="max-content"
          >
            <MenuItem>
              <Text>List item</Text>
            </MenuItem>
            <MenuItem>
              <Text>List item</Text>
            </MenuItem>
          </SubmenuList>
        </Submenu>
      </SubmenuList>
    </Submenu>
  </Flex>
</Flex>

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

MenuDivider

Name	Type	Default	Description
children	ReactNode

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

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

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`

MenuToggle

Name	Type	Description
children	ReactNode \| ({ getMenuToggleProps }) => ReactNode
disabled	boolean	Whether the menu toggle is disabled.
onClick	function	Callback when the menu toggle is clicked.
onKeyDown	function	Callback when the user presses a key.

MenuToggleIcon

Name	Type	Default	Description
appear	boolean	false	By default the child component does not perform the enter transition when it first mounts, regardless of the value of `in`. If you want this behavior, set both `appear` and `in` to true.
children	ReactNode \| (state, props) => ReactNode		A function child can be used instead of a React element. This function is called with the current transition state ('entering', 'entered', 'exiting', 'exited'), ref, style, and context specific props for a component.
disabled	boolean		Whether the menu toggle icon is disabled.
easing	string \| { enter?: string, exit?: string }	{ enter: easing.easeInOut, exit: easing.easeInOut }	The timing function that describes how intermediate values are calculated during a transition. You may specify a single timing function for all transitions, or individually with an object.
in	boolean		If `true`, the component will transition in.
mountOnEnter	boolean		If `true`, it will "lazy mount" the component on the first `in={true}`. After the first enter transition the component will stay mounted, even on the 'exited' state, unless you also specify `unmountOnExit`. By default the child component is mounted immediately along with the parent transition component.
timeout	number \| { appear?: number, enter?: number, exit?: number }	{ enter: duration.enterScreen, exit: duration.levingScreen }	The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
unmountOnExit	boolean		If `true`, it will unmount the child component when `in={false}` and the animation has finished. By default the child component stays mounted after it reaches the 'exited' state.

Submenu

Name	Type	Default	Description
children	ReactNode
defaultIsOpen	boolean	`false`	Whether the submenu is open by default.
isOpen	boolean		Whether the submenu is open.
onClose	function		Callback when the submenu is closed.
onOpen	function		Callback when the submenu is opened.
placement	string	'right-start'	The placement of the submenu. One of: 'right-start', 'right-end', 'left-start', 'left-end'

SubmenuList

Name	Type	Default	Description
children	ReactNode

SubmenuToggle

Name	Type	Default	Description
children	ReactNode \| ({ getSubmenuToggleProps }) => ReactNode
disabled	boolean		Whether the submenu toggle is disabled.

Menu

Import