Dash-plotly multi page app example with dropdown menu

dash_plotly_multi_page_app_with_dropdown.py

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

app = dash.Dash(__name__, suppress_callback_exceptions=True)

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.H1('My Demo App'),
    dcc.Dropdown(
        id='page-dropdown',
        options=[
            {'label': 'Page 1', 'value': '/page-1'},
            {'label': 'Page 2', 'value': '/page-2'},
        ],
        value='/page-1'
    ),
    html.Div(id='page-content')
])

index_page = html.Div([
    html.H2('This is the index page'),
])

page_1_layout = html.Div([
    html.H2('Page 1'),
])

page_2_layout = html.Div([
    html.H2('Page 2'),
])

@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

@app.callback(Output('url', 'pathname'),
              [Input('page-dropdown', 'value')])
def update_url(value):
    return value

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