Menu
An accessible dropdown menu for the common dropdown menu button design pattern. Menu uses roving tabIndex for focus management.
Import
Sajari UI exports 8 components for rendering menus:
Menu
: The wrapper component that provides context, state, and focus management.MenuList
: The wrapper for the menu items. Must be a direct child ofMenu
.MenuButton
: The trigger for the menu list. Must be a direct child ofMenu
.MenuItem
: The trigger that handles menu selection. Must be a direct child of aMenuList
.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 withMenuOptionGroup
Usage
Editable Example
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
open
and method onClose
.
Editable Example
Letter Navigation
When focus is on the MenuButton
or within the MenuList
and you type a letter
key, a search begins. Focus will move to the first MenuItem
that starts with
the letter you typed.
Open the menu, try and type any letter, say "S" to see the focus movement.
Editable Example
Just another example.
Editable Example
MenuGroup
To group related MenuItems
, use the MenuGroup
component and pass it a label
for the group name.
Editable Example
Menu option groups
You can compose a menu for table headers to help with sorting and filtering
options. Use the MenuOptionGroup
and MenuItemOption
components. By default
the menu won't close on clicking MenuItemOption
, however you can override it
by setting closeOnSelect
to true
.
Editable Example
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 |
Tab | no effect |
Home | When the menu is open, moves focus to the first item. |
End | When the menu is open, moves focus to the last item. |
A-Z or a-z | When the menu is open, moves focus to the next menu item with a label that starts with the typed character if such an menu item exists. |
ARIA roles
For MenuButton
:
- It has
role
set tobutton
. - It has aria-haspopup set to either
menu
. - When the menu is displayed,
MenuButton
hasaria-expanded
set totrue
. MenuButton
hasaria-controls
set to theid
of theMenuList
.
For MenuList
:
- It contains the
MenuItem
has rolemenu
.
Props
Menu Props
Name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | The children of the menu must be MenuButton and MenuList | |
open | 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 |
closeOnClick | boolean | true | If true , the menu will close when menu item is clicked |
closeOnSelect | boolean | true | If true , the menu will close when a menu item option (checkbox or radio) is selected |
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 |
---|---|---|
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 |
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 |
---|---|---|
disabled | boolean | If true , the menu item will be disabled |
children | React.ReactNode | The content of the option item |
value | StringOrNumber | The initial value of the option item |
onMouseLeave | React.MouseEventHandler | The value of the option item |
onMouseEnter | React.MouseEventHandler | Function called when selection changes |