Icon Sidebar Shell
The icon only rail with aria labels, maximum width left for dense tool content.
The icon only rail with aria labels, maximum width left for dense tool content.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Icon Sidebar Shell is the tool-first frame: a 16 wide icon-only rail with the Acme logotype as a screen-reader span and five icon links (Overview, Projects, Members, Billing, Settings) each carrying an aria-label, no visible text. The active item lands on bg-muted; the rest are muted-foreground with hover lift. Avery Stone sits at the rail bottom, avatar only. The content side ships a page header, Friday June 13, everything is operational, a two-thirds drop zone titled Usage this week, and a one-third slot for Recent activity.
Nav is one array with an active flag; the icon class handles the visual state. Hiding labels removes the tooltip dependency entirely and keeps the frame honest about what it demands from the icon set.
Reach for this shell when the app surface is wide enough that a labelled rail would steal too much room, dense tools, editors, or canvases. Wire aria-current to your router and pair with a visible breadcrumb in the page header so users always know where they are.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the dense single-product workspace. Other fits:
Tip: if users will not recognise an icon without a label, the icon is wrong, fix the icon before hiding the text.