dashboard layout header topbar navigation admin dashboard layout header topbar search notifications dashboard with top header bar horizontal navigation dashboard layout
Dashboard Layout With Header
Fetch pattern JSON:
curl https://webspire.de/patterns/dashboard-layout/with-header.json with-header.html
<div class="ws-dashboard-layout min-h-[32rem] overflow-hidden rounded-xl border border-[var(--ws-dashboard-layout-border)] bg-[var(--ws-dashboard-layout-bg)]">
<!-- Top header bar -->
<header class="flex items-center justify-between border-b border-[var(--ws-dashboard-layout-border)] px-6 py-3">
<div class="flex items-center gap-4">
<div class="flex items-center gap-2">
<div class="flex h-8 w-8 items-center justify-center rounded-lg bg-[var(--ws-dashboard-layout-accent)] text-sm font-bold text-white" aria-hidden="true">W</div>
<span class="text-sm font-bold text-[var(--ws-dashboard-layout-text)]">Workspace</span>
</div>
<nav class="hidden items-center gap-1 md:flex" aria-label="Main navigation">
<a href="#dashboard" class="rounded-lg bg-[var(--ws-dashboard-layout-accent)]/10 px-3 py-1.5 text-sm font-medium text-[var(--ws-dashboard-layout-accent)]" aria-current="page">Dashboard</a>
<a href="#projects" class="rounded-lg px-3 py-1.5 text-sm text-[var(--ws-dashboard-layout-text-soft)] transition hover:bg-[var(--ws-dashboard-layout-border)]">Projects</a>
<a href="#reports" class="rounded-lg px-3 py-1.5 text-sm text-[var(--ws-dashboard-layout-text-soft)] transition hover:bg-[var(--ws-dashboard-layout-border)]">Reports</a>
<a href="#settings" class="rounded-lg px-3 py-1.5 text-sm text-[var(--ws-dashboard-layout-text-soft)] transition hover:bg-[var(--ws-dashboard-layout-border)]">Settings</a>
</nav>
</div>
<div class="flex items-center gap-3">
<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-layout-text-soft)]" 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 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" /></svg>
<input type="search" placeholder="Search..." class="w-48 rounded-lg border border-[var(--ws-dashboard-layout-border)] bg-transparent py-1.5 pl-9 pr-3 text-sm text-[var(--ws-dashboard-layout-text)] placeholder:text-[var(--ws-dashboard-layout-text-soft)]" aria-label="Search" />
</div>
<button type="button" class="relative rounded-lg p-2 text-[var(--ws-dashboard-layout-text-soft)] transition hover:bg-[var(--ws-dashboard-layout-border)]" aria-label="Notifications">
<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="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" /></svg>
<span class="absolute right-1.5 top-1.5 h-2 w-2 rounded-full bg-rose-500" aria-hidden="true"></span>
</button>
<div class="flex h-8 w-8 items-center justify-center rounded-full bg-indigo-600 text-xs font-bold text-white" aria-hidden="true">JD</div>
</div>
</header>
<!-- Main content -->
<main class="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
dashboardlayoutheadertopbarnavigationadmin
Slots
| Name | Required | Description |
|---|---|---|
| header | Yes | Top bar with logo, navigation, search, and user controls. |
| content | Yes | Main content area below the header. |
Dashboard layout with a top header bar instead of a sidebar. Header includes logo, horizontal nav links, search input, notification bell with badge, and user avatar. Responsive with hidden elements on small screens.