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

Function that will be called to render the visual representation. It will be passed an object containing button props. It should return a react element. For example: children={({ drop, hover }) =&gt; &lt;Box ...>{...}</Box>}

"function"

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"}