np2020
np2020

Reputation: 140

How to vertically place Plotly Dash Navbar on the left in python?

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

Upvotes: 3

Views: 1191

Answers (0)

Related Questions