dbc.dropdownMenuItem

Dash Python
1

Hello,

Reading the Doc here https://dash-bootstrap-components.opensource.faculty.ai/l/components/dropdown_menu
and clicking on “Internal Link”, second example first section:

ExampleSimpleMenu

the menu end up like this:
ExampleSimpleMenuAfterClick

In other word, it stays “open”.

By default, if there is no href set for a menuItem, then after the click the menu closes itself.
But if, in contrast, there is an href, then it doesnt collapse after the click.

Why? How to change this?

2

Fixed :slight_smile:

For those who could be interested: just add an id and n_clicks to the link, like for Page1 below:

    dbc.Container(
        [
            dbc.NavbarToggler(id="navbar-toggler2"),
            dbc.Collapse(
                dbc.Nav(
                    [
                            dbc.NavItem(dbc.NavLink("Page1", href="/page1", id="LinkOne", n_clicks=0)),
                            dbc.NavItem(dbc.NavLink("Page2", href="/page2")),
                            dbc.NavItem(dbc.NavLink("Page3", href="/page3")),
                    ], 
                    className="ml-auto", 
                    navbar=True, 
                    pills=False,
                    horizontal="center",
                    
                ),
                id="navbar-collapse2",
            
                navbar=True,
                ),
        ]
    )

and then in the callback:

@app.callback(
        Output(f"navbar-collapse2", "is_open"),
        [Input(f"navbar-toggler2", "n_clicks"), Input("LinkOne","n_clicks")],
        [State(f"navbar-collapse2", "is_open")],
    )
def toggle_navbar_collapse(n, nBis, is_open):
    if n or nBis:
        return not is_open
    return is_open

It’s a bit messy and it doesnt work exactly like expected. Will update this post with a better solution when i will have one.

1 Like