How to Structure a Multi-Page App

[mdylan2]

Hi,

Really awesome and helpful project!

I'm just a little confused at designing a multi-page app using your NavBar bootstrap component. I'm using Dash's structure currently to do so; specifically, the app1-app2 example toward the bottom of the page.

My question is this: If I want the same NavBar component on every page, do I need to copy/paste the NavBar component with a slightly different class name (NavBar app1, NavBar app2, etc) and then define a callback on each page? Or do you guys offer a way around that?

[mdylan2]

Nevermind, I figured it out.

[pbugnion]

Hi!

Thanks for raising this. For the benefit of anyone else coming across this issue, here's a minimal example. @mdylan2 is this similar to how you solved it?

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output

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

app.config.suppress_callback_exceptions = True

navbar = dbc.NavbarSimple(
    children=[
        dbc.NavItem(dbc.NavLink("Page 1", href="/page-1"), id="page-1-link"),
        dbc.NavItem(dbc.NavLink("Page 2", href="/page-2"), id="page-2-link")
    ],
    brand="NavbarSimple",
    brand_href="/",
    color="primary",
    dark=True,
)

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content')
])


index_page = html.Div([
    navbar,
    dcc.Link('Go to Page 1', href='/page-1'),
    html.Br(),
    dcc.Link('Go to Page 2', href='/page-2'),
])

page_1_layout = html.Div([navbar, html.H1('Page 1')])
page_2_layout = html.Div([navbar, html.H1('Page 2')])


# Update the index
@app.callback(Output('page-content', 'children'), [Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/page-1':
        return page_1_layout
    elif pathname == '/page-2':
        return page_2_layout
    else:
        return index_page
        # You could also return a 404 "URL not found" page here
        

# Update which link is active in the navbar
# If there's lots of pages, we can probably be cleverer about generating
# these functions dynamically.
@app.callback(Output('page-1-link', 'active'), [Input('url', 'pathname')])
def set_page_1_active(pathname):
    return pathname == '/page-1':

    
@app.callback(Output('page-2-link', 'active'), [Input('url', 'pathname')])
def set_page_2_active(pathname):
    return pathname == '/page-2':


if __name__ == '__main__':
    app.run_server(debug=True, port=8888)

Note:

• Each entry in the navbar is a link. The link takes you to a different path. Dash's callback for page-content then handles displaying the right content for that page.
• The brand link is /, not # as usual, since we want to go back to the index page.
• It's useful to show which page we are on in the navbar by setting the active attribute for that navbar link. Unfortunately, I couldn't find a way to toggle this across all items in a single callback (@tcbegley might know?), so I create a callback that just sets it for each page.

[tcbegley]

It's useful to show which page we are on in the navbar by setting the active attribute for that navbar link. Unfortunately, I couldn't find a way to toggle this across all items in a single callback (@tcbegley might know?), so I create a callback that just sets it for each page.

I don't believe this is currently possible (though you can get close by generating the callbacks in a loop), however a couple of days ago support for multiple outputs in a callback was merged in the dash repo and will appear in the next release. With this I think you could do something like (this is untested)

pages = ["page-1", "page-2", ...]


@app.callback(
    [Output(f"{page}-link", "active") for page in pages],
    [Input("url", "pathname")],
)
def toggle_active(pathname):
    active = [False] * len(pages)
    # remove the leading "/" on pathname
    active[pages.index(pathname[1:])] = True
    return active

[mdylan2]

@pbugnion That's exactly how I did it. However, for my application, I didn't set the "active" callbacks you described.

Thanks for that thought! I'll be sure to implement it