breadcrumb

面包屑导航（Breadcrumb）用于指示当前页面在导航层级中的位置，并通过 CSS 为各导航条目之间自动添加分隔符。它是一种二级导航方案，用于显示用户在网站或 Web 应用程序中的位置。[1][2]面包屑导航的概念来自汉塞尔和格莱特的童话故事，其中两个有头衔的孩子丢下面包屑，形成一条回家的路。就像在故事中一样，现实世界应用程序中的面包屑导航为用户提供了一种追踪路径回到其原始着陆点的方法。[2]然而，面包屑导航不适用于没有逻辑层次结构或分组的单级网站。要确定是否应该在网站中使用面包屑导航，可以构建站点地图或表示网站导航架构的图表，然后分析面包屑导航是否会提高用户在类别内和类别之间导航的能力。[3]

相关问题

antd breadcrumb

Ant Design 是一个非常流行的 React UI 库，其中包含了 Breadcrumb 组件。Breadcrumb（面包屑）组件可以展示当前页面的层级结构，让用户更好地理解自己的位置。在 Ant Design 中，可以使用 Breadcrumb 组件来实现这一功能。以下是一个使用 Ant Design Breadcrumb 组件的示例代码：

import { Breadcrumb } from 'antd';

<Breadcrumb>
  <Breadcrumb.Item>Home</Breadcrumb.Item>
  <Breadcrumb.Item>Application Center</Breadcrumb.Item>
  <Breadcrumb.Item>Application List</Breadcrumb.Item>
  <Breadcrumb.Item>An Application</Breadcrumb.Item>
</Breadcrumb>

在这个示例中，我们使用了 Ant Design 的 Breadcrumb 组件，并在组件中添加了一些 Breadcrumb.Item 组件，用于展示当前页面的层级结构。通过这个组件，用户可以更好地理解自己所在的位置。

Breadcrumb的效果

Breadcrumb是一种用于网站导航的用户界面元素，通常以层次结构的方式显示用户当前所在页面的路径。它通常位于页面的顶部或顶部导航栏下方，并包含链接，使用户能够快速导航回上一级页面或其他相关页面。

Breadcrumb的主要优势是提供了清晰的导航路径，帮助用户了解他们所处的位置和网站的结构。它可以减少用户的迷失感，并提供更好的用户体验。此外，Breadcrumb还可以提高网站的可访问性，特别是对于那些使用屏幕阅读器等辅助技术的用户。

通过点击Breadcrumb中的链接，用户可以直接返回到之前的页面，而不需要依赖浏览器的返回按钮。这样可以节省用户的时间和努力，并提高导航的便利性。

总结起来，Breadcrumb的效果包括：
1. 提供清晰的导航路径和网站结构；
2. 减少用户的迷失感；
3. 提高网站的可访问性；
4. 增加导航的便利性，节省用户时间和努力。