How to use

Item

function

in

MenuItem

frameworks.map((f) => (
     <Menu.Item key={f.id}>{f.title}</Menu.Item>
    ))

// Can't be a Pure Component due to Dropdown lookups overlay component type to set appropriate styles
const memberMenu = (onClick, availableMembers) => (
 <Menu>
  {availableMembers.length ? (
   availableMembers.map((m) => (
    <Menu.Item key={m.name} onClick={() => onClick(m)}>
     {m.title}
    </Menu.Item>
   ))
  ) : (
   <Menu.Item disabled>No members found</Menu.Item>
  )}
 </Menu>
)

renderFilesMenu() {
  const { selectedFile, files } = this.state;
  return (
   <Menu
    mode="inline"
    onClick={({ key }) => {
     playgroundAction('Select File');
     this.setState({ selectedFile: key });
    }}
    selectedKeys={selectedFile ? [selectedFile] : []}
   >
    {files.map((f) => (
     <Menu.Item key={f.fileName}>{f.fileName}</Menu.Item>
    ))}
   </Menu>
  );
 }

const SelectChartType = ({ chartType, updateChartType }) => {
 const menu = (
  <Menu>
   {ChartTypes.map((m) => (
    <Menu.Item key={m.title} onClick={() => updateChartType(m.name)}>
     {m.icon} {m.title}
    </Menu.Item>
   ))}
  </Menu>
 );

 const foundChartType = ChartTypes.find((t) => t.name === chartType);
 return (
  <ButtonDropdown overlay={menu} icon={foundChartType.icon}>
   {foundChartType.title}
  </ButtonDropdown>
 );
}

overlay={
 <Menu>
  <Menu.Item key="/build">
   <Link to="/build">Build</Link>
  </Menu.Item>
  <Menu.Item key="/dashboard">
   <Link to="/dashboard">Dashboard App</Link>
  </Menu.Item>
  <Menu.Item key="/schema">
   <Link to="/schema">Schema</Link>
  </Menu.Item>
 </Menu>

  style={{ lineHeight: '64px' }}
  <Menu.Item key="/"><Link to="/">Track Stories</Link></Menu.Item>
  <Menu.Item key="/statistics"><Link to="/statistics">Statistics</Link></Menu.Item>
 </Menu>
</Header>
  }}
  <Breadcrumb.Item>
   <Link to="/">Dashboard</Link>
  </Breadcrumb.Item>
  {match && match.params && match.params.storyId && (
   <Breadcrumb.Item>Story #{match.params.storyId}</Breadcrumb.Item>
  )}
 </Breadcrumb>

 {member.granularities.length ? (
  member.granularities.map((m) => (
   <Menu.Item key={m.title} onClick={() => onClick(m)}>
    {m.title}
   </Menu.Item>
  ))
 ) : (
  <Menu.Item disabled>No members found</Menu.Item>
 )}
</Menu>
<Menu>
 {DateRanges.map((m) => (
  <Menu.Item key={m.title || m.value} onClick={() => onClick(m)}>
   {m.title || m.value}
  </Menu.Item>
 ))}
</Menu>

  <Menu.Item key={library.value}>{library.title}</Menu.Item>
 ))}
</Menu>
  <Menu.Item key={f.id}>{f.title}</Menu.Item>
 ))}
</Menu>
  <Menu.Item key={f.name}>{f.description}</Menu.Item>
 ))}
</Menu>
  <Form.Item label="Framework">
   <Dropdown overlay={frameworkMenu}>
    <Button>
    </Button>
   </Dropdown>
  </Form.Item>
  {frameworkItem && frameworkItem.docsLink && (
   <Alert
  <Form.Item label="Main Template">
   <Dropdown
    overlay={templatePackagesMenu}
    </Button>
   </Dropdown>
  </Form.Item>

chartLibraries.map((library) => (
     <Menu.Item key={library.value}>{library.title}</Menu.Item>
    ))

menuItemWithDirs(dirs) {
  return dirs.map(dir => {
   if (dir.dirs && dir.dirs.length) {
    return (
     <SubMenu key={dir.id} title={<span>{dir.name}</span>} >
      {this.menuItemWithDirs(dir.dirs)}
     </SubMenu>)
   }
   else {
    return (<Menu.Item key={dir.id} dir={dir} >{dir.name}</Menu.Item>)
   }
  })
 }

function LeftMenu(props) {
 return (
  <Menu mode={props.mode}>
   <Menu.Item key="mail">
    <a href="/">Home</a>
   </Menu.Item>
   <Menu.Item key="subscription">
    <a href="/subscription">Subscription</a>
   </Menu.Item>
  </Menu>
 );
}

function () {
              if (permissionOrOverride("canSelfServices")) {
                return <Menu.Item disabled key="services" icon={<CloudServerOutlined/>}
                         onClick={() => changePage("/home/services")}>Services</Menu.Item>
              } else {
                return "";
              }
            }()

function () {
              if (permissionOrOverride("canSelfProjects")) {
                return <Menu.Item key="projects" icon={<ProjectOutlined/>}
                         onClick={() => changePage("/home/projects")}>Projects</Menu.Item>
              } else {
                return "";
              }
            }()

function LeftMenu(props) {
 return (
  <Menu mode={props.mode}>
   <Menu.Item key="mail">
    <a href="/">Home</a>
   </Menu.Item>
   <Menu.Item key="subscription">
    <a href="/subscription">Subscription</a>
   </Menu.Item>
  </Menu>
 );
}

menuItemWithDirs(dirs) {
  return dirs.map(dir => {
   if (dir.dirs && dir.dirs.length) {
    return (
     <SubMenu key={dir.id} title={<span>{dir.name}</span>} >
      {this.menuItemWithDirs(dir.dirs)}
     </SubMenu>)
   }
   else {
    return (<Menu.Item key={dir.id} dir={dir} >{dir.name}</Menu.Item>)
   }
  })
 }