导航菜单Menu

你可能会说

功能越来越多,得有一列菜单让用户找得到入口。

导航菜单是按层级组织页面或功能入口、帮助用户在产品中移动的导航组件后台可用侧边菜单列出“项目、成员、设置”,并高亮当前位置。它用于前往不同位置;切换同一对象的平级内容应使用标签页。

什么时候用

  • 产品有多个页面,需要一个常驻的「导航中枢」
    首页产品文档定价
  • 后台系统用侧边栏,便于组织较多功能页面
    仪表盘项目成员设置
  • 功能有层级,用分组和子菜单一层层收纳
    项目全部项目我负责的系统成员设置
  • 高亮当前页,用户随时知道自己在哪
    概览数据成员
    高亮告诉你:现在在这儿

什么时候不用

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