Breadcrumb 面包屑

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

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

export default function Demo() {
  return (
    <Breadcrumb>
      <BreadcrumbItem href="#">首页</BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem href="#">Galgame</BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem href="#">枕</BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem current>サクラノ詩</BreadcrumbItem>
    </Breadcrumb>
  )
}

tsx

用法

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

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

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

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

export default function Demo() {
  return (
    <Breadcrumb>
      <BreadcrumbItem href="#">首页</BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem href="#">轻小说</BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem current>春与修罗</BreadcrumbItem>
    </Breadcrumb>
  )
}

tsx

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

示例

分隔符

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

默认

斜线

文字

import { Slash } from 'lucide-react'
import { Breadcrumb, BreadcrumbItem, BreadcrumbSeparator, Stack, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <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 className="size-3.5" />
          </BreadcrumbSeparator>
          <BreadcrumbItem href="#">漫画</BreadcrumbItem>
          <BreadcrumbSeparator>
            <Slash className="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>
  )
}

tsx

路由链接

as 指定该项渲染为何种元素或组件，默认为 a。在 Next.js 中传入 next/link 的 Link 即可获得客户端跳转，其余属性（如 href）会透传到该元素上。

需要完全接管渲染时用 asChild，此时项的样式类会合并到子元素上。

'use client'

import NextLink from 'next/link'
import { Breadcrumb, BreadcrumbItem, BreadcrumbSeparator } from '@hina-ui/react'

export default function Demo() {
  return (
    <Breadcrumb>
      <BreadcrumbItem as={NextLink} href="/components/button">
        Button
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem as={NextLink} href="/components/tag">
        Tag
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem current>Breadcrumb</BreadcrumbItem>
    </Breadcrumb>
  )
}

tsx

图标

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

import { House } from 'lucide-react'
import { Breadcrumb, BreadcrumbItem, BreadcrumbSeparator, VisuallyHidden } from '@hina-ui/react'

export default function Demo() {
  return (
    <Breadcrumb>
      <BreadcrumbItem href="#" className="inline-flex items-center">
        <House className="size-4" aria-hidden="true" />
        <VisuallyHidden>首页</VisuallyHidden>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem href="#">Galgame</BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem current>ATRI -My Dear Moments-</BreadcrumbItem>
    </Breadcrumb>
  )
}

tsx

导航名称

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

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

export default function Demo() {
  return (
    <Breadcrumb label="作品位置">
      <BreadcrumbItem href="#">首页</BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem href="#">轻小说</BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem current>第三卷</BreadcrumbItem>
    </Breadcrumb>
  )
}

tsx

API

Breadcrumb

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

属性	说明
`children`	交替排列的项与分隔符

BreadcrumbItem

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

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

属性	说明
`children`	项的内容

BreadcrumbSeparator

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

属性	说明
`children`	分隔符内容，缺省为向右的箭头