A breadcrumb is a navigational aid used in user interfaces to show the user’s current location within a website or application and provide a clickable path back to previous pages or levels of the hierarchy. Breadcrumbs are typically displayed horizontally at the top of a page or below the header.
The term “breadcrumb” is derived from the Hansel and Gretel fairy tale, where breadcrumbs were used to mark a trail through the forest. In web design, breadcrumbs serve a similar purpose by helping users understand their current location within a website and providing a way to navigate back to higher-level pages or categories.
Examples:
- Home > Category > Subcategory > Page: This is a common breadcrumb trail format, where each part of the path is a clickable link.
- Home / Category / Subcategory / Page: Another format for displaying breadcrumbs, using slashes instead of arrows to separate the elements.
Use Case: A user browsing an e-commerce website clicks on a product category from the homepage, then navigates to a subcategory and finally to a specific product page. The breadcrumb trail at the top of the product page shows the user’s path back to the homepage, allowing them to easily navigate back to previous levels of the category hierarchy.