Key pad menu | Elastic UI Framework

The EuiKeyPadMenu component presents EuiKeyPadMenuItems in a tiled format, with a fixed width which will accommodate three items and then wrap.

EuiKeyPadMenu is just a wrapping element for creating the list elements but you must declare each EuiKeyPadMenu component manually.

Accessibility recommendation

If the menu provides navigation for your application, wrap the EuiKeyPadMenu with

<nav aria-label="Nav title"></nav>.

The EuiKeyPadMenuItem component can act both as an anchor as well as a button by specifying href or onClick respectively. It requires a text-based label and children for declaring the

icon. This is the most flexible way for handling the customization of the icon itself.

When using the isSelected prop to create a toggle button, you must supply both the true and false states explicitly to ensure the attribute is added for both states.

Beta item

If the item links to a module that is not GA (beta, lab, etc), you can add a betaBadgeLabel and betaBadgeTooltipContent to the card and it will properly create and position an EuiBetaBadge.

Supplying just a label will only show the first letter in the badge but displays the full label to the tooltip. You can also pass an iconType to replace the letter.

Checkable

EuiKeyPadMenuItems can also be rendered as checkbox or radio form controls using the checkable prop. Pass in "multi" for checkboxes or "single" for radios.

To ensure the EuiKeyPadMenu renders the semantically appropriate HTML elements, you will need to pass in the checkable prop as true or an object that requires a legend. This will wrap the input group in a <fieldset> with a <legend>.

For single selection (radio) items, you must pass a singular name prop to each item to ensure they are grouped properly. Also, if you would like to hide the visible <legend> in favor of an screen-reader only solution, you can pass ariaLegend instead of legend.

Props

EuiKeyPadMenu

Extends HTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop checkable#	Description and type Renders the the group as a `fieldset`. Set to `true` to customize the labelling, or pass an #EuiKeyPadMenuCheckableProps object to add a `legend` or `ariaLegend` Type: `true \| (DisambiguateSet<{ legend: ReactNode; legendProps?: Omit<_EuiFormLegendProps, "type">; }, { ariaLegend: string; }> & { ...; }) \| (DisambiguateSet<...> & { ...; })`	Default value

EuiKeyPadMenuItem

Extends AnchorHTMLAttributes, ButtonHTMLAttributes


Prop	Description and type	Default value
Prop label#	Description and type The text to display beneath the icon Type: `ReactNode`	Default value Required
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop href#	Description and type Type: `string`	Default value
Prop id#	Description and type One will be generated if not provided Type: `string`	Default value
Prop children#	Description and type Pass an EuiIcon, preferrably `size="l"` Type: `ReactNode`	Default value
Prop isDisabled#	Description and type Type: `boolean`	Default value
Prop isSelected#	Description and type Indicate if an item is the current one. Be sure to use `true` AND `false` when acting as a toggle to ensure the attribute is added for both states Type: `boolean`	Default value
Prop onClick#	Description and type Use `onChange` instead when the item is `checkable` Type: `MouseEventHandler<HTMLAnchorElement> \| MouseEventHandler<HTMLButtonElement>`	Default value
Prop buttonRef#	Description and type Type: `Ref<HTMLAnchorElement> \| Ref<HTMLButtonElement>`	Default value
Prop checkable#	Description and type Beta badges are unavailable if the item is checkable Type `'multi'` renders the item as a `<label>` and adds a checkbox. Type `'single'` renders the item as a `<label>` and adds a radio element. Type: `"single" \| "multi"`	Default value
Prop betaBadgeLabel#	Description and type Add a badge to the card to label it as "Beta" or other non-GA state Type: `string`	Default value
Prop betaBadgeIconType#	Description and type Supply an icon type if the badge should just be an icon Type: `IconType`	Default value
Prop betaBadgeTooltipContent#	Description and type Add a description to the beta badge (will appear in a tooltip) Type: `ReactNode`	Default value
Prop betaBadgeTooltipProps#	Description and type Extends the wrapping EuiToolTip props when `betaBadgeLabel` is provided Type: `Partial<Omit<EuiToolTipProps, "title" \| "content" \| "delay">>`	Default value

Menu item.css-1pgbpvp{-webkit-margin-start:8px;margin-inline-start:8px;opacity:0;}.css-1pgbpvp:focus,.heading:hover .css-1pgbpvp{opacity:1;}

Beta item

Checkable

Props

Menu item