Reputation: 140
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:
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?
Upvotes: 3
Views: 1191