Skip to content

How to use tabs

This guide shows you how to use Tabs, which organize and separate groups of related content in a dashboard, letting users switch between different sections or views.

They are essentially a way of putting multiple Containers in the same screen space, and letting the user switch between them. Containers enable the grouping of page components into sections and subsections. See our user guide on Containers for more information. The Tabs are based on the underlying Dash component dbc.Tabs.

tabs

Displaying multiple containers in Tabs

Both Tabs and Containers are a more advanced technique for customizing your page layout. If you want to arrange components on a page, we recommend reading our user guide on layouts first.

This guide shows you how to use tabs to organize your Containers into subsections inside the dashboard.

By using Tabs, the following applies:

  • Filters affect all components on all tabs (opened and closed) of the page if not specified otherwise inside Filter.targets
  • The title of the Container inserted into Tabs.tabs will be displayed as a tab label, and the title will be removed from the Container

To add Tabs to your page, do the following:

  1. Insert the Tabs into the components argument of the Page
  2. Insert your Containers into the tabs argument of the Tabs
  3. Add a title to the Container, which will be used as the label for the corresponding Tab.

Tabs

import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro

gapminder_2007 = px.data.gapminder().query("year == 2007")

page = vm.Page(
    title="Tabs",
    components=[
        vm.Tabs(
            tabs=[
                vm.Container(
                    title="Tab I",
                    components=[
                        vm.Graph(
                            figure=px.bar(
                                gapminder_2007,
                                title="Graph 1",
                                x="continent",
                                y="lifeExp",
                                color="continent",
                            ),
                        ),
                        vm.Graph(
                            figure=px.box(
                                gapminder_2007,
                                title="Graph 2",
                                x="continent",
                                y="lifeExp",
                                color="continent",
                            ),
                        ),
                    ],
                ),
                vm.Container(
                    title="Tab II",
                    components=[
                        vm.Graph(
                            figure=px.scatter(
                                gapminder_2007,
                                title="Graph 3",
                                x="gdpPercap",
                                y="lifeExp",
                                size="pop",
                                color="continent",
                            ),
                        ),
                    ],
                ),
            ],
        ),
    ],
)

dashboard = vm.Dashboard(pages=[page])
Vizro().build(dashboard).run()

Run and edit this code in Py.Cafe

# Still requires a .py to add data to the data manager and parse YAML configuration
# See yaml_version example
pages:
  components:
    - type: tabs
      tabs:
        - title: Tab I
          type: container
          components:
            - type: graph
              figure:
                _target_: bar
                data_frame: gapminder_2007
                title: Graph 1
                x: continent
                y: lifeExp
                color: continent
            - type: graph
              figure:
                _target_: box
                data_frame: gapminder_2007
                title: Graph 2
                x: continent
                y: lifeExp
                color: continent
        - title: Tab II
          type: container
          components:
            - type: graph
              figure:
                _target_: scatter
                data_frame: gapminder_2007
                title: Graph 3
                x: gdpPercap
                y: lifeExp
                size: pop
                color: continent
  title: Tabs

Tabs