Menu Item

Menu Items display individual data within a menu. - Material Docs

import { MenuItem } from 'material-bread';

MenuItem s can contain text or icons. You can create a more custom one by replacing the children.

Menu Item 1

Menu Item 2

Menu Item 3

Menu Item 4

Live Editing

class MenuPage extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (    
      <Paper radius={6} style={{ width: 200 }}>
     
        <MenuItem text={'Menu Item 1'} />
        <MenuItem text={'Menu Item 2'} />
        <Divider />
        <MenuItem disabled text={'Menu Item 3'} />
        <MenuItem text={'Menu Item 4'} />
      </Paper>
    );
  }
}

import React, { Component } from 'react';
import { View } from 'react-native';
import { Menu, MenuItem, Button } from 'material-bread';

class MenuPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      visible: false
    }
  }
  render() {
    return (
      <Menu
        visible={this.state.visible}
        button={
          <Button
            text={'Show menu'}
            onPress={() => {
              this.setState({ visible: !this.state.visible });
            }}
            type="contained" />
        }>
        <MenuItem text={'Menu item 1'} onPress={() => this.setState({ visible: false })} />
        <MenuItem text={'Menu item 2'} onPress={() => this.setState({ visible: false })} />
        <MenuItem text={'Menu item 3'} onPress={() => this.setState({ visible: false })} />
        <MenuItem text={'Menu item 4'} onPress={() => this.setState({ visible: false })} />
      </Menu>
    );
  }
}

Name

Description

Type

Default

disabled

Toggles disabled

bool

icon

Renders icon on the left of the text

node

keyboardCommand

Renders arbiraty node on the far right

node

onPress

Callback on MenuItem

func

style

Styles root element

object

text

Renders main text

string

textStyle

Styles menu text

object

You can see even more examples in the Storybook environment.

Simply add a node to the icon prop.



Preview





Get Link



Preview



Download

Live Editing

class Demo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      visible: false
    }
  }
  render() {
    return (
      <Paper radius={6} style={{ width: 200 }}>
        <MenuItem text={'Preview'} icon={<Icon name={'remove-red-eye'} />} />
        <MenuItem text={'Share'} icon={<Icon name={'person-add'} />} />
        <MenuItem text={'Get Link'} icon={<Icon name={'link'} />} />
        <Divider />
        <MenuItem text={'Preview'} icon={<Icon name={'content-copy'} />} />
        <MenuItem text={'Download'} icon={<Icon name={'file-download'} />} />
      </Paper>
    );
  }
}

Simply add a node to the keyboardCommand prop.



Cut

⌘X



Copy

⌘C



Paste

⌘V

Live Editing

class Demo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      visible: false
    }
  }
  render() {
    return (
      <Paper radius={6} style={{ width: 200 }}>
        <MenuItem
          text={'Cut'}
          icon={<Icon name={'content-cut'} />}
          keyboardCommand={
            <Text style={{ fontSize: 12, color: '#6e6e6e' }}>&#8984;X</Text>
          }
        />

        <MenuItem
          text={'Copy'}
          icon={<Icon name={'content-copy'} />}
          keyboardCommand={
            <Text style={{ fontSize: 12, color: '#6e6e6e' }}>&#8984;C</Text>
          }
        />

        <MenuItem
          text={'Paste'}
          icon={<Icon name={'content-paste'} />}
          keyboardCommand={
            <Text style={{ fontSize: 12, color: '#6e6e6e' }}>&#8984;V</Text>
          }
        />
      </Paper>
    );
  }
}

Menu Item

Component #

Usage #

Props #

Demos #

Icon #

Keyboard #