TL;DR
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 apps 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 go 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 multiple types of breadcrumbs:
- Breadcrumbs that provides 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 type of websites:
- Large websites with hierarchically arranged pages (such as public service websites)
- E-commerce websites, to easily locate the products based on categories
- Educational websites or sites that require a lot of procedures and documentation published (such as universities)
