Skip to content
Nexus Application Design nadesign

SplitScrollContent

<SplitScrollContent> is a body with two independently-scrolling columns — main on the left flexes; sidebar on the right has a fixed pixel width. Use sparingly — most pages want a single scroll region.

import from "@na/ui/components/SplitScrollContent" ▶ Open in Storybook packages/ui/src/components/SplitScrollContent.tsx

When to use

  • Conversation review: long transcript + sticky review panel that itself scrolls.
  • Code review: long diff + sticky comments panel.
  • Anywhere both panes are independently long enough to need their own scroll.

Don’t use SplitScrollContent for: form-with-side-hints (SplitContent — single scroll), persistent app rails (TwoColumnLayout), or detail pages with short property lists (RightPanel).

Default

Conversation review

Turn 1
Transcript line for this turn…
Turn 2
Transcript line for this turn…
Turn 3
Transcript line for this turn…
Turn 4
Transcript line for this turn…
Turn 5
Transcript line for this turn…
Turn 6
Transcript line for this turn…
Turn 7
Transcript line for this turn…
Turn 8
Transcript line for this turn…
Review panel
 
<>
  <PageHeader title="Conversation review" />
  <SplitScrollContent
    sidebar={<ReviewPanel />}
    sidebarWidth={320}
  >
    <Transcript />
  </SplitScrollContent>
</>

API

Prop Type Default Description
children * ReactNode — Main content. Has its own internal scroll.
sidebar * ReactNode — Side content. Has its own internal scroll.
sidebarWidth number 320 Sidebar pixel width.
className string — Forwarded to the root.

Design guidelines

✓ Do

  • Reach for SplitScrollContent only when both panes are long. Single-scroll is the default.
  • Cap sidebarWidth at 360–420px. Wider cuts into reading width.
  • Pair with PageHeader directly above — PageHeader doesn't scroll, so the layout stays stable.

✗ Don't

  • Wrap in PageContent. SplitScrollContent IS the body region, not nested inside one.
  • Use SplitScrollContent on mobile. Two scroll regions on a phone is a UX trap.

Accessibility

  • Plain <div> structure. Each pane scrolls natively — full keyboard support.

▶ Open SplitScrollContent stories in Storybook