Breadcrumbs
Last updated: September 11, 2015 at 20:33 pm

The series of links at the top of a page showing a navigational hierarchy of the user's current location on your site.


Visual example of the element:


What problem does this element or pattern solve?
In a website with a large multi-level organizational system, breadcrumbs allow a user to see where they are in the context of the whole site, and navigate easily to a higher level or previously viewed category page.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:


Detailed specifications

Specifications To Consider

  • If you need both navigation and search attribute breadcrumbs, consider the pros and cons of defining these two separate standards using different names. It may not advisable to have two unrelated functions sharing a name simply due to their similar visual styling.
  • If you use both types, establishing consistent locations to help differentiate these functions becomes important. Navigation breadcrumbs should be closer to the page title, while attribute breadcrumbs should be near your content.
  • Will the two types of breadcrumbs have different visual styling?
  • Consider the visual dividers for your breadcrumbs. Navigation breadcrumbs frequently use an “>” symbol, while attribute breadcrumbs often use a colon or other non-directional symbol.
  • Will your attribute breadcrumbs include a delete controller? Or will the user always be required to add or delete search criteria using traditional filtering controls?


Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository


Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
breadcrumb trail, hierarchy, cookie crumbs, navigation path
Related elements within this Style Framework:

Not Applicable (Remember: no field should be blank!)



Owners and governance
UX or design 0wner
John Designowner
Email: design.owner@yourcompany.com
Business or marketing owner
Mary Businessowner
Email: business.owner@yourcompany.com
Development owner
Mike Devowner
Email: development.owner@yourcompany.com


Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)


Comments & Questions

Leave a Reply