DBC Dropdown menu - "Hamburger Style"

Dash Python
1

Hey all!

I just started using dash/plotly in python for creating a single page dashboard. However, I did not manage to create the menu button i would like to have even after intense google research.

Maybe someone has an advice for me here:
Basic description:
The header row contains three columns, 2-8-2. I want to have a dropdown menu in the first column. So the code within the dbc.Col() looks as follows:

html.Div([
            dbc.Card(
                dbc.CardBody([
                    dbc.DropdownMenu(
                    children=[
                        dbc.DropdownMenuItem("O", href="#"),
                        dbc.DropdownMenuItem("A", href="#"),
                        dbc.DropdownMenuItem("B", href="#"),
                        dbc.DropdownMenuItem("C", href="#")
                    ],
                    #nav=True,
                    style={'textAlign': 'center',
                           'width':'100%'},
                    label="Navigation",
                     ),
                ])
           )
        ])

However, the button is not extended to the whole column width. Also I would like to have the “standard” hamburger icon (three dashes) instead of the label. Google told me that there is a HTML code for that but I have not succeeded in embedding it yet.

So basically the two problems are:

  • Why is the dropdown menu not extended to the entire width?
  • How to get the three-dash icon in there?

Thank you in advance!