menu-list

v4.9.10

v4.5.2

v3.9.2

STATUS

Passing

DOWNLOADS

36,815

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

4 years ago

SIZE

25 KB

If `true`, will focus the `[role="menu"]` container and move into tab order.

React

UI Components

list

2 contributors

Install menu-list as a package?

Copied

npm i @bit/mui-org.material-ui.menu-list

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.cloud

Component Example

React

Vue

Angular

React Native

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

modifieddraft

If true, will focus the [role="menu"] container and move into tab order.

If true, will focus the first menuitem if variant="menu" or selected item if variant="selectedMenu".

MenuList contents, normally MenuItems.

If true, will allow focus on disabled items.

If true, the menu items will not wrap focus.

The variant to use. Use menu to prevent selected items from impacting the initial focus and the vertical alignment relative to the anchor element.

A permanently displayed menu following https://www.w3.org/TR/wai-aria-practices/#menubutton. It’s exposed to help customization of the Menu component. If you use it separately you need to move focus into the component manually. Once the focus is placed inside the component it is fully keyboard accessible. Demos:

Menus

API:

MenuList API
inherits List API

Properties

Name	Type	Description
autoFocus	`bool`	If `true`, will focus the `[role="menu"]` container and move into tab order.
autoFocusItem	`bool`	If `true`, will focus the first menuitem if `variant="menu"` or selected item if `variant="selectedMenu"`.
children	`node`	MenuList contents, normally `MenuItem`s.
className	`string`
disabledItemsFocusable	`bool`	If `true`, will allow focus on disabled items.
disableListWrap	`bool`	If `true`, the menu items will not wrap focus.
onKeyDown	`function`
variant	`'menu' \| 'selectedMenu'`	The variant to use. Use `menu` to prevent selected items from impacting the initial focus and the vertical alignment relative to the anchor element.