Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

menu

v2.6.5arrow_drop_down
v2.6.5
v2.5.5
STATUS
Passing
DOWNLOADS
85
LICENSE
Apache 2.0
VISIBILITY
Public
PUBLISHED
5 months ago
SIZE
40 KB
subject
A control that opens a Drop containing plain Buttons.
1 contributor
Use menu in your project ?
Copied
npm i @bit/grommet.grommet.menu
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
revert changes
reload
toggle layout
maximize
modifieddraft
chevron_left
chevron_right

Menu

A control that opens a Drop containing plain Buttons.

The labels and behavior of the contained Buttons are described via the items property. You can provide a single function child that will be called with 'hover’, 'focus’, and ‘drop’ keys. This allows you to customize the rendering of the Menu button in those cases.

Usage

import { Menu } from 'grommet';
<Menu />

Properties

a11yTitle

Custom title to be used by screen readers.

string

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

gridArea

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

string

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.

none
xxsmall
xsmall
small
medium
large
xlarge
{
  bottom: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  horizontal: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  left: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  right: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  top: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  vertical: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string
}
string

disabled

Whether the menu should be disabled.

boolean

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. Defaults to { "top": "top", "left": "left" }.

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

dropBackground

Background color when drop is active

string
{
  color: string,
  opacity: 
    weak
    medium
    strong
    boolean
}

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

dropProps

Any valid Drop prop. Defaults to {}.

object

justifyContent

How to align the contents along the row axis. Defaults to start.

start
center
end
between
around
stretch

icon

Indicates the icon shown as a control to open it.

boolean
node

items

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

[object]

label

Indicates the label shown as a control to open it.

string
node

messages

Custom messages. Used for accessibility by screen readers. Defaults to { "openMenu": "Open Menu", "closeMenu": "Close Menu" }.

{
  closeMenu: string,
  openMenu: string
}

size

The size of the menu. Defaults to medium.

small
medium
large
xlarge
string

Intrinsic element

button

Theme

global.colors.control

The color to use for the icon. Expects string | { dark: string, light: string }.

Defaults to

undefined

menu.background

The color for the background of the menu Drop when it is open. Expects string.

Defaults to

undefined

menu.extend

Any additional style for the Menu. Expects string | (props) => {}.

Defaults to

undefined

menu.icons.down

The icon to show to the right of the label. Expects React.Element.

Defaults to

<FormDown />