#面包屑

#用途

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/breadcrumb.css";
@import "@a3s-lab/ui/styles/a3s.css";

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li aria-hidden="true"><svg data-rtl-flip class="lucide lucide-chevron-right" ...></svg></li>
    <li><span aria-current="page">Breadcrumb</span></li>
  </ol>
</nav>

#HTML结构

• nav.breadcrumb 是根地标，应包含 aria-label="面包屑"。
• ol 包含按层次结构顺序排列的面包屑项目。
• li > a 代表可导航的祖先。
• li[aria-hidden="true"] 表示视觉分隔符。
• [aria-current="page"] 代表当前页面。
• li > span[aria-hidden="true"] 表示折叠的省略号。

面包屑项目始终保持在同一命令行中。当可用宽度小于完整路径时，有序列表会横向滚动，不会把分隔符换到下一行。对于持续狭窄的界面，应折叠中间层级。

#示例

#基本

#定制分隔符

#下拉菜单

#已折叠

#RTL