Dual Sidebar Shell
App shell with a primary icon nav rail and a grouped contextual sub-nav panel for deep two-level navigation.
App shell with a primary icon nav rail and a grouped contextual sub-nav panel for deep two-level navigation.
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
Dual Sidebar Shell is the two-level navigation frame: a narrow 16-wide icon rail on the left (Overview, Projects, Members, Settings, Billing) and a 56-wide contextual sub-nav beside it, grouped into Workspace, Security, and Developer sections with counts like Members 12 and API keys 3. The main content area opens on Settings > Workspace > General with a breadcrumb trail, a Workspace details panel, a Danger zone panel, and a Plan tile showing Team / 12 seats.
Both navs are const arrays, the sub-nav is a grouped array of sections. The Danger zone copy names exactly what deletion removes: projects, members, API keys, and billing history, so there is no ambiguity.
Reach for this block when a product has deep settings or a section that carries its own multi-page sub-nav too wide for a single rail. Wire aria-current to your router for both nav levels.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the workspace settings frame with Security and Developer sub-sections. Other layouts:
Tip: keep the secondary nav sections to three or fewer so the hierarchy reads without scrolling.