Dash Tabs and SubTabs

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.

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.

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?

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')
    ])

Splendid, thanks for the code, I will test it out.
Cheers

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

I expect that the SubTabs would be hidden directly underneath its main Tab, as what Shiny Server is able to achieve as seen below:

How can my code be modified such that it is able to achieve as what Shiny Server can do?
Thanks.

2 Likes

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.

maybe we can ask the Developer chriddyp Leader if that is possible?

I am still waiting for some positive response on SubTab, perhaps some code examples would be useful.

I would check out dash bootstrap components https://community.plot.ly/t/show-and-tell-dash-bootstrap-components by @tcbegley

I know he is working on a sidebar example that you might be interested in.

sorry, I still do not see the tabs and sub-tabs which I am looking for… can you point me to the correct link?

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

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.

you can send me the link, and I take a look to see if it is from Shiny.

yes, sure. You can post the link here.

Thanks. The website cannot be accessed from outside, but it looks exactly like the one posted previously:

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.

2 Likes

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.

Hi have you found a way to make sidebar with tabs and subtabs.

Dash Bootstrap Components is what you are looking for; it has multiple sidebar and navbar examples. Thanks to @tcbegley for the great work.