导航菜单Menu
你可能会说
功能越来越多,得有一列菜单让用户找得到入口。
导航菜单是按层级组织页面或功能入口、帮助用户在产品中移动的导航组件·后台可用侧边菜单列出“项目、成员、设置”,并高亮当前位置。它用于前往不同位置;切换同一对象的平级内容应使用标签页。
首页产品文档定价
▦仪表盘
▤项目
✉消息3
⚙设置
什么时候用
- 产品有多个页面,需要一个常驻的「导航中枢」首页产品文档定价
- 后台系统用侧边栏,便于组织较多功能页面仪表盘项目成员设置
- 功能有层级,用分组和子菜单一层层收纳项目全部项目我负责的系统成员设置
- 高亮当前页,用户随时知道自己在哪概览数据成员高亮告诉你:现在在这儿
什么时候不用
- 在同一页面内切换并列内容:使用 标签页 Tabs评论历史收藏
- 菜单项过多却不分组,会降低查找效率仪表盘项目任务文件成员日程报表消息设置回收站
- 不要将保存、删除等当前页面操作混入导航菜单保存删除导出
- 页面入口很少:直接展示链接通常更清楚首页关于
组成结构 · Anatomy
▦仪表盘3
▤项目
⚙设置
整条菜单,负责排列菜单项和管理高亮状态
一个可点入口,点击跳转到对应页面
可选,用于辅助识别功能
可选,提示未读数或有新内容
常见变体 · Variants
水平导航Horizontal
首页产品文档
入口较少且横向空间充足时,适合网站顶栏
侧边导航Vertical
▦仪表盘▤项目⚙设置
功能较多并需要持续显示分组时
收起态Collapsed
▦▤⚙
内容区宽度不足时,可收起为图标导航
典型使用场景
后台管理系统侧边栏
云云帆后台
▦ 仪表盘
▤ 项目管理
✉ 消息中心3
⚙ 系统设置
数据概览
今日访问
12,483
新增用户
356
网站顶部主导航
◆ Museon
首页
产品
文档
定价
让团队协作更清楚
文档站多级目录
开发指南
快速开始
安装与配置
核心概念
组件模型
状态管理
样式方案
安装与配置
npm install museon-ui
移动端抽屉菜单
商城首页
延伸阅读 · 权威出处