Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Sidebar css confusion

I have a sidebar with some navigation sub menus in dcc.Cards that I want to expand sideways when opened.
Two things come in mind:

  1. make sidebar larger when sub menu is toggled which I’m trying with the provided code
  2. make sub menu card larger. Which I couldn’t get going because for this the card div should be able to overlap its parent
import dash
from dash.dependencies import Input, Output, State
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

sidebar_header = [
                className="navbar-toggler", id="navbar-toggle")],
            width="auto", align="center")])
navigation = [
            dbc.Col(html.I(className="fas fa-chevron-right mr-3"), width="auto")], className="my-1"), id="submenu"),
        dbc.Collapse([dbc.Card(dbc.CardBody('text'))], id="submenu-collapse")

app.layout = html.Div([
        dbc.Nav(navigation, vertical=True), id="collapse")
], id="sidebar")

@app.callback(Output("submenu-collapse", "className"),
             [Input("submenu-collapse", "is_open")],
             [State("submenu-collapse", "className")])
def toggle_classname_collapse(is_open, classname):
    if is_open and classname == "":
        return "collapsed"
    return ""

@app.callback(Output("submenu", "className"),
              [Input("submenu-collapse", "is_open")])
def toggle_classname_open(is_open):
    if is_open:
        return "open"
    return ""

@app.callback(Output("submenu-collapse", "is_open"),
              [Input("submenu", "n_clicks")],
              [State("submenu-collapse", "is_open")],)
def toggle_collapse(n, is_open):
    if n:
        return not is_open
    return is_open

if __name__ == '__main__':


/* Sidebar init */
#sidebar {
  z-index: 1;
  text-align: center;
  padding: 2rem 1rem;
  background-color: #f8f9fa;
  overflow-Y: auto;

/* sidebar heading */
#sidebar h2 {
  text-align: left;
  margin-bottom: 0;

/* media rule applies when (...) criterion is met*/
@media (min-width: 48em) {
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 25rem;
    text-align: left;
    transition: all 0.6s ease-in-out;

  /* reveal the blurb on a large screen */
  /* whatever the blurb is */
  #blurb {
    display: block;

  /* Hide the toggle on a large screen */
  #navbar-toggle {
    display: none;

  /* sub menus other than log */
  #collapse {
    display: block;

/* sets the duration of the rotation */
.fa-chevron-right {
  transition: transform 0.2s ease-in-out 0s;

/* rotate the chevron when the open class is applied */ .fa-chevron-right {
  transform: rotate(90deg);

/* submenu items */
.nav li {
  font-size: 18px;

#submenu-collapse {
  transition:all 0.3s ease-in-out;

#submenu-collapse.collapsed {
  margin-right: -15rem;

#submenu-collapse.collapsed #sidebar {
  width: 45rem;

I’ve accomplished a workaround using js:

/* JavaScript namespaces */

if (!window.dash_clientside) {
    window.dash_clientside = {};

window.dash_clientside.clientside = {
   // set width of sidebar when any submenu is toggled
   enlarge: function(is_open, id) {
        if (id){
            if (is_open.includes(true)) {
                document.getElementById(id).style.width = '35rem';
            } else {
                document.getElementById(id).style.width = '25rem';
        return window.dash_clientside.no_update;

and its callback:

 # make sidebar wider as long as any submenu is open
            ClientsideFunction(namespace="clientside", function_name="enlarge"),
            Output('dummy-sidebar', 'children'),
            [Input({'type': "submenu-collapse", 'index': ALL}, 'is_open')],
            [State('sidebar', 'id')]