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

menu

v4.15.0arrow_drop_down
v4.15.0
STATUS
Passing
DOWNLOADS
128
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
A year ago
SIZE
N/A
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.
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.dev
Component Example
React
React
Vue
Angular
React Native
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';
toggle layout
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
chevron_left
chevron_right

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
NameTypeDefault valueDescription
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.