Dropdown with Image

Dash Python
1

is there any way to make the text of a dropdown an image? Similarly to the upper right corner of the nav bar on this site, the last three things are images (search, 3 dash, User icon) which triggers various dropdowns.

is there an example somewhere how to accomplish something similar ?

Thanks-

2

Hi @useradam_123

The three icons shown at the top of this page aren’t typical dropdowns like a dcc.Dropdown component.
New in dash 2.5 you can add components as option labels. See an example in the docs here

If you would like something similar to the icons in the top right of this forum page, you can try using a dbc.Popover . Here’s a minimal example:

icon_dropdown

import dash_bootstrap_components as dbc
from dash import Dash, html

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


app.layout = dbc.Container(
    [
        html.Span(
            [
                html.I(className="bi bi-search pe-3", id="search"),
                html.I(className="bi bi-list", id="menu"),
            ],
            className="h2",
        ),
        dbc.Popover(
            dbc.Input(id="input", placeholder="search...", type="text"),
            target="search",
            body=True,
            trigger="hover",
            placement="bottom",
        ),
        dbc.Popover(
            dbc.ListGroup(
                [
                    dbc.ListGroupItem(
                        [html.I(className="bi bi-bar-chart pe-3"), "bar chart"], href="/page1"
                    ),
                    dbc.ListGroupItem(
                        [html.I(className="bi bi-graph-up pe-3"), "line chart"], href="/page2"
                    ),
                    dbc.ListGroupItem(
                        [html.I(className="bi bi-pie-chart pe-3"), "pie chart"], href="/page3"
                    ),
                    dbc.ListGroupItem(
                        [html.I(className="bi bi-download pe-3"), "download"], id="download"
                    ),
                ],
                className="h4",
            ),
            target="menu",
            body=True,
            trigger="hover",
            placement="bottom",
        ),
    ]
)


if __name__ == "__main__":
    app.run_server(debug=True)

This might be an alternate solution for the question in this post:. dbc.DropdownMenu Icon

2 Likes
3

but those are hover over, and i would prefer an actual click to display the dropdown, if that makes sense

4

Hi @useradam_123

If you check out the link to the dbc.Popover I posted, you will see there are 4 trigger type option:

Trigger Types

The easiest way to trigger the popover is to specify the trigger property. This should be a string containing any of the following 4 values (space separated)

  • "click": toggles the popover when the target is clicked.
  • "focus": toggles the popover when the target receives focus
  • "hover": toggles the popover when the target is hovered over with the cursor.
  • "legacy": toggles the popover when the target is clicked, but will also dismiss the popover when the user clicks outside of the popover.