Animated breadcrumbs

svelte-crumbs is headless — it gives you a reactive crumbs array and leaves rendering entirely up to you. Below is a suggested approach for rendering breadcrumbs with smooth transitions using Svelte's built-in crossfade, fly, and flip. This is exactly what powers the breadcrumb bar in this demo site — toggle "Animate breadcrumbs" in the sidebar to see it in action.

Full example

The key idea is to render crumbs in a CSS grid (one column per crumb) so that Svelte's flip animation can smoothly reposition crumbs that stay visible, while crossfade pairs entering and leaving crumbs. A staggered fly fallback handles crumbs that have no matching counterpart.

How it works

• Grid layout — each crumb is pinned to a grid column, so flip can animate position changes when crumbs are added or removed.
• Crossfade — when a crumb exists in both the old and new trail, crossfade morphs it in place. For crumbs without a match, the fallback fly transition kicks in.
• Staggered timing — outgoing crumbs fly out with a reverse stagger (last crumb first), then incoming crumbs fly in sequentially. This creates a smooth cascading effect.
• SSR safe — the mounted guard ensures transitions only run client-side.