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"
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"
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) => <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>
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"}
"neutral-1"
{"color": "neutral-1", "opacity": true}
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.
Menu items to be placed inside the drop down.
The object values can be any Button prop,
for example: label
, onClick
, and href
.
[{}, {}]
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": "..."
}
Custom messages. Used for accessibility by screen readers. These values will be overridden if an a11yTitle is provided.
{
"openMenu": "Open Menu",
"closeMenu": "Close Menu"
}