Dropdown - how to hide selected value and only display the arrow button

Is there any way to hide the currently selected value in the Dropdown component? I want only the arrow button of the Dropdown to be visible, but have wide view for the options, like here:

I don’t really understand the question.
You want to widen the arrow button and show the dropdown options when the button is selected (click)
and when you deselect the button (click again) it will shorten and hide the dropdown options?

I want to have a different width for the button itself (so only the arrow is visible) and different width for the list of options (when it’s opened)
Or even better, if I could just have a regular dbc.Button to open the dropdown list below.

In the attached picture - the box with “AAA…” is list of options when dropdown is opened

Hello @kiteme,

Could you please provide an MRE:

This will help use be able to take a look at it.

Hi @kiteme ,

something like this? It`s just the dbc DropDown…


import dash
import dash_bootstrap_components as dbc

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

app.layout = dbc.DropdownMenu(
        dbc.DropdownMenuItem("Item 1"),
        dbc.DropdownMenuItem("Item 2"),
        dbc.DropdownMenuItem("Item 3"),

if __name__ == '__main__':

EDIT: Maybe interesting in this context:


Exactly what I needed! thank you!

1 Like