Collapsible Sidebar Shell
Icon-only nav rail with an expand affordance, badge count on Projects, and an inline tooltip hint on one item.
Icon-only nav rail with an expand affordance, badge count on Projects, and an inline tooltip hint on one item.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Collapsible Sidebar Shell renders the nav rail in its narrow icon-only state: a 16-wide aside, five icon buttons with the active highlight on Overview, a badge count floating on the Projects icon showing 12, and an expand affordance in the header via PanelLeftOpen. The Projects item carries an inline tooltip label rendered as static markup so the hint appears without opening a Radix portal. Content shows the Projects page header, Friday June 13, 12 active projects across 3 teams, with a New project button and two dashed slot panels.
Nav is one const array with active and badge fields. The inline tooltip at HINT_INDEX is the discovery signal that tells keyboard users labels are one expand away.
Reach for this shell when vertical space is the first constraint and icon recognition is high enough to navigate without labels. It pairs naturally with the full sidebar shell so users can toggle between the two states; wire the expand button to swap the shell or unhide the label column.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the dense workspace frame for power users. Other collapsed-rail contexts:
Tip: show the inline label hint on the one item most likely to be new to a user, not on every item.