Dbc dropdownmenu not displaying properly

Dash Python
1

Hi, I’ve encountered this error quite a few times. I’m not sure why sometimes my dbc dropdown menu looks broken. Does anyone have any clues? Attaching a screenshot of what the broken page look like.

dropdownmenu
dropdownmenu817×682 21.1 KB

2

Paste the Code and we can try yo help u.

3

This is the layout I have in my index.py that contains the dbc dropdownMenu

app.layout = html.Div([
# represents the browser address bar and doesn’t render anything
dcc.Location(id=‘url’, refresh=False),
html.Div([
dbc.DropdownMenu([
dbc.DropdownMenuItem(
“page-01”, href=“/apps/page-01”
),
dbc.DropdownMenuItem(
“page-02”, href=“/apps/page-02”
)
],label=“Menu”,),
html.P(id=“item-clicks”, className=“mt-3”),
]),

# content will be rendered in this element
html.Div(id='page-content', children=[])

])

4

Hi @dzheng4

It looks like you might be missing the Bootstrap stylesheet.

e.g.

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
2 Likes
5

That worked! I would have never figured that out : ))) Thank you so much!

1 Like