shadcn.io is not affiliated with official shadcn/ui
Group Actions Sidebar Block for React
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.
Installation
Overview
Act on a whole group of the rail with this group actions sidebar for React with Base UI. A window framed by a hairline with a plus mark on each corner holds a slim Sidebar for Boardlark, a planning app, with three groups: Projects, Documents and Tags. Each heading has two buttons. The plus opens a create row at the end of the group: Enter adds the item and puts focus on it, Escape cancels, and an empty name is refused in words. The three-dot Dropdown Menu has Sort A to Z, Sort by recent and Collapse, which hides the group's rows. The page lists the open item's group in the order the rail shows. Built from Sidebar, Dropdown Menu, Input and Guides, with a CSS entrance only. For planning tools, note apps and any rail that holds several lists.
FAQ
How does the create row work?
The plus opens a field after the group's last row and expands the group if it was collapsed. Enter adds the item at the end, opens it and puts focus on its link. Escape closes the row and returns focus to the plus. An empty name does neither: the field is marked invalid and the status line says what it needs. Only one create row is open at a time.
What do the sorts do?
They reorder the group's rows for good, not as a view: Sort A to Z by name, Sort by recent by the date each item was added, newest first. An item you add afterwards goes to the end, as the create row promises. The page list follows the rail's order.
What does Collapse do?
It hides the group's rows and the menu item becomes Expand. The status line says how many rows are hidden. The open item stays open on the page even if its group is collapsed.
What happens when the sidebar folds to icons?
The rail keeps every item as an icon with a tooltip and hides the group buttons. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on.
What stays in the page, and how do I connect it?
Everything. The items are typed at the top of the file, a new item takes a fixed date, and nothing is saved. Call your API in the add and sort 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 group buttons stay visible there, and choosing an item 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 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.
- Pro
A reading workspace in a fixed-height window whose sidebar holds three reading lists you reorder by dragging a grip or with Move up and Move down buttons, inside each list only.
- Pro
Collapsible Groups Sidebar
Folds and treesA framework's docs in a fixed-height window whose slim sidebar has five groups that fold from their labels, with Expand all and Collapse all, a count of open groups and a dot on a folded group that holds the current page.
- 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
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.