2

I am trying to replicate the Navbar on the left side in the following link:

I have tried this so far and I've looked through the other example projects provided by Plotly and Dash and nothing else looks similar:

import os
import dash_bootstrap_components as dbc

app_name = os.getenv("DASH_APP_PATH", "/dash-baseball-statistics")

# Navigation Bar function
def Navbar():
    navbar = dbc.NavbarSimple(
        children=[
            dbc.NavItem(dbc.NavLink("Team Analysis", href=f"{app_name}/team")),
            dbc.NavItem(dbc.NavLink("Batting Analysis", href=f"{app_name}/player")),
            dbc.NavItem(
                dbc.NavLink("Pitching/Fielding Analysis", href=f"{app_name}/field")
            ),
        ],
        brand="Home",
        brand_href=f"{app_name}",
        sticky="top",
        color="light",
        dark=False,
        expand="lg",
    )
    return navbar

The code is from the Plotly Dash example below, however the Navbar seems to be fixed horizontally at the top of the page when the code is run, like the following image: Horizontal Navbar

https://github.com/plotly/dash-sample-apps/blob/main/apps/dash-baseball-statistics/navbar.py

How can the following vertical Navbar be achieved using Plotly Dash?

Vertical Navbar

np2020
  • 130
  • 8
  • @Ouroborus I've looked through the docs, https://dash-bootstrap-components.opensource.faculty.ai/docs/components/navbar/ No info about a vertical bar there. I've gone through all the other example dashboards and nothing is similar, hence the reason for the question. – np2020 Nov 17 '22 at 19:05
  • `NavBar` appears to only support placement at the top or bottom. Dash doesn't seem to have the ability to create a sidebar at the page level. You'll likely need to use a native layout (`dcb.Div`s with custom styling, in this case) to split the view into sidebar and content. Then place a `Nav` in the sidebar and content in the content area. – Ouroborus Nov 17 '22 at 19:18
  • May be this one can help you: https://www.youtube.com/watch?v=ln8dyS2y4Nc&t=987s – hoa tran Nov 18 '22 at 01:47

0 Answers0