Components

Sidebar

An inset application rail with responsive collapse and accessible resizing.

Layout

The default inset layout places content on a rounded workspace surface over the navigation canvas. The panel collapses below desktop width so the application can provide its own mobile disclosure. Use the split variant when content should meet the rail.

tsx

import { Sidebar } from "@karnstack/dowel";

<Sidebar.Root defaultWidth={232} minWidth={192} maxWidth={320}>
  <Sidebar.Panel aria-label="Workspace navigation">
    <Sidebar.Header>Acme</Sidebar.Header>
    <Sidebar.Body>{navigation}</Sidebar.Body>
    <Sidebar.Footer>{account}</Sidebar.Footer>
  </Sidebar.Panel>
  <Sidebar.ResizeHandle />
  <Sidebar.Content>{children}</Sidebar.Content>
</Sidebar.Root>

Resize

Drag the divider, use Left and Right Arrow in eight pixel steps, or press Home and End for the configured limits. Double click restores the default width.

Anatomy

Root owns width state. Panel can contain Header, Body, and Footer. ResizeHandle exposes separator semantics and current pixel bounds. Content always keeps a zero minimum width so dense application views can shrink safely.