# 4 React Breadcrumb Components for Tailwind CSS

> Wayfinding for deep apps: breadcrumbs that collapse into a menu, icon chevrons, file-explorer style editable paths and step-progress breadcrumbs.

3 of 4 free (the rest with PixelPapa Pro), built with Tailwind CSS and Motion, installable with the shadcn CLI.

- [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 Path Editable](https://pixelpapa.com/components/breadcrumbs/breadcrumb-path-editable.md) (Pro): 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.
- [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.