面包屑

面包屑导航是一种导航工具，可帮助用户跟踪他们在应用中的位置。

简介

面包屑组件由链接列表组成，这些链接向用户显示给定页面相对于应用结构的层级结构。它为更好的上下文以及在更高级别和更低级别页面之间轻松导航提供了简单的视觉辅助。

<Breadcrumbs>
  <Link />
  ...
</Breadcrumbs>

Playground

尺寸

分隔符

基础

import Breadcrumbs from '@mui/joy/Breadcrumbs';

面包屑组件充当导航链接的包装器。它旨在与Link 和 Typography 组件一起使用，如下所示

<Breadcrumbs aria-label="breadcrumbs">
  {['Home', 'TV Shows', 'Futurama', 'Characters'].map((item: string) => (
    <Link key={item} color="neutral" href="#basics">
      {item}
    </Link>
  ))}
  <Typography>Dr. Zoidberg</Typography>
</Breadcrumbs>

<Breadcrumbs aria-label="breadcrumbs">
  {['Home', 'TV Shows', 'Futurama', 'Characters'].map((item: string) => (
    <Link key={item} color="neutral" href="#basics">
      {item}
    </Link>
  ))}
  <Typography>Dr. Zoidberg</Typography>
</Breadcrumbs>

按 Enter 开始编辑

定制

尺寸

面包屑组件有三种尺寸：sm、md（默认）和 lg

分隔符

默认情况下，面包屑组件在每个导航项之间插入一个正斜杠 (/)。使用 separator prop 来定义自定义分隔符，它可以是字符或符号以及图标

<Breadcrumbs separator={<KeyboardArrowLeft />} aria-label="breadcrumbs">
  <Typography>Amy</Typography>
  {['Characters', 'Futurama', 'TV Shows', 'Home'].map((item: string) => (
    <Link key={item} color="neutral" href="#separators">
      {item}
    </Link>
  ))}
</Breadcrumbs>

<Breadcrumbs separator={<KeyboardArrowLeft />} aria-label="breadcrumbs">
  <Typography>Amy</Typography>
  {['Characters', 'Futurama', 'TV Shows', 'Home'].map((item: string) => (
    <Link key={item} color="neutral" href="#separators">
      {item}
    </Link>
  ))}
</Breadcrumbs>

按 Enter 开始编辑

Link 和 Typography 的用法

import Link from '@mui/joy/Link';

import Typography from '@mui/joy/Typography';

面包屑组件不接受常见的 Joy UI 样式属性，如 variant、color、startDecorator 或 endDecorator——但 Link 和 Typography 接受。因此，影响内容的大多数自定义样式应直接应用于这些组件，而不是面包屑。

下面的演示展示了如何使用 startDecorator 向 Link 添加图标，以及如何使用 color prop 更改颜色

<Breadcrumbs separator="›" aria-label="breadcrumbs">
  <Link color="primary" href="/">
    <PublicIcon sx={{ mr: 0.5 }} />
    United States
  </Link>
  {['Springfield', 'Simpson'].map((item) => (
    <Link key={item} color="success" href="#usage-with-link-and-typography">
      {item}
    </Link>
  ))}

  <Typography>Homer</Typography>
</Breadcrumbs>

<Breadcrumbs separator="›" aria-label="breadcrumbs">
  <Link color="primary" href="/">
    <PublicIcon sx={{ mr: 0.5 }} />
    United States
  </Link>
  {['Springfield', 'Simpson'].map((item) => (
    <Link key={item} color="success" href="#usage-with-link-and-typography">
      {item}
    </Link>
  ))}

  <Typography>Homer</Typography>
</Breadcrumbs>

按 Enter 开始编辑

CSS 变量 Playground

试用面包屑组件可用的 CSS 变量，看看设计如何变化。您可以使用这些变量通过 sx prop 和主题自定义组件。

<Breadcrumbs />

CSS 变量

--Breadcrumbs-gap

常见示例

精简面包屑

当页面层级结构很深时，您可能希望将多个级别精简为一个。下面的演示仅显示几个先前的级别，直到您单击省略号以显示完整的层级结构

import Menu from '@mui/joy/Menu';

作为上述精简演示行为的替代方案，请考虑添加一个Menu 组件以在下拉列表中显示精简的链接

无障碍性

请务必向面包屑组件添加信息丰富的 aria-label 描述。

以下功能遵循 WAI-ARIA 创作实践，旨在优化组件的基线无障碍性

链接集使用有序列表 (<ol>) 构建。
链接之间的视觉分隔符使用 aria-hidden 隐藏，以防止屏幕阅读器宣布它们。
带有 aria-label 的 <nav> 元素将结构标识为面包屑导航，并使其成为导航地标，以便使用辅助技术轻松定位。
到当前页面的链接的 aria-current 设置为 page。

解剖

面包屑组件由根 <nav> 组成，它包裹着 <ol>，列表项对应于链接的轨迹及其分隔符

<nav aria-label="breadcrumbs" class="MuiBreadcrumbs-root">
  <ol class="MuiBreadcrumbs-ol">
    <li class="MuiBreadcrumbs-li">
      <!-- Link or Typography -->
    </li>
    <li aria-hidden="true" class="MuiBreadcrumbs-separator">/</li>
    <li class="MuiBreadcrumbs-li css-1rqbcrs-MuiBreadcrumbs-ol">
      <!-- Link or Typography -->
    </li>
  </ol>
</nav>

API

请参阅下面的文档，以获得此处提及的组件的所有可用属性和类的完整参考。

<Breadcrumbs />