CODEWITHSUNDEEP
reactjs
deep shah
deep shah

Reputation: 89

Adding Submenu to antd menu using map Loop

  let navigationConfig = [
    {
      key: "1",
      path: `${match.url}/lead-information`,
      title: "lead-information",
      breadcrumb: true,
      icon: HomeOutlined,
    },
    {
      key: "2",
      navigate: false,
      breadcrumb: true,
      onclick: () => editClickedReminder(),
      title: "Add Reminder",
      icon: BellOutlined,
    },
    {
      key: "3",
      title: "History",
      icon: FieldTimeOutlined,
      breadcrumb: true,
      submenu: [
        {
          key: "4",
          path: `${match.url}/edit`,
          title: "History",
          icon: EditFilled,
          breadcrumb: true,

        },
      ],
    }
  ];

I have this code and i have mad a loop of navigation config and i have mentioned submenu in the navigation config but i am not getting submenu

{navigationConfig.map((menu) => {
                return (
                  <Menu.Item key={menu.key} onClick={menu.onclick}>
                    {menu.icon ? <Icon type={menu?.icon} /> : null}
                    {menu.title}
                    {menu.path ? (
                      <Link
                        to={{
                          pathname: menu.path,
                          state: history.location.state,
                        }}
                        onClick={() => {
                          setHeaderTitle(
                            menu.hasOwnProperty("aliasTitle")
                              ? menu.aliasTitle
                              : menu.title
                          );
                        }}
                      />
                    ) : null}
                  </Menu.Item>
                );
              })}

Does any one have have any idea how do i get submenu Below is my screen shot of what i am getting enter image description here

Upvotes: 1

Views: 10963

Answers (3)

Sky Yap
Sky Yap

Reputation: 41

I am using 'children' inside my 'items' to make a submenu. And avoid using Menu.Item since it is deprecated soon too. Hope this helps you to update your code.

<Menu key="user" mode="horizontal" theme={theme} 
        items={[
            {
              label: (
                <AvatarWrapper>
              {avatar ? (
                <StyledAvatar src={avatar} />
              ) : (
                <StyledAvatar icon={<UserOutlined />} />
              )}
            </AvatarWrapper>
              ),
              key: "submenu",
              children: [
                {
                  label: (
                    <a>
                      Logged in as {username}
                    </a>
                  ),
                  disabled: true,
                  key: "Loggedin",
                },
                {
                  label: (
                    <a href="/user/dashboard">
                      User Dashboard
                    </a>
                  ),
                  icon: <UserOutlined/>,
                  key: "user",
                },
                {
                  label: (
                    <a href="/user/settings/account">
                      Settings
                    </a>
                  ),
                  icon: <SettingOutlined/>,
                  key: "setting",
                },
                {
                  label: (
                    <a onClick={logout}>
                      Sign Out
                    </a>
                  ),
                  icon: <LogoutOutlined/>,
                  key: "SignOut",
                },
              ]
            },
            
          ]}
      >
      </Menu>

Upvotes: 0

RezaRaki
RezaRaki

Reputation: 41

antd has two syntaxes for menus, the old one is by using this syntax

<Menu>
  <Menu.Item>item 1</Menu.Item>
  <Menu.Item>item 2</Menu.Item>
  <Menu.SubMenu title="sub menu">
    <Menu.Item>item 3</Menu.Item>
  </Menu.SubMenu>
</Menu>

and the new syntax is like <Menu items={items} /> with the source data (which is named items here) format as below:

const items = [
  { label: 'item 1', key: 'item-1' }, // remember to pass the key prop
  { label: 'item 2', key: 'item-2' }, // which is required
  {
    label: 'sub menu',
    key: 'submenu',
    children: [{ label: 'item 3', key: 'submenu-item-1' }],
  },
]

you seem to be mixing these two!

you could do one of the:

  • manually maping on data and returning the desired jsx element
  • changing the source data to correct format

Upvotes: 3

Bahar Yılmaz
Bahar Yılmaz

Reputation: 97

You should check this page https://ant.design/components/menu/

Did you try children instead of submenu ?

Upvotes: 1

Related Questions