Usage

let items = [{
  title: 'Fruits',
  key: 'fruits',
  submenu: [{
    subtitle: 'Apple',
    key: '1.1',
    onClick: listener,
    href: '#apple',
    iconClass: 'glyphicon icon-overview',
    selected: true
  }, {
    subtitle: 'Strawberry',
    key: '1.2',
    onClick: listener,
    href: '#strawberry',
    iconClass: 'glyphicon icon-overview'
  }]
}, {
  title: 'Vegetables',
  key: 'vegetables',
  fold: true,
  submenu: [{
    subtitle: 'Potato',
    key: '2.1',
    onClick: listener,
    href: '#potato',
    iconClass: 'glyphicon icon-overview'
  }, {
    subtitle: 'Eggplant',
    key: '2.2',
    onClick: listener,
    href: '#eggplant',
    iconClass: 'glyphicon icon-overview'
  }]
}];

ReactDOM.render(<Menu width={300} items={items}/>, document);

API

name type default description
items Array 见下方items详解

items

name type default description
title String 每个子菜单的title
key String 每个子菜单的key值
fold Boolean 每个子菜单的key值
submenu Array 每个子菜单的列表信息,见下方详解

items: { submenu:[] }

name type default description
subtitle(必填) String 每个子列表的title
key(必填) String 每个子列表的key值
onClick Function 子列表的click事件
href String 设置href值
iconClass String 设置submenu的icon的class值
selected Boolean 设置是否为selected状态

Copyright © 2017 MIT License