sidebar app-shell workspace dashboard layout sidebar app shell dashboard workspace layout persistent nav application shell with sidebar dashboard layout with persistent navigation
Sidebar App Shell
Fetch pattern JSON:
curl https://webspire.de/patterns/sidebar/app-shell.json app-shell.html
<section class="ws-sidebar-app-shell" style="--ws-shell-bg: #f8fafc; --ws-shell-panel: #ffffff; --ws-shell-text: #0f172a; --ws-shell-text-soft: #64748b; --ws-shell-border: #e2e8f0; --ws-shell-accent: #0f766e;"> <!-- ws-ok: token definitions -->
<div class="grid min-h-[720px] overflow-hidden rounded-3xl border border-[var(--ws-shell-border)] bg-[var(--ws-shell-bg)] lg:grid-cols-[280px_1fr]">
<aside class="border-b border-[var(--ws-shell-border)] bg-[var(--ws-shell-panel)] lg:border-b-0 lg:border-r">
<div class="border-b border-[var(--ws-shell-border)] px-6 py-5">
<p class="text-lg font-semibold text-[var(--ws-shell-text)]">Orbit</p>
<p class="mt-1 text-sm text-[var(--ws-shell-text-soft)]">Operations workspace</p>
</div>
<nav class="space-y-1 px-4 py-4" aria-label="Application navigation">
<a href="#" class="flex items-center gap-3 rounded-xl bg-[var(--ws-shell-accent)]/10 px-4 py-3 text-sm font-semibold text-[var(--ws-shell-accent)]" aria-current="page">Overview</a>
<a href="#" class="flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-medium text-[var(--ws-shell-text-soft)] transition hover:bg-black/[0.03] hover:text-[var(--ws-shell-text)]">Projects</a>
<a href="#" class="flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-medium text-[var(--ws-shell-text-soft)] transition hover:bg-black/[0.03] hover:text-[var(--ws-shell-text)]">Team</a>
<a href="#" class="flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-medium text-[var(--ws-shell-text-soft)] transition hover:bg-black/[0.03] hover:text-[var(--ws-shell-text)]">Billing</a>
<a href="#" class="flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-medium text-[var(--ws-shell-text-soft)] transition hover:bg-black/[0.03] hover:text-[var(--ws-shell-text)]">Integrations</a>
</nav>
<div class="border-t border-[var(--ws-shell-border)] px-4 py-4">
<div class="rounded-2xl bg-black/[0.02] p-4">
<p class="text-sm font-semibold text-[var(--ws-shell-text)]">Usage</p>
<p class="mt-1 text-sm text-[var(--ws-shell-text-soft)]">21 of 30 seats active</p>
<div class="mt-3 h-2 rounded-full bg-[var(--ws-shell-border)]">
<div class="h-2 w-[70%] rounded-full bg-[var(--ws-shell-accent)]"></div>
</div>
</div>
</div>
</aside>
<div class="bg-[var(--ws-shell-bg)]">
<header class="flex flex-col gap-4 border-b border-[var(--ws-shell-border)] bg-[var(--ws-shell-panel)] px-6 py-5 sm:flex-row sm:items-center sm:justify-between">
<div>
<h2 class="text-xl font-semibold text-[var(--ws-shell-text)]">Workspace overview</h2>
<p class="mt-1 text-sm text-[var(--ws-shell-text-soft)]">A main stage with supporting cards is enough for most app shells.</p>
</div>
<button type="button" class="rounded-lg bg-[var(--ws-shell-accent)] px-4 py-2.5 text-sm font-semibold text-white">New project</button>
</header>
<div class="grid gap-6 p-6 xl:grid-cols-[1.1fr_0.9fr]">
<div class="rounded-2xl border border-[var(--ws-shell-border)] bg-[var(--ws-shell-panel)] p-6">
<p class="text-sm font-semibold text-[var(--ws-shell-text)]">Primary panel</p>
<div class="mt-4 grid gap-4 sm:grid-cols-3">
<div class="rounded-2xl bg-black/[0.02] p-4">
<p class="text-xs uppercase tracking-[0.16em] text-[var(--ws-shell-text-soft)]">Projects</p>
<p class="mt-2 text-2xl font-semibold text-[var(--ws-shell-text)]">18</p>
</div>
<div class="rounded-2xl bg-black/[0.02] p-4">
<p class="text-xs uppercase tracking-[0.16em] text-[var(--ws-shell-text-soft)]">Tasks</p>
<p class="mt-2 text-2xl font-semibold text-[var(--ws-shell-text)]">142</p>
</div>
<div class="rounded-2xl bg-black/[0.02] p-4">
<p class="text-xs uppercase tracking-[0.16em] text-[var(--ws-shell-text-soft)]">Blockers</p>
<p class="mt-2 text-2xl font-semibold text-[var(--ws-shell-text)]">6</p>
</div>
</div>
</div>
<div class="rounded-2xl border border-[var(--ws-shell-border)] bg-[var(--ws-shell-panel)] p-6">
<p class="text-sm font-semibold text-[var(--ws-shell-text)]">Secondary rail</p>
<ul class="mt-4 space-y-3 text-sm text-[var(--ws-shell-text-soft)]">
<li class="rounded-xl bg-black/[0.02] px-4 py-3">Quarterly review on Friday</li>
<li class="rounded-xl bg-black/[0.02] px-4 py-3">3 approvals waiting for finance</li>
<li class="rounded-xl bg-black/[0.02] px-4 py-3">New onboarding flow published</li>
</ul>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
sidebarapp-shellworkspacedashboardlayout
Slots
| Name | Required | Description |
|---|---|---|
| navigation | Yes | Persistent application navigation rail. |
| stage | Yes | Main workspace panel with page header and primary content. |
| rail | No | Secondary activity or context rail. |
Sidebar-driven app shell for product surfaces. Goes beyond a bare navigation rail by showing how the sidebar relates to a real main stage and supporting content area.