在童话般的汉塞尔和格雷特尔，两个孩子在树林里丢下面包屑，找到回家的路。如今，您可能没有经历太多的木落体验，但是我愿意打赌您在设计不佳的网站上感到迷失方向。
在Web设计中，BreadCrumb导航是向您的用户展示其位置以及如何到达那里的一种方式。像汉塞尔的面包屑一样，它可以帮助用户追溯自己的道路，并在您网站的更大计划中查看自己的位置。
What is breadcrumb navigation?
Breadcrumb navigation is a way for users to visualize their location on a website. It's a secondary navigation bar that typically appears as horizontal text links, separated by an angle bracket. Breadcrumb navigation improves the findability of your landing pages, and helps users reach higher-level pages faster if they initially found your site from search or a deep link.
虽然您可以造型面包屑，但它们倾向于在使用它们的网站上看起来相同。这很简单example of breadcrumbs from the HubSpot Knowledge Base:
Jakob Nielsen, co-founder of the acclaimed尼尔森·诺曼集团，曾经自1995年以来推荐面包屑导航, and makes a strong point for their usefulness and efficiency: "All that breadcrumbs do is make it easier for users to move around the site, assuming its content and overall structure make sense. That's sufficient contribution for something that takes up only one line in the design."
如果您的企业的网站是多层的，则可以考虑实施面包屑导航使您的网站更容易导航。但是，像任何设计元素一样，有一种对与错的方法。在这里，我们将探讨九个技巧和示例，以确保您为用户创建最有效的面包屑导航。
Breadcrumb Navigation Tips and Examples
1.仅在您网站的结构有意义的情况下使用面包屑导航。
BreadCrumb Navigation具有线性结构，因此您仅在网站的层次结构有意义时才想使用它。如果您的较低级别的页面可从不同的着陆页访问，则使用面包屑导航只会使读者感到困惑，这些读者继续从不同的起点访问相同的页面。此外，如果您的网站相对简单，只有几页，则可能不需要BreadCrumb导航。
2.不要使面包屑导航太大。
Your breadcrumb navigation is a secondary tool to your primary navigation bar, so it shouldn't be too large or prominent on the page. For instance, onDHL'swebsite, their primary navigation bar is large and recognizable, with columns like "Express" "Parcel & eCommerce" "Logistics", etc. Their breadcrumb navigation is the smaller section below that reads, "DHL Global | > Logistics | > Freight Transportation". You don't want your users to mistake your breadcrumb navigation as the primary navigation bar.
3. Include the full navigational path in your breadcrumb navigation.
I Googled "Elon University Non-Degree Students" to reach this landing page, but埃隆很明智地包括完整的导航路径，包括“家庭”和“招生”。如果您忽略了某些级别，您会感到困惑，而面包屑路径不会那么有用。即使用户没有在主页上开始，您也想为他们提供一种简单的方法来从一开始就探索您的网站。
4. Progress from highest level to lowest.
您的面包屑导航读取至右读，最接近左侧的链接是您的主页，而最接近右侧的链接是用户的当前页面。尼尔森·诺曼（Nielsen Norman Group）的研究found users spend 80% of their time viewing the left half of a page and 20% viewing the right half, making a strong case for left-to-right design. Plus, the link closest to the left will appear as the beginning of the chain, so you want it to be your highest-level page.
5.保持面包屑标题与您的页面标题一致。
To avoid confusion, you'll want to remain consistent with your page and breadcrumb titles, particularly if you're targeting certain keywords in those titles. You also want to clearly link your breadcrumb titles to the page. If the breadcrumb title doesn't have a link, make it clear.雀巢有效地标记其面包屑标题以匹配页面标题。例如，“影响力和承诺领域”在面包屑导航中与页面上的读物相同。
雀巢还做得很好，将链接与具有不同颜色的非链接区分开来 - 链接是蓝色的，而非链接仍然是灰色的。
6. Get creative with design.
传统的面包屑导航看起来像这样：关于我们的主页>职业。但是，如果您觉得不同的设计可以更吸引您的受众，或者在您的网站上看起来更好，则无需遵循传统的道路。
例如，目标在其产品页面中使用面包屑导航（因为谁不会在虚拟鞋部分中迷失？），而是使用“/”符号和简单的黑色和灰色文字。在这种情况下，微妙的设计变化对于他们网站的美学是有意义的。
7.保持清洁和整洁。
您的面包屑导航只是对用户的帮助，除非用户正在寻找它，否则理想情况下不应该注意。因此，您不想用不必要的文本混乱面包屑导航。
Eionet, for instance, could do without their "You are here" text. While meant to be helpful, the text clutters the page. With the right design, a breadcrumb navigation should be noticeable enough without an introduction.
8.考虑哪种类型的面包屑导航对您的网站最有意义。
There are a few different types of breadcrumbs you might use -- location-based, attribute-based, and history-based. Location-based breadcrumbs show the user where they are in the site's hierarchy. Attribute-based breadcrumbs show users which category their page falls into. Finally, history-based breadcrumbs show users the specific path they took to arrive at the current page.
Bed Bath & Beyond使用基于属性的面包屑导航来向用户显示其产品页面属于哪些类别的用户，因此用户可以单击“厨房”或“小型设备”以仔细阅读类似物品。这种类型的面包屑导航对床浴和超越客户最有效。当您创建面包屑导航时，请考虑对网站访问者最有用的东西。
9. Know your audience.
面包屑导航中的最佳实践敦促网络设计人员将导航放置在页面顶部 - 但是苹果, one of the最有价值的公司有史以来，通过将面包屑导航放在其站点的底部来违反这种逻辑。最终，您了解听众至关重要。苹果的客户通常是精通技术的，如果需要的话，他们可能会找到导航。考虑您的客户的需求，如果不确定，请实施A/B测试。
Breadcrumb Navigation in HTML and CSS
面包屑不仅有用 - 它们也很容易使用一些HTML和CSS代码添加到您的网站上。
Let’s start with the HTML, which we’ll use to make the links themselves. The easiest way to do this is to organize your links in an unordered list (）元素，每个列表项目（）包含面包屑系列中的链接，直到最终项目表示当前页面。
Here’s an HTML template for breadcrumbs that you can use:
请注意，我还如何将无序列表包装在HTML中(navigation) element, and added a class and an咏叹调标签达到开场标签。这是可选的，但有帮助使您的页面更容易访问屏幕阅读器和搜索引擎。
当然，仅此HTML还不够 - 现在，我们只有一个链接列表。通过添加CSS，我们可以实现所需的面包屑外观。将以下CSS应用于上述HTML：
ul {list-style：none;} / *删除子弹点 * /
ul li { display: inline; } /* show list items horizontally */
/* Put an angle bracket (>) between list items */
ul li+li：{
content: ">";
padding: 10px;
}
ul li a {文本 - 任务：无；} / *从链接中删除下划线 * /
ul li a：悬停{文本 - 编写：下划线；} / *在鼠标上显示下划线 * /
该代码共同生成一个可以在任何站点上使用的基本面包屑导航区域，请参见下面的最终结果。我还添加了一些其他样式，以使外观更干净。要查看面包屑的外观，没有这种样式，评论CSS选项卡底部的代码。
See the PenBreadcrumbs in HTML and CSSby Christina Perricone (@hubspot） 在CodePen。
Breadcrumb Navigation in Bootstrap CSS
Bootstrap CSS还提供了一种创建没有ne面包屑eding to add custom CSS. To do this, use the Breadcrumb component like so. Here’s an example from the Bootstrap 5 documentation:
See the PenBreadcrumbs in Bootstrap CSSby Christina Perricone (@hubspot） 在CodePen。
这只是Bootstrap中面包屑导航的基础知识 -查看Bootstrap BreadCrumb文档学习所有细节。
设计以帮助用户导航您的网站
最终，面包屑导航是使您的网站更易于导航的有效工具，但是您想遵循设计最佳实践，以确保您利用该工具的帮助。有关其他UX建议，请查看我们的UX设计的终极指南。
编者注：该帖子最初于2018年9月发表，并已更新以进行全面性。
最初出版于2021年6月17日7:00：00 AM，更新于2021年6月17日
Topics:
用户体验相关文章
![The Beginner’s Guide to Usability Testing [+ Sample Questions]](http://www.eigoj.com/hubfs/usability-testing.jpg)
