websemantics/awesome-ant-design

Question about <Menu/> component

papazip opened this issue · 1 comments

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
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;