shadcn.io is not affiliated with official shadcn/ui
Projects Navigation Sidebar Block for React
A project tool in a fixed-height window whose muted sidebar lists eight projects with a menu on each row: View, Rename in place, Share with Copy link and Invite, and a confirmed Delete.
Installation
Overview
Manage a list of projects from the rail with this projects navigation sidebar for React with Base UI. A window framed by a hairline with a plus mark on each corner holds a muted Sidebar for Sprucework, a project tracker. Projects shows five of eight rows with a Show 3 more row under them. Each row has a three-dot Dropdown Menu, shown on hover or focus: View opens the project, Rename turns the row into a field where Enter keeps the name and Escape leaves it, Share opens a sub-menu with Copy link and Invite, and Delete opens an Alert Dialog that asks Delete Design System? and really removes the row, with focus going to the next one. The page shows the open project's details and tasks. Built from Sidebar, Dropdown Menu, Alert Dialog, Input, Empty and Guides, with a CSS entrance only. For project trackers, workspaces and any rail whose rows need a few commands.
FAQ
What is in each row's menu?
View, Rename, Share and Delete. Share opens a sub-menu with Copy link and Invite. The menu button shows on hover or focus and stays while its menu is open; on a phone it is always visible. Folded to icons the rail hides the menus and keeps the projects with tooltips.
How does Rename work?
The row swaps for a text field in the same 32 pixel slot, so nothing shifts. Enter keeps the new name, Escape leaves the old one, and clicking away leaves it too. An empty name is refused: the field is marked invalid and the status line says a project needs a name.
What does Delete do?
It opens an alert dialog that names the project and says how many tasks go with it. Cancel returns focus to that row's menu button. Delete project removes the row, opens the next project if it was the open one, and moves focus to the next row's link. Delete every project and the page shows an empty state with a button that restores the samples.
How does Show more work?
The first five projects show, and a row under them says how many more there are. It toggles to Show fewer and the status line says how many are showing. Deleting a project that leaves the list under five removes the row.
What stays in the page, and how do I connect it?
Everything. The projects are typed at the top of the file. Copy link prints the link in the status line and copies nothing, and Invite adds a typed name to a local list on the page; nothing is sent. Call your own endpoints in the rename, invite and delete handlers to make it real.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. The menus are always visible there, and choosing a project closes the sheet. The status line under the page says what happened, and the sheet carries its own copy of it while it is open.
Related
- Pro
A project workspace in a fixed-height window whose sidebar rows each hold Pin, Duplicate and Archive buttons, with a real Undo in the footer that puts an archived project back in its old place.
- Pro
A planning app in a fixed-height window whose sidebar groups, Projects, Documents and Tags, each have a plus that opens an inline create row and a menu with Sort A to Z, Sort by recent and Collapse.
- Pro
Collapsible Items Sidebar
Folds and treesA design system's docs in a fixed-height window whose sidebar rows are split: a label that opens a section's overview and a separate chevron that opens its sub-menu, with a count of pages on each row.
- Pro
Header Actions Sidebar
Headers and sectionsA notes app in a fixed-height window whose slim sidebar header holds three ghost icon buttons with tooltips: New note adds and opens a note, Search filters the notes, and the third folds the rail.
- Pro
File Tree Sidebar
Folds and treesA code editor in a fixed-height window whose slim sidebar is a file tree with file-type icons, arrow-key, Home, End, asterisk and type-ahead navigation, a Collapse all button, and the chosen file's lines and path on the page.
- Pro
A knowledge workspace in a fixed-height window whose muted sidebar has a Favorites group above All pages, where a star on every row pins a page, up to five.