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

[kiteme]

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:

Thanks

[Matan]

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?

[kiteme]

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

[jinnyzor]

Hello @kiteme,

Could you please provide an MRE:

How to write a Minimal Reproducible Example (MRE)

Adding a minimal reproducible example to your questions will help attract community members to answer your question. The goal of writing a MRE is to allow other members of the community to run the code on their computers and “reproduce” the error, so that they can best help you. Please make sure that your MRE includes data and that the code is correctly pre-formatted. To preformat, copy and paste the code in your post and then click on </> (Preformatted text), as shown on the image: [pre-for…

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

[AIMPED]

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(
    label="",
    children=[
        dbc.DropdownMenuItem("Item 1"),
        dbc.DropdownMenuItem("Item 2"),
        dbc.DropdownMenuItem("Item 3"),
    ],
)

if __name__ == '__main__':
    app.run()

EDIT: Maybe interesting in this context:

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 https://dash-bootstrap-components.opensource.faculty.ai/docs/components/dropdown_menu/ 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. [image] For reference sake, i’m trying to replace the blue ‘M…

[kiteme]

Exactly what I needed! thank you!