python plotly dash navigation

Question

My dash application has navigation based on recipes found in the available dash documentation. It works, but it does not look nice. Who knows a better way to introduce menus? I don't want to develop a special meteor component, but I will be glad to use one of the presently available frameworks (bootstrap,semantics,...).

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

app = dash.Dash(__name__)
server = app.server

nav_menu = html.Div([
    dcc.Link('  [Page A]  ', href='/page-a'),
    dcc.Link('  [Page B]  ', href='/page-b'),
])

app.layout = html.Div([

    dcc.Location(id='url', refresh=False),
    nav_menu,

    html.Div( [html.Div( [html.H6('A')], id = 'page-a' ),
               html.Div( [html.H6('B')], id = 'page-b' )],
              style = {'display': 'block'})
])

@app.callback(
    Output(component_id='page-a', component_property='style'),
    [Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/page-a':
        return {'display': 'block'}
    else:
        return {'display': 'none'}

@app.callback(
    Output(component_id='page-b', component_property='style'),
    [Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/page-b':
        return {'display': 'block'}
    else:
        return {'display': 'none'}

app.css.append_css({"external_url": [
    "https://codepen.io/chriddyp/pen/bWLwgP.css",
    "https://codepen.io/chriddyp/pen/rzyyWo.css"
]})

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

Answer 1

You may want to check out the bootstrap components package for dash. Contains a lot of premade components that look good and are easy to use.

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

app = dash.Dash(__name__)
server = app.server
import dash_bootstrap_components as dbc

nav_menu= dbc.NavbarSimple(
    children=[
        dbc.DropdownMenu(
            children=[
                dbc.DropdownMenuItem("Pages", header=True),
                dbc.DropdownMenuItem("Page 1", href="/page-a"),
                dbc.DropdownMenuItem("Page 1", href="/page-b"),
            ],
            nav=True,
            in_navbar=True,
            label="More",
        ),
    ],
    brand="NavbarSimple",
    brand_href="#",
    color="primary",
    dark=True,
)

app.layout = html.Div([

    dcc.Location(id='url', refresh=False),
    nav_menu,

    html.Div( [html.Div( [html.H6('A')], id = 'page-a' ),
               html.Div( [html.H6('B')], id = 'page-b' )],
              style = {'display': 'block'})
])

Answer 2

It is possible to also use Bootstrap within plotly dash.

Example:

nav_menu = html.Div([
    html.Ul([
            html.Li([
                    dcc.Link('Page A', href='/page-a')
                    ], className=''),
            html.Li([
                    dcc.Link('Page B', href='/page-b')
                    ], className=''),
            ], className='nav navbar-nav')
], className='navbar navbar-default navbar-static-top')

To make use of the css classes you also need to integrate Bootstrap:

app.css.append_css({"external_url": [
    "https://codepen.io/chriddyp/pen/bWLwgP.css",
    "https://codepen.io/chriddyp/pen/rzyyWo.css",
    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
]})