Where to place dbc.Navbar within app.layout?

Dash Python
1

Hello everyone!

As I am trying dash-bootstrap-components v1.0 for the first time, I found myself wondering where exactly I should place dbc.Navbar within the layout of my app.

My first attempt was the following:

app.layout = dbc.Container([
    navbar, 
    pages_content
], fluid=True)

But this results in the navbar not occupying the full width of the screen, which I don’t like.

Screenshot 2021-11-25 at 10.39.51
Screenshot 2021-11-25 at 10.39.512412×472 47.2 KB

The other option I found is this:

app.layout = html.Div([
    navbar,  
    dbc.Container([
        page_content
    ], fluid=True) 
])

This results in the navbar occupying the full width of the page.

Screenshot 2021-11-25 at 10.41.06
Screenshot 2021-11-25 at 10.41.062412×472 27.6 KB

What is the recommended way to place the navbar? Thanks for help!

@tcbegley

2

The dbc.Container component has padding in the dbc theme CSS and can be overridden by passing a class name. By passing px-0, the container will have 0 padding and the navbar will reach the edges of the screen using the first example.

app.layout = dbc.Container([
   navbar, 
   pages_content
], fluid=True,
class_name='px-0')

Bootstrap v5 spacing docs for reference.

1 Like
3

That works! Thanks a lot @kiwifoxtrot !

I actually liked the padding of the rest of the content. So what I did in the end was this:

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            navbar
        ], class_name='px-0')
    ]),
    row_pages_content
], fluid=True)

This removes the padding just for the navbar.