Menu
Menu
An arrow-key navigable Menu
which consists of MenuItems
. A Menu
can be employed to produce its common variants, including dropdown menus, select menus, and others. Menus
are keyboard navigable with both tab and arrow keys.
MenuItem
A MenuItem
is its own distinct component that is used by any kind of menu overlays i.e. dropdown menu and navigation menu.
A Menu
can include things like forms.
A Menu
can be implemented to appear inside a modalpopup
for a wide variety of use cases. The Modal
brings focus to the first menu element upon the click of the trigger, and can be escaped on click away or key press.
SelectMenu
The SelectMenu
component is triggered on the click of a button or your choice of a standalone link using the isLink
prop, and expands from the center if not close to the edge of the page. The Menu
contains a list of MenuItems
, with a white background, and level 2 elevation. The Menu
also remembers the user’s selection and displays it as the label for the button/link trigger.
The Modal
brings focus to the first menu element upon the click of the trigger, and can be escaped on click away or key press. Set a default message with the defaultMessage
prop string. Use the defaultSelected
prop to signify that a menuItem is the default to open to.
className
string
Specifies class name to append to the base element
arrowKeyNavigationSelector
string
Default'a:not(:disabled),button:not(:disabled),input:not(:disabled)'Specifies the CSS selector string that indicates to which elements the user can navigate using the arrow keys
as
elementType
Default'div'Specifies the base element
children
node
DefaultnullSpecifies the content of the menu
defaultSelected
bool
DefaultfalseSpecifies that this
MenuItem
is selected inside theSelectMenu
className
string
Specifies class name to append to the base element
children
node
DefaultnullSpecifies the content of the
MenuItem
as
elementType
Default'button'Specifies the base element
iconBefore
node
Specifies the jsx before the content of the
MenuItem
iconAfter
node
Specifies the jsx after the content of the
MenuItem
defaultMessage
string
Default'Select...'String that is displayed for default value of the
SelectMenu
isLink
bool
DefaultfalseDisplays chosen value of the
SelectMenu
as a linkchildren
node
RequiredSpecifies the content of the
SelectMenu
className
string
Specifies class name to append to the base element