Dropdown href doesn't work

Dash Python
1

So i have in my layout a nav bar with a simple dropdown in it:

dropdown = dbc.DropdownMenu(
        children=[
            dbc.DropdownMenuItem("Settings", href='/settings'),
            dbc.DropdownMenuItem("Logout", href='/logout'),
        ],
        id='nav_dropdown'
    )
   return [
        dbc.Nav([
            html.Div([
                        html.A('Some link that works', className='navbar-brand', href='/logout'),
                        html.Div([dcc.Location(id='url', refresh=True),
                                  html.Ul([dropdown], className='navbar-nav me-right', id='nav_dropdown_container')],
                                id='navbarColor01',
                                className='collapse navbar-collapse')
                    ],
                className='container-fluid',
                id='nav_div')
            ],
            navbar=True,
            className='navbar navbar-expand-lg navbar-dark bg-primary')]

I can see the dropdown just fine, when for example in the browser i select “Logout”. i see that the URL changes to:

site/logout

but it doesnt call the logout endpoint, this is defined as a Flask endpoint via a blueprint. whats weirder is that the url bar in the brower changes, and nothing happens. however if i select the URL and hit enter, then the redirect occurs.

you’ll note i have a static html.A reference in the nav bar also to ‘/logout’. this works as expected. Why wont the href link work in a dropdown?

Thanks-

2

Hi @useradam_123

Try adding external_link=True. I haven’t tried it, but this is from the DropdownMenuItem reference:

external_link (boolean ; optional): If True, the browser will treat this as an external link, forcing a page refresh at the new location. If False, this just changes the location without triggering a page refresh. Use this if you are observing dcc.Location, for instance. Defaults to True for absolute URLs and False otherwise.

dbc.DropdownMenuItem("Logout", href='/logout', external_link=True),

1 Like
3

well that was easy! thanks! works as expected now

1 Like