📣 Introducing Dash `/pages` - A Dash 2.x Feature Preview

Dash Python
,
11

Hey everyone,

I’m really excited about this new feature and I’m looking forward to seeing it in a future release of Dash. :confetti_ball:

This makes it ridiculously easy to build a multi-page app. I’d like to encourage you to take it for a spin and give us more feedback (Thanks @Emil and @Benn0 for your helpful comments)!
Feel free to share your examples, and if you run into issues or have suggestions for new features, let us know here or open an issue in Github.

The easiest way to try it out is to clone the repo , and put your own content in /pages.
GitHub - plotly/dash-multi-page-app-plugin

Here’s a another example like the quickstart above: I changed the sample apps in /pages to be:

- pages
   |-- not_found_404.py
   |-- page1.py
   |-- page2.py
   |-- page3.py
   |-- page4.py

in each of the pages, I added:

import dash
dash.register_page(__name__)

And to make page1.py the home page, I added the path

import dash
dash.register_page(__name__, path="/")

Below is the app.py file - and that’s it! I let the plug-in do the rest :slight_smile:

Remember that as of Dash 2.0, you no longer have to do the gymnastics of having both an app.py and an index.py file or pass around app. For example, prior to Dash 2.0, for a multi-page app in multiple files, you had to include
from app import app in each page that had callbacks.
See more information about the new @callback here.

This app includes an All-in-One component to change the themes. You can find it in the dash-bootstrap-templates library. Note - AIO components were added in Dash 2.0. Find more info here.

With 1 lines of code, you can include a “Change Theme” button (or a toggle switch for 2 themes) and the AIO component does the rest. You can style the figures with a Bootstrap theme too.


import dash
import pages_plugin
from dash import Dash, html, dcc
import dash_bootstrap_components as dbc
from aio.aio_components import ThemeChangerAIO

app = Dash(__name__, plugins=[pages_plugin], external_stylesheets=[dbc.themes.BOOTSTRAP])

navbar = dbc.NavbarSimple(
    dbc.DropdownMenu(
        [
            dbc.DropdownMenuItem(page["name"], href=page["path"])
            for page in dash.page_registry.values()
            if page["module"] != "pages.not_found_404"
        ],
        nav=True,
        label="More Pages",
    ),
    brand="Multi Page App Plugin Demo",
    color="primary",
    dark=True,
    className="mb-2",
)

app.layout = dbc.Container(
    [navbar, pages_plugin.page_container, ThemeChangerAIO(aio_id="theme"),],
    className="dbc",
    fluid=True,
)

if __name__ == "__main__":
    app.run_server(debug=True)

multi-page-plugin

7 Likes