Need to change the default home of Dash

Dash Python
1

Hello guys,

I am new to dash and i need to fix the default home page of my Dashboard to the following. Any advise on how to proceed. I need the default page to be - dbc.NavLink(“Main Page”, href="/page-1", id=“page-1-link”) however it always starts with Page-2.

Please assist.

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP,['https://codepen.io/chriddyp/pen/bWLwgP.css']])


SIDEBAR_STYLE = {
    "position": "fixed",
    "top": 0,
    "left": 0,
    "bottom": 0,
    "width": "15rem",
    "padding": "2rem 1rem",
    "background-color": "#abc7ed",
}

CONTENT_STYLE = {
    "margin-left": "18rem",
    "margin-right": "2rem",
    "padding": "2rem 1rem",
}

sidebar = html.Div(
    [
        html.H3("Premium Content", className="display-4"),
        dcc.Upload(html.Button('Upload File')),
        html.Hr(),
        html.P(
            "World Wide Dashboard", className="lead"
        ),
        dbc.Nav(
            [
                dbc.NavLink("Main Page", href="/page-1", id="page-1-link"),
                dbc.NavLink("Premium Queue > 50", href="/page-2", id="page-2-link"),
                dbc.NavLink("HV/HP", href="/page-3", id="page-3-link"),
                dbc.DropdownMenu([dbc.DropdownMenuItem("Premium", id ='Premium'), dbc.DropdownMenuItem("HV/HP", id = 'Premium1')],
                    label="Savings",
                    nav=True,
                    )
            ],
            vertical=True,
            pills=True,
        ),
    ],
    style=SIDEBAR_STYLE,
)

content = html.Div(id="page-content", style=CONTENT_STYLE,
                   children= html.Div([

                   ]))

app.layout = html.Div([dcc.Location(id="url"), sidebar, content])



@app.callback(
    [Output(f"page-{i}-link", "active") for i in range(1, 4)],
    [Input("url", "pathname")],
)
def toggle_active_links(pathname):
    if pathname == "/":
        # Treat page 1 as the homepage / index
        return True, False, False, False
    return [pathname == f"/page-{i}" for i in range(1, 4)]
2

Hi,
please try to format your code to make it easier to help you.

That being said, changing the active prop of a NavLink will not update your content, it is purely visual according to the doc.

You shoud pass Output(f"page-content", “children”) to your callback and return pre-defined layouts.

3

Hi,

I apologize, I have formatted the code as you said. This is my first question here at this blog. Can you check and advise. I will refer to the doc to see if i can get this fixed.

4

You return four values for three outputs in your callback. This code works as expected:

import dash
from dash.dependencies import Output, Input
import dash_bootstrap_components as dbc
import dash_html_components as html
import dash_core_components as dcc


app = dash.Dash(
    external_stylesheets=[
        dbc.themes.BOOTSTRAP,
        ["https://codepen.io/chriddyp/pen/bWLwgP.css"],
    ]
)


SIDEBAR_STYLE = {
    "position": "fixed",
    "top": 0,
    "left": 0,
    "bottom": 0,
    "width": "15rem",
    "padding": "2rem 1rem",
    "background-color": "#abc7ed",
}

CONTENT_STYLE = {
    "margin-left": "18rem",
    "margin-right": "2rem",
    "padding": "2rem 1rem",
}

sidebar = html.Div(
    [
        html.H3("Premium Content", className="display-4"),
        dcc.Upload(html.Button("Upload File")),
        html.Hr(),
        html.P("World Wide Dashboard", className="lead"),
        dbc.Nav(
            [
                dbc.NavLink("Main Page", href="/page-1", id="page-1-link"),
                dbc.NavLink("Premium Queue > 50", href="/page-2", id="page-2-link"),
                dbc.NavLink("HV/HP", href="/page-3", id="page-3-link"),
                dbc.DropdownMenu(
                    [
                        dbc.DropdownMenuItem("Premium", id="Premium"),
                        dbc.DropdownMenuItem("HV/HP", id="Premium1"),
                    ],
                    label="Savings",
                    nav=True,
                ),
            ],
            vertical=True,
            pills=True,
        ),
    ],
    style=SIDEBAR_STYLE,
)

content = html.Div(id="page-content", style=CONTENT_STYLE, children=html.Div([]))

app.layout = html.Div([dcc.Location(id="url"), sidebar, content])


@app.callback(
    [Output(f"page-{i}-link", "active") for i in range(1, 4)],
    [Input("url", "pathname")],
)
def toggle_active_links(pathname):
    if pathname == "/":
        # Treat page 1 as the homepage / index
        return True, False, False
    return [pathname == f"/page-{i}" for i in range(1, 4)]


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

Nonetheless, you will need to add Output(f"page-content", “children”) like I said before to be able to change the actual content of your page.