Pinned Items Rail
Icon-only sidebar rail with a pinned shortcuts section above the main nav, inline tooltip labels, and an add-pin affordance.
Icon-only sidebar rail with a pinned shortcuts section above the main nav, inline tooltip labels, and an add-pin affordance.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Pinned Items Rail is a 14-wide icon-only sidebar that places a Pins section above the main nav. Three pinned items (Data pipeline v2, Reliability review, Weekly report) are shown as icon buttons with inline tooltip labels that appear on hover, Reliability review rendered active. A Plus button at the foot of the Pins section carries the add-pin affordance. The main nav below (Overview, Projects, Members, Notifications, Settings) uses the same icon-plus-tooltip pattern, with Projects showing a 12 badge and Notifications a 3 badge.
Pinned items and main nav are separate typed arrays so badge and active fields carry the same shape on every entry. The tooltip labels are absolute-positioned divs rendered in flow, never Radix Tooltip portals.
Reach for this block as the sidebar rail for dense power-user tools where labels cost too much horizontal space. Wire the pinned array to the current user session so it reflects their saved shortcuts, and set aria-current on the active nav item via your router.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the pinned-shortcuts rail for a project or pipeline tool. Other rail configurations:
Tip: render tooltip labels as inline positioned divs rather than Radix portals so the preview iframe captures them correctly.