[Feature Request] Support nested menu items in Dropdown component

[iGmainC]

Is your feature request related to a problem? Please describe.

Currently, the Dropdown Menu component in NextUI 2.0 only supports a single level of menu items. This limits the flexibility of the component and makes it difficult to create complex menu structures. I would like to request support for nested menu items in the Dropdown component.

Describe the solution you'd like

I would like to see the Dropdown component support nested menu items, allowing for the creation of multi-level menu structures. This would involve adding support for submenus within the Dropdown component, along with the ability to toggle the display of submenus on hover or click.

Describe alternatives you've considered

One alternative I have considered is using a different component library that already supports nested menu items. However, I would prefer to continue using NextUI for its other features and the overall consistency it provides to my application's UI.

Screenshots or Videos

shadcn/ui

ant design

---

https://primereact.org/tieredmenu/#basic

---

https://react.semantic-ui.com/collections/menu/

---

https://rsuitejs.com/components/dropdown/

[ForrestDevs]

also looking for a feature as such

[artemavrin]

yes, we need sub menus in dropdown too

[hrithiqball]

needed this so so much. i thought it would support by default

[ersanyakit]

yes...

[sagarj0]

yes indeed it is needed, i thought by nesting another Select component would work, it didn't.

[dev-idblfs]

this is what we need from next UI,

[MohamedDanis]

please add this nested dropdown

[Sheikh-Srijon]

i have 30 dropdown menu items to choose from. Currently it takes the whole page, is there a way i can seelct a subset like 8 menu items to be visible? User can scroll vertically for the rest

[acsoto]

Do you know of any other component libraries that support this?

[iGmainC]

https://primereact.org/tieredmenu/#basic

---

https://react.semantic-ui.com/collections/menu/

---

https://rsuitejs.com/components/dropdown/

[acsoto]

Thank you!

[pmaik]

Please add this feature.

[vmorales-2920]

Please add this feature, is really needed

[chihabhajji]

+1

[ariffirdausmk]

hope you can add this soon

[a-chacon]

+1

[JamesClow]

We removed Hero UI from our stack because it doesn't support this feature.

[aeokay]

I have an idea, you can nest popover with this code<Popover placement="bottom-end"> <PopoverTrigger> <Button variant="light" size="sm" isIconOnly> <Ellipsis size={20} /> </Button> </PopoverTrigger> <PopoverContent> .... <Popover placement="left-end"> <PopoverTrigger> <Button>Nest button</Button> </PopoverTrigger> <PopoverContent> <div className='flex flex-col gap-y-2'> content nest </div> </PopoverContent> </Popover> </div> </PopoverContent> </Popover>

[sapkra]

I just formatted it a bit and removed the second closing div.

const MyNestedPopover = (
  <Popover placement="bottom-end">
    <PopoverTrigger>
      <Button variant="light" size="sm" isIconOnly>
        <Ellipsis size={20} />
      </Button>
    </PopoverTrigger>

    <PopoverContent>
      ....
      <Popover placement="left-end">
        <PopoverTrigger>
          <Button>Nest button</Button>
        </PopoverTrigger>
        <PopoverContent>
          <div className='flex flex-col gap-y-2'>content nest</div>
        </PopoverContent>
      </Popover>
      ....
    </PopoverContent>
  </Popover>
);

[sapkra]

I actually did the same with two nested Dropdowns but the second one is controlled by a hover state that is set by the parent DropdownItem. The DropdownTrigger of the nested dropdown is just a div with the label in it.

[sapkra]

It's broken in newer versions now.

[aliamiri1380]

I've provided such functionality inside this repo:
https://github.com/aliamiri1380/fast-heroui

Screen.Recording.1404-05-06.at.5.18.08.PM.mov

full code:

import  Dropdown  from  './parts/hero_dropdown'

<Dropdown subPlacement={'right'} items={[
		{ 'type': 'item', 'content': 'New file', 'icon': 'file-plus' },
		{
			'type': 'sub', 'content': 'Copy link', 'icon': 'link', 'items': [
				{ 'type': 'item', 'content': 'Copy full link', 'icon': 'link-plus' },
				{ 'type': 'item', 'content': 'Copy short link', 'icon': 'link-plus', 'iconProps': { 'size': 'md' } },
				{
					'type': 'sub', 'content': 'Copy colorful link', 'icon': 'link-plus', 'items': [
						{ 'type': 'item', 'content': 'red', 'props': { 'color': 'danger' } },
						{ 'type': 'item', 'content': 'green', 'props': { 'color': 'success' } },
						{ 'type': 'item', 'content': 'blue', 'props': { 'color': 'primary' } },
					]
				},
			]
		},
		{ 'type': 'item', 'content': 'Edit file', 'icon': 'pencil' },
		{ 'type': 'item', 'content': 'Delete file', 'icon': 'trash', 'props': { 'color': 'danger' } },
	]}>
		<Button>Open Menu</Button>
	</Dropdown>

see the readme for more details

[raulcarlomagno]

+1

[hasan6034]

please bring this feature