SuperAPI AI 工具集

breadcrumb-trail

通用与其它

查看项目

更新于 10-15 21:12

技能介绍

用途:Breadcrumb Trail 提供面包屑导航(Breadcrumb)的设计模式,用于层级较深的站点,帮助用户定位当前位置并快速返回上层。资料列出的适用场景包括:3 层以上层级的站点、电商分类浏览、含嵌套章节的文档、文件管理界面。

主要能力与设计要点:示例路径为 Home / Products / Electronics / Headphones;分隔符使用 / 或 >,且全站保持一致;最后一项代表当前页面,不可点击,并通过加粗或更深的颜色在视觉上区分;层级过长时可截断为 Home / ... / Grandparent / Parent / Current;移动端只显示父级层级。

无障碍实现:使用 <nav aria-label="Breadcrumb"> 包裹;用 <ol> 提供有序列表语义;在最后一项上使用 aria-current="page";分隔符通过 CSS 实现,而非内联文本。

使用方式与限制:资料未提供安装命令、代码示例、配置项或平台支持信息,暂未提供。该条目属于设计规范类内容,需由开发者按上述规则在具体项目中实现,实际效果取决于实现方式。