menu/docs/examples/items.tsx at 478dcf8f0002c2b62cd204c1355887452ac841f2 · react-component/menu · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
/* eslint no-console:0 */

import React from 'react';
import Menu from '../../src';
import '../../assets/index.less';

export default () => (
  <Menu
    itemRender={(originNode, { item }) => {
      if (item.type === 'item') {
        return (
          <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
            {originNode}
          </a>
        );
      }
      return originNode;
    }}
    items={[
      {
        key: 'ToOriginNode',
        type: 'item',
        label: 'Navigation Two',
        disabled: false,
        extra: '111',
      },
      {
        // MenuGroup
        type: 'group',
        label: 'Top Menu Group with children',
        children: [
          {
            // MenuItem
            label: 'Menu Item 1',
            key: 'inner1',
          },
          {
            // Divider
            type: 'divider',
          },
          {
            // MenuItem
            label: 'Menu Item 2',
            key: 'inner2',
          },
        ],
      },
      {
        // SubMenu
        label: 'SubMenu',
        key: 'sub1',
        children: [
          {
            // MenuItem
            label: 'Menu Item 1-1',
            key: 'inner11',
          },

          {
            // SubMenu
            label: 'SubMenu inner',
            key: 'sub1-1',
            children: [
              {
                // MenuItem
                label: 'Menu Item 111',
                key: 'inner1-1-1',
              },
            ],
          },
        ],
      },
      {
        type: 'divider', // Must have
      },
    ]}
  />
);