# Breadcrumb Path Editable — React Breadcrumb Component

> A file-explorer breadcrumb: click the bar and the crumbs turn into a typed path; Enter navigates, a path that does not exist shakes, Escape restores the crumbs.

- Category: [Breadcrumbs](https://pixelpapa.com/components/breadcrumbs.md)
- Tags: breadcrumb, path, input, file explorer, editable
- Dependencies: lucide-react, motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/breadcrumbs/breadcrumb-path-editable

## Install (PixelPapa Pro)

This is a Pro component. With a Pro or Scale plan and the `@pixelpapa` registry set up (https://pixelpapa.com/docs/installation#pro):

```bash
npx shadcn@latest add @pixelpapa/breadcrumb-path-editable
```

The file is written to `components/pixelpapa/breadcrumb-path-editable.tsx`. Source code is available to Pro members on https://pixelpapa.com/components/breadcrumbs/breadcrumb-path-editable.

## AI prompt

```text
Add the "Breadcrumb Path Editable" component from PixelPapa UI to this project.

What it is: A file-explorer breadcrumb: click the bar and the crumbs turn into a typed path; Enter navigates, a path that does not exist shakes, Escape restores the crumbs.
Category: Breadcrumbs. Depends on: lucide-react, motion.

1. Install it with the shadcn CLI. It is a PixelPapa Pro component, so components.json needs the "@pixelpapa" registry with my API key (https://pixelpapa.com/docs/installation#pro):
   npx shadcn@latest add @pixelpapa/breadcrumb-path-editable
   (If the CLI is unavailable, fetch https://pixelpapa.com/r/breadcrumb-path-editable.json with the header "Authorization: Bearer $PIXELPAPA_API_KEY", write files[0].content to components/pixelpapa/breadcrumb-path-editable.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/breadcrumb-path-editable" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More breadcrumbs

- [Breadcrumb Collapsed Dropdown](https://pixelpapa.com/components/breadcrumbs/breadcrumb-collapsed-dropdown.md): A breadcrumb that folds its middle levels into an ellipsis button; the menu springs open and lists the hidden levels as an indented staircase.
- [Breadcrumb Icons Chevrons](https://pixelpapa.com/components/breadcrumbs/breadcrumb-icons-chevrons.md): An icon breadcrumb that assembles itself on mount, each crumb sliding out from behind its chevron, with a hover highlight that glides between items.
- [Breadcrumb Steps Progress](https://pixelpapa.com/components/breadcrumbs/breadcrumb-steps-progress.md): A breadcrumb of interlocking arrow segments for linear flows: colour sweeps into the next arrow as you advance and finished steps swap their number for a check.