Menu

React

Usage

Props

NameTypeRequiredDefaultDescription
UNSAFE_closesOnSelect
boolean
false

Unsafe, do not use

deprecatedsince

9

deprecated

Never offically documented/supported

since

10.19.0

children
ReactNode
false
className
string
false

Additional classNames

isSelectable
ElementTypeChecker
false
deprecated

The isSelectable prop has been deprecated and will be removed in a future version. Menu item selection is now handled internally and there is no need to configure this anymore.

deprecatedsince

10.20.0

since

10.19.0

keyHandlerRef
RefObject<HTMLElement>
false

Ref object which will get the key handler listeners

since

10.19.0

scrollable
boolean
false
default

true

style
CSSProperties
false

Additional CSS styles

usingHook
MenuHook
false
deprecatedsince

9

deprecated

Never offically documented/supported. Please migrate to the other props like onSelect and onSearch on the Menu component. In v11, the internal only useMenu removed its search state. You should not be using useMenu nor this usingHook prop.

since

10.19.0

onScrollBottom
Function
false
since

10.19.0

onSearch
Function
false
since

11

onSelect
Function
false

Callback for selecting an item from the menu. item will be the item prop supplied to the Item component. group will be true if the clicked item was a group label.

since

10.19.0

keyHandlerRef

Using the keyHandlerRef prop, it is possible to pass in a ref object to Menu which will become the scope for attaching key handlers.

Please note that the ref you are attaching handlers to should exist outside of the Menu's DOM tree

scrollable

onSearch

NameTypeRequiredDefaultDescription
children
ReactNode
false
since

10.19.0

className
string
false
since

10.19.0

padding
string
false
since

10.19.0

scrollable
boolean
false
default

true

NameTypeRequiredDefaultDescription
children
ReactNode
false
since

10.19.0

className
string
false
since

10.19.0

index
number
false
since

10.19.0

item
any
false

Value which can be passed around various callback functions. Can be anything!

since

10.19.0

ref
Ref<any>
false
since

10.19.0

selected
boolean
false

Is the item selected

default

false

since

10.19.0

style
CSSProperties
false

Additional CSS styles

suggested
boolean
false
since

10.19.0

onClick
Function
false
since

10.19.0

NameTypeRequiredDefaultDescription
className
string
false
since

10.19.0

clickable
boolean
false

Can the group item be clicked

since

10.19.0

item
any
false

Value which can be passed around various callback functions. Can be anything!

since

10.19.0

NameTypeRequiredDefaultDescription
data-qa
string
false
since

10.19.0

i18nScope
string
false

The i18n key to use for the menu search's configurable strings. Defaults to using the core library's default strings.

since

10.19.0

onChange
Function
false
since

10.21.0

NameTypeRequiredDefaultDescription
alignContentfalse
since

10.19.0

alignItemsfalse
since

10.19.0

alignSelffalse
since

10.19.0

children
ReactNode
false
className
string
false

Additional classNames

displayfalse
since

10.19.0

flex
string | number
false

Alias to the flex property on a flexbox child.

since

10.19.0

flexBasis
string | number
false

Alias to the basis property on a flexbox child.

since

10.19.0

flexDirectionfalse

Alias to the direction property on a flexbox child.

since

10.19.0

flexGrow
string | number
false

Alias to the grow property on a flexbox child.

since

10.19.0

flexShrink
string | number
false

Alias to the shrink property on a flexbox child.

since

10.19.0

flexWrapfalse

Alias to the wrap property on a flexbox child.

since

10.19.0

gap
string
false
  • Alias to the gap property on a flexbox child.
since

11.3.0

justifyContentfalse
since

10.19.0

margin
string
false
since

10.19.0

marginBottomfalse
since

10.19.0

marginLeftfalse
since

10.19.0

marginRightfalse
since

10.19.0

marginTopfalse
since

10.19.0

order
number
false

Alias to the order property on a flexbox child.

since

10.19.0

padding
string
false
since

10.19.0

paddingBottomfalse
since

10.19.0

paddingLeftfalse
since

10.19.0

paddingRightfalse
since

10.19.0

paddingTopfalse
since

10.19.0

style
CSSProperties
false

Additional CSS styles

tabIndex
number
false
since

10.19.0

textAlignfalse
since

10.19.0

NameTypeRequiredDefaultDescription
children
ReactNode
false
className
string
false

Additional classNames

style
CSSProperties
false

Additional CSS styles

tabIndex
number
false
since

10.19.0

Complex Example

Note: To internationalize the Menu.Search placeholder text, either use the placeholder prop, or pass the path to the translation key to the i18nScope prop on the Menu.Search. Otherwise, the search placeholder text defaults to 'Search' in English