Breadcrumb
Displays the path to the current resource using a hierarchy of links.
Last updated: March 15, 2026
This page now includes multiple breadcrumb patterns for docs, dashboards, ecommerce flows, file paths, and compact navigation treatments.
Default Breadcrumb
The standard linked hierarchy with a current page label.
Home Icon Breadcrumb
Adds a leading home icon to improve the first navigation landmark.
Slash Separator Breadcrumb
Uses slash separators for docs and file-style paths.
Arrow Separator Breadcrumb
A stronger directional separator for dashboard-style navigation.
Dot Separator Breadcrumb
Lightweight punctuation-style separators for editorial paths.
Text Separator Breadcrumb
Replaces icons with connective text for a more narrative path.
Collapsed Breadcrumb
Collapses middle segments when the path gets too long.
Icons Breadcrumb
Adds icons to every segment for product or dashboard navigation.
File Path Breadcrumb
Monospace breadcrumb treatment for repository and file system paths.
Ecommerce Breadcrumb
A category trail for storefront and catalog pages.
Bold Page Breadcrumb
Emphasizes the active page with stronger typography.
Large Breadcrumb
Heading-scale breadcrumb for hero sections and page headers.
Pill Breadcrumb
Renders the breadcrumb as chips for compact settings flows.
Underline Active Breadcrumb
Highlights the final segment using underline styling.
Background Breadcrumb
Places the trail inside a muted container bar.
Icon Home Breadcrumb
Uses an icon-only home entry to save horizontal space.
Settings Breadcrumb
A settings and account path with contextual icons.
Docs Path Breadcrumb
Docs and API trail with slash separators and collapsed middle content.
Deep Nested Breadcrumb
Supports long archival paths with ellipsis compression.
Bordered Card Breadcrumb
Card-like segmented navigation with dividers and surface styling.