Problem with Navbar

Dash Python
1

Hey there, I’m new to Dash. I have a problem while trying to add Navbar at the top of my page, I always got this error: TypeError: Object of type module is not JSON serializable. I don’t know if I’m calling the navbar properly. This is the code of my navbar:

import dash_bootstrap_components as dbc
from dash import html, callback, Output, Input, State

navbar = dbc.NavbarSimple(
    children=[
        dbc.NavItem(dbc.NavLink("Page 1", href="#")),
        dbc.DropdownMenu(
            children=[
                dbc.DropdownMenuItem("More pages", header=True),
                dbc.DropdownMenuItem("Page 2", href="#"),
                dbc.DropdownMenuItem("Page 3", href="#"),
            ],
            nav=True,
            in_navbar=True,
            label="More",
        ),
    ],
    brand="NavbarSimple",
    brand_href="#",
    color="primary",
    dark=True,
)

@callback(
    Output('navbar-collapse', 'is_open'),
    Input('navbar-toggler', 'n_clicks'),
    State('navbar-collapse', 'is_open'),
)
def toggle_navbar_collapse(n, is_open):
    if n:
        return not is_open
    return is_open

This is the code of my app.py: `import dash

import os
from dash import html
from flask import Flask
import dash_bootstrap_components as dbc
from components import navbar

server = Flask(__name__)
app = dash.Dash(
        __name__,
        server=server,
        use_pages=True,
        title='Dash app for visualize house data'
        )

def server_layout():

    return html.Div(
            [
                navbar,
                dbc.Container(
                    dash.page_container,
                    class_name='my-2'
                ),
            ]
        )

app.layout = server_layout
server = app.server

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

Can someone help me?

2

Hi @Suvaquinho and welcome to the Dash community :slight_smile:

I don’t see anything wrong with the navbar that you posted. If you don’t include the navbar in the layout, does the error go away?

1 Like
3

Hi @Suvaquinho welcome!

As @AnnMarieW mentioned, your Navbar is fine, I just tested it on my side.

The only thing you will have to include is the external_stylesheet:

server = Flask(__name__)
app = dash.Dash(
    __name__,
    server=server,
    external_stylesheets=[dbc.themes.BOOTSTRAP],
    # use_pages=True,
    title='Dash app for visualize house data'
)

So the error originates from somewhere else…

1 Like
4

Thanks @AIMPED and @AnnMarieW, it helped a lot. Thanks!

1 Like
5

A post was split to a new topic: Help with dash-bootstrap-components navbar