8. 🧭 导航 Navigation ★★★☆☆

🌏 Web 网页规范

  • 核心模式: 顶部全局导航栏、侧边多级树形目录
  • 辅助路径: 面包屑归属链路 (Breadcrumbs)、锚点滚动
  • 后退机制: 浏览器 History 历史栈，URL 锚点追踪
  • 检索模式: 顶部全局静态搜索框 / 自适应筛选面板

📱 App 移动端规范

  • 核心模式: 底部 Tab Bar 标签栏、汉堡包滑出抽屉
  • 辅助路径: 栈式推进 (Push/Pop)、底部 Sheet 滑入
  • 后退机制: 实体后退键 (Android) / 边缘轻扫手势返回 (iOS)
  • 检索模式: 独立全屏搜索视图 / 底部滑出筛选抽屉

Web 顶部横向导航与面包屑纵向归属

Web Header Navbars & Breadcrumbs Tracker

网页导航提供大信息量的 顶部横向菜单 与 左侧栏面板，并配合面包屑导航记录用户纵向归属路径，支持物理滑块指示器 Tab 选项卡。面包屑导航（Breadcrumb）得名于童话故事《糖果屋》中用面包屑标记归途的故事——在 UI 中，它以 首页 > 分类 > 当前页 的层级链路形式，让用户随时知道自己"从哪里来"，并可以一键点击任意上级页面快速返回。

App 底部 Tab 导航与页面堆栈控制器

App Bottom Tabbars & Navigation Stack push/pop

App 导航依附于 底部 Tab Bar 选项卡 和侧滑抽屉栏，页面间通过 导航堆栈控制器 (Push/Pop) 进行层级入栈出栈，确保操作方向与视觉过渡一致。

LIVE PLAYGROUND: 平滑滑动激活线选项卡菜单与面包屑 点击切换各个 Tab，查看底部滑条是如何平滑追踪形变的
https://web.meta-ui.edu/navigation
09:41
📶 🔋

🍞 面包屑导航 (Breadcrumbs) 解析

上方导航 首页 / 导航设计 / 滑动指示器 即为面包屑。名称源自童话《汉泽尔与格莱特》——兄妹在森林里沿路撒面包屑做记号以便回家。在 UI 中，面包屑是一条层级路径指示器，显示当前页面在站点结构中的位置，每一级都是可点击的链接，让用户能一键跳回任意上级。它不占用顶部主导航的空间，常出现在页面标题上方或内容区顶部。设计要点：用 / 或 > 作分隔符，最后一级（当前页）不可点击，并用 aria-current="page" 标注无障碍语义。

下拉菜单 (Dropdown Menu)

使用原生 <details> / <summary> 实现的无 JS 下拉菜单，点击触发器展开选项列表

更多操作 ▼
📝 编辑资料
📤 导出数据
⚙️ 偏好设置
🗑️ 删除账户
↑ 点击触发器试试点开下拉

下拉菜单导航与面包屑演示 (Multi-level Nav & Breadcrumbs)

首页
产品中心 ▼
产品列表
细分品类 ▶
数码
家居
关于我们
首页 > 产品中心 > 数码 > 手机详情

定义：面包屑是层级导航，展示用户当前页面所处位置，可快速返回上级页面。
作用：减少返回操作、避免用户迷路、适合层级深的后台/电商系统。

📋 大模型统一 Prompt (LLM Prompt)