Evergreen exports multiple component to help create menus. All components are accessible through the Menu component. Menu: menu wrapper, helps with focus management. Menu.Item: single menu item button. Contains labels and icons. Menu.Group: group menu items together. Menu.Divider: menu divider to divide menu groups visually. Menu.OptionsGroup: menu group which works like a radio group.

UI Components

menu with icons

menu options

1 contributor

Install menu as a package?

Copied

npm i @bit/segmentio.evergreen.menu

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.cloud

Component Example

React

Vue

Angular

React Native

Add dependency...

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';

modifieddraft

The id attribute of the menu option.

Function that is called on click and enter/space keypress.

The icon before the label.

The children of the component.

Secondary text shown on the right.

The default theme only supports one default appearance.

Theme provided by ThemeProvider.

Properties

Name	Type	Default value	Description
children	`node`		The children of the component.
title	`node`		Title of the menu group.
children	`node`		The children of the menu group.
is	`string \| function`	`'div'`	Element type to use for the menu item. For example: `<MenuItem is={ReactRouterLink}>...</MenuItem>`
onSelect	`function`	`() => {}`	Function that is called on click and enter/space keypress.
icon	`node`		The icon before the label.
children	`node`		The children of the component.
secondaryText	`node`		Secondary text shown on the right.
appearance	`string`	`'default'`	The default theme only supports one default appearance.
intent	`'none' \| 'success' \| 'warning' \| 'danger'`	`'none'`	The intent of the menu item.
theme (required)	`object`		Theme provided by ThemeProvider.
title	`node`		Title of the menu group.
selected	`number \| string`		The current value of the option group.
onChange	`function`		Function called when selection changes.
options	`array`		List of options rendered in the group.