shadcn.io is not affiliated with official shadcn/ui
Breadcrumb Navigation File Upload Block for React
An upload destination picker in a window: a breadcrumb trail that folds when deep, folders only with an inline New folder, and a tray that keeps picked and dropped files per folder with counts.
Installation
Overview
Let people choose exactly where an upload will land, with this destination picker for React with Base UI. It is the upload window of Plotpath, a project drive for a surveying firm. At the start is a folder browser: a breadcrumb trail whose middle crumbs fold into "..." when the path is deep (on a phone only the last two show), a Back button, folders only, and an inline "New folder". At the end is a tray headed "Will be added to Projects / Q3" that takes files picked with File Upload or dropped for the folder you are in, and keeps them per folder, with counts and a list of the other folders that hold files. Opening a folder never moves the files already waiting. The window has a fixed height and only its panes scroll, and its status foot says what stays local. The window is framed by Guides. It is built from File Upload, Input, Badge, Button and Guides. For project drives, document stores and any upload that needs a destination.
FAQ
How does the breadcrumb fold?
From four folders deep, the middle crumbs become a "..." button between the first crumb and the last two; press it to show them all, and again to fold. On a phone the first crumb folds too from three deep. The last crumb is the current folder and is not a button.
How are files kept per folder?
Every file you pick or drop is stored with the path it was added for. The tray lists the ones for the open folder, and "Also waiting" lists the other folders with their counts; press one to go there. Removing a file moves focus to the next row or the drop zone.
How does New folder work?
It opens a name field at the top of the folder list. Create adds the folder to this tab and puts focus on it; an empty name, a slash or a name that already exists shows a problem line without moving the list, and Escape cancels.
Can I use it from the keyboard?
Yes. Tab runs through the trail, New folder, the folder list, the tray's drop zone and its files. Folders are buttons, so Enter or Space opens one, and the drop zone opens the file picker. Opening a folder moves focus to the folder list and the status line says where you are.