# Dash Tabs and SubTabs **URL:** \ **Category:** Dash Python\ **Created:** [October 16, 2018, 3:54am UTC](https://community.plotly.com/t/dash-tabs-and-subtabs/14575 "2018-10-16T03:54:58Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![tanthiamhuat](https://avatars.discourse-cdn.com/v4/letter/t/edb3f5/32.png) [@tanthiamhuat](https://community.plotly.com/u/tanthiamhuat)\ **Post date:** [October 16, 2018, 3:54am UTC](https://community.plotly.com/t/dash-tabs-and-subtabs/14575/1 "2018-10-16T03:54:58Z")
I know that Dash is able to produce Tabs (whether vertically left side or horizontally top side). Is it also able to support SubTabs? meaning say under TabA, then there is TabA.1, TabA.2, etc. I know RStudio Shiny can easily do it, it is would be fantastic if Dash is able to do it, thanks for the considerations. ---
**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:** [October 16, 2018, 3:37pm UTC](https://community.plotly.com/t/dash-tabs-and-subtabs/14575/2 "2018-10-16T15:37:16Z")
> [@tanthiamhuat](#): > > meaning say under TabA, then there is TabA.1, TabA.2 I believe that you could render a new tab component as `children` of a particular tab: when you click on a tab, you’d display another set of tabs below it. ---
**Author:** ![sriotti](https://avatars.discourse-cdn.com/v4/letter/s/d07c76/32.png) [@sriotti](https://community.plotly.com/u/sriotti)\ **Post date:** [October 16, 2018, 3:50pm UTC](https://community.plotly.com/t/dash-tabs-and-subtabs/14575/3 "2018-10-16T15:50:59Z")
Is there a dash app with sub tabs implemented that you can share? I am trying to add a left menu pane to my app that would allow access to different pages of my app as well as different tabs within those pages. Is something like this available? ---
**Author:** ![oege](https://avatars.discourse-cdn.com/v4/letter/o/ecd19e/32.png) [@oege](https://community.plotly.com/u/oege)\ **Post date:** [October 17, 2018, 10:01am UTC](https://community.plotly.com/t/dash-tabs-and-subtabs/14575/4 "2018-10-17T10:01:56Z")
Something like this: ``` app.layout = html.Div([ html.H1('Dash Tabs component demo'), dcc.Tabs(id="tabs", value='tab1', children=[ dcc.Tab(label='Tab One', value='tab1', children=[dcc.Tabs(id="subtabs", value="subtab1", children = [dcc.Tab(label='Sub Tab1', value="subtab1", children=tab1_layout1)])]), dcc.Tab(label='Tab Two', value='tab2', children=tab2_layout1), dcc.Tab(label='Tab Three', value='tab3', children=tab3_layout1), ]), html.Div(id='tabs-content') ]) ``` ---
**Author:** ![tanthiamhuat](https://avatars.discourse-cdn.com/v4/letter/t/edb3f5/32.png) [@tanthiamhuat](https://community.plotly.com/u/tanthiamhuat)\ **Post date:** [October 18, 2018, 4:08am UTC](https://community.plotly.com/t/dash-tabs-and-subtabs/14575/5 "2018-10-18T04:08:55Z")
Splendid, thanks for the code, I will test it out. Cheers ---
**Author:** ![tanthiamhuat](https://avatars.discourse-cdn.com/v4/letter/t/edb3f5/32.png) [@tanthiamhuat](https://community.plotly.com/u/tanthiamhuat)\ **Post date:** [October 23, 2018, 7:24am UTC](https://community.plotly.com/t/dash-tabs-and-subtabs/14575/6 "2018-10-23T07:24:24Z")
I have a test on Tabs and SubTabs, with vertical=True as below: app.layout = html.Div([ html.H1(‘Dash Tabs component demo’), dcc.Tabs(id=“tabs”,vertical=True, value=‘tabA’, children=[ dcc.Tab(label=‘Tab\_A’, value=‘tabA’, children=[dcc.Tabs(id=“subtabsA”, vertical=True, value=“subtabA”, children = [dcc.Tab(label=‘SubTab\_A.1’, value=“subtabA”), dcc.Tab(label=‘SubTab\_A.2’, value=“subtabA”), dcc.Tab(label=‘SubTab\_A.3’, value=“subtabA”) ]) ] ), dcc.Tab(label=‘Tab\_B’, value=‘tabB’, children=[dcc.Tabs(id=“subtabsB”, vertical=True, value=“subtabB”, children = [dcc.Tab(label=‘SubTab\_B.1’, value=“subtabB”), dcc.Tab(label=‘SubTab\_B.2’, value=“subtabB”) ]) ] ), dcc.Tab(label=‘Tab\_C’, value=‘tabC’), ]), html.Div(id=‘tabs-content’) ]) Everything is working fine, but the UI looks odd to me. See ![](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/e/ebb3c718dcba9ae3bfd38a1843127324ee60b3ae.png) I expect that the SubTabs would be hidden directly underneath its main Tab, as what Shiny Server is able to achieve as seen below: ![](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/9/92894d84467b19807adbe5987f734b0a309b8747.png) How can my code be modified such that it is able to achieve as what Shiny Server can do? Thanks. ---
**Author:** ![sriotti](https://avatars.discourse-cdn.com/v4/letter/s/d07c76/32.png) [@sriotti](https://community.plotly.com/u/sriotti)\ **Post date:** [October 23, 2018, 3:33pm UTC](https://community.plotly.com/t/dash-tabs-and-subtabs/14575/7 "2018-10-23T15:33:08Z")
This is what i was looking for as well…much cleaner this way. I am actively trying to get this working, so i will share the learnings if i find out. If you find out first, it would be great if you can share. ---
**Author:** ![tanthiamhuat](https://avatars.discourse-cdn.com/v4/letter/t/edb3f5/32.png) [@tanthiamhuat](https://community.plotly.com/u/tanthiamhuat)\ **Post date:** [November 12, 2018, 2:11am UTC](https://community.plotly.com/t/dash-tabs-and-subtabs/14575/8 "2018-11-12T02:11:30Z")
maybe we can ask the Developer [chriddyp](https://community.plotly.com/u/chriddyp) Leader if that is possible? ---
**Author:** ![tanthiamhuat](https://avatars.discourse-cdn.com/v4/letter/t/edb3f5/32.png) [@tanthiamhuat](https://community.plotly.com/u/tanthiamhuat)\ **Post date:** [January 6, 2019, 3:09am UTC](https://community.plotly.com/t/dash-tabs-and-subtabs/14575/9 "2019-01-06T03:09:36Z")
I am still waiting for some positive response on SubTab, perhaps some code examples would be useful. ---
**Author:** ![sriotti](https://avatars.discourse-cdn.com/v4/letter/s/d07c76/32.png) [@sriotti](https://community.plotly.com/u/sriotti)\ **Post date:** [January 11, 2019, 6:00pm UTC](https://community.plotly.com/t/dash-tabs-and-subtabs/14575/10 "2019-01-11T18:00:05Z")
I would check out **dash bootstrap components** [https://community.plotly.com/t/show-and-tell-dash-bootstrap-components](https://community.plotly.com/t/show-and-tell-dash-bootstrap-components) by @tcbegley I know he is working on a sidebar example that you might be interested in. ---
**Author:** ![tanthiamhuat](https://avatars.discourse-cdn.com/v4/letter/t/edb3f5/32.png) [@tanthiamhuat](https://community.plotly.com/u/tanthiamhuat)\ **Post date:** [January 12, 2019, 5:58am UTC](https://community.plotly.com/t/dash-tabs-and-subtabs/14575/11 "2019-01-12T05:58:50Z")
sorry, I still do not see the tabs and sub-tabs which I am looking for… can you point me to the correct link? ---
**Author:** ![JmsBlah](https://avatars.discourse-cdn.com/v4/letter/j/43a26b/32.png) [@JmsBlah](https://community.plotly.com/u/JmsBlah)\ **Post date:** [February 23, 2019, 5:40am UTC](https://community.plotly.com/t/dash-tabs-and-subtabs/14575/12 "2019-02-23T05:40:32Z")
I was looking for the same, a way of using the Shiny layout in Dash. So far nothing, please let me know if you did find something! Thanks ---
**Author:** ![markus\_zhang](https://avatars.discourse-cdn.com/v4/letter/m/85f322/32.png) [@markus\_zhang](https://community.plotly.com/u/markus_zhang)\ **Post date:** [March 15, 2019, 12:32pm UTC](https://community.plotly.com/t/dash-tabs-and-subtabs/14575/13 "2019-03-15T12:32:48Z")
This is elegant. I’m wondering if you are able to replicate the look here? My company has one webpage that looks exactly the same, but when I check the source it doesn’t say anything about Shiny, I’m wondering whether there is a way to identify if a page is from Shiny Server. ---
**Author:** ![tanthiamhuat](https://avatars.discourse-cdn.com/v4/letter/t/edb3f5/32.png) [@tanthiamhuat](https://community.plotly.com/u/tanthiamhuat)\ **Post date:** [March 16, 2019, 4:05am UTC](https://community.plotly.com/t/dash-tabs-and-subtabs/14575/14 "2019-03-16T04:05:11Z")
> [@markus\_zhang](#): > > ook here? you can send me the link, and I take a look to see if it is from Shiny. ---
**Author:** ![tanthiamhuat](https://avatars.discourse-cdn.com/v4/letter/t/edb3f5/32.png) [@tanthiamhuat](https://community.plotly.com/u/tanthiamhuat)\ **Post date:** [March 16, 2019, 4:27am UTC](https://community.plotly.com/t/dash-tabs-and-subtabs/14575/15 "2019-03-16T04:27:36Z")
yes, sure. You can post the link here. ---
**Author:** ![markus\_zhang](https://avatars.discourse-cdn.com/v4/letter/m/85f322/32.png) [@markus\_zhang](https://community.plotly.com/u/markus_zhang)\ **Post date:** [March 16, 2019, 5:20am UTC](https://community.plotly.com/t/dash-tabs-and-subtabs/14575/16 "2019-03-16T05:20:59Z")
Thanks. The website cannot be accessed from outside, but it looks exactly like the one posted previously: [![](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/9/92894d84467b19807adbe5987f734b0a309b8747.png) ](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/9/92894d84467b19807adbe5987f734b0a309b8747.png) ---
**Author:** ![tanthiamhuat](https://avatars.discourse-cdn.com/v4/letter/t/edb3f5/32.png) [@tanthiamhuat](https://community.plotly.com/u/tanthiamhuat)\ **Post date:** [March 16, 2019, 10:05am UTC](https://community.plotly.com/t/dash-tabs-and-subtabs/14575/17 "2019-03-16T10:05:53Z")
yes, this is posted by me and done in R Shiny, I am trying to see if Python Dash has the capability of doing Tabs and SubTabs. ---
**Author:** ![markus\_zhang](https://avatars.discourse-cdn.com/v4/letter/m/85f322/32.png) [@markus\_zhang](https://community.plotly.com/u/markus_zhang)\ **Post date:** [March 16, 2019, 2:23pm UTC](https://community.plotly.com/t/dash-tabs-and-subtabs/14575/18 "2019-03-16T14:23:53Z")
Thanks. I’m also trying to replicate the look of it. Very neat and elegant. I also found it’s difficult to separate font-awesome icons and tab label in this case. ---
**Author:** ![ramatoulaye](https://avatars.discourse-cdn.com/v4/letter/r/e56c9b/32.png) [@ramatoulaye](https://community.plotly.com/u/ramatoulaye)\ **Post date:** [April 18, 2019, 10:45am UTC](https://community.plotly.com/t/dash-tabs-and-subtabs/14575/19 "2019-04-18T10:45:51Z")
Hi have you found a way to make sidebar with tabs and subtabs. ---
**Author:** ![sriotti](https://avatars.discourse-cdn.com/v4/letter/s/d07c76/32.png) [@sriotti](https://community.plotly.com/u/sriotti)\ **Post date:** [April 20, 2019, 5:34pm UTC](https://community.plotly.com/t/dash-tabs-and-subtabs/14575/20 "2019-04-20T17:34:20Z")
Dash Bootstrap Components is what you are looking for; it has multiple sidebar and navbar examples. Thanks to @tcbegley for the great work. > [@Show and Tell - Dash Bootstrap Components](https://community.plotly.com/t/show-and-tell-dash-bootstrap-components/16614/41): > > @sriotti and anyone else interested: I finally added some simple multi-page examples to our repo like I’ve been promising for a long time. Check them out [here](https://github.com/facultyai/dash-bootstrap-components/tree/master/examples/multi-page-apps). They include a navbar example, plus multiple sidebar examples, including collapsible submenus and responsive designs. Try running them or check out some screenshots on the [pull request](https://github.com/facultyai/dash-bootstrap-components/pull/186). Also more generally, the release of Dash 0.41.0 let us add some cool new features. Personally I’m pretty excited about the new [Modal component](https://dash-bootstrap-components.opensource.faculty.ai/l/components/modal), which let… [Next page](https://community.plotly.com/t/dash-tabs-and-subtabs/14575.md?page=2)