Morphing Breadcrumbs: Free React + Tailwind Component

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add morphing-breadcrumbs.en

New project or installation trouble? Start here →

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

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<MorphingBreadcrumbs/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/morphing-breadcrumbs.en.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

Morphing Breadcrumbs