Dash navbar menu is cut off when on the right side

Issue

New to dash and trying to design a layout for a dashboard. Following some examples online I am leaning towards navbar. The problem is that if i add a dropdown menu on the right side when the dropdown is activated half of the list is not viewable. What am I doing wrong?

import dash_bootstrap_components as dbc
from dash import Dash, html

app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
header = dbc.Navbar(
    dbc.Container(
        [
            html.A(
                dbc.Row(
                    dbc.Col(dbc.NavbarBrand("Analytics", className="ms-2")),
                    align="center",
                    className="g-0",
                ),
                href="/",
                style={"textDecoration": "none"},
            ),
            dbc.Row(
                [
                    dbc.NavbarToggler(id="navbar-toggler"),
                    dbc.Collapse(
                        dbc.Nav(
                            [
                                dbc.NavItem(dbc.NavLink("Home")),
                                dbc.NavItem(dbc.NavLink("Page 1")),
                                dbc.NavItem(
                                    dbc.NavLink("Page 2"),
                                    # add an auto margin after page 2 to
                                    # push later links to end of nav
                                    className="me-auto",
                                ),
                                dbc.NavItem(dbc.NavLink("Help")),
                                dbc.NavItem(dbc.NavLink("About")),
                                dbc.DropdownMenu(
                                    [
                                        dbc.DropdownMenuItem("Home"),
                                        dbc.DropdownMenuItem("Some Long Item"),
                                    ],
                                    class_name="mr-1",
                                    label="Menu",
                                ),
                            ],
                            # make sure nav takes up the full width for auto
                            # margin to get applied
                            className="w-100",
                        ),
                        id="navbar-collapse",
                        is_open=False,
                        navbar=True,
                    ),
                ],
                # the row should expand to fill the available horizontal space
                className="flex-grow-1",
            ),
        ],
        fluid=True,
    ),
    dark=True,
    color="dark",
)


app.layout = html.Div(
    [header, dbc.Container(html.P("This is some content"), className="p-5")]
)

if __name__ == "__main__":
    app.run_server(debug=True)

Here is a screenshot of what this looks like:

What am I missing? How do i get the dropdown to be fully visible when located on the far right and also having fluid=True?

Solution

You can control the alignment of items using the align_end keyword on DropdownMenu(). The relevant documentation is here.

In your MVE shown above, make the change as follows:

dbc.DropdownMenu(
    [
        dbc.DropdownMenuItem("Home"),
        dbc.DropdownMenuItem("Some Long Item"),
    ],
    class_name="mr-1",
    label="Menu",
    align_end=True
)

Answered By - Ian Ash