Hello,
After extensive back & forth Q/A with @AnnMarieW I was able to workout my dash App. but then I came across Adding custom css from external resources I tried implementing a dropdown menu I found on codepen Custom Dropdown. but It doesn’t drop the options/pop-out
import os,sys,time
import numpy as np
import pandas as pd
import polars as pl
import polars.selectors as cs
import duckdb
import dash
from dash import html, dcc, callback, Input, Output,jupyter_dash,ctx
jupyter_dash.default_mode = "external"
import dash_bootstrap_components as dbc
app = dash.Dash(
external_stylesheets = [
dbc.themes.DARKLY,
"https://codepen.io/jkantner/pen/YzbwqZN.css"
],
external_scripts=[
"https://codepen.io/jkantner/pen/YzbwqZN.js"
],
suppress_callback_exceptions = True
)
app.layout = dcc.Loading(
[
dcc.Location("url",refresh=False),
html.Main(
[
html.Div(
[
html.Button(
"Index",
className="drop__btn",
type="button",
style={
"aria-expanded":"false",
"aria-haspopup":"true"
}
),
html.Div(
[
html.Div(
[
html.Button(dcc.Link("Index",href="/"),id="index",className="drop__btn",type="button"),
html.Button(dcc.Link("First Page",href="/first_page"),id="first_page",className="drop__btn",type="button"),
html.Button(dcc.Link("Second Page",href="/second_page"),id="second_page",className="drop__btn",type="button"),
html.Button(dcc.Link("Third Page",href="/third_page"),id="third_page",className="drop__btn",type="button"),
],
className="drop__items-inner"
)
],
className="drop__items",
style={
"data-items":True
}
)
],
className="drop"
)
]
),
html.Div(
id="main-page-content",
style=dict(
position="relative",
top="200px"
)
)
]
)
index_layout = html.Div([html.H1("This is index page")])
first_page_layout = html.Div([html.H1("This is first page")])
second_page_layout = html.Div([html.H1("This is second page")])
third_page_layout = html.Div([html.H1("This is second page")])
@callback(
Output("main-page-content","children"),
[
Input("index","n_clicks"),
Input("first_page","n_clicks"),
Input("second_page","n_clicks"),
Input("third_page","n_clicks")
]
)
def display_page(*args):
if ctx.triggered_id == "first_page":
return first_page_layout
elif ctx.triggered_id == "second_page":
return second_page_layout
elif ctx.triggered_id == "third_page":
return third_page_layout
else:
return index_layout
app.run_server(debug=True)
This is the html for the dropdown.
<main>
<div class="drop" id="dummy">
<button class="drop__btn" aria-expanded="false" aria-haspopup="true" type="button"></button>
<div class="drop__items" data-items>
<div class="drop__items-inner">
<button class="drop__btn" type="button" value="windows">Windows</button>
<button class="drop__btn" type="button" value="mac">Mac</button>
<button class="drop__btn" type="button" value="linux">Linux</button>
</div>
</div>
</div>
</main>
I tried with the relevant dbc components too…It didn’t behave like a dropdown.
Thank You!