Create Navbar Search

​​
​

Template request | Bug report | Generate Data Product​
Tags: #dash #snippet #dashboard #plotly #dash #analytics
Author: Florent Ravenel​
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")
Create spinner button
Create download button
Last modified 1mo ago