A dumb CSS Grid skeleton with sidebar, topbar, and content regions. It has no opinion on what the sidebar or topbar contain — the elements passed in are responsible for their own `grid-area: sidebar` / `grid-area: topbar` placement (e.g. via `@behivetech/atoms.sidebar`).

pnpm add @behivetech/templates.sidebar-layout

You are viewing Sidebar Layout v0.5.0, snapshotted 2026-11-09. The latest is v0.5.1. Go to the latest →

Examples of v0.5.0 are shown as code; only the latest version runs live. Open the live examples →

Basic Sidebar Layout
1const BasicSidebarLayout = () => (
2 <SidebarLayout sidebar={<nav>Sidebar</nav>} topbar={<header>Topbar</header>}>
3 Page content
4 </SidebarLayout>
5);
6
7render(<BasicSidebarLayout />);