Navigation trails in multi-level dashboards, admin panels, and content hierarchies break down across screen sizes. Hardcoded breadcrumb DOM drifts between pages, sacrifices mobile UX to show every ancestor, and forces developers to manually repeat the trail in separate mobile/desktop views. Without a composed component, breadcrumbs become maintenance debt — class-soup for colors, gaps, separators — and a pain point for agents that can't reliably locate or mutate the trail.

Breadcrumbs is a responsive compound component that renders a desktop trail or mobile dropdown depending on viewport. Compose it with named subcomponents: <Breadcrumbs> root (accepts separator and shrink for overflow), paired with <Breadcrumbs.Item> (accepts href for links and active to mark the current page). Each item carries a stable data-react-fancy-breadcrumbs-item="" handle for agent inspection. The mobile dropdown extracts the active label and all item hrefs automatically; shrink mode collapses the desktop trail to a “...” button + last item, expanding on hover or mouse-enter.

Import from @particle-academy/react-fancy and nest <Breadcrumbs.Item> children inside <Breadcrumbs>: <Breadcrumbs shrink><Breadcrumbs.Item href="/">Home</Breadcrumbs.Item><Breadcrumbs.Item href="/settings">Settings</Breadcrumbs.Item><Breadcrumbs.Item active>Profile</Breadcrumbs.Item></Breadcrumbs>. The trail automatically switches to a dropdown on mobile (<md breakpoint), and agents can read stable item handles to traverse or monitor the current path.