Compination of multipage app , sidebar , and navbar (View Overlaps) [SOLVED]

Dash Python
1

Hello everyone.

I’m trying to use the multipage app example with separate .py files in folder /pages, in compination with sidebar.
It seems that sidebar overlay the content of the pages, even if i kept the same structure (sidebar made with :
app.layout = html.Div([dcc.Location(id=“url”), sidebar, content]) (like example)
and content=html.Div([topnavbar, page_content , dash.page_container])

Can anyone suggest what is the proper nested setup for this to work ?

image

2

Hi @Bambos

It’s difficult to say what exactly is the problem without a minimal reproducible code. However, what you’re looking for is easily achievable with Dash Bootstrap Components. The general structure would be something like the below

sidebar = dbc.Nav(
            [
             # side bar content here (Page links)
            ],
            navbar=True,
            vertical=True,
            pills=True,
    )

app.layout = dbc.Container([
    dbc.Row(
        [
            dbc.Col(
                [
                    sidebar,
                ], width=2, style={'height': '100%'}, className='mt-1'
            ),
            dbc.Col(
                dash.page_container, width=10
            )
        ],
            className='my-2', style={'height': '100%'}
    )
], fluid=True)

The code snippet above is highly minimised example from this Repo which is for a multi-page app that has a similar UI for the one you’re trying to build. App link

Also, this video might be very helpful for you to follow how it’s done.

1 Like
3

for some strange reason , this code based on your example is not creating two columns:

import dash
from dash import Dash, html, dcc
import dash_bootstrap_components as dbc

app = Dash(use_pages=True)

sidebar = dbc.Nav(
            [
            html.Div('sidebar here')
            ],
            navbar=True,
            vertical=True,
            pills=True,
    )

app.layout = dbc.Container([
    dbc.Row(
        [
            dbc.Col(
                [
                    sidebar,
                ], width=2, style={'height': '100%'}, className='mt-1'
            ),
            dbc.Col(
                dash.page_container, width=10
            )
        ],
            className='my-2', style={'height': '100%'}
    )
], fluid=True)

app.run(port=80, debug=True)

image

4

Hello everyone, i’m posting for reference since i have a good result by combining dbc, sidebar with Nav component and top static navigation bar using NavbarSimple from here: Nav - dbc docs in addition with the multipage app and url’s from here: https://dash.plotly.com/urls

import dash
from dash import Dash, html, dcc
import dash_bootstrap_components as dbc

app = Dash(use_pages=True, external_stylesheets=[dbc.themes.DARKLY])
app.title='dash nav app'

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

# the styles for the main content position it to the right of the sidebar and
# add some padding.
CONTENT_STYLE = {
    "margin-left": "36rem",
    "margin-right": "35rem",
    "padding": "2rem 1rem",
    }

sidebar = html.Div(
    [   html.H2("Beyond Dash", className="display-6"),
        html.Br(),
        html.P("Operations Menu", className="lead"),
        dbc.Nav([
                dbc.NavLink("Home", href="/", active="exact"),
                dbc.NavLink("analytics", href="/analytics", active="exact"),
                dbc.NavLink("archive", href="/archive", active="exact")],
            vertical=True, pills=True )], style=SIDEBAR_STYLE)

topnavbar = dbc.NavbarSimple([      
        dbc.NavLink("Active", active=True, href="#"),
        dbc.NavLink("Analytics", href="/analytics"),
        dbc.NavLink("Another link", href="#"),
        dbc.NavLink("Disabled", disabled=True, href="#"),
        dbc.NavLink("Page 1", href="#"),
        dbc.NavLink("A link", href="#"),
    ], brand="Menu", brand_href="#", color="dark", dark=True)


app.layout = dbc.Container([
    dbc.Row(dbc.Col(topnavbar)),
    dbc.Row([
            dbc.Col(sidebar, width=2, style={'height': '100%'}, className='mt-1'),
            dbc.Col([
                html.A('in page container - but not in external pages'),
                dash.page_container], width=10 )],
            className='my-2', style={'height': '100%'})], fluid=True)

app.run(port=80, debug=True)