Breadcrumbs are an important navigational element that supportswayfinding- 让用户了解其当前位置的网站的分层结构。面包屑是代表当前页面及其“祖先”(父页,祖父母页等)的链接列表,通常一直返回网站主页。nn / g一直推荐面包屑1995年,因为它们对UI几乎没有成本为用户提供了许多好处。


Rei Breadcrumb Trail,显示网站的层次结构 A breadcrumb trail(1)is displayed in its typical location at the top of the page, just below the global navigation bar. The trail shows the location of the current page within the hierarchy of the site. Each item in the breadcrumb trail is a link to an ancestor page; the “>” character separates the breadcrumbs. In this example, the home page and current page are omitted from the breadcrumb trail, which is not recommended.




  1. Breadcrumbs should not replace the global navigation bar or the local navigation within a section.

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

不寻常的面包屑,包括下拉菜单 displays a breadcrumb trail that also serves as section navigation. Instead of a traditional breadcrumb trail (which would be: Home /Explore /Itineraries / Cultural Immersion), the breadcrumb trail includes a tier-1 item (Explore) and the parent page (Itineraries). The link to the parent page is a下拉式菜单那with the current page’s siblings (bottom image). A better design would have a separate UI for the local navigation, to enable users to travel to lateral pages in the current section of the site.
  1. 面包屑应在站点的层次结构中显示当前位置,而不是会话历史记录。

面包屑并不意图显示在网站上的会话期间遍历的页面历史(洛杉矶浏览器的本地人Back按钮);它们旨在显示该网站的层次结构。多年来我们已经注意到了这一点,但它仍然是重复的;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. 对于多角形站点,面包屑应在网站的多主导体中显示单个途径。

Breadcrumbs pose an inherent tension with多方形的sites (in which a page has more than one parent). In such situations, we do not recommend showing two or more breadcrumb trails reflecting the different paths in the polyhierarchy, because they will confuse users and take a lot of space at the top of the page.


  1. Include the current page as the last item in the breadcrumb trail.
  2. 在面包屑路径中,对应于当前页面的面包屑不应是链接。


On the British Red Cross site, there is no visual differentiation between the breadcrumbs that are links and the紧急情况志愿者item, which is (correctly) not a link.
  1. Breadcrumbs should include only site pages, not logical categories in your IA.


The ability to “click-and-go” is a crucial part of users’ understanding of breadcrumbs, so all items (except the current page) should represent a place the user can go to.

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



NPR features a minisite about the history of color, which is designed as a linear experience, where users will encounter each page in order. This site’s structure is nonhierarchical, and so there is no need (or value) in including a breadcrumb trail.
  1. 面包屑小径应以与主页的链接开始

就像我们一样guidelines对于全球导航,链接到主页(标记为Home) are still necessary. However, note that duplicating theHome全球导航和面包屑路径中的链接是notrecommended — one or the other is fine.

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


Unfortunately, on mobile, the cost of using breadcrumbs can quickly overwhelm the benefits.

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


Rei.com的移动网站使用这么多的房地产为填充迹线推动产品名称折叠下方,即使在大型移动设备上(在这种情况下,iphone x)。
  1. 不要使用太小或太拥挤的面包屑。

Some sites attempt to get breadcrumbs take less screen space by making the links smaller or closer together. Unfortunately, this solution doesn’t work on touchscreens:tap targets need to be at least 1 cm X 1 cm

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

On some pages, a single breadcrumb pointing up a level may be all that is necessary to support the main user goals. For example, on an ecommerce site, if a user lands on a product-detail page (via a Google search, for example), she may wish to see other product options in that same category to comparison shop, so a breadcrumb linking up to the parent level in the hierarchy can support this common task. This solution avoids a long, crowded breadcrumb trail that eats up precious mobile real estate.

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

移动面包屑与桌面面包屑相比,手机只显示层次结构中的最后一层移动网站(顶部)显示截断面包屑(1)那allowing access up to the immediate parent category. The desktop site (bottom) presented the full breadcrumb trail(2)。这种在移动设备上妥协支持了某种方式,但避免占用珍贵的房地产。