How to align button of Navbar to the right?

Dash Python
1

I am trying to put a button to the right of a Navbar like this:

navbar_from_dashboard = dbc.Navbar(
        [
                dbc.Row(
                    [
                        dbc.Col(html.Img(src="data:image/jpg;base64,{}".format(encoded_logo1.decode()),
                                         height="80px")),
                    ],
                dbc.Row(
                    [
                        dbc.Col(html.Img(src="data:image/png;base64,{}".format(encoded_logo2.decode()),
                                         height="80px")),
                    ],
                ),
            dbc.NavbarBrand("Dashboard"),
            dcc.LogoutButton(logout_url='/logout')
        ],
        color="dark",
        dark=True,
    )

I want the LogoutButton to be in the right of the Navbar, but I don’t know how to achieve this. I have tried lots of things but the button still shows right next to the NavbarBrand.

2

Normally you could do this by adding className=ml-auto (ml-auto is a Bootstrap utility class that applies margin-left: auto !important) to the LogoutButton. However, the LogoutButton gets wrapped in a <form> when rendered, and classes are applied to the inner <button>, so this doesn’t quite work. Instead you can wrap it and apply the margin to the wrapper. For example, try replacing

dcc.LogoutButton(logout_url='/logout')

with

html.Span(dcc.LogoutButton(logout_url='/logout'), className="ml-auto")
1 Like