如何用 Streamlit Option Menu 打造高颜值导航栏？5分钟上手的终极教程 🚀
项目地址: https://gitcode.com/gh_mirrors/st/streamlit-option-menu Streamlit Option Menu 是一款简单实用的 Streamlit 组件，能帮助开发者快速实现交互式导航菜单功能。本文将带你从零开始掌握这个强大工具，让你的数据应用界面瞬间提升一个档次！
为什么选择 Streamlit Option Menu？
在开发 Streamlit 应用时，我们常常需要为用户提供直观的导航方式。虽然 Streamlit 自带了 st.selectbox() 等组件，但它们在视觉呈现和交互体验上都有一定局限性。而 Streamlit Option Menu 正是为解决这一痛点而生——它提供了美观的菜单样式、丰富的自定义选项，以及简单易用的 API，让你轻松打造专业级别的应用导航系统。
🌟 核心优势
- 简洁美观：提供多种预设样式，与 Streamlit 原生界面完美融合
- 高度可定制：支持自定义颜色、图标、布局方向等
- 轻量易用：几行代码即可实现复杂菜单功能
- 响应式设计：自动适配不同屏幕尺寸
快速开始：5分钟上手教程
📦 一键安装步骤
使用 pip 命令即可完成安装，无需复杂配置：
pip install streamlit-option-menu
🚀 基础使用示例
下面是一个最简单的侧边栏菜单实现，只需复制这段代码到你的 Streamlit 应用中：
import streamlit as st
from streamlit_option_menu import option_menu
with st.sidebar:
selected = option_menu(
menu_title="主导航", # 菜单标题（可选）
options=["首页", "数据分析", "设置"], # 菜单项列表
icons=["house", "bar-chart", "gear"], # 图标列表（可选）
default_index=0, # 默认选中项索引
)
if selected == "首页":
st.write("欢迎来到首页！")
elif selected == "数据分析":
st.write("这里是数据分析页面")
else:
st.write("这是设置页面")
运行应用后，你将看到一个美观的侧边栏菜单，点击不同选项可以切换显示内容。
菜单样式与布局展示
Streamlit Option Menu 提供了多种布局样式，满足不同应用场景的需求。
1️⃣ 侧边栏菜单（默认样式）
侧边栏菜单是最常用的布局方式，适合需要长期展示的导航选项。
图：Streamlit Option Menu 侧边栏样式展示 - 简洁的垂直布局，带有图标和高亮效果
2️⃣ 水平顶部菜单
如果你希望节省垂直空间，可以使用水平菜单布局：
selected = option_menu(
menu_title=None, # 不显示标题
options=["首页", "数据分析", "设置"],
icons=["house", "bar-chart", "gear"],
orientation="horizontal", # 设置为水平方向
)
图：Streamlit Option Menu 水平布局展示 - 适合顶部导航栏场景
3️⃣ 自定义样式菜单
通过 styles 参数，你可以完全定制菜单的外观，打造符合自己品牌风格的导航栏：
selected = option_menu(
menu_title="自定义菜单",
options=["首页", "数据分析", "设置"],
icons=["house", "bar-chart", "gear"],
styles={
"container": {"padding": "0!important", "background-color": "#fafafa"},
"icon": {"color": "orange", "font-size": "25px"},
"nav-link": {
"font-size": "16px",
"text-align": "left",
"margin": "0px",
"--hover-color": "#eee",
},
"nav-link-selected": {"background-color": "#02ab21"},
}
)
图：Streamlit Option Menu 自定义样式展示 - 可调整颜色、字体大小等视觉元素
高级功能与最佳实践
🎨 图标使用技巧
Streamlit Option Menu 支持 Font Awesome 图标，你可以在 Font Awesome 官网 搜索合适的图标名称。使用图标时建议注意：
- 保持图标风格统一
- 图标与菜单项含义匹配
- 不要过度使用图标，保持界面简洁
📱 响应式设计要点
- 在移动设备上优先使用侧边栏菜单
- 水平菜单在小屏幕上会自动调整布局
- 菜单项文本不宜过长，确保在小屏幕上显示完整
🚫 避坑指南
- 选项过多问题：如果菜单项超过6个，建议分组或使用下拉子菜单
- 图标显示异常：确保使用的图标名称正确，且与 Font Awesome 版本兼容
- 样式冲突：自定义样式时避免使用过于复杂的 CSS，可能与 Streamlit 原生样式冲突
实际应用案例分析
案例1：数据分析仪表板
import streamlit as st
from streamlit_option_menu import option_menu
import pandas as pd
import plotly.express as px
# 加载数据
df = pd.read_csv("data/sales_data.csv")
# 创建顶部导航栏
selected = option_menu(
menu_title=None,
options=["数据概览", "销售分析", "客户分析", "产品分析"],
icons=["bar-chart", "trending-up", "people", "box"],
orientation="horizontal",
)
# 根据选择显示不同内容
if selected == "数据概览":
st.header("销售数据概览")
st.write(f"总销售额: ¥{df['销售额'].sum():,.2f}")
# 显示关键指标和图表...
elif selected == "销售分析":
st.header("销售趋势分析")
# 绘制销售趋势图表...
这个案例展示了如何使用水平菜单构建一个数据分析仪表板，用户可以轻松切换不同的分析视角。
案例2：多页面应用框架
import streamlit as st
from streamlit_option_menu import option_menu
# 隐藏默认的页面导航
st.set_page_config(initial_sidebar_state="collapsed")
# 创建顶部菜单作为页面导航
selected = option_menu(
menu_title="我的应用",
options=["首页", "数据管理", "可视化", "帮助中心"],
icons=["house", "database", "pie-chart", "question-circle"],
orientation="horizontal",
)
# 根据选择加载不同页面内容
if selected == "首页":
st.title("欢迎使用数据应用平台")
# 首页内容...
elif selected == "数据管理":
st.title("数据管理中心")
# 数据上传、查询等功能...
这个案例使用水平菜单实现了多页面应用的效果，比 Streamlit 原生的多页面功能更加灵活和美观。
常见问题解答
Q: 如何更改菜单的颜色主题？
A: 可以通过 styles 参数自定义菜单的颜色，例如修改选中项的背景色：
styles={
"nav-link-selected": {"background-color": "#ff4b4b"},
}
Q: 是否支持多级子菜单？
A: 当前版本暂不支持多级子菜单，但可以通过组合多个 option_menu 组件实现类似效果。
Q: 如何在没有侧边栏的情况下使用菜单？
A: 只需移除 with st.sidebar: 上下文，菜单会默认显示在主内容区域，你也可以使用 orientation="horizontal" 创建顶部导航栏。
总结与生态整合
Streamlit Option Menu 是一款简单而强大的导航组件，它可以与其他 Streamlit 生态工具完美配合，帮助你构建专业级的数据应用：
- 数据处理：与 Pandas、NumPy 等数据处理库无缝集成
- 可视化：搭配 Plotly、Matplotlib 等绘制精美图表
- 交互组件：与 Streamlit 原生组件如
st.slider()、st.button()协同工作
无论你是开发简单的数据展示应用，还是构建复杂的数据分析平台，Streamlit Option Menu 都能为你的应用提供直观、美观的导航体验。现在就尝试将它集成到你的项目中，让用户操作更加流畅高效！
提示：更多高级用法和最新特性，请关注项目的更新日志和官方文档。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
