websemantics / awesome-ant-design

A curated list of Ant Design resources and related projects. The main idea is that everyone can contribute here, so we can have a central repository of informations about Ant Design that we keep up-to-date
http://ant.design/
Other
3.13k stars 215 forks source link

Question about <Menu/> component #83

Open papazip opened 1 year ago

papazip commented 1 year ago

How can i put element between Menu.item when i work with version >=4.20.0

For example, in older version i can do this "<Menu >" "<Menu.Item >Home</Menu.Item>" "<h1 >List</h1>" "<Menu.Item >Search</Menu.item>" "</Menu >"

in new version if i create a list and do " items={items}" in Menu component, how can i put element h1 between Menu Item

elmolm commented 1 year ago
import React from 'react';
import { HomeOutlined, SearchOutlined} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Menu } from 'antd';

type MenuItem = Required<MenuProps>['items'][number];

const items: MenuItem[] = [
  {
    label: 'Home',
    icon: <HomeOutlined />
  }, {
    type: 'group',
    label: <h1>List</h1>
  }, {
    label: 'Search',
    icon: <SearchOutlined />
  }
];

const App = (): JSX.Element => {
  return (
    <Menu
      items={items}
    />
  );
};

export default App;