Icon Sidebar Shell

About this block

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.

When to use

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

• Nothing, shells are the page

After

• Kpi cards row
• Data table

What you can display

One strong use is the dense single-product workspace. Other fits:

• Admin console. High information density, users already know the icon set.
• Design or code tool. The saved width goes to the canvas, not the nav.
• Embedded iframe shell. Labels would overflow; icons fit any fixed-width container.

Tip: if users will not recognise an icon without a label, the icon is wrong, fix the icon before hiding the text.