面包屑导航导航
它按层级列出当前位置到起点的路径,让用户知道自己在哪并能返回上层。
- 页面上面显示我一层层从哪来的那串字
- 首页后面跟着分类再跟当前页的路径
- 能点回上一级目录的那排小字
- 路径导航
- 层级路径
- 位置路径
示例
尚无经验证的示例
这条词条暂时只提供平台定义和出处,不用临时动画冒充正式内容。
Web / iOS / Android 对照
Web需自己实现
桌面与移动端现代浏览器
Breadcrumb
网页没有会自动生成路径的原生面包屑控件,需要根据信息层级渲染链接并补充导航语义。
通常怎么做:使用带名称的 nav 和有序列表;当前页不可重复链接。
iOS需自己实现
iOS / iPadOS
Breadcrumb
也叫 Path Control
苹果移动平台没有面包屑或文件路径控件,层级导航通常由返回按钮、标题和导航栈表达。
通常怎么做:使用 NavigationStack;在 iPadOS 文件类界面中只在确有复杂层级时自定义路径。
Android需自己实现
Android 手机 / 平板
Breadcrumb
Material 3 没有面包屑组件,移动端层级通常依靠顶部返回导航;大屏网页式布局才会自定义路径。
通常怎么做:使用 TopAppBar 的返回操作;复杂大屏层级可用链接或文本自行组合。
使用规范
什么时候用
- 网站或文件结构层级较深,用户需要跳回任意上层位置
什么时候别用
- 线性任务流程、移动端浅层导航或路径会长到无法阅读
给 AI 的提示词
这条词条还没有经过验证的实现提示词。