Edit

Menu

A selectable menu component with supplied menu items.

Import

import { Menu } from "/imports/plugins/core/ui/client/components";

Usage Example

import React, { Component } from "react";
import { Menu, MenuItem } from "/imports/plugins/core/ui/client/components";

class MyReactComponent extends Component {
  state = {
    value: ""
  }

  handleChange = (event, value) => {
    this.setState({
      value: value
    });
  }

  render() {
    return (
      <Menu
        onChange={this.handleChange}
        value={this.state.value}
      >
        <MenuItem
          i18nKeyLabel="app.public"
          icon="fa fa-unlock"
          label="Public"
          selectLabel="Public"
          value="public"
        />
        <MenuItem
          i18nKeyLabel="app.private"
          label="Private"
          icon="fa fa-lock"
          selectLabel="Public"
          value="private"
        />
      </Menu>
    )
  }
};

export default MyReactComponent;

Menu Props

Property	Type	Description
attachment	String	default value: "top"
children	Node	Menu items, preferably MenuItem
className	String, Object	Custom class names can be a string, or object {"class-name": true}
onChange	Function	Input change. (event, value, menuItem) => {}
style	Object	Custom style for menu
value	String, Boolean, Number	A String, Boolean, or Number value

Menu Item Props

Property	Type	Description
active	Boolean	Is active. Automatic if using as child of Menu component with value
children	Node	Children of menu component
className	String, Object	Custom class names, can be a string, or object {"class-name": true}
disabled	Boolean	Disable menu item
eventAction	String	Adds data-event-action="yourAction" attribute to the item, where yourAction is the value you set.
i18nKeyLabel	String	Key for i18n translation for label
i18nKeySelectedLabel	String	Key for i18n translation for selected label (implementation required)
icon	String	Name of font awesome icon
iconStyle	Object	Custom style for icons displayed
label	String	Label for menu item
onClick	Function	On menu item click. (event, value, menuItem) => {}
selectionLabel	String	Selected label for menu button (implementation required)
value	Any	While the menu item accepts any value, when used as as child of a <Menu> component you are restricted to String, Boolean or Number