Black Lives Matter. Please consider donating to Black Girls Code today.

How to do a Multi-Level Dropdowns

Well this question has been raised before several times. I am assuming the functionality is still not available…

Example of a multiple level dropdown
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h

I am not an expert of html, the biggest question which keeps bugging me is that I can reuse many different html elements online. I do not know how to to fetch these possible values. Is there a way to communicate with python with the hyperlink? Or is Javascript needed?

Have you checked out dash-bootstrap-components? I suspect this would work as DropdownMenu could be a child-member who’s parent is also of the same type. I haven’t tried it but it seems possible.

1 Like

Thank you for your solution. Indeed it is working.

html.Div(
dbc.DropdownMenu(
label="Menu",
children=[
    dbc.DropdownMenu(
    children=[
        dbc.DropdownMenuItem("Item 1"),
        dbc.DropdownMenuItem("Item 2"),
    ],
    ),
    dbc.DropdownMenuItem("Item 2"),
    dbc.DropdownMenuItem("Item 3"),
],
))

Will give a dropdown within the dropdown with the default dbc.themes.BOOTSTRAP. There is only one problem of the inner dropdown does not seem to close/collapse itself.

Yeah…i haven’t tried doing this before - you may need to create a couple callbacks to handle the closing of the inner dropdown(s).