如何在Python中实现Plotly Dash左侧垂直导航栏？

要实现类似目标网站的左侧垂直导航栏，你不需要使用NavbarSimple（它默认是顶部水平布局），而是直接用dbc.Nav组件配合Dash的网格布局（dbc.Row + dbc.Col）来构建垂直侧边栏。以下是完整实现代码：

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

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

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

def create_vertical_navbar():
    # 构建垂直导航栏内容
    nav_items = dbc.Nav(
        [
            dbc.NavLink("Home", href=f"{app_name}", active="exact"),
            dbc.NavLink("Team Analysis", href=f"{app_name}/team", active="exact"),
            dbc.NavLink("Batting Analysis", href=f"{app_name}/player", active="exact"),
            dbc.NavLink("Pitching/Fielding Analysis", href=f"{app_name}/field", active="exact"),
        ],
        vertical=True,  # 开启垂直布局
        pills=True,  # 可选：让导航项显示为胶囊样式
        className="bg-light h-100",  # 设置背景色和高度占满父容器
    )
    
    # 用Col包裹导航栏，设置固定宽度和侧边固定
    sidebar = dbc.Col(
        nav_items,
        width=2,  # 导航栏宽度，可根据需求调整
        style={
            "position": "fixed",
            "top": 0,
            "left": 0,
            "bottom": 0,
            "padding": "20px 10px",
            "overflowY": "auto"  # 内容过多时可滚动
        }
    )
    
    return sidebar

# 主页面布局：侧边栏 + 主内容区
app.layout = dbc.Row(
    [
        create_vertical_navbar(),
        # 主内容区，设置左边距避免被侧边栏遮挡
        dbc.Col(
            html.Div("主内容区域"),
            width=10,
            style={"marginLeft": "16.6667%"}  # 对应width=2的Col宽度比例
        )
    ]
)

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

关键说明 #

• 垂直导航核心：给dbc.Nav添加vertical=True参数，直接将导航项转为垂直排列。
• 固定侧边栏：通过style设置position: fixed让导航栏固定在左侧，同时设置top/bottom: 0使其占满整个页面高度。
• 布局适配：主内容区设置marginLeft，避免被固定的侧边栏遮挡，数值对应侧边栏的宽度比例（width=2对应1/6宽度，即~16.6667%）。
• 样式优化：bg-light给侧边栏设置浅背景色，pills=True让导航项显示为更美观的胶囊样式，可根据需求调整。

内容的提问来源于stack exchange，提问作者np2020