Sidebar Shell
The navigation rail with active state, command hint, and labeled drop zones for your pages.
The navigation rail with active state, command hint, and labeled drop zones for your pages.
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
Sidebar Shell is the frame the rest of the collection slots into, a 64 wide navigation rail with the Acme lockup and plan badge, a search affordance with the command hint, five nav items with one active and a count badge on Projects, and the signed in user pinned to the bottom. The content side ships a real page header, Thursday June 12, everything is operational, plus two dashed drop zones labeled for what goes there.
Nav is one array with active and badge fields. The dashed panels are deliberate, a shell sells its slots, not its furniture.
Reach for this block as the outermost layout of an app page, replacing the dashed panels with stat cards and tables. Wire aria-current to your router.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the workspace overview frame. Other shells:
Tip: the sidebar hides below lg on purpose, ship the mobile drawer separately instead of cramming a rail into phone widths.