Is it possible to use links inside a dropdown?

Dash Python
1

Hey guys, so quick question, I am using dash pages and I need to redirect pages using a dropdown value.
now I can’t use a callback because the output of

Output('_pages_location', 'path')

is already used by dash.

So any idea how I can switch pages using dcc.Dropdown and dash pages?

And it would be great if there’s a solution without using dash bootstrap components

1 Like
2

Hello @Matan,

I think drop downs have to be static values.

But, you can add a dcc.Location to your page and alter that, which would give you the desired result. :grin:

3

Hey there @jinnyzor
Having a second dcc.location component makes the dash pages a bit buggy, if you try it you will find out you can’t use the go back or go forward button of chrome or any browser.

So unless I find a solution for that, adding a dcc.location is a bit problematic.

1 Like
4

Strange, my login flow uses pages and dcc.location and I thought you could still use the back and forward buttons normally. But, I’ll check it out.

Actually, looking at the docs, it may be possible, check this out:


from dash import dcc, html

dcc.Dropdown(
    [
        {
            "label": html.Div(
                [
                    html.Img(src="/assets/images/language_icons/python_50px.svg", height=20),
                    html.Div("Python", style={'font-size': 15, 'padding-left': 10}),
                ], style={'display': 'flex', 'align-items': 'center', 'justify-content': 'center'}
            ),
            "value": "Python",
        },
        {
            "label": html.Div(
                [
                    html.Img(src="/assets/images/language_icons/julia_50px.svg", height=20),
                    html.Div("Julia", style={'font-size': 15, 'padding-left': 10}),
                ], style={'display': 'flex', 'align-items': 'center', 'justify-content': 'center'}
            ),
            "value": "Julia",
        },
        {
            "label": html.Div(
                [
                    html.Img(src="/assets/images/language_icons/r-lang_50px.svg", height=20),
                    html.Div("R", style={'font-size': 15, 'padding-left': 10}),
                ], style={'display': 'flex', 'align-items': 'center', 'justify-content': 'center'}
            ),
            "value": "R",
        },
    ]
)

You might be able to use a link instead.

1 Like
5

Well, that gave me a direction and I did it!

For anyone interested in knowing how Here is an example:

dcc.Dropdown(
    options=[
        {
            "label":dcc.Link(children="page1" ,href="/page1"),
            "value": "page1"
        },
        {
            "label":dcc.Link(children="page2" ,href="/page2"),
            "value": "page2"
        }
    ],
    value="page1"
)

# You need to add this CSS to make it look and work better.
a {
    color: inherit;
    text-decoration: none;
}
.dash-dropdow .Select-menu-outer .VirtualizedSelectSelectedOption > a {
    pointer-events: none;
}

.dash-dropdow .Select-menu-outer .VirtualizedSelectOption > a {
    width: 100%;
    height: 100%;
}

I think that’s about it!

5 Likes
6

incredible… was just searching something unrelated and found this comment. refactored some code removing a second dcc.Location and lo and behold the back/forward buttons work again. cant wait to push this update

3 Likes
7

bro you beat chatgpt-4.0 the bot is hallucinating lol. though its only trained upto 2021.
thanks btw

1 Like
8

Worked for me too! (Repro: https://py.cafe/giselle.pomodor/dash-dropdown-links)
Thanks @Matan ! :hugs:

1 Like