Morphing Breadcrumbs

Animated breadcrumbs where items slide in and out on level changes and the current level scales up

Clicking any level collapses everything after it (sliding out with blur via AnimatePresence), while the current level scales up slightly with a spring and a highlight pill sharing a layoutId "morphs" along to follow it; when the path gets too long, the middle folds into an ellipsis that can be clicked to expand — a good fit for file managers, document systems, and other deep navigation scenarios.

Loading preview…

npx shadcn@latest add https://webberui.com/r/morphing-breadcrumbs.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Max visible levelsmaxVisible

Separatorseparator

<MorphingBreadcrumbs />

Installation

npx shadcn@latest add https://webberui.com/r/morphing-breadcrumbs.json

Or, once registries are configured in components.json, install it as @webberui/morphing-breadcrumbs.

Usage

import { MorphingBreadcrumbs } from "@/components/ui/morphing-breadcrumbs";

<MorphingBreadcrumbs
  items={[
    { id: "home", label: "Home", icon: "🏠" },
    { id: "drive", label: "Drive" },
    { id: "projects", label: "Project files" },
    { id: "design", label: "Design v2" },
  ]}
  maxVisible={4}
  onNavigate={(item, index) => console.log(item.label, index)}
/>

Props

Prop	Type	Default	Description
`items`	`MorphingBreadcrumbItem[]`	—	The full hierarchical path, ordered from shallow to deep
`onNavigate`	`(item, index) => void`	—	Fires when navigating to a level
`maxVisible`	`number`	`4`	When the visible levels exceed this count, the middle folds into an ellipsis (minimum 3)
`separator`	`React.ReactNode`	`ChevronRight`	Custom separator between levels
`ariaLabel`	`string`	`"Breadcrumbs"`	Accessible name for the nav landmark
`className`	`string`	—	Forwarded to the outermost nav

MorphingBreadcrumbItem fields:

Field	Type	Description
`id`	`string`	Unique identifier, used as the list and animation key
`label`	`string`	The text shown for that level
`icon`	`React.ReactNode`	Optional leading icon (an emoji or any node)

Accessibility

The outermost element is a nav landmark with an aria-label, and the levels are presented as an ordered ol / li list
The current level is marked aria-current="page" and clicking it is a no-op, so navigation cannot be triggered by accident
The ellipsis button provides an aria-label (including the number of hidden levels), is keyboard focusable, and has a visible focus ring
When the user has "reduce motion" enabled at the system level, the slide in/out and scale-up animations become instant switches, keeping only the opacity change
Separators and decorative icons are all aria-hidden so they do not interfere with assistive technology