How to make dashboard pages

This guide shows you how to add pages to your dashboard and customize the URL paths if needed. A Page model enables you to:

place and arrange your dashboard content (for example, chart/components, tables, and text), and
configure your dashboard interactions (such as filters and parameters).

The Dashboard model accepts the pages argument, where you can insert your Page model.

Create a page

A Page splits into four main containers:

The navigation container where you can customize your navigation (see Dashboard and Navigation for more information). Note that the navigation container needs to be configured via the Dashboard.
The control container where you can add your controls (see Filters or Parameters) to interact with the dashboard
The page header that contains the page title and the theme toggle switch button
The component container where you can add your components to visualize your data

Page Container

To create and add a page to your dashboard, do the following steps:

Set a title for your Page model (which does not have to be unique)
Configure your components, see our guide on the various options
(optional) Configure your controls , see our guides on Filters and Parameters
(optional) Configure your layout , see our guide on Layouts
(optional) Set a description for your page to add a tooltip and set meta tags

Page

app.pyapp.yamlResult

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

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

page = vm.Page(
    title="Page Title",
    description="Longer description of the page content",
    components=[
        vm.Graph(
            id="sunburst", figure=px.sunburst(gapminder, path=["continent", "country"], values="pop", color="lifeExp")
        )
    ],
    controls=[
        vm.Filter(column="continent"),
        vm.Parameter(targets=["sunburst.color"], selector=vm.RadioItems(options=["lifeExp", "pop"], title="Color")),
    ],
)

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:
      - figure:
          _target_: sunburst
          path: [continent, country]
          values: pop
          color: lifeExp
          data_frame: gapminder
        id: sunburst
        type: graph
    controls:
      - column: continent
        type: filter
      - selector:
          options: [lifeExp, pop]
          title: Color
          type: radio_items
        targets: [sunburst.color]
        type: parameter
    title: Page Title
    description: Longer description of the page content

An accordion page selector is automatically added to your dashboard in the top-left of the control container for through the different pages. It will not be added if your dashboard consists of only one page.

You can also navigate through the different pages by going directly to the relevant page URL (more details in next section).

Customize the page URL

The page URL is generated based on the following order of preference:

path argument
id of the page (if explicitly set by the user)
title argument

For example, if title="This is my first page" (and neither path nor id is explicitly set) the generated page URL will be path=this-is-my-first-page. You can then access the page via localhost:<port_number>/this-is-my-first-page.

You cannot have duplicate path values, whether explicitly set or generated.

The first page always has the URL prefix / assigned. A custom URL can, therefore, not be created for the first page.

To customize the page URL, pass a valid URL name to the path argument of Page model:

Page

app.pyapp.yaml

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

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

page1 = vm.Page(
    title="Page 1",
    components=[
        vm.Card(
            text="""Commodi repudiandae consequuntur voluptatum.""",
        ),
    ],
)

page2 = vm.Page(
    title="Page 2",
    path="my-custom-url",
    components=[
        vm.Graph(
            id="sunburst", figure=px.sunburst(gapminder, path=["continent", "country"], values="pop", color="lifeExp")
        )
    ],
    controls=[
        vm.Filter(column="continent"),
        vm.Parameter(targets=["sunburst.color"], selector=vm.RadioItems(options=["lifeExp", "pop"], title="Color")),
    ],
)

dashboard = vm.Dashboard(pages=[page1, page2])
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:
      - text: |
          Commodi repudiandae consequuntur voluptatum.
        type: card
    title: Page 1
  - components:
      - figure:
          _target_: sunburst
          path: [continent, country]
          values: pop
          color: lifeExp
          data_frame: gapminder
        id: sunburst
        type: graph
    controls:
      - column: continent
        type: filter
      - selector:
          options: [lifeExp, pop]
          title: Color
          type: radio_items
        targets: [sunburst.color]
        type: parameter
    title: Page 2
    path: my-custom-url

You can now access the first page via localhost:<port_number>/ and the second page via localhost:<port_number>/my-custom-url.