Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬Register for the Oct 27 webinar.

Multi-page app with content switched by links

I am encountering several difficulties when trying to switch from a tab-based layout to a multi-page layout.

Where I previously had tabs with different aspects of the app, I now want to switch between these aspects using links, for example in the navigation bar. I want a link with id nav-link-1 to switch to the aspect main_1, nav-link-2 to switch to main_2 etc

I tried the following callback:

@app.callback(
    Output('main', 'children'),
    [
        Input('nav-link-1', 'n_clicks')
    ],
)
def switch_app_to_1(n_clicks):
        return [main_1]
  1. Now that the aspect is no longer in a tab but placed via this callback, all callback functionality inside of it is gone. None of the buttons and controls work anymore.

  2. How can I have a single callback for the Output('main', 'children') (as enforced by Dash) and have different links trigger it and switch accordingly?

You might find this page in the documentation helpful. In short use a combination of dcc.Location and dcc.Link along with a callback that monitors the url and populates the children of main accordingly.

1 Like

Thanks, this looks like the solution. Will try it out.

I was able to realize the layout I wanted with the help of these components.

Callback functionality disappearing was due to the order in which the callbacks were declared - apparently that can be a subtle source of bugs that do not throw exceptions.