Sidebar Layout

v0.5.0
Stable

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 →

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).

Sidebar width, topbar height, and content max-width, padding and background are configurable via CSS custom properties, each with a sensible default:

  • --sidebar-layout-sidebar-width (default 13.75rem)
  • --sidebar-layout-topbar-height (default 3.5rem)
  • --sidebar-layout-content-max-width (default 75rem)
  • --sidebar-layout-content-padding (default var(--spacing-8))
  • --sidebar-layout-content-background (default the background role)

Usage

1import { SidebarLayout } from "@behivetech/templates.sidebar-layout";
2import { Sidebar } from "@behivetech/atoms.sidebar";
3import { NavItem } from "@behivetech/atoms.nav-item";
4

5function Example() {
6  return (
7    <SidebarLayout
8      sidebar={
9        <Sidebar>
10          <NavItem href="#" active>
11            Pages
12          </NavItem>
13          <NavItem href="#">Media</NavItem>
14        </Sidebar>
15      }
16      topbar={<header style={{ padding: "0.75rem 1rem" }}>Topbar</header>}
17    >
18      Page content
19    </SidebarLayout>
20  );
21}

Examples

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

7render(<BasicSidebarLayout />);

Properties

SidebarLayout props

PropTypeDefaultDescription
sidebar*ReactNode—Sidebar region content; the element rendered here owns its own `grid-area: sidebar` placement
topbar*ReactNode—Topbar region content; the element rendered here owns its own `grid-area: topbar` placement
childrenReactNode—Main content region
classNamestring—Additional class names to merge with the component root element

Also accepts the native attributes of its root element (className, aria-*, event handlers, …).