dashboard sidebar layout navigation shell dashboard sidebar layout navigation shell admin panel menu dashboard layout with sidebar admin panel shell
Dashboard Sidebar
Fetch pattern JSON:
curl https://webspire.de/patterns/dashboard/sidebar.json sidebar.html
<div class="ws-dashboard flex h-screen bg-[var(--ws-dashboard-bg)]">
<!-- Sidebar -->
<aside class="hidden w-64 flex-shrink-0 border-r border-[var(--ws-dashboard-border)] bg-[var(--ws-dashboard-card-bg)] lg:block">
<div class="flex h-full flex-col">
<!-- Logo -->
<div class="flex h-16 items-center border-b border-[var(--ws-dashboard-border)] px-6">
<span class="text-lg font-bold text-[var(--ws-dashboard-text)]">Dashboard</span>
</div>
<!-- Navigation -->
<nav class="flex-1 space-y-1 px-3 py-4">
<a href="#" class="flex items-center gap-3 rounded-lg bg-[var(--ws-dashboard-accent)]/10 px-3 py-2 text-sm font-medium text-[var(--ws-dashboard-accent)]">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.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>
Overview
</a>
<a href="#" class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-[var(--ws-dashboard-text-soft)] transition hover:bg-black/5">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><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 013 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 01-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 01-1.125-1.125V4.125z" /></svg>
Analytics
</a>
<a href="#" class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-[var(--ws-dashboard-text-soft)] transition hover:bg-black/5">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" /></svg>
Users
</a>
<a href="#" class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-[var(--ws-dashboard-text-soft)] transition hover:bg-black/5">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><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.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
Settings
</a>
</nav>
<!-- User -->
<div class="border-t border-[var(--ws-dashboard-border)] px-4 py-4">
<div class="flex items-center gap-3">
<div class="h-8 w-8 rounded-full bg-black/10 flex items-center justify-center flex-shrink-0" aria-hidden="true">
<svg class="h-5 w-5 text-[var(--ws-dashboard-text-muted)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
</div>
<div class="min-w-0">
<p class="truncate text-sm font-medium text-[var(--ws-dashboard-text)]">Alex Rivera</p>
<p class="truncate text-xs text-[var(--ws-dashboard-text-muted)]">alex@company.com</p>
</div>
</div>
</div>
</div>
</aside>
<!-- Main area -->
<div class="flex flex-1 flex-col">
<!-- Top header -->
<header class="flex h-16 items-center justify-between border-b border-[var(--ws-dashboard-border)] bg-[var(--ws-dashboard-card-bg)] px-6">
<button type="button" class="rounded-lg p-2 text-[var(--ws-dashboard-text-muted)] hover:bg-black/5 lg:hidden" aria-label="Open menu">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /></svg>
</button>
<div class="relative hidden sm:block">
<svg class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--ws-dashboard-text-muted)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" /></svg>
<input type="search" placeholder="Search..." class="w-64 rounded-lg border border-[var(--ws-dashboard-border)] bg-[var(--ws-dashboard-bg)] py-2 pl-9 pr-4 text-sm text-[var(--ws-dashboard-text)] placeholder:text-[var(--ws-dashboard-text-muted)] focus:border-[var(--ws-dashboard-accent)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-dashboard-accent)]">
</div>
<div class="h-8 w-8 rounded-full bg-black/10 flex items-center justify-center flex-shrink-0" aria-hidden="true">
<svg class="h-5 w-5 text-[var(--ws-dashboard-text-muted)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
</div>
</header>
<!-- Content -->
<main class="flex-1 overflow-auto p-6">
<h1 class="text-2xl font-bold text-[var(--ws-dashboard-text)]">Overview</h1>
<p class="mt-2 text-sm text-[var(--ws-dashboard-text-soft)]">Welcome back. Here's what's happening with your projects.</p>
<!-- Content goes here -->
</main>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
dashboardsidebarlayoutnavigationshell
Slots
| Name | Required | Description |
|---|---|---|
| sidebar | Yes | Fixed sidebar with logo, navigation links, and user profile. |
| header | Yes | Top header bar with search and user avatar. |
| main | Yes | Main content area. |
Full dashboard shell with a fixed left sidebar (w-64) containing logo, nav links with icons, and user profile at the bottom. Top header bar with search input and user avatar. Main content area takes remaining space. Sidebar hidden on mobile with hamburger toggle.