面包屑是一个重要的导航元素，支持wayfinding- 让用户了解其当前位置的网站的分层结构。面包屑是代表当前页面及其“祖先”（父页，祖父母页等）的链接列表，通常一直返回网站主页。nn / g一直推荐面包屑1995年，因为它们为用户提供了许多好处，而UI几乎没有任何成本。

面包屑表示为页面顶部的链接路径，通常在全球导航之下;主页（或层次结构的根节点）是第一个链接，链接通常由符号“>”或“/”分隔。我们推荐“>”字符，尽管没有功能差异，也是可以接受的。

Rei Breadcrumb Trail，显示网站的层次结构
REI.com:面包屑路径（1）显示在页面顶部的典型位置，就在全局导航栏的下方。轨迹显示当前页面在站点层次结构中的位置。每个项目在面包屑跟踪是一个链接到一个祖先页面;“>”字符分隔面包屑。在这个例子中，主页和当前页面在面包屑路径中被省略，这是不推荐的。

如果用户通过该页面的所有祖传页面从主页到达一个深入的页面，他们将有一个相当清楚的了解他们在网站信息层次结构中的位置。但是，当他们跳过一些这些级别时（例如，他们通过点击诸如搜索引擎结果等外部链接到达网站时），面向填充它们并帮助他们找到其他，可能更相关的页面。

深页通常在相对狭窄的特定主题上显示内容，但面包屑路径可以引导用户在当前页面的父节点和祖父节点中的更多常规内容。

在桌面上使用面包屑的指南

  1. 面包屑不应该取代全局导航栏或局部导航。

面包屑的目的补充其他导航组件，例如跨越每页顶部的全局导航栏或左侧通常在左侧发现的本地导航栏。面包屑增强但不要替换这些主要的导航形式。

不寻常的面包屑，包括下拉菜单
Travelsouthdakota.com会显示一个面包屑轨迹，也可以作为部分导航。与传统的面包屑路径(Home /Explore /Itineraries / Cultural Immersion)不同，面包屑路径包括一个一级条目(Explore)和父页面(Itineraries)。到父页面的链接是下拉式菜单，使用当前页面的兄弟页面(底部图片)。更好的设计是为本地导航提供一个独立的UI，这样用户就可以在网站当前部分的横向页面上浏览。
  1. 面包屑应在站点的层次结构中显示当前位置，而不是会话历史记录。

面包屑并不意图显示在网站上的会话期间遍历的页面历史（洛杉矶浏览器的本地人回来按钮）;它们旨在显示该网站的层次结构。多年来我们已经注意到了这一点，但它仍然是重复的;attempting to show a list of the pages a user has accessed, in order, will quickly become long and confusing, with a lot of repetition, and won’t provide any benefit for users who arrive on a deep page directly from an external link, which is one of the key uses of breadcrumbs.

  1. 对于多角形站点，面包屑应在网站的多主导体中显示单个途径。

面包屑构成了一种内在的张力多方形的站点(一个页面有多个父页面)。在这种情况下，我们不建议显示两个或多个面包屑路径来反映多层结构中的不同路径，因为它们会迷惑用户，并在页面顶部占用大量空间。

如果页面具有多个不同的父项，请在站点层次结构中标识其上的规范路径，并显示面包屑路径中的路径。不要尝试个性化面包屑轨迹，以便它将反映每个用户在站点层次结构中的各个路径，因为您将最终将混合信号发送到搜索引擎。您仍然需要将层次结构中的一个路径指定为来自外部链接的访问者的主路径。

  1. 将当前页面作为breadcrumb路径中的最后一项包含进来。
  2. 在面包屑路径中，对应于当前页面的面包屑不应是链接。

你永远不应该有一个没有任何作用的链接。最后的面包屑（表示当前页面）不应该是链接。为避免令人困惑的用户，可视地区分当前页面和前面的链接的面包屑项目，优选地使用带下划线或蓝色文本。

面包屑无联系和未链接物品之间的视觉差异
在英国红十字会网站上，没有视觉区别的面包屑是链接和紧急情况志愿者项，它(正确地)不是链接。
  1. 面包屑应该只包括网站页面，而不是IA中的逻辑类别。

