Bootstrap sidebar example

I am trying to produce a Dash version of the fourth sidebar example (with collapsible nested menus) found here:

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.

Hey @tks,

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

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:

    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