Black Lives Matter. Please consider donating to Black Girls Code today.

Problem with tabs and subtabs in Dash

I’m trying to create two tabs with two subtabs each in Dash but I’m having problems.

Here is my code:

import dash
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash()


# Create a Dash layout
app.layout = html.Div([
    html.Div(
        html.H1('My Dashboard')
    ),
    dcc.Tabs(id="tabs", value='Tab1', children=[
        dcc.Tab(label='Tab 1', id='tab1', value='Tab1', children =[

            dcc.Tabs(id="subtabs1", value='Subtab1', children=[
                dcc.Tab(label='Sutab 1', id='subtab1', value='Subtab1'),
                dcc.Tab(label='Sutab 2', id='subtab2', value='Subtab2'),
            ]),

        ]),
        dcc.Tab(label='Tab 2', id='tab2', value= 'Tab2', children=[

            dcc.Tabs(id="subtabs2", value='Subtab4', children=[
                dcc.Tab(label='Sutab 4', id='subtab4', value='Subtab4'),
                dcc.Tab(label='Sutab 5', id='subtab5', value='Subtab5'),
            ]),

        ])
    ])
])

if __name__ == '__main__':
    app.run_server(debug=True)

When I run this application the subtabs in the first tab work as expected. However, I can’t navigate to any subtabs in the second tab. Why is this happening? Any help would be appreciated. Thank you.

Thanks for reporting! This seems like a bug. Would you mind reposting this as an issue in https://github.com/plotly/dash-core-components/?

It may be related to https://github.com/plotly/dash-core-components/issues/256. In the meantime, could you try the “Method 1: Content as Callback” in the docs? https://dash.plot.ly/dash-core-components/tabs

I tried it and there’s still a bug.

Could you post a simple, reproducable example of what you tried? That’d help us debug the issue

I reported the issue and provided the example you asked for: https://github.com/plotly/dash-core-components/issues/272

1 Like

@chriddyp @rory Was this issue resolved? I am running into a similar problem with loading subtab content.