Version: latest

Dashboard-Layout-Muster

Ein persistentes Sidebar- und Top-Bar-Layout ist die Grundlage nahezu jeder Admin- oder SaaS-Anwendung. Dieses Muster zeigt, wie man die Sidenav, Tabs und Layout-Primitive von prokodo UI zu einer vollständigen App-Router-Dashboard-Shell zusammensetzt.

Wann dieses Muster verwenden

Interne Tools, Admin-Panels und SaaS-Dashboards
Jede mehrgliedrige Anwendung, bei der eine persistente Navigation den Kontextwechsel reduziert
Wenn Breadcrumbs oder ein abschnittsbezogener Tab-Bereich neben einer globalen Sidebar benötigt werden

Struktur

app/
  (dashboard)/
    layout.tsx        ← Dashboard-Shell (Server Component)
    page.tsx          ← Übersichtsseite
    settings/
      page.tsx
    analytics/
      page.tsx

Shell-Layout

app/(dashboard)/layout.tsx
import { Sidenav } from "@prokodo/ui/sidenav"
import "@prokodo/ui/sidenav.css"

const navItems = [
  {
    label: "Übersicht",
    redirect: { href: "/" },
    icon: { name: "HomeOutlinedIcon" },
  },
  {
    label: "Analytik",
    redirect: { href: "/analytics" },
    icon: { name: "BarChartOutlinedIcon" },
  },
  {
    label: "Einstellungen",
    redirect: { href: "/settings" },
    icon: { name: "SettingsOutlinedIcon" },
  },
]

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div style={{ display: "flex", minHeight: "100vh" }}>
      <Sidenav items={navItems} />
      <main style={{ flex: 1, padding: "2rem", overflowY: "auto" }}>
        {children}
      </main>
    </div>
  )
}

Abschnitts-Tabs

Tabs für die sekundäre Navigation innerhalb von Seiten-Komponenten verwenden:

app/(dashboard)/analytics/page.tsx
import { Tabs } from "@prokodo/ui/tabs"
import "@prokodo/ui/tabs.css"

const tabs = [
  { value: "traffic", label: "Traffic", content: <TrafficPanel /> },
  { value: "conversion", label: "Conversion", content: <ConversionPanel /> },
  { value: "revenue", label: "Umsatz", content: <UmsatzPanel /> },
]

export default function AnalyticsPage() {
  return (
    <>
      <h1>Analytik</h1>
      <Tabs
        id="analytics-tabs"
        ariaLabel="Analytik-Bereiche"
        items={tabs}
        defaultValue="traffic"
      />
    </>
  )
}

Responsives Verhalten

Auf Mobilgeräten klappt die Sidenav zu einem Drawer zusammen – kein zusätzlicher Code erforderlich. Der Breakpoint wird intern über einen useMediaQuery-Hook verwaltet und ist derzeit nicht über eine CSS-Variable konfigurierbar.

Weiterführende Informationen

Next.js Layouts & Templates
prokodo Next.js Agentur — wir entwickeln und betreiben produktive Next.js-Dashboards

👉 Dashboard Layout in Storybook öffnen