Align Dash Bootstrap Components NavLinks in Navbar

Dash Python
1

Hi community!

Using the example from the Dash Bootstrap Components (dbc) 1.0.2 documentation, I am trying to implement a NavBar navigation bar. I want to layout some of the NavLinks to the left, and some special ones, e.g., ‘Help’, ‘About’ or ‘Login’ items to the right. With the code below, all items are aligned to the right. I tried multiple combinations of dbc.Rows and dbc.Cols but did not have any success. I assume, there are specific css keywords that would be helpful.

    header = dbc.Navbar(
    dbc.Container(
        [
            html.A(
                dbc.Row([
                    dbc.Col(dbc.NavbarBrand("Title", 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")),   # these should go to the left
                    dbc.NavItem(dbc.NavLink("Page 1")),
                    dbc.NavItem(dbc.NavLink("Page 2")),

                    dbc.NavItem(dbc.NavLink("Help")),   # these should go the right
                    dbc.NavItem(dbc.NavLink("About"))
                ])
            ], id="navbar-collapse", is_open=False, navbar=True)
            ])
        ],
        fluid=True,
    ),
    dark=True,
    color="dark"
)

I found a similar discussion in an old stackoverflow topic, and although the solution in pure html looks straightforward, I failed to transfer it to my problem. I am fairly inexperienced with css, so any help and pointers towards relevant documentation would be highly appreciated!

2

@mawe did you find any solution to this?

Even I am trying to align few items inside the collapsed menu (when not collapsed) to the left on my navbar and keep others at right but failing do so.

3

You can achieve this using some of Bootstrap’s utility classes.

You need the following three changes:

  • Add className="flex-grow-1" to the Row to make sure it expands to fill the available horizontal space.
  • Add className="w-100" to the Nav to make sure it is the full width of the Row
  • Add className="me-auto" after the last left aligned link, to create an auto margin that pushes the remaining links to the end.

Here’s your example with these changes

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("Title", 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")),
                            ],
                            # 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)
5 Likes
4

Thanks a lot @tcbegley! I guess, it is time to learn some bootstrap!

1 Like