Pinned Items Rail

About this block

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.

When to use

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

• Nothing, the rail is the outermost shell element

After

• Kpi cards row
• Data table

What you can display

One strong use is the pinned-shortcuts rail for a project or pipeline tool. Other rail configurations:

• No pins section. Strip the Pins block and ship just the icon nav for simpler products.
• Color-coded project marks. Replace the icon with a small colored dot per pinned project.
• Drag-to-reorder. The same shape with a drag handle visible on hover for user-sorted pins.

Tip: render tooltip labels as inline positioned divs rather than Radix portals so the preview iframe captures them correctly.