跳转到内容

🎉 Material UI v5 is out now! Check out the announcement blog post →

编辑此页面

Breadcrumbs 面包屑导航

面包屑导航允许用户在一系列的值中进行选择。

简单的面包屑导航

<Breadcrumbs aria-label="breadcrumb">
  <Link color="inherit" href="/" onClick={handleClick}>
    Material-UI
  </Link>
  <Link color="inherit" href="/getting-started/installation/" onClick={handleClick}>
    Core
  </Link>
  <Typography color="textPrimary">Breadcrumb</Typography>
</Breadcrumbs>

激活最后一个面包屑导航

保持最后一个面包屑导航交互。

<Breadcrumbs aria-label="breadcrumb">
  <Link color="inherit" href="/" onClick={handleClick}>
    Material-UI
  </Link>
  <Link color="inherit" href="/getting-started/installation/" onClick={handleClick}>
    Core
  </Link>
  <Link
    color="textPrimary"
    href="/components/breadcrumbs/"
    onClick={handleClick}
    aria-current="page"
  >
    Breadcrumb
  </Link>
</Breadcrumbs>

自定义分隔符

在以下的示例中，我们使用了两个字符串分隔符和一个 SVG 图标。

带图标的面包屑导航

可折叠的面包屑导航

<Breadcrumbs maxItems={2} aria-label="breadcrumb">
  <Link color="inherit" href="#" onClick={handleClick}>
    Home
  </Link>
  <Link color="inherit" href="#" onClick={handleClick}>
    Catalog
  </Link>
  <Link color="inherit" href="#" onClick={handleClick}>
    Accessories
  </Link>
  <Link color="inherit" href="#" onClick={handleClick}>
    New Collection
  </Link>
  <Typography color="textPrimary">Belts</Typography>
</Breadcrumbs>

自定义的面包屑导航

以下是自定义组件的一个示例。 您可以在 重写文档页 中了解有关此内容的更多信息。

<Breadcrumbs aria-label="breadcrumb">
  <StyledBreadcrumb
    component="a"
    href="#"
    label="Home"
    icon={<HomeIcon fontSize="small" />}
    onClick={handleClick}
  />
  <StyledBreadcrumb component="a" href="#" label="Catalog" onClick={handleClick} />
  <StyledBreadcrumb
    label="Accessories"
    deleteIcon={<ExpandMoreIcon />}
    onClick={handleClick}
    onDelete={handleClick}
  />
</Breadcrumbs>

与 react-router 的交互

无障碍设计

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#breadcrumb)

请务必在面包屑导航组件上加上 aria-label 的描述。

这个组件的可访问性依赖于：

  • 这组链接是由一个有序列表（<ol>元素）组建的。
  • 用 aria-hidden 属性隐藏各个链接之间的分隔符，这样屏幕阅读器不会把它们朗读出来。
  • 有一个标有 aria-label 的 nav（导航）元素标记了面包屑导航的结构，并使其成为导航的标记，这样更容易定位。

API