Bootstrap sidebar example

Dash Python
1

I am trying to produce a Dash version of the fourth sidebar example (with collapsible nested menus) found here: https://getbootstrap.com/docs/5.0/examples/sidebars.

I can replicate most of the look and functionality, but I am unable to update the **{'aria-expanded': 'false'} property in a callback for an html.Button, which would toggle the chevron icon direction and font color of menu items according to some supplied css.

Any advice would be appreciated. Thank you.

2

Hey @tks,

It’s not exactly the example you linked, but maybe something like this example can be modified to do what you want?

3

Thanks @tcbegley. In order to utilize the styling and transforms in the supplied css, I ended up toggling the aria-expanded property via a clientside callback like this:

app.clientside_callback(
    """
    function(n_clicks1, n_clicks2) {
        menu_element_id = dash_clientside.callback_context.triggered[0]['prop_id'].split('.')[0];
        expanded = document.getElementById(menu_element_id).getAttribute("aria-expanded");
        if (expanded == "true") {
            document.getElementById(menu_element_id).setAttribute("aria-expanded", "false");
        }
        else if (expanded == "false") {
            document.getElementById(menu_element_id).setAttribute("aria-expanded", "true");
        }
    }
    return '';
    }
    """,
    Output('store', 'data'),  # dummy output
    Input('button', 'n_clicks1'),
    Input('button', 'n_clicks2'),
)
1 Like