dashboard layout sidebar compact icons minimal dashboard layout compact icon sidebar narrow minimal compact icon-only sidebar dashboard narrow sidebar dashboard layout
Dashboard Layout Compact
Fetch pattern JSON:
curl https://webspire.de/patterns/dashboard-layout/compact.json compact.html
<div class="ws-dashboard-layout flex min-h-[32rem] overflow-hidden rounded-xl border border-[var(--ws-dashboard-layout-border)]">
<!-- Narrow icon-only sidebar -->
<aside class="flex w-16 shrink-0 flex-col items-center border-r border-[var(--ws-dashboard-layout-border)] bg-[var(--ws-dashboard-layout-bg)] py-4" aria-label="Icon navigation">
<div class="mb-6 flex h-10 w-10 items-center justify-center rounded-lg bg-[var(--ws-dashboard-layout-accent)] text-sm font-bold text-white" aria-hidden="true">W</div>
<nav class="flex flex-1 flex-col items-center gap-2" aria-label="Sidebar navigation">
<a href="#dashboard" title="Dashboard" class="flex h-10 w-10 items-center justify-center rounded-lg bg-[var(--ws-dashboard-layout-accent)]/10 text-[var(--ws-dashboard-layout-accent)]" aria-current="page" aria-label="Dashboard">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /></svg>
</a>
<a href="#analytics" title="Analytics" class="flex h-10 w-10 items-center justify-center rounded-lg text-[var(--ws-dashboard-layout-text-soft)] transition hover:bg-[var(--ws-dashboard-layout-border)]" aria-label="Analytics">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" /></svg>
</a>
<a href="#users" title="Users" class="flex h-10 w-10 items-center justify-center rounded-lg text-[var(--ws-dashboard-layout-text-soft)] transition hover:bg-[var(--ws-dashboard-layout-border)]" aria-label="Users">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" /></svg>
</a>
<a href="#messages" title="Messages" class="flex h-10 w-10 items-center justify-center rounded-lg text-[var(--ws-dashboard-layout-text-soft)] transition hover:bg-[var(--ws-dashboard-layout-border)]" aria-label="Messages">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" /></svg>
</a>
<a href="#settings" title="Settings" class="flex h-10 w-10 items-center justify-center rounded-lg text-[var(--ws-dashboard-layout-text-soft)] transition hover:bg-[var(--ws-dashboard-layout-border)]" aria-label="Settings">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>
</a>
</nav>
<div class="mt-auto">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-indigo-600 text-xs font-bold text-white" aria-hidden="true">JD</div>
</div>
</aside>
<!-- Main content -->
<main class="flex-1 bg-[var(--ws-dashboard-layout-bg)] p-8">
<h1 class="text-xl font-bold text-[var(--ws-dashboard-layout-text)]">Dashboard</h1>
<p class="mt-2 text-sm text-[var(--ws-dashboard-layout-text-soft)]">Main content area. Add widgets, charts, and tables here.</p>
</main>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
dashboardlayoutsidebarcompacticonsminimal
Slots
| Name | Required | Description |
|---|---|---|
| sidebar | Yes | Narrow icon-only sidebar with tooltip titles. |
| content | Yes | Main content area. |
Compact dashboard layout with a narrow icon-only sidebar (w-16). Navigation items use title attributes for native tooltips and aria-label for accessibility. Maximizes the main content area.