Tabs Examples and Reference

The dcc.Tabs and dcc.Tab components can be used to create tabbed sections in your app.
The dcc.Tab component controls the style and value of the individual tab
and the dcc.Tabs component hold a collection of dcc.Tab components.

Method 1. Content as Callback

Attach a callback to the Tabs value prop and update a container’s children
property in your callback.

import dash
import dash_html_components as html
import dash_core_components as dcc

from dash.dependencies import Input, Output

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    dcc.Tabs(id='tabs-example', 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')
])

@app.callback(Output('tabs-example-content', 'children'),
              Input('tabs-example', '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_server(debug=True)

In the example above, our callback contains all of the content. In practice,
we’ll keep the tab’s content in separate files and import the data.
For an example, see the URLs and Multi-Page App Tutorial.

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:

# -*- coding: utf-8 -*-
import dash
import dash_html_components as html
import dash_core_components as dcc

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.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': u'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': u'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': u'Montréal'},
                    ]
                }
            )
        ]),
    ])
])


if __name__ == '__main__':
    app.run_server(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:

import dash
import dash_html_components as html
import dash_core_components as dcc

from dash.dependencies import Input, Output

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Tabs(
        id="tabs-with-classes",
        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')
])


@app.callback(Output('tabs-content-classes', 'children'),
              Input('tabs-with-classes', '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_server(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.
<dccLink>.

.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-right-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;
}

Styling Tabs with Inline Styles

An alternative to providing CSS classes is to provide style dictionaries directly:

import dash
import dash_html_components as html
import dash_core_components as dcc

from dash.dependencies import Input, Output

app = dash.Dash(__name__)

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

@app.callback(Output('tabs-content-inline', 'children'),
              Input('tabs-styled-with-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_server(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’re using them!

import dash
import dash_html_components as html
import dash_core_components as dcc

from dash.dependencies import Input, Output

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Tabs(id="tabs-styled-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')
])

@app.callback(Output('tabs-content-props', 'children'),
              Input('tabs-styled-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_server(debug=True)

dcc.Tabs properties

Access this documentation in your Python terminal with:
```python

help(dash_core_components.Tabs)
```

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 a list of or a singular dash component, string or numbers | a list of or a singular dash component, string or number; optional):
Array that holds Tab components.

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.

className (string; optional):
Appends a class to the Tabs container holding the individual Tab
components.

colors (dict; default { border: '#d6d6d6', primary: '#1975FA', background: '#f9f9f9',}):
Holds the colors used by the Tabs and Tab components. If you set
these, you should specify colors for all properties, so: colors: {
border: ‘#d6d6d6’, primary: ‘#1975FA’, background: ‘#f9f9f9’
}.

colors is a dict with keys:

  • background (string; optional)

  • border (string; optional)

  • primary (string; optional)

content_className (string; optional):
Appends a class to the Tab content container holding the children
of the Tab that is selected.

content_style (dict; optional):
Appends (inline) styles to the tab content container holding the
children of the Tab that is selected.

loading_state (dict; optional):
Object that holds the loading state object coming from
dash-renderer.

loading_state is a dict with keys:

  • component_name (string; optional):
    Holds the name of the component that is loading.

  • is_loading (boolean; optional):
    Determines if the component is loading or not.

  • prop_name (string; optional):
    Holds which property is loading.

mobile_breakpoint (number; default 800):
Breakpoint at which tabs are rendered full width (can be 0 if you
don’t want full width tabs on mobile).

parent_className (string; optional):
Appends a class to the top-level parent container holding both the
Tabs container and the content container.

parent_style (dict; optional):
Appends (inline) styles to the top-level parent container holding
both the Tabs container and the content container.

persisted_props (list of a value equal to: ‘value’s; default \['value'\]):
Properties whose user interactions will persist after refreshing
the component or the page. Since only value is allowed this prop
can normally be ignored.

persistence (boolean | string | number; optional):
Used to allow user interactions in this component to be persisted
when the component - or the page - is refreshed. If persisted is
truthy and hasn’t changed from its previous value, a value that
the user has changed while using the app will keep that change, as
long as the new value also matches what was given originally.
Used in conjunction with persistence_type.

persistence_type (a value equal to: ‘local’, ‘session’, ‘memory’; default 'local'):
Where persisted user changes will be stored: memory: only kept in
memory, reset on page refresh. local: window.localStorage, data is
kept after the browser quit. session: window.sessionStorage, data
is cleared once the browser quit.

style (dict; optional):
Appends (inline) styles to the Tabs container holding the
individual Tab components.

value (string; optional):
The value of the currently selected Tab.

vertical (boolean; default False):
Renders the tabs vertically (on the side).


dcc.Tab properties

Access this documentation in your Python terminal with:
```python

help(dash_core_components.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 (a 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.

className (string; optional):
Appends a class to the Tab component.

disabled (boolean; default False):
Determines if tab is disabled or not - defaults to False.

disabled_className (string; optional):
Appends a class to the Tab component when it is disabled.

disabled_style (dict; default { color: '#d6d6d6',}):
Overrides the default (inline) styles when disabled.

label (string; optional):
The tab’s label.

loading_state (dict; optional):
Object that holds the loading state object coming from
dash-renderer.

loading_state is a dict with keys:

  • component_name (string; optional):
    Holds the name of the component that is loading.

  • is_loading (boolean; optional):
    Determines if the component is loading or not.

  • prop_name (string; optional):
    Holds which property is loading.

selected_className (string; optional):
Appends a class to the Tab component when it is selected.

selected_style (dict; optional):
Overrides the default (inline) styles for the Tab component when
it is selected.

style (dict; optional):
Overrides the default (inline) styles for the Tab component.

value (string; optional):
Value for determining which Tab is currently selected.