Breadcrumb 面包屑

标示当前页面在层级中的位置。

<script setup lang="ts">
  import { Breadcrumb, BreadcrumbItem, BreadcrumbSeparator } from '@hina-ui/vue'
</script>

<template>
  <Breadcrumb>
    <BreadcrumbItem href="#">首页</BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem href="#">Galgame</BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem href="#">枕</BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem current>サクラノ詩</BreadcrumbItem>
  </Breadcrumb>
</template>

vue

用法

import { Breadcrumb, BreadcrumbItem, BreadcrumbSeparator } from '@hina-ui/vue'

Breadcrumb 是导航地标，BreadcrumbItem 是层级中的一项，BreadcrumbSeparator 是项与项之间的分隔符。项与分隔符按顺序交替排列，最后一项用 current 标出当前页面。

current 项不是链接，它渲染为文字并带上 aria-current="page"。当前页面链接至自身并无意义，且会使屏幕阅读器读出一个指向原处的链接。

<script setup lang="ts">
  import { Breadcrumb, BreadcrumbItem, BreadcrumbSeparator } from '@hina-ui/vue'
</script>

<template>
  <Breadcrumb>
    <BreadcrumbItem href="#">首页</BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem href="#">轻小说</BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem current>春与修罗</BreadcrumbItem>
  </Breadcrumb>
</template>

vue

面包屑记录的是层级位置，不是浏览历史。层级自站点根部逐级列至当前页，与读者由何处进入无关。

示例

分隔符

分隔符默认是向右的箭头。默认插槽可以换成任意内容，斜线与间隔号都是常见选择。同一条面包屑里的分隔符应当保持一致。

默认

斜线

文字

<script setup lang="ts">
  import { Slash } from '@lucide/vue'
  import { Breadcrumb, BreadcrumbItem, BreadcrumbSeparator, Stack, Text } from '@hina-ui/vue'
</script>

<template>
  <Stack gap="md">
    <Stack gap="xs">
      <Text size="sm" tone="faint">默认</Text>
      <Breadcrumb>
        <BreadcrumbItem href="#">首页</BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem href="#">漫画</BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem current>第 12 话</BreadcrumbItem>
      </Breadcrumb>
    </Stack>

    <Stack gap="xs">
      <Text size="sm" tone="faint">斜线</Text>
      <Breadcrumb>
        <BreadcrumbItem href="#">首页</BreadcrumbItem>
        <BreadcrumbSeparator><Slash class="size-3.5" /></BreadcrumbSeparator>
        <BreadcrumbItem href="#">漫画</BreadcrumbItem>
        <BreadcrumbSeparator><Slash class="size-3.5" /></BreadcrumbSeparator>
        <BreadcrumbItem current>第 12 话</BreadcrumbItem>
      </Breadcrumb>
    </Stack>

    <Stack gap="xs">
      <Text size="sm" tone="faint">文字</Text>
      <Breadcrumb>
        <BreadcrumbItem href="#">首页</BreadcrumbItem>
        <BreadcrumbSeparator>·</BreadcrumbSeparator>
        <BreadcrumbItem href="#">漫画</BreadcrumbItem>
        <BreadcrumbSeparator>·</BreadcrumbSeparator>
        <BreadcrumbItem current>第 12 话</BreadcrumbItem>
      </Breadcrumb>
    </Stack>
  </Stack>
</template>

vue

路由链接

as 指定该项渲染为何种元素，默认为 a。在 Nuxt 或 Vue Router 中传入路由组件即可获得客户端跳转，其余属性（to、href 等）会透传到该元素上。

需要完全接管渲染时用 as-child，此时项的样式类会合并到插槽根元素上。

<script setup lang="ts">
  import { NuxtLink } from '#components'
  import { Breadcrumb, BreadcrumbItem, BreadcrumbSeparator } from '@hina-ui/vue'

  const localePath = useLocalePath()
</script>

<template>
  <Breadcrumb>
    <BreadcrumbItem :as="NuxtLink" :to="localePath('/components/button')">Button</BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem :as="NuxtLink" :to="localePath('/components/tag')">Tag</BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem current>Breadcrumb</BreadcrumbItem>
  </Breadcrumb>
</template>

vue

图标

项的内容可以是任意节点。首项常用图标代替「首页」二字，此时图标要标为 aria-hidden，并用 VisuallyHidden 补一个只给屏幕阅读器的名称——否则这一项对辅助技术就是一个没有名字的链接。

<script setup lang="ts">
  import { House } from '@lucide/vue'
  import { Breadcrumb, BreadcrumbItem, BreadcrumbSeparator, VisuallyHidden } from '@hina-ui/vue'
</script>

<template>
  <Breadcrumb>
    <BreadcrumbItem href="#" class="inline-flex items-center">
      <House class="size-4" aria-hidden="true" />
      <VisuallyHidden>首页</VisuallyHidden>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem href="#">Galgame</BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem current>ATRI -My Dear Moments-</BreadcrumbItem>
  </Breadcrumb>
</template>

vue

导航名称

Breadcrumb 渲染为 nav 地标，带有随界面语言给出的无障碍名。一个页面里出现多个导航地标时，用 label 分别命名，屏幕阅读器的地标列表才能区分它们。

<script setup lang="ts">
  import { Breadcrumb, BreadcrumbItem, BreadcrumbSeparator } from '@hina-ui/vue'
</script>

<template>
  <Breadcrumb label="作品位置">
    <BreadcrumbItem href="#">首页</BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem href="#">轻小说</BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem current>第三卷</BreadcrumbItem>
  </Breadcrumb>
</template>

vue

API

Breadcrumb

属性	类型	默认值	说明
`label`	`string`	取自界面语言	导航地标的无障碍名
`class`	`string`	—	追加到根元素的类

插槽	说明
`default`	交替排列的项与分隔符

BreadcrumbItem

属性	类型	默认值	说明
`current`	`boolean`	`false`	是否为当前页面，为真时渲染为不可点击的文字
`as`	`string \| Component`	`'a'`	渲染成的元素或组件
`asChild`	`boolean`	`false`	由插槽根元素承担渲染
`class`	`string`	—	追加到根元素的类

其余属性透传到实际渲染的元素上，例如 href 或路由组件的 to。

插槽	说明
`default`	项的内容

BreadcrumbSeparator

属性	类型	默认值	说明
`class`	`string`	—	追加到根元素的类

插槽	说明
`default`	分隔符内容，缺省为向右的箭头