Breadcrumb with project, user and document info
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: Two line levels pairing an avatar or tinted file tile with a name above a muted email or file name
When to use
- Location trails on docs, store and admin pages that link back up to each parent level
- Workspace, team and file paths whose levels carry avatars, icons, count badges or button styling
- Deep hierarchies whose middle levels collapse into an ellipsis or a dropdown menu
When not to use
- A whole top header that pairs the trail with tabs, search, switchers and account menus: use the Navbar blocks
- A full product layout of side navigation, header and content around the trail: use the App Shell blocks
- A divider line between page sections or groups of toolbar controls: use the Separator component
Agent notes
- The first
BreadcrumbLinkholds only anAvatarwith no text, so it has no reliable accessible name; add an sr-only label - Swap the github.com
AvatarImagesources and the sample name, email and agents.md file for real records BreadcrumbLinktakes a router link throughrenderon the base twin andasChildon the radix twin- Every level is hard coded and each
hrefis a hash placeholder; build theBreadcrumbItemlist from your route tree
https://reui.io/components/breadcrumb/c-breadcrumb-15.mdget_example("c-breadcrumb-15")npx shadcn@latest add @reui/c-breadcrumb-15Shadcn Components in Breadcrumb Project & Document
About Shadcn Breadcrumb Project & Document
Breadcrumb with project, user and document info. Built by composing Avatar, Breadcrumb, Frame. A free, open source shadcn breadcrumb example you can install with npx shadcn@latest add @reui/c-breadcrumb-15 and edit as your own code.
What You Can Build With Shadcn Breadcrumb Project & Document
- Composes Avatar, Breadcrumb, Frame, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-breadcrumb-15
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Breadcrumb Examples
- Basic Basic breadcrumb
- Dropdown Menu Breadcrumb with dropdown menu
- Router Link Breadcrumb with Next.js link
- Slash Separator Breadcrumb with a custom slash separator
- Item Icons Breadcrumb with icons for each item
- Static Ellipsis Breadcrumb with ellipsis for long paths
- Avatars Breadcrumb items with avatars
- Double Chevron Breadcrumb with double chevron separators
- In Card Breadcrumb inside card
- Pill In Frame Pill-style breadcrumb inside frame
- Count Badge Breadcrumb items containing badge with count
- Home Icon Button Breadcrumb starting with home icon item
Related Shadcn Component Categories
Open-source shadcn bubble components for chat threads, assistant replies, and message reactions.
Open-source shadcn button components for primary actions, form submissions, and toolbar controls.
Open-source shadcn button group components for segmented controls, toolbar actions, and view switchers.
Open-source shadcn calendar components for date picking, scheduling flows, and booking interfaces.
Open-source shadcn card components for content previews, dashboard widgets, and product summaries.
Open-source shadcn carousel components for image galleries, feature showcases, and testimonials.
Frequently Asked Questions
When should I use Shadcn Breadcrumb Project & Document?
Use it for two line levels pairing an avatar or tinted file tile with a name above a muted email or file name.
Shadcn Breadcrumb as a whole fits:
- Location trails on docs, store and admin pages that link back up to each parent level
- Workspace, team and file paths whose levels carry avatars, icons, count badges or button styling
- Deep hierarchies whose middle levels collapse into an ellipsis or a dropdown menu
For a whole top header that pairs the trail with tabs, search, switchers and account menus, use the Navbar blocks. For a full product layout of side navigation, header and content around the trail, use the App Shell blocks. For a divider line between page sections or groups of toolbar controls, use the Separator component.
How do I install Shadcn Breadcrumb Project & Document?
Is Shadcn Breadcrumb Project & Document free to use?
Which components does Shadcn Breadcrumb Project & Document use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.