Multiple levels of dropdowns

At a glance

The community members are discussing how to build a set of "nested" drop-downs, where the choice in the first level determines the choices in the second level, and so on. Some suggestions include creating the dropdowns in separate cells and having the second cell depend on the first, or using a helper function to create the nested dropdowns. However, the community members note that implementing this within a function or reusable component can be tricky. One community member shares a link to an example implementation, and another community member is also facing challenges with cyclical dependencies when trying to build nested dropdowns using a Polars DataFrame. There is no explicitly marked answer in the comments.

Useful resources

AAnna (she/her)

I want to build a set of “nested” drop downs, where the choice in the first level determines the choices in the second level, etc. any suggestions for how I might go about doing this?

13 comments

MMyles Scolnick

I’m on a phone so can’t give a great example, but I’d create both dropdowns in separate cells. Have the second cell depend on the first dropdown. And display them in a third cell

AAnna (she/her)

That would be something with mo.state right?

MMyles Scolnick

I don’t think you need it

MMyles Scolnick

Your second dropdown creates its option by reading the value of the first dropdown

AAnna (she/her)

Oh okay, that works!

AAnna (she/her)

Now what if I need to do this within a function? like say this is going to be a reusable component that I might create throughout my app

MMyles Scolnick

That is a bit trickier since the function forces them in the same cell. I’m not sure I have a good solution off the top of my head

AAnna (she/her)

Yeah it seems tricky

AAnna (she/her)

I thought of creating it in a separate notebook and using the embed notebook stuff, but im not sure that would work well

AAkshay

You could checkout https://github.com/marimo-team/marimo/tree/main/examples/third_party/cvxpy/signals — it has a pattern in the second part that might be helpful?

AAkshay

That is the implementation of https://marimo.io/@public/signal-decomposition, which has multiple levels of dropdowns which i think are created via a helper function if i remember correctly. But there is only a finite amount of nesting i think

llucharo

I am also interested in building nested drop downs, I'm getting cyclical dependencies when doing this at the moment. I'm using a polars df that contains the unique combination across several fields and then filtering the options of each multiselect box based on the previous one:

Plain Text

entity = mo.ui.multiselect(
    options["entity_id"].unique().sort(), 
    label="entity"
)
category = mo.ui.multiselect(
    options.filter(
        pl.col('entity_id').is_in(entity.value) if entity.value else True
    )["category"].unique().sort(),
    label="cat"
)
subcategory = mo.ui.multiselect(
    options.filter(
        (pl.col('entity_id').is_in(entity.value) if entity.value else True) &
        (pl.col('category').is_in(category.value) if category.value else True)
    )["subcategory"].unique().sort(),
    label="subcat"
)
mo.vstack([entity, category, subcategory, segment])

llucharo

even if I separate into separate cells it doesn't work

Add a reply

Get help from the marimo community

Multiple levels of dropdowns