Breadcrumb

A breadcrumb displays the user’s current location within a sequence of pages and enables them to navigate backwards through it.

Overview

The purpose of breadcrumbs is to provide users with a clear and intuitive way to understand their location within a website or application's hierarchy and navigate back to higher-level pages. They enhance the user experience by offering contextual awareness and simplifying navigation, especially within complex or deeply nested structures.

Breadcrumbs serve a wide range of purposes in user interfaces, such as allowing users to retrace their steps, quickly access parent pages, and reduce the need for extensive scrolling or menu navigation. They improve efficiency and help users maintain their sense of orientation within the overall structure.

A breadcrumb navigation showing a hierarchical path with Home, SGG, and John's Pizza links.

Resources

Figma Web Component	Stable
Figma Web Documentation	Stable
Figma App Component	N/A
Web Components	Beta
Vue [Fozzie]	Stable
React [Snacks]	Stable
iOS JustUI [UI Kit]	N/A
iOS PIE [SwiftUI]	N/A
Android PIE [Compose & Views]	TBC