面包屑路径中的每个节点应该是祖先页面的链接（如上所述，与当前页面对应的链接的重要例外）。如果全球导航中的一些子类别标签没有专用于它们的单独页面，则不在面包屑路径中包含这些子类别。

“点击-走”的能力是用户理解面包屑面包屑的关键部分，所以所有的项目(除了当前页面)都应该表示用户可以去的地方。

面包屑不包括来自导航的逻辑类别，这些类别不是他们自己的不同页面
newegg.com：全球导航Megamenu（Top）有子类别，没有自己的页面 - 例如，商业网络（ 1）。在有线网络页面（底部），面包屑小径（2）不包括商业网络，因为子类别没有关联页面。
  1. 面包屑不是必需的（或有用的）对于仅有1或2级的扁平层次结构，或在结构中线性的网站。

对于仅具有1或2个类别的平板层次结构的网站，不需要面包屑作为WayFinding设备。在这种情况下，考虑清楚地指示页面内存的顶级部分或类别。

网站具有平坦的层次结构，不需要面包屑
麻省理工学院的主要网站有一个平面层次结构，每个部分只有1个页面。虽然它在页面顶部的面包屑中，但不需要这种面包屑。在主导航中，突出显示页面的位置。

线性导航网站，无需面包屑
NPR有一个关于颜色历史的小网站，它被设计成一种线性的体验，在这里用户可以按顺序看到每个页面。该站点的结构是非分层的，因此没有必要(或价值)包含面包屑跟踪。
  1. 面包屑小径应以与主页的链接开始。

就像我们一样的指导方针对于全球导航，链接到主页（标记为首页)仍然是必要的。但是，请注意复制首页全球导航和面包屑路径中的链接是不推荐——两种都可以。

面包屑包括导航和面包屑中的家庭链接
俄勒冈州政府网站包括一个面包屑小径，但省略了与主页的链接。但是，在这种情况下，这是可接受的，因为该站点还包括全局导航中的主链接 - 复制主页链接不是必需的，但它确实需要在两个地方之一中显示。

在移动设备上使用面包屑的指南

不幸的是，在移动设备上，使用面包屑的成本很快就会超过其收益。

  1. 不要使用包裹到多行的面包屑。

在移动网站上，面包屑可以快速包裹在多条线上，并在已经拥挤的移动显示器上享有有价值的空间。多线面包屑轨迹没有说明链条的结构（特别是当某些物品占用自己的线路时，其他项目可能在单行中有两个或多个链接）

面包屑在移动站点上是如此之大，它推动折叠下方的页面标题
Rei.com的移动网站使用这么多的房地产为填充迹线推动产品名称折叠下方，即使在大型移动设备上（在这种情况下，iphone x）。
  1. 不要使用太小或太拥挤的面包屑。

一些网站试图通过使链接更小或更紧密来减少面包屑占用的屏幕空间。不幸的是，这个解决方案不能在触摸屏上工作:tap目标需要至少1厘米乘1厘米。

  1. 考虑缩短面包屑路径，仅包含最后一个级别。

在某些页面上，一个指向某个级别的面包屑可能就是支持主要用户目标所必需的一切。例如,在一个电子商务网站,如果用户土地产品详情页面上(例如,通过谷歌搜索),她可能希望看到其他产品选择在同一类别比较购物,所以面包屑链接到父层次的可以支持这种常见的任务。这种解决方案避免了冗长、拥挤的面包屑路径，从而吞噬了宝贵的移动地产。

请注意，此建议与指南＃8冲突，只能在移动设备上完成。在桌面上 - 在哪里有更多空间 - 始终显示完整的路径。

移动面包屑与桌面面包屑相比，手机只显示层次结构中的最后一层
bestbuy.com：移动网站（顶部）显示截断面包屑（1），允许访问直接父类别。桌面站点(底部)展示了完整的面包屑路径（2）。这种在移动设备上妥协支持了某种方式，但避免占用珍贵的房地产。

概要

面包屑是一种辅助导航形式，协助用户在分层结构附近进入附近的内容。当用户通过外部链接到达网站时，它们特别有用，并不与主页开始。确保面包屑路径中的所有项目都是链接，并且每个单个节点都会更具体地进入站点时。在手机上，面包屑可以占用太多空间或者很难挖掘;如果您的用户的任务允许它，请考虑缩短面包屑路径。