Breadcrumb Navigation (Breadcrumb Trail)

What are breadcrumbs in the context of internet?

Breadcrumb navigation refers to the visual element placed on the website or application to see the exact link or document trail. Here's an example: My computer > Desktop > Folder name 1 > Folder name 2 > Document or "Landing Page > Product Overview > Product Detail A".

What is breadcrumb navigation?

A breadcrumb (or breadcrumb trail) represents the graphic element used to provide the exact link trail of the user's location on the site (E.g., yourwebsite.com > home > blog > blog-post-name). This helps website visitors or some app users keep track of their locations within programs, documents, or pages within sites - pretty much like the trail of bread crumbs left by Hansel and Gretel in the German fairy tale in order to get back home - hence the name of the term as well.

Why is breadcrumb navigation essential for a website?

If a website has multiple pages or elaborate architecture, breadcrumb navigation improves user experience and the findability of the site's pages. 

    People can easily browse back to certain pages or categories, and it gives more context in terms of information, as the location of the visitor in the site's hierarchy is visible. 
    There are multiple types of breadcrumbs:

    • Breadcrumbs that provide the exact location on the site, the hierarchical structure, and a trail for the user to follow back to the starting or entry point: Home page > Blog > Blog post or Homepage > Books > Literature & Fiction > Classics
    • Breadcrumbs based on viewing history: Homepage > Viewed Page 1 > Viewed Page 2 > Viewed Page 3 > Viewed page 1 > Homepage. For instance, in this scenario, a website visitor visits 6 pages: Home page > Pricing > About Us > Home page > Reviews > Home page 

    You can use breadcrumb navigation for the following types of websites:

    • Large websites with hierarchically arranged pages (such as public service websites)
    • E-commerce websites, to easily locate products based on categories
    • Educational websites or sites that require a lot of procedures and published documentation (such as universities)
    up-arrow.svg