Dropdown with Image

Dash Python
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