# Problem with tabs and subtabs in Dash

**URL:** <https://community.plotly.com/t/problem-with-tabs-and-subtabs-in-dash/12881>\
**Category:** Dash Python\
**Created:** [August 21, 2018, 10:29am UTC](https://community.plotly.com/t/problem-with-tabs-and-subtabs-in-dash/12881 "2018-08-21T10:29:49Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![rory](https://avatars.discourse-cdn.com/v4/letter/r/a183cd/32.png) [@rory](https://community.plotly.com/u/rory)\
**Post date:** [August 21, 2018, 10:29am UTC](https://community.plotly.com/t/problem-with-tabs-and-subtabs-in-dash/12881/1 "2018-08-21T10:29:49Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [August 21, 2018, 12:47pm UTC](https://community.plotly.com/t/problem-with-tabs-and-subtabs-in-dash/12881/2 "2018-08-21T12:47:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [August 21, 2018, 12:48pm UTC](https://community.plotly.com/t/problem-with-tabs-and-subtabs-in-dash/12881/3 "2018-08-21T12:48:24Z")

</div>

It _may_ be related to [https://github.com/plotly/dash-core-components/issues/256](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](https://dash.plot.ly/dash-core-components/tabs)

---

<div class="post-metadata">

**Author:** ![rory](https://avatars.discourse-cdn.com/v4/letter/r/a183cd/32.png) [@rory](https://community.plotly.com/u/rory)\
**Post date:** [August 21, 2018, 2:20pm UTC](https://community.plotly.com/t/problem-with-tabs-and-subtabs-in-dash/12881/4 "2018-08-21T14:20:27Z")

</div>

I tried it and there’s still a bug.

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [August 21, 2018, 2:25pm UTC](https://community.plotly.com/t/problem-with-tabs-and-subtabs-in-dash/12881/5 "2018-08-21T14:25:57Z")

</div>

> [@rory](#):
>
> I tried it

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

---

<div class="post-metadata">

**Author:** ![rory](https://avatars.discourse-cdn.com/v4/letter/r/a183cd/32.png) [@rory](https://community.plotly.com/u/rory)\
**Post date:** [August 21, 2018, 8:48pm UTC](https://community.plotly.com/t/problem-with-tabs-and-subtabs-in-dash/12881/7 "2018-08-21T20:48:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![keval](https://avatars.discourse-cdn.com/v4/letter/k/ec9cab/32.png) [@keval](https://community.plotly.com/u/keval)\
**Post date:** [August 1, 2020, 6:42am UTC](https://community.plotly.com/t/problem-with-tabs-and-subtabs-in-dash/12881/8 "2020-08-01T06:42:01Z")

</div>

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

> [@Callback error updating subtab\_content.children | NameError: name 'comps' is not defined](https://community.plotly.com/t/callback-error-updating-subtab-content-children-nameerror-name-comps-is-not-defined/43264):
>
> (topic withdrawn by author, will be automatically deleted in 24 hours unless flagged)

> <https://github.com/plotly/dash-core-components/issues/839>
>
> I am receiving this error when I attempt to load a subtab. 
> 
> My file structure… looks something like this: 
> 
> \`\`\`
> 
> index.py 
> app.py
> \- Tabs
> \--- portfolio.py
> \--- leads.py
> \--- spaces.py
> \--- revenue.py
> \--- comps.py
> \--- analysis.py
> \--- deal.py
> 
> \`\`\`
> 
> App Layout / Tab-subtab structure
> 
> 
> \`\`\`
> 
> app.layout = html.Div(\[
> 
> # tabs
> html.Div(\[
> 
> dcc.Tabs(
> 
> id="tabs",
> vertical=True,
> className="mb-3",
> style={"height":"60", "verticalAlign":"middle", "font-size":"0.9375rem"},
> children=\[
> 
> dcc.Tab(label="Portfolio", value="portfolio\_tab"),
> dcc.Tab(label="Smart Leads", value="market\_tab"),
> dcc.Tab(label="Spaces", value="reporting\_tab"),
> dcc.Tab(label="Revenue", value="revenue\_tab",
> children=\[dcc.Tabs(id="subtabs", style={"margin-left":"50px"},
> children=\[dcc.Tab(label='Comps', value='comps\_subtab'),
> dcc.Tab(label='Analysis', value='analysis\_subtab')
> \],
>                          
> )
> \]),
> dcc.Tab(label="Deal", value="deal\_tab")
> 
> \],
> value="revenue\_tab",
> )
> 
> \],
> 
> className="row tabs\_div"
> 
> ),
> 
> # Tab content
> html.Div(id="tab\_content", style={"margin": "-32% 11%","float":"left"}),
> 
> # SubTab content
> html.Div(id="subtab\_content", style={"margin": "-32% 11%","float":"left"})
> 
> \])
> 
> \`\`\`
> 
> When I click 'comps' and 'analysis' subtab, I receive \`NameError: name 'comps' is not defined\`. \`comps.py\` and \`analysis.py\` are within the tab folder. 
> 
> Callback functions 
> \`\`\`
> 
> @app.callback(
> Output("tab\_content", "children"),
> 
> \[
> Input("tabs", "value"),
> Input("subtabs", "value")
> \],
> )
> def render\_content(tab, subtab):
> """
> For user selections, return the relevant tab
> """
> if tab == "portfolio\_tab":
> return portfolio.layout
> 
> if tab == "reporting\_tab":
> return reporting.layout
> 
> if tab == "market\_tab":
> return market.layout
> 
> if subtab == "comps\_subtab":
> return comps.layout
> 
> if subtab == "analysis\_subtab":
> return analysis.layout
> 
> elif tab == "deal\_tab":
> return deal.layout
> 
> else:
> 
> return (no\_update)
> \`\`\`
> 
> 
> \`\`\`
> 
> Traceback (most recent call last):
> File "/Users/Platform/Deploy/index.py", line 131, in render\_content
> return comps.layout
> NameError: name 'comps' is not defined
> 
> \`\`\`
> 
> 
> \[1\]: https://i.stack.imgur.com/RChg4.png