DWG · 04.02 · COMPONENT SPEC

Sidebar

A scrollable side rail, composed from slots: Sidebar.Section, Sidebar.Nav, Sidebar.Group, Sidebar.Item, and Sidebar.Footer. It provides the visual treatment; you position it (sticky, full-height) via className. Item renders a plain <a> by default, or a router link via `render={<Link href=… />}`; use a Sidebar.Section for the brand. This site's own navigation is built with it.

SHEET · 04.02

Composition

04.02·A

PREVIEWPX · 1:1

MAIN CONTENT

<Sidebar>
  <Sidebar.Section>
    <a href="#" className="block">
      <div className="text-[10px] uppercase tracking-[0.2em] text-ink-dim">DWG · DRAFTHAUS/DS</div>
      <div className="mt-1 text-[18px] font-bold uppercase tracking-[0.16em] text-ink-bright">Drafthaus</div>
    </a>
  </Sidebar.Section>
  <Sidebar.Nav>
    <Sidebar.Group label="Getting started">
      <Sidebar.Item href="#" code="00.00">Overview</Sidebar.Item>
      <Sidebar.Item href="#" code="00.01">Foundations</Sidebar.Item>
    </Sidebar.Group>
    <Sidebar.Group label="Components">
      <Sidebar.Item href="#" code="01.01">Button</Sidebar.Item>
      <Sidebar.Item href="#" code="01.02">Input</Sidebar.Item>
      <Sidebar.Item href="#" code="01.03">Checkbox</Sidebar.Item>
    </Sidebar.Group>
  </Sidebar.Nav>
  <Sidebar.Footer>
    <Annotation as="div">SCALE · 1:1</Annotation>
  </Sidebar.Footer>
</Sidebar>

Active item

04.02·B

Pass active to mark the current page. It gets a persistent highlight and aria-current="page". This site sets it from the router pathname.

PREVIEWPX · 1:1

<Sidebar.Group label="Components">
  <Sidebar.Item href="#" code="01.01">Button</Sidebar.Item>
  <Sidebar.Item href="#" code="01.02" active>Input</Sidebar.Item>
  <Sidebar.Item href="#" code="01.03">Checkbox</Sidebar.Item>
</Sidebar.Group>