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.