dcc_tabs

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.

Examples

Find a few usage examples below.

Method 1. Content as Callback

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

using Dash

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

app = dash(external_stylesheets=external_stylesheets)

app.layout = html_div([
    html_h1("Dash Tabs component demo"),
    dcc_tabs(id="tabs-example-graph", value="tab-1-example-graph", children=[
        dcc_tab(label="Tab One", value="tab-1-example-graph"),
        dcc_tab(label="Tab Two", value="tab-2-example-graph"),
    ]),
    html_div(id="tabs-content-example-graph")
])

callback!(app,
    Output("tabs-content-example-graph", "children"),
    Input("tabs-example-graph", "value")
) do tab
    if tab == "tab-1-example-graph"
        return html_div([
            html_h3("Tab content 1"),
            dcc_graph(
                id="graph-1-tabs",
                figure=Dict(
                    "data" =>  [Dict(
                        "x" =>  [1, 2, 3],
                        "y" =>  [3, 1, 2],
                        "type" =>  "bar"
                    )]
                )
            )
        ])
    elseif tab == "tab-2-example-graph"
        return html_div([
            html_h3("Tab content 2"),
            dcc_graph(
                id="graph-2-tabs",
                figure=Dict(
                    "data" =>  [Dict(
                        "x" =>  [1, 2, 3],
                        "y" =>  [5, 10, 6],
                        "type" =>  "bar"
                    )]
                )
            )
        ])
    end
end

run_server(app, "0.0.0.0", 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:

using Dash, PlotlyJS

app = dash()

function make_plot()
    plot(
        [
            bar(x=["giraffes", "orangutans", "monkeys"], y=rand(1:20, 3), name="SF"),
            bar(x=["giraffes", "orangutans", "monkeys"], y=rand(3:20, 3), name="Montreal")
        ],
        Layout(
            title="Dash Data Visualization",
            barmode="group",
        )
    )
end

app.layout = html_div() do
    dcc_tabs(
        [
            dcc_tab(
                label="Tab one",
                children=[dcc_graph(figure=make_plot())]
            ),
            dcc_tab(
                label="Tab two",
                children=[dcc_graph(figure=make_plot())]
            ),
            dcc_tab(
                label="Tab three",
                children=[dcc_graph(figure=make_plot())]
            )
        ]
    )
end

run_server(app, "0.0.0.0", 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:

using Dash

app = dash()

app.layout = html_div() do
    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")

end

callback!(
    app,
    Output("tabs-content-classes", "children"),
    Input("tabs-with-classes", "value"),
) do tab

    if tab == "tab-1"
        return html_div(
            html_h3("Tab content 1")
        )
    elseif tab == "tab-2" 
        return html_div(
            html_h3("Tab content 2")
        )
    elseif tab == "tab-3" 
        return html_div(
            html_h3("Tab content 3")
        )
    elseif tab == "tab-4" 
        return html_div(
            html_h3("Tab content 4")
        )
    end
end

run_server(app, "0.0.0.0", debug=true)
Tab one
Tab two
Tab three, multiline
Tab four

Tab content 2

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

With Inline Styles

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

using Dash

app = dash()

tabs_styles = (
    height = "44px",
)

tabs_style = (
    borderBottom = "1px solid #d6d6d6",
    padding = "6px",
    fontWeight = "bold",
)

tabs_selected_style = (
    borderTop = "1px solid #d6d6d6",
    borderBottom = "1px solid #d6d6d6",
    backgroundColor = "#119DFF",
    color = "white",
    padding = "6px",
)

app.layout = html_div() do
    dcc_tabs(
        id="tabs-styled-inline",
        value="tab-1",
        style=tabs_styles,
        children=[
            dcc_tab(label="Tab 1", value="tab-1", style=tabs_style, selected_style=tabs_selected_style),
            dcc_tab(label="Tab 2", value="tab-2", style=tabs_style, selected_style=tabs_selected_style),
            dcc_tab(label="Tab 3", value="tab-3", style=tabs_style, selected_style=tabs_selected_style),
            dcc_tab(label="Tab 4", value="tab-4", style=tabs_style, selected_style=tabs_selected_style),
        ]
    ),
    html_div(id="tabs-content-inline")
end

callback!(
    app,
    Output("tabs-content-inline", "children"),
    Input("tabs-styled-inline", "value"),
) do tab

    if tab == "tab-1"
        return html_div(
            html_h3("Tab content 1")
        )
    elseif tab == "tab-2" 
        return html_div(
            html_h3("Tab content 2")
        )
    elseif tab == "tab-3" 
        return html_div(
            html_h3("Tab content 3")
        )
    elseif tab == "tab-4" 
        return html_div(
            html_h3("Tab content 4")
        )
    end   
end

run_server(app, "0.0.0.0", debug=true)
Tab 1
Tab 2
Tab 3
Tab 4

Tab content 1

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!

using Dash

app = dash()

app.layout = html_div() do
    dcc_tabs(
        id="tabs-2",
        value="tab-1",
        children=[
            dcc_tab(label="Tab one", value="tab-1"),
            dcc_tab(label="Tab two", value="tab-2")
        ]
    ),
    html_div(id="tabs-content-1")    
end

callback!(
    app,
    Output("tabs-content-1", "children"),
    Input("tabs-2", "value"),
) do tab
    if tab == "tab-1"
        return html_div(
            html_h3("Tab content 1")
        )
    elseif tab == "tab-2" 
        return html_div(
            html_h3("Tab content 2")
        )
    end 
end

run_server(app, "0.0.0.0", debug=true)
1
2

Tab content 1


Tabs Properties

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 (Array of Array of or a singular dash component, String or Reals | Array of or a singular dash component, String or Real; 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.

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

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

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

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

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

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

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

vertical (Bool; default false): Renders the tabs vertically (on the side).

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

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)

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 (Bool; optional): Determines if the component is loading or not.

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

persistence (Bool | String | Real; 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.

persisted_props (Array of values equal to: 'value'; 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_type (a value equal to: 'local', 'session' or '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.