Like the trail of breadcrumbs left by Hansel and Gretel so they wouldn\u2019t get lost in the woods, UI breadcrumbs are a navigational tool that website and app users might get lost without!\u00a0<\/span><\/p>\n So what are the different varieties of UI breadcrumbs, and when should they be used or avoided?\u00a0<\/span><\/p>\n This article will give you the full lowdown on best practices for breadcrumbs and demonstrate their use in a selection of inspirational examples.\u00a0<\/span><\/p>\n To jump ahead to a certain section, you can use this clickable menu:<\/span><\/p>\n UI breadcrumbs are a standard wayfinding device that enables users to easily navigate their way between different sections within the hierarchical structure of a user interface<\/a> or website.\u00a0<\/span><\/p>\n These breadcrumbs often appear as a family tree of links, which indicate the current page, and its ancestors (the page that came before it, the one before that, and so on).\u00a0<\/span><\/p>\n A link to the home page should appear as the root node in this chain, with the subsequent pages separated by a symbol, such as \u201c\/\u201d or \u201c>\u201d. This breadcrumb trail usually sits just under the website\u2019s global navigation, or main menu.<\/span><\/p>\n UI breadcrumbs can be split into three categories.\u00a0<\/span><\/p>\n Location-based breadcrumbs highlight the user\u2019s location within an interface or website\u2019s page hierarchy. These breadcrumbs are particularly useful for aiding wayfinding in large systems containing multiple levels.<\/span><\/p>\n A typical location-based breadcrumb trail would be shown as:<\/span><\/p>\n Home page > Section page > Subsection page<\/b><\/p>\n Attribute-based breadcrumbs help users orient themselves by indicating information that categorizes the current page. <\/span><\/p>\n This type of breadcrumb trail is common in online marketplaces, as the resulting \u201cattribute tree\u201d is particularly handy in narrowing down features and qualities of products when shopping for items.\u00a0<\/span><\/p>\n Here\u2019s a typical example of attribute-based breadcrumbs, seen when hunting for sweatshirts on Depop.\u00a0<\/span><\/p>\n Source: Depop<\/span><\/a><\/em><\/p>\n Pathway-based breadcrumbs show every step the user has taken to arrive at the current page. These breadcrumbs are dynamically-generated, as they show the user\u2019s unique history while they navigate their way through the UI.\u00a0<\/span><\/p>\n In this sense, pathway-based breadcrumbs can be used as a <\/span>back<\/span><\/i> or <\/span>undo<\/span><\/i> feature, allowing the user to jump between sections of a site without fear of getting lost.\u00a0<\/span><\/p>\n They are, however, of questionable use\u2014as most users browse wildly, creating a meandering and confusing path.\u00a0 They are also invalid for users who are dropped into a deep recess of the UI from an outside source.<\/span><\/p>\n UI breadcrumbs are most useful in large, multi-leveled hierarchical sites or systems, where users are at risk of losing their way after a series of twists and turns. By this token, breadcrumbs are not needed on single-page sites, or interfaces with no logical grouping or hierarchy.\u00a0<\/span><\/p>\n UI breadcrumbs should never replace the UI\u2019s global navigation system or the local wayfinding bar within a site section. They should be deployed as a supplementary navigational component, which augments the traditional menu that usually appears at the top left of every site, without making it obsolete.\u00a0\u00a0<\/span><\/p>\n One school of thought says that breadcrumbs should not show multiple pathways in the architecture of a polyhierarchical website (one where multiple \u201cparent\u201d pages link to a single page).\u00a0<\/span><\/p>\n This is because illustrating more than one pathway risks cluttering the top of the page, and confusing users.\u00a0<\/span><\/p>\n That said, marketplaces dealing with products that don\u2019t easily fit into one genre may find it difficult to allocate a primary trail to certain items (skip to example four for more on this).<\/span><\/p>\n Creating breadcrumbs for mobile UIs can quickly become more hassle than it\u2019s worth.\u00a0<\/span><\/p>\n On smaller screens, long breadcrumb trails run the risk of wrapping to multiple lines\u2014consuming valuable real estate on a small, already crowded page.\u00a0<\/span><\/p>\n Line breaks in a breadcrumb chain can also paint a confusing picture, or inadvertently misrepresent the architecture of a site.\u00a0<\/span><\/p>\n The usual tactic of making breadcrumbs small and unobtrusive becomes problematic on mobile, as the trail may become hard to read and manipulate. Shortening the trail to just one crumb, which points up a level to the preceding ancestor page, can provide a solution for this.\u00a0\u00a0<\/span>\u00a0<\/span><\/p>\n Breadcrumbs tend to work best when the font size is significantly smaller than that of the surrounding text, so the trail doesn\u2019t become obtrusive.\u00a0<\/span><\/p>\n As touched on earlier, each crumb is usually separated by a symbol. These dividers often appear as a \u201c\/\u201d or a \u201c>\u201d, but less common symbols function in much the same way. This is more of an aesthetic decision.<\/span><\/p>\n Each crumb should be a link, apart from the crumb relating to the current page. A link that goes nowhere is of no use to anybody. To save users from any wasted effort, some kind of emphasis\u2014through underlining or color\u2014can highlight the fact that the \u201ccurrent page\u201d crumb isn\u2019t worth clicking on.<\/span><\/p>\n Contemporary UI breadcrumbs are no longer exclusively present as a chain of links. Below are some examples of innovative, inspirational breadcrumbs.<\/span><\/p>\n UK news giant <\/span>The Guardian<\/span><\/i> offers a sleek breadcrumb design that evokes the feeling of reading a broadsheet newspaper. Rather than acting like a trail of yarn in a labyrinth, these breadcrumbs display the site\u2019s page hierarchy\u2014not the user\u2019s journey through it.<\/span><\/p>\n Breadcrumb convention is politely ignored, as the current page (emphasized in bold) sits in place among its siblings, rather than at the end of the list. This suggests an index or list of contents.<\/span><\/p>\n Source: The Guardian<\/span><\/a><\/em><\/p>\n As you can see here, Adidas have incorporated a \u201cback\u201d breadcrumb at the beginning of the trail, allowing users to easily retrace their steps. This creates an unusual hybrid of attribute and pathway-based breadcrumbs.\u00a0<\/span><\/p>\n Source: Adidas<\/span><\/a><\/em><\/p>\n A classic example of location-based breadcrumbs is Microsoft\u2019s \u201cBreadcrumb Bar\u201d, an essential tool for navigating the various iterations of Windows, and in many ways the inspiration for most modern breadcrumbs.\u00a0<\/span><\/p>\n Source: Microsoft<\/span><\/a><\/em><\/p>\n Going against standard breadcrumb wisdom, Waterstones have decided to show all possible paths leading to this classic novel. The result\u2014for better or worse\u2014is three stacked trails of attribute-based breadcrumbs.\u00a0<\/span><\/p>\n Source: Waterstones<\/span><\/a><\/em><\/p>\n While potentially overwhelming, this multi-layered approach can provide detailed guidance for navigating UIs that contain numerous, overlapping categories.<\/span><\/p>\n UI breadcrumbs are a supplementary form of navigation that helps users reach pages within the structure of an interface. They can be particularly useful in aiding navigation within multi-layered, hierarchical sites\u2014but are pointless on single-level web pages.<\/span><\/p>\n Typically, each node in the trail links to a relevant page, with the crumbs becoming more specific as the user drills down into the site. The three types of breadcrumbs\u2014location, attribute, and path-based\u2014make different pathways through the UI\u2019s architecture available to the user.<\/span><\/p>\n While breadcrumbs have become incredibly commonplace, they are not always necessary and can clutter a page while performing the same role as an existing menu. Also, in the age of heavy mobile use, long breadcrumb trails of tiny text are not the most user-friendly tool.\u00a0<\/span><\/p>\n If you want to learn more about UI, try our free UI short course<\/a>.<\/p>\n And if you found this article interesting, you’ll likely enjoy these:<\/p>\n Wondering how UI designers ensure web and app users never get lost down a rabbit hole? Get the lowdown on the UI designer’s compass, UI breadcrumbs, in this article. <\/p>\n","protected":false},"author":148,"featured_media":21260,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[4],"tags":[],"class_list":["post-21163","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui-design"],"acf":{"homepage_category_featured":false},"modified_by":"John Sch\u00e4rges","_links":{"self":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/21163","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/users\/148"}],"replies":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/comments?post=21163"}],"version-history":[{"count":2,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/21163\/revisions"}],"predecessor-version":[{"id":26595,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/21163\/revisions\/26595"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/media\/21260"}],"wp:attachment":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/media?parent=21163"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/categories?post=21163"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/tags?post=21163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
\n
\n
1. What are UI breadcrumbs?<\/h2>\n
2. Types of UI breadcrumbs<\/h2>\n
Location-based <\/span><\/h3>\n
Attribute-based <\/span><\/h3>\n
![\"attribute-based](\"http:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2022\/12\/attribute-based-ui.jpg\" "\\"\\"")
<\/p>\nPathway-based <\/span><\/h3>\n
3. Best practice for UI breadcrumbs<\/h2>\n
When are UI breadcrumbs needed?<\/span><\/h3>\n
Breadcrumbs and polyhierarchical sites<\/span><\/h3>\n
Breadcrumbs on mobile<\/span><\/h3>\n
Breadcrumb formatting<\/span><\/h3>\n
4. Four inspirational examples of UI breadcrumbs<\/h2>\n
The Guardian <\/span><\/h3>\n
![\"guardian](\"http:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2022\/12\/the-guardian.jpg\" "\\"\\"")
<\/p>\nAdidas<\/span><\/h3>\n
![\"adidas](\"http:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2022\/12\/adidas.jpg\" "\\"\\"")
<\/p>\nMicrosoft Windows<\/span><\/h3>\n
![\"microsoft](\"http:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2022\/12\/managenugetpackages.png\" "\\"\\"")
<\/p>\nWaterstones<\/span><\/h3>\n
![\"waterstones](\"http:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2022\/12\/waterstones.jpg\" "\\"\\"")
<\/p>\n5. Final thoughts<\/h2>\n
\n