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
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.
For reference sake, i’m trying to replace the blue ‘Menu’ button with a fontawesome icon, the dropdown would have the same menu functionality.
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:
from dash import Dash, html
import dash_bootstrap_components as dbc
app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.BOOTSTRAP])
dropdown = dbc.DropdownMenu(
className="position-absolute start-0 top-0 h-100 w-100 ",
app.layout = dbc.Container(
html.I(dropdown, className="bi bi-info-circle-fill position-relative pt-4"),
if __name__ == "__main__":
Yea i figured the way was gonna involve something like that. I wound up overriding the css with
font-family: "Font Awesome 5 Free";
which uses the unicode version of the font-awesome icon i wanted.
However i like your idea a lot better.
hmm, I think I like your solution better
Thanks for sharing - I’ll add that to my toolkit!