dbc.DropdownMenu Icon

Dash Python
1

Is there a way in the dash-bootstrap-components dropdown menu component to add a clickable icon instead of the menu button? I hunted through
https://dash-bootstrap-components.opensource.faculty.ai/docs/components/dropdown_menu/

But all the examples seem to only show the button with the arrow as the clickable object top open the menu. I’m guessing i could override the entire thing with css but wondering if there is an easier way.

image
For reference sake, i’m trying to replace the blue ‘Menu’ button with a fontawesome icon, the dropdown would have the same menu functionality.

1 Like
2

Hi @tphil10
It doesn’t look like there is an easy way to change the button itself, but here is a sneaky workaround. It makes the button transparent and places the icon on top:

icon_dropdown

from dash import Dash, html

import dash_bootstrap_components as dbc

app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.BOOTSTRAP])

dropdown = dbc.DropdownMenu(
    [
        dbc.DropdownMenuItem("Item 1"),
        dbc.DropdownMenuItem("Item 2"),
        dbc.DropdownMenuItem("Item 3"),
    ],
    className="position-absolute start-0 top-0 h-100 w-100 ",
    toggleClassName="opacity-0",
)


app.layout = dbc.Container(
    html.I(dropdown, className="bi bi-info-circle-fill position-relative pt-4"),
)

if __name__ == "__main__":
    app.run_server()
3 Likes
3

Yea i figured the way was gonna involve something like that. I wound up overriding the css with

.nav-link::after {
    display: none;
}

.nav-link::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 2rem;
	content: "\f013";
}

which uses the unicode version of the font-awesome icon i wanted.
However i like your idea a lot better.

4

hmm, I think I like your solution better :slight_smile:
Thanks for sharing - I’ll add that to my toolkit!