grommet
components

Menu

a control that opens a drop containing plain buttons

Storybook
CodeSandbox

Props

a11yTitle

Custom label to be used by screen readers. When provided, an aria-label will be added to the element.

"a user friendly label for screen readers"

alignSelf

How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.

"start"
"center"
"end"
"stretch"

children

Menu can take in children as a function or node.

  • Function that will be called to render the visual representation. It will be passed a props object. The props passed are different depending on the menu open state. When the menu is closed, two props are passed: { hover, focus }, but when the menu is open, all menu props are passed to this function. It should return a React element. For example: children={(props) =&gt; &lt;Box ...>{...}</Box>} Note: This function will be invoked on every mouse move when hovering.
  • Node is anything that can be rendered, e.g. <Box><CaretNext /><Text>Open Me</Text></Box>
"function""node"

disabled

Whether the menu should be disabled.
truefalse

dropAlign

Where to place the drop down. The keys correspond to a side of the drop down. The values correspond to a side of the control. For instance, {left: 'left', top: 'bottom'} would align the left edges and the top of the drop down to the bottom of the control. At most one of left or right and one of top or bottom should be specified.

{"top": "top", "left": "left"}
{"bottom": "bottom", "right": "right"}

dropBackground

Background color when drop is active
"neutral-1"
{"color": "neutral-1", "opacity": true}
where opacity could be:"weak""medium""strong"true

dropProps

Any valid Drop prop.
"object"

dropTarget

Target where the drop will be aligned to. This should be a React reference. Typically, this is not required as the drop will be aligned to the Menu itself by default.

"object"

gridArea

The name of the area to place this inside a parent Grid.

"a parent grid area name"

icon

Indicates the icon shown as a control to open it.
true
false
<Add />

items

Menu items to be placed inside the drop down. The object values can be any Button prop, for example: label, onClick, and href.

[{}, {}]

justifyContent

How to align the contents along the row axis.
"start""center""end""between""around""stretch"

label

Indicates the label shown as a control to open it.
"Actions"
<Box>...</Box>

margin

The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.

"xsmall"
"small"
"medium"
"large"
"xlarge"
{
  "vertical": "...",
  "horizontal": "...",
  "top": "...",
  "bottom": "...",
  "left": "...",
  "right": "..."
}

messages

Custom messages. Used for accessibility by screen readers. These values will be overridden if an a11yTitle is provided.

{
  "openMenu": "Open Menu",
  "closeMenu": "Close Menu"
}

open

Whether the state of the component should be open
truefalse

size

The size of the menu.
"small""medium""large""xlarge""string"

Theme

global.colors.control

The default color to use for the icon.
{"dark": "accent-1", "light": "brand"}