Nested Menus

[Jinnified]

hi folks, Mantine is awesome and it's just a breeze to use, loving it so far

just wondering, if you guys ever plan to make the Menu component nestable, so that multi-level menu nav can be a thing?

cheers

[rtivital]

Hi @Jinnified, thanks for kind words! Nested menus are in our backlog, I cannot say though when they are going to be released.

[atumas-bananamilk]

Really needed component!

[davigmacode]

It currently works with closeOnItemClick={false}, but still has odd behavior

<Menu width={200} shadow="md" position="bottom-start" closeOnItemClick={false}>
  <Menu.Target>
    <Button>Toggle menu</Button>
  </Menu.Target>

  <Menu.Dropdown>
    <Menu.Item>Menu Level 1</Menu.Item>

    <Menu width={200} shadow="md" position="right-start" closeOnItemClick={false}>
      <Menu.Target>
        <Menu.Item rightSection={<IconChevronRight size={18}/>}>
          Menu Level 1
        </Menu.Item>
      </Menu.Target>

      <Menu.Dropdown>
        <Menu.Item>Menu Level 2</Menu.Item>
        <Menu.Item>Menu Level 2</Menu.Item>
        <Menu width={200} shadow="md" position="right-start" closeOnItemClick={false}>
          <Menu.Target>
            <Menu.Item rightSection={<IconChevronRight size={18}/>}>
              Menu Level 2
            </Menu.Item>
          </Menu.Target>

          <Menu.Dropdown>
            <Menu.Item>Menu Level 3</Menu.Item>
            <Menu.Item>Menu Level 3</Menu.Item>
          </Menu.Dropdown>
        </Menu>
      </Menu.Dropdown>
    </Menu>
  </Menu.Dropdown>
</Menu>

[nwparker]

It currently works with closeOnItemClick={false}, but still has odd behavior

<Menu width={200} shadow="md" position="bottom-start" closeOnItemClick={false}>
  <Menu.Target>
    <Button>Toggle menu</Button>
  </Menu.Target>

  <Menu.Dropdown>
    <Menu.Item>Menu Level 1</Menu.Item>

    <Menu width={200} shadow="md" position="right-start" closeOnItemClick={false}>
      <Menu.Target>
        <Menu.Item rightSection={<IconChevronRight size={18}/>}>
          Menu Level 1
        </Menu.Item>
      </Menu.Target>

      <Menu.Dropdown>
        <Menu.Item>Menu Level 2</Menu.Item>
        <Menu.Item>Menu Level 2</Menu.Item>
        <Menu width={200} shadow="md" position="right-start" closeOnItemClick={false}>
          <Menu.Target>
            <Menu.Item rightSection={<IconChevronRight size={18}/>}>
              Menu Level 2
            </Menu.Item>
          </Menu.Target>

          <Menu.Dropdown>
            <Menu.Item>Menu Level 3</Menu.Item>
            <Menu.Item>Menu Level 3</Menu.Item>
          </Menu.Dropdown>
        </Menu>
      </Menu.Dropdown>
    </Menu>
  </Menu.Dropdown>
</Menu>

Here's a small fix for that odd behavior that works with v7.11. Use this instead of Menu.Item

const MenuItem = Menu.Item.withProps({
  mod: { hovered: false },
  onMouseOver: (e) => {
    e.currentTarget.setAttribute('data-hovered', 'true');
  }
});

[waltershewmake]

I would love to see this feature in an upcoming release

[farhan-hafizh]

Hi, is there any update?

[vulebaolong]

You can refer to your code as follows

important: withinPortal
https://mantine.dev/core/popover/#nested-popovers

Nested popovers require children rendering without Portal. Usually, you should disable portal with props of the component that renders popover content, for example, Select has comboboxProps={{ withinPortal: false }} prop. Check documentation of the component that you are using to render popover content to find out how to disable the portal. If the portal is not disabled, outside click will close all popovers.

Example:

{/* parent */}
<Popover width={300} position="bottom" withArrow shadow="md">
  <Popover.Target>
    <Button>Toggle popover</Button>
  </Popover.Target>
  <Popover.Dropdown bg="var(--mantine-color-body)">

   {/* children */}
    <Popover width={300} position="bottom" withArrow shadow="md" withinPortal={false}>
      <Popover.Target>
        <Button>Toggle popover</Button>
      </Popover.Target>
      <Popover.Dropdown bg="var(--mantine-color-body)">
        <Select
          label="Select within Popover"
          placeholder="Select within Popover"
          comboboxProps={{ withinPortal: false }}
          data={["React", "Angular", "Svelte", "Vue"]}
        />
        <Select
          label="Select within Popover"
          placeholder="Select within Popover"
          comboboxProps={{ withinPortal: false }}
          data={["React", "Angular", "Svelte", "Vue"]}
        />
        <Select
          label="Select within Popover"
          placeholder="Select within Popover"
          comboboxProps={{ withinPortal: false }}
          data={["React", "Angular", "Svelte", "Vue"]}
        />
      </Popover.Dropdown>
    </Popover>

    <Select
      label="Select within Popover"
      placeholder="Select within Popover"
      comboboxProps={{ withinPortal: false }}
      data={["React", "Angular", "Svelte", "Vue"]}
    />
    <Select
      label="Select within Popover"
      placeholder="Select within Popover"
      comboboxProps={{ withinPortal: false }}
      data={["React", "Angular", "Svelte", "Vue"]}
    />
    <Select
      label="Select within Popover"
      placeholder="Select within Popover"
      comboboxProps={{ withinPortal: false }}
      data={["React", "Angular", "Svelte", "Vue"]}
    />
  </Popover.Dropdown>
</Popover>

[hichemfantar]

@rtivital can we please get this soon. This is a blocker for migrating one of ours apps to Mantine because we use nested menus a lot.

we're currently using the radix implementation