Dash Tabs and SubTabs


#1

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.


#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.


#3

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?


#4

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

#5

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


#6

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.


Show and Tell - Dash Bootstrap Components
#7

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.


Show and Tell - Dash Bootstrap Components
#8

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


#9

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


#10

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.


#11

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