Menu

Components

A dropdown menu that presents a list of actions or options to a user.

Common use case are:

A "more" menu, where the menu items are different actions
A "filter" menu, where one or more items can be selected to filter a table or list

Import

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.
MenuButton: The trigger for the menu list. 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.
MenuOptionGroup: A wrapper for checkable menu items (radio and checkbox)
MenuItemOption: The checkable menu item, to be used with MenuOptionGroup

import {
  Menu,
  MenuButton,
  MenuList,
  MenuItem,
  MenuGroup,
  MenuDivider,
  MenuOptionGroup,
  MenuItemOption,
} from '@outfitio/outkit';

Usage

Accessing the internal state

To access the internal state of the Menu, use a function as a children (commonly known as a render prop). You'll get access to the internal state isOpen and method onClose.

MenuGroup

To group related MenuItems, use the MenuGroup component and pass it a label for the group name.

MenuOptionGroup

For sorting and filtering options. Use the MenuOptionGroup and MenuItemOption components.

Multiple MenuOptionGroups can be combined in the same menu.

Accessibility

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

When MenuButton is focused:

Enter or Space opens the menu and places focus on the first menu item
ArrowDown opens the menu and moves focus on the first menu item
ArrowUp opens the menu and moves focus on the last menu item

When the menu is open:

Escape closes the menu and sets focus to the MenuButton
Home moves focus to the first item
End moves focus to the last item
ArrowUp and ArrowDown navigate up and down through the menu items
The letter keys moves focus to the next menu item with a label that starts with the typed character if such an menu item exists

Best Practice

Menus should

Contain actions or options that are related to each other
Use clear and predictable language
Avoid using very long item names

Props

Name	Type	Default	Description
children	`React.ReactNode`		The children of the menu must be `MenuButton` and `MenuList`
isOpen	`boolean`		If `true`, the menu will be opened
autoSelect	`boolean`	`true`	The menu will select the first enabled item when it opens
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

MenuButton Props

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

MenuList Props

Name	Type	Description
children	`React.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
placement	`PopperJS.placement`	The placement of the `MenuList`

MenuItem Props

Name	Type	Description
isDisabled	`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
role	`menuitem`, `menuitemradio`, `menuitemcheckbox`	The ARIA role of the menuitem

MenuGroup Props

Name	Type	Description
children	`React.ReactNode`	The content of the menu group
title	`string`	The title of the menu group

MenuOptionGroup Props

Name	Type	Description
children	`React.ReactNode`	The content of the option group
title	`string`	Title of the option group
type	`radio`, `checkbox`	Used to add roles `menuitemradio` or `menuitemcheckbox`
defaultValue	`string`, `number`, `Array<string or number>`	The initial value of the option group
value	`string`, `number`, `Array<string or number>`	The value of the option group
onChange	`(value) => void`	Function called when selection changes

MenuItemOption Props

Name	Type	Description
isDisabled	`boolean`	If `true`, the menu item will be disabled
children	`React.ReactNode`	The content of the option item
value	`StringOrNumber`	Used to add roles `menuitemradio` or `menuitemcheckbox`
type	`radio`, `checkbox`	The initial value of the option item
onMouseLeave	`React.MouseEventHandler`	The value of the option item
onMouseEnter	`React.MouseEventHandler`	Function called when selection changes

MenuList Placement Props

The auto placements will choose the side with most space.

default	start	end
`auto`	`auto-start`	`auto-end`
`top`	`top-start`	`top-end`
`bottom`	`bottom-start`	`bottom-end`
`right`	`right-start`	`right-end`
`left`	`left-start`	`left-end`