使用方法

从独立入口导入 Breadcrumbs 与 BreadcrumbItem。

<script setup lang="ts">
import { BreadcrumbItem, Breadcrumbs } from '@astryx-vue/core/Breadcrumbs'
</script>

<template>
  <Breadcrumbs>
    <BreadcrumbItem href="/">
      首页
    </BreadcrumbItem>
    <BreadcrumbItem href="/components">
      组件
    </BreadcrumbItem>
    <BreadcrumbItem is-current>
      面包屑
    </BreadcrumbItem>
  </Breadcrumbs>
</template>

最佳实践

指引	实践
推荐	使用语义化 <nav> 与 <ol> 结构，便于屏幕阅读器识别路径。
推荐	对当前页使用 is-current 并渲染为 <span>，自动添加 aria-current="page"。
推荐	为分隔符设置 aria-hidden="true"，避免辅助技术重复朗读。
避免	在面包屑中使用过长的标签，导致小屏换行后难以阅读。
避免	把当前页做成可点击链接，这会使用户迷失在循环导航中。

示例

基础用法

1. / Home
2. / Components
3. / Breadcrumbs

标准的面包屑路径，使用默认文本尺寸。

辅助变体

1. / Home
2. / Components
3. / Breadcrumbs

supporting 变体使用更小的辅助文本尺寸，适合紧凑场景。