Links

Create Navbar Dashboard

Tags: #dashboard #plotly #dash #naas #asset #analytics #navbar #bootstrap
Author: Florent Ravenel
Description: This notebook allows users to create a customizable navigation bar for their website or application.

Input

Import libraries

import os
try:
import dash
except:
!pip install dash --user
import dash
try:
import dash_bootstrap_components as dbc
except:
!pip install dash_bootstrap_components --user
import dash_bootstrap_components as dbc
from dash import html, Input, Output, State, dcc

Setup Variables

DASH_PORT = 8050
PLOTLY_LOGO = "https://images.plot.ly/logo/new-branding/plotly-logomark.png"

Model

Create dropdown "Entity"

entities = ["Entity1", "Entity2", "Entity3", "Entity4"]
dropdown_entity = dcc.Dropdown(
id="entity",
options=[{"label": i, "value": i} for i in entities],
placeholder="Entity",
value=entities[0],
)

Create dropdown "Scenario"

scenarios = ["2022", "2021", "2020", "2019"]
dropdown_scenario = dcc.Dropdown(
id="scenario",
options=[{"label": i, "value": i} for i in scenarios],
placeholder="Scenario",
value=scenarios[0],
)
navbar = dbc.Navbar(
dbc.Container(
[
html.A(
# Use row and col to control vertical alignment of logo / brand
dbc.Row(
[
dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px")),
dbc.Col(dbc.NavbarBrand("Dashboard", className="ms-2")),
],
align="center",
className="g-0",
),
href="https://plotly.com",
style={"textDecoration": "none"},
),
dbc.NavbarToggler(id="navbar-toggler", n_clicks=0),
dbc.Collapse(
dbc.Nav(
[
html.Div(
[
html.Div(className="w-100"),
html.Div(className="w-100"),
html.Div(dropdown_entity, className="w-100"),
html.Div(dropdown_scenario, className="w-100"),
],
className="pt-1 pb-1 d-grid gap-2 d-md-flex w-100",
)
],
className="ms-auto w-100",
navbar=True,
),
id="navbar-collapse",
navbar=True,
is_open=False,
),
],
),
color="dark",
dark=True,
)

Create app layout

app = dash.Dash(
requests_pathname_prefix=f'/user/{os.environ.get("JUPYTERHUB_USER")}/proxy/{DASH_PORT}/',
external_stylesheets=[dbc.themes.BOOTSTRAP],
meta_tags=[
{"name": "viewport", "content": "width=device-width, initial-scale=1.0"}
],
)
app.layout = html.Div([navbar])
@app.callback(
Output("navbar-collapse", "is_open"),
[Input("navbar-toggler", "n_clicks")],
[State("navbar-collapse", "is_open")],
)
def toggle_navbar_collapse(n, is_open):
if n:
return not is_open
return is_open

Output

Generate URL and show logs

if __name__ == "__main__":
app.run_server(proxy=f"http://127.0.0.1:{DASH_PORT}::https://app.naas.ai")