Multilevel Navbar dropdown in next.js

Question

I'm encountering an issue while implementing a nested dropdown in Next.js using Next UI version 2.2.9. When I click on the top-level button of the dropdown, the sublevel contents briefly appear for less than a second, and then the entire dropdown closes, rendering it unclickable. I'm unable to perform any actions. Seeking assistance to resolve this problem. Thank you!

   `<Dropdown backdrop="blur">
      <DropdownTrigger>
        <Button variant="light">
          Process Team
        </Button>
      </DropdownTrigger>
      <DropdownMenu variant="light" aria-label="Static Actions">
        <DropdownItem>

          <Dropdown>

            <DropdownTrigger>
              <Button variant="light">
                Member
              </Button>
            </DropdownTrigger>

            <DropdownMenu>
              <DropdownItem className="text-black">List All Cases</DropdownItem>
              <DropdownItem className="text-black">Reassign Cases</DropdownItem>
            </DropdownMenu>

          </Dropdown>

        </DropdownItem>
      </DropdownMenu>
    </Dropdown>

`

This is what is did using the sample code snippet

Answer 1

Problem :

I'm encountering an issue while implementing a nested dropdown in Next.js using Next UI version 2.2.9...

Possible Cause :

By default closeOnSelect prop is true which causes the parent dropdown to close.

Solution :

Use Dropdown Prop closeOnSelect, pass value to it as false.

change from

<Dropdown backdrop="blur">

to

<Dropdown backdrop="blur" closeOnSelect={false}>

<Dropdown backdrop="blur" closeOnSelect={false}>
    <DropdownTrigger>
        <Button variant="light">
            Process Team
        </Button>
    </DropdownTrigger>
    <DropdownMenu variant="light" aria-label="Static Actions">
        <DropdownItem>

            <Dropdown>

                <DropdownTrigger>
                    <Button variant="light">
                        Member
                    </Button>
                </DropdownTrigger>

                <DropdownMenu>
                    <DropdownItem className="text-black">List All Cases</DropdownItem>
                    <DropdownItem className="text-black">Reassign Cases</DropdownItem>
                </DropdownMenu>

            </Dropdown>

        </DropdownItem>
    </DropdownMenu>
</Dropdown>

Similarly if you have many nesting then pass closeOnSelect={false} for every parent.

When you have more levels :

<Dropdown backdrop="blur" closeOnSelect={false}>
    <DropdownTrigger>
        <Button variant="light">
            GrandParent
        </Button>
    </DropdownTrigger>
    <DropdownMenu variant="light" aria-label="Static Actions">
        <DropdownItem>
            <Dropdown backdrop="blur" closeOnSelect={false}>
                <DropdownTrigger>
                    <Button variant="light">
                        Parent
                    </Button>
                </DropdownTrigger>
                <DropdownMenu>
                    <DropdownItem className="text-black">
                        <Dropdown>
                            <DropdownTrigger>
                                <Button variant="light">
                                    Child
                                </Button>
                            </DropdownTrigger>
                            <DropdownMenu>
                                <DropdownItem className="text-black">Child 1</DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                    </DropdownItem>

                </DropdownMenu>

            </Dropdown>

        </DropdownItem>
    </DropdownMenu>
</Dropdown>

You may also use shouldCloseOnInteractOutside prop to enable functionality of closing dropdown when user clicks anywhere outside of it. As it will be helpful to close multilevel dropdown.

shouldCloseOnInteractOutside={()=> true}

Also, button width is not 100% you can use Button Prop fullWidth & pass it Boolean true to make it 100%.

<Button fullWidth={true} variant="light">

Please read :

1. Dropdown Props : https://nextui.org/docs/components/dropdown#dropdown-props (scroll to bottom of the page)
2. Dropdown Events shouldCloseOnInteractOutside : https://nextui.org/docs/components/dropdown#dropdown-events
3. Button Props : https://nextui.org/docs/components/button#button-props

If you still have any doubts, leave a comment. If this answer solved your problem you may mark it as answer.