Help with dash-bootstrap-components navbar

Dash Python
1

Hi All, while this thread is almost a year and a half old since the last response, I am having the same issue when trying to separate navbar into a separate component.
here is the folder structure
├── dash
└── app.py
├── pages
└── home.py
├── components
└── navbar.py
the below is the code that works the app.py file

import dash
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,
    external_stylesheets=[dbc.themes.BOOTSTRAP],
    title="Dash app for handle assets data",
)

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,
)


def server_layout():
    return html.Div(
        [
            dbc.Container(
                id="main_container",
                children=[navbar, dash.page_container],
                class_name="my-2",
            ),
        ],
    )


app.layout = server_layout
server = app.server

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

and this is the navbar.py

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,
)

as you can see this works fine since navbar is defined within the main app.py

Now when I uncomment from components import navbar and remove the navbar variable from the app.py it give the error TypeError: Object of type module is not JSON serializable

As of replying Dash is now version 2.18, is there anyway to serialize this custom component for the sake of cleaner and more maintainable code?

2

wrap navbar.py in a function and use that to render onto app.py

3

Hey @imonem welcome to the forum.

The thing is the import is not correct. You need to import the navbar from components.navbar

1 Like
4

Hi @AIMPED thanks for the hint!! worked like a charm.

This serves as a reminder to always ask. I believe this is not an issue with Dash but ignorance+lack of sleep on my side.

Have a nice day :+1:

1 Like