Dash_Create_Navbar_Search.ipynb

Kernel: Python 3

Dash - Create Navbar Search

Give Feedback | Bug report

Tags: #dash #snippet #dashboard #plotly #dash #analytics

Author: Florent Ravenel

Last update: 2023-04-12 (Created: 2022-09-15)

Description: This notebook provides a tutorial on how to create a searchable navigation bar using the Dash library.

Input

Import libraries

# Dash
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, dcc
from dash.dependencies import Input, Output

# Other
import os

Setup Dash

# App variables
DASH_PORT = 8050
APP_TITLE = "Naas Search Content"

# Search variables
placeholder = "  🔍  Find something..."
naas_logo_url = "https://github.com/jupyter-naas/naas-search-insights/blob/9ade37588d13698a4308b160978b4ad34176ecc3/inputs/naas-bg-white.png?raw=true"

Model

Create Input Search

input_search = dcc.Input(
    id="result",
    type="search",
    className="form-control rounded-pill",
    placeholder=placeholder,
    style={"marginRight": "10px", "padding-left": "20px"},
)

Create Navbar

navbar = dbc.Navbar(
    dbc.Row(
        [
            dbc.Col(
                html.Img(
                    src=naas_logo_url,
                    height="30px",
                    style={
                        "marginLeft": "auto",
                        "marginRight": "auto",
                        "display": "block",
                    },
                ),
                xs=12,
                sm=12,
                md=2,
                lg=2,
                xl=2,
            ),
            dbc.Col(input_search, xs=12, sm=12, md=10, lg=10, xl=8),
            dbc.Col(
                xs=0,
                sm=0,
                md=1,
                lg=1,
                xl=2,
            ),
        ],
        style={"display": "contents"},
        align="center",
        className="g-3",
    ),
    color="white",
    dark=True,
    className="navbar border-bottom border-light",
)

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.title = APP_TITLE
app.layout = html.Div(
    [
        navbar,
    ]
)

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")