1

I am trying to use the Menu component provided by Mantine Library to create a nested menu. However, there is no such documentation even in their official docs. Is this something possible? I know one can use NavLink component, but I want to achieve this with specifically with Menu component. I tried to embed the code like this, but I get a separate Menu on the side, and for some reason, it breaks the UI.

import './App.css';
import { Menu, Button, Text } from '@mantine/core';
import { IconSettings, IconSearch, IconPhoto, IconMessageCircle, IconTrash, IconArrowsLeftRight } from '@tabler/icons-react';

function App() {
    return (
        <div className="App">
            <Menu shadow="md" width={200}>
                <Menu.Target>
                    <Button>Toggle menu</Button>
                </Menu.Target>

                <Menu.Dropdown>
                    <Menu.Label>Application</Menu.Label>
                    <Menu.Item icon={<IconSettings size={14} />}>Settings</Menu.Item>
                    <Menu.Dropdown>
                        <Menu.Label>Text Format</Menu.Label>
                        <Menu.Label>Document</Menu.Label>
                        <Menu.Label>Other Settings</Menu.Label>
                    </Menu.Dropdown>
                    <Menu.Item icon={<IconMessageCircle size={14} />}>Messages</Menu.Item>
                    <Menu.Item icon={<IconPhoto size={14} />}>Gallery</Menu.Item>
                    <Menu.Item
                        icon={<IconSearch size={14} />}
                        rightSection={<Text size="xs" color="dimmed">⌘K</Text>}
                    >
                        Search
                    </Menu.Item>

                    <Menu.Divider />

                    <Menu.Label>Danger zone</Menu.Label>
                    <Menu.Item icon={<IconArrowsLeftRight size={14} />}>Transfer my data</Menu.Item>
                    <Menu.Item color="red" icon={<IconTrash size={14} />}>Delete my account</Menu.Item>
                </Menu.Dropdown>
            </Menu>
        </div>
    );
}

export default App;

Edit

I am using mantine version 6.0.6. What I mean by nested/multilevel menu is something similar to this: enter image description here Note that I just picked this image randomly as it communicates what I want to achieve, i.e., a menu under a sub-menu.

When I use the above code whereby I embed the Menu.Dropdown inside a Menu.Item, I get the following outcome, with the lower level menu completely different from the main menu. enter image description here

japheth
  • 373
  • 1
  • 10
  • 34
  • What version of mantine are you using, and can you please clarify (perhaps with an image) what you mean by a nested menu? – Stitt Apr 05 '23 at 07:56
  • I have edited the question as requested @Stitt – japheth Apr 05 '23 at 08:21
  • Rather than nesting a `Menu.Dropdown` inside another, can you embed an entire new `Menu` as the child of the `Menu.Item` component where you want the submenu to appear? If this doesn't make sense I can provide as an answer with a small code excerpt. – Stitt Apr 05 '23 at 08:31
  • 1
    Sure, you can provide an answer to describe this more as I tried but not getting the correct results that I was expecting. – japheth Apr 05 '23 at 08:34

1 Answers1

-1

Extending on my comment above, attempting to render the entire submenu as the child of one of the Menu.Item components. Curious to see if it works; I don't have Mantine 6 available to test.

import './App.css';
import { Menu, Button, Text } from '@mantine/core';
import { IconSettings, IconSearch, IconPhoto, IconMessageCircle, IconTrash, IconArrowsLeftRight } from '@tabler/icons-react';

function App() {
    return (
        <div className="App">
            <Menu shadow="md" width={200}>
                <Menu.Target>
                    <Button>Toggle menu</Button>
                </Menu.Target>

                <Menu.Dropdown>
                    <Menu.Label>Application</Menu.Label>
                    <Menu.Item icon={<IconSettings size={14} />}>
                        <Menu shadow="md" width={200}>
                            <Menu.Target>
                                Settings
                            </Menu.Target>
                            <Menu.Dropdown>
                                <Menu.Label>Text Format</Menu.Label>
                                <Menu.Label>Document</Menu.Label>
                                <Menu.Label>Other Settings</Menu.Label>
                            </Menu.Dropdown>
                        </Menu>
                    </Menu.Item>
                    
                    <Menu.Item icon={<IconMessageCircle size={14} />}>Messages</Menu.Item>
                    <Menu.Item icon={<IconPhoto size={14} />}>Gallery</Menu.Item>
                    <Menu.Item
                        icon={<IconSearch size={14} />}
                        rightSection={<Text size="xs" color="dimmed">⌘K</Text>}
                    >
                        Search
                    </Menu.Item>

                    <Menu.Divider />

                    <Menu.Label>Danger zone</Menu.Label>
                    <Menu.Item icon={<IconArrowsLeftRight size={14} />}>Transfer my data</Menu.Item>
                    <Menu.Item color="red" icon={<IconTrash size={14} />}>Delete my account</Menu.Item>
                </Menu.Dropdown>
            </Menu>
        </div>
    );
}

export default App;
Stitt
  • 406
  • 2
  • 8
  • Uncaught Error: Menu.Target component children should be an element or a component that accepts ref, fragments, strings, numbers and other primitive values are not supported – Usama Jul 18 '23 at 15:36