dbc.DropdownMenu Icon

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.

1 Like

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:


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 ",

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

.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.

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