Sidebar Layout
v0.4.0A 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`).
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 are configurable via CSS custom properties, each with a sensible default:
--sidebar-layout-sidebar-width(default13.75rem)--sidebar-layout-topbar-height(default3.5rem)--sidebar-layout-content-max-width(default75rem)
Usage
Compositions
Open all 1 →Properties
SidebarLayout props
| Prop | Type | Default | Description |
|---|---|---|---|
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 |
children | ReactNode | — | Main content region |
className | string | — | Additional class names to merge with the component root element |
Also accepts the native attributes of its root element (className, aria-*, event handlers, …).