dcc.Tab
The dcc.Tab and dcc.Tabs components can be used to create tabbed sections in your app.
The Tab component controls the style and value of the individual tab
and the Tabs component hold a collection of Tab components.
See complete examples in Tabs.
Examples
Find a few usage examples below.
For more examples of minimal Dash apps that use dcc.Tab, go to the community-driven Example Index.
Method 1. Content as Callback
Attach a callback to the Tabs value prop and update a container’s children
property in your callback.
from dash import Dash, dcc, html, Input, Output, callback
app = Dash()
app.layout = html.Div([
dcc.Tabs(id='tabs-example-1', value='tab-1', children=[
dcc.Tab(label='Tab one', value='tab-1'),
dcc.Tab(label='Tab two', value='tab-2'),
]),
html.Div(id='tabs-example-content-1')
])
@callback(
Output('tabs-example-content-1', 'children'),
Input('tabs-example-1', 'value')
)
def render_content(tab):
if tab == 'tab-1':
return html.Div([
html.H3('Tab content 1'),
dcc.Graph(
figure=dict(
data=[dict(
x=[1, 2, 3],
y=[3, 1, 2],
type='bar'
)]
)
)
])
elif tab == 'tab-2':
return html.Div([
html.H3('Tab content 2'),
dcc.Graph(
figure=dict(
data=[dict(
x=[1, 2, 3],
y=[5, 10, 6],
type='bar'
)]
)
)
])
if __name__ == '__main__':
app.run(debug=True)
Method 2. Content as Tab Children
Instead of displaying the content through a callback, you can embed the content
directly as the children property in the Tab component:
from dash import Dash, dcc, html
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
dcc.Tabs([
dcc.Tab(label='Tab one', children=[
dcc.Graph(
figure={
'data': [
{'x': [1, 2, 3], 'y': [4, 1, 2],
'type': 'bar', 'name': 'SF'},
{'x': [1, 2, 3], 'y': [2, 4, 5],
'type': 'bar', 'name': 'Montréal'},
]
}
)
]),
dcc.Tab(label='Tab two', children=[
dcc.Graph(
figure={
'data': [
{'x': [1, 2, 3], 'y': [1, 4, 1],
'type': 'bar', 'name': 'SF'},
{'x': [1, 2, 3], 'y': [1, 2, 3],
'type': 'bar', 'name': 'Montréal'},
]
}
)
]),
dcc.Tab(label='Tab three', children=[
dcc.Graph(
figure={
'data': [
{'x': [1, 2, 3], 'y': [2, 4, 3],
'type': 'bar', 'name': 'SF'},
{'x': [1, 2, 3], 'y': [5, 4, 3],
'type': 'bar', 'name': 'Montréal'},
]
}
)
]),
])
])
if __name__ == '__main__':
app.run(debug=True)
Note that this method has a drawback: it requires that you compute the children
property for each individual tab upfront and send all of the tab’s content over
the network at once.
The callback method allows you to compute the tab’s content on the fly
(that is, when the tab is clicked).
Styling the Tabs Component
With CSS Classes
Styling the Tabs (and Tab) component can either be done using CSS classes by providing
your own to the className property:
from dash import Dash, dcc, html, Input, Output, callback
app = Dash()
app.layout = html.Div([
dcc.Tabs(
id="tabs-with-classes-2",
value='tab-2',
parent_className='custom-tabs',
className='custom-tabs-container',
children=[
dcc.Tab(
label='Tab one',
value='tab-1',
className='custom-tab',
selected_className='custom-tab--selected'
),
dcc.Tab(
label='Tab two',
value='tab-2',
className='custom-tab',
selected_className='custom-tab--selected'
),
dcc.Tab(
label='Tab three, multiline',
value='tab-3', className='custom-tab',
selected_className='custom-tab--selected'
),
dcc.Tab(
label='Tab four',
value='tab-4',
className='custom-tab',
selected_className='custom-tab--selected'
),
]),
html.Div(id='tabs-content-classes-2')
])
@callback(Output('tabs-content-classes-2', 'children'),
Input('tabs-with-classes-2', 'value'))
def render_content(tab):
if tab == 'tab-1':
return html.Div([
html.H3('Tab content 1')
])
elif tab == 'tab-2':
return html.Div([
html.H3('Tab content 2')
])
elif tab == 'tab-3':
return html.Div([
html.H3('Tab content 3')
])
elif tab == 'tab-4':
return html.Div([
html.H3('Tab content 4')
])
if __name__ == '__main__':
app.run(debug=True)
Notice how the container of the Tabs can be styled as well by supplying a class to the
parent_className prop, which we use here to draw a border below it, positioning the
actual Tabs (with padding) more in the center.
We also added display: flex and justify-content: center to the regular Tab
components, so that labels with multiple lines will not break the flow of the text.
The corresponding CSS file (assets/tabs.css) looks like this. Save the file in an
assets folder (it can be named anything you want). Dash will automatically include this
CSS when the app is loaded. Learn more in
Adding CSS & JS and Overriding the Page-Load Template.
.custom-tabs-container {
width: 85%;
}
.custom-tabs {
border-top-left-radius: 3px;
background-color: #f9f9f9;
padding: 0px 24px;
border-bottom: 1px solid #d6d6d6;
}
.custom-tab {
color:#586069;
border-top-left-radius: 3px;
border-top: 3px solid transparent !important;
border-left: 0px !important;
border-right: 0px !important;
border-bottom: 0px !important;
background-color: #fafbfc;
padding: 12px !important;
font-family: "system-ui";
display: flex !important;
align-items: center;
justify-content: center;
}
.custom-tab--selected {
color: black;
box-shadow: 1px 1px 0px white;
border-left: 1px solid lightgrey !important;
border-right: 1px solid lightgrey !important;
border-top: 3px solid #e36209 !important;
}
With Inline Styles
An alternative to providing CSS classes is to provide style dictionaries directly:
from dash import Dash, dcc, html, Input, Output, callback
app = Dash()
tabs_styles = {
'height': '44px'
}
tab_style = {
'borderBottom': '1px solid #d6d6d6',
'padding': '6px',
'fontWeight': 'bold'
}
tab_selected_style = {
'borderTop': '1px solid #d6d6d6',
'borderBottom': '1px solid #d6d6d6',
'backgroundColor': '#119DFF',
'color': 'white',
'padding': '6px'
}
app.layout = html.Div([
dcc.Tabs(id="tabs-inline", value='tab-1', children=[
dcc.Tab(label='Tab 1', value='tab-1', style=tab_style, selected_style=tab_selected_style),
dcc.Tab(label='Tab 2', value='tab-2', style=tab_style, selected_style=tab_selected_style),
dcc.Tab(label='Tab 3', value='tab-3', style=tab_style, selected_style=tab_selected_style),
dcc.Tab(label='Tab 4', value='tab-4', style=tab_style, selected_style=tab_selected_style),
], style=tabs_styles),
html.Div(id='tabs-content-inline-3')
])
@callback(Output('tabs-content-inline-3', 'children'),
Input('tabs-inline', 'value'))
def render_content(tab):
if tab == 'tab-1':
return html.Div([
html.H3('Tab content 1')
])
elif tab == 'tab-2':
return html.Div([
html.H3('Tab content 2')
])
elif tab == 'tab-3':
return html.Div([
html.H3('Tab content 3')
])
elif tab == 'tab-4':
return html.Div([
html.H3('Tab content 4')
])
if __name__ == '__main__':
app.run(debug=True)
Lastly, you can set the colors of the Tabs components in the color prop, by specifying
the “border”, “primary”, and “background” colors in a dict. Make sure you set them all,
if you are using them!
from dash import Dash, dcc, html, Input, Output, callback
app = Dash()
app.layout = html.Div([
dcc.Tabs(id="tabs-with-props", value='tab-1', children=[
dcc.Tab(label='1', value='tab-1'),
dcc.Tab(label='2', value='tab-2'),
], colors={
"border": "white",
"primary": "gold",
"background": "cornsilk"
}),
html.Div(id='tabs-content-props-4')
])
@callback(Output('tabs-content-props-4', 'children'),
Input('tabs-with-props', 'value'))
def render_content(tab):
if tab == 'tab-1':
return html.Div([
html.H3('Tab content 1')
])
elif tab == 'tab-2':
return html.Div([
html.H3('Tab content 2')
])
if __name__ == '__main__':
app.run(debug=True)
Tab Properties
Access this documentation in your Python terminal with:
```pythonhelp(dash.dcc.Tab)
```
Our recommended IDE for writing Dash apps is Dash Enterprise’s
Data Science Workspaces,
which has typeahead support for Dash Component Properties.
Find out if your company is using
Dash Enterprise.
children (list of or a singular dash component, string or number; optional):
The content of the tab - will only be displayed if this tab is
selected.
id (string; optional):
The ID of this component, used to identify dash components in
callbacks. The ID needs to be unique across all of the components in
an app.
label (string; optional):
The tab’s label.
value (string; optional):
Value for determining which Tab is currently selected.
disabled (boolean; default False):
Determines if tab is disabled or not - defaults to False.
disabled_style (dict; default {color: '#d6d6d6'}):
Overrides the default (inline) styles when disabled.
disabled_className (string; optional):
Appends a class to the Tab component when it is disabled.
className (string; optional):
Appends a class to the Tab component.
selected_className (string; optional):
Appends a class to the Tab component when it is selected.
style (dict; optional):
Overrides the default (inline) styles for the Tab component.
selected_style (dict; optional):
Overrides the default (inline) styles for the Tab component when it is
selected.