Breadcrumbs

Breadcrumb is a valuable secondary navigation that shows users their current location and the path from the home page to where they are. It consists of a list of links representing the current page and its parent pages, going all the way back to the site homepage. 

Breadcrumb component makes wayfinding in a web space easier. It helps users move back up to higher levels in the hierarchy of a site without as many clicks, and especially useful when users arrive to the site through an external link and don’t start with the homepage.

Breadcrumb is most useful in a large site with a deep hierarchy, and is unnecessary (or useful) for sites with flat hierarchies that are only 1 or 2 levels deep.

A breadcrumb trail displays user's current location and a trail of pages which they have arrived through. The links in the breadcrumb trail should be composed of the organizational hierarchy of the site that leads to the page or the list of pages the user took to get the page.

The breadcrumb trail should fit onto one line, no matter the length. If the breadcrumb trail becomes wider than the screen, the trail will get scrolled to the right so the current page is always in view. A subtle faded overlay will appear on the left edge to indicate that the area can be scrolled to the left.

Place breadcrumbs at the top of the page, just below the main (global) navigation:

• use ">" between link trails, with homepage being the first item on the left and user's current location the last
• boldface the last item as visual clue of the user's current location 

On mobile, breadcrumb can take up too much space which can defeat the purpose of clear trail finding; scaled down typography and UI can also make it hard to tap. Consider shortening the breadcrumb trail if the users’ tasks allow it.