awesome-ant-design icon indicating copy to clipboard operation
awesome-ant-design copied to clipboard

Question about <Menu/> component

Open papazip opened this issue 3 years ago • 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

papazip avatar Sep 14 '22 08:09 papazip

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;

elmolm avatar Mar 10 '23 17:03 elmolm