Overview

M3's closest canonical layout is list-detail, but that pattern carries specific list/detail semantics (a selectable list driving a detail view). SplitPane here is deliberately more general — a resizable two-column primitive with no opinion about what goes in either side. This library's own root Rail layout and the docs secondary nav (this very sidebar's parent structure) are both built on it, alongside more list-detail-shaped uses.

Anchor Modes

anchor picks how the left pane is positioned. Getting this wrong under nested layouts is the most common mistake — pick based on what already surrounds the split, not just what "looks right" in isolation.

Import

import { SplitPane } from '@noxlovette/material';

Live Demo

See it live, with Controls, in Storybook rather than a hand-rolled preview here. Separate stories demo the viewport and sticky anchor modes inside a bounded canvas.

Basic Usage

A resizable split, anchored to the viewport:

<script lang="ts">
  import { SplitPane } from '@noxlovette/material';
</script>

<SplitPane anchor="viewport" leftWidth={320} minLeft={240} maxLeft={480}>
  {#snippet left()}
    <nav>...</nav>
  {/snippet}
  {#snippet right()}
    <main>...</main>
  {/snippet}
</SplitPane>

A static, non-draggable sidebar nested inside already-offset content:

<SplitPane anchor="sticky" resizable={false} leftWidth={240}>
  {#snippet left()}
    <nav>...</nav>
  {/snippet}
  {#snippet right()}
    <main>...</main>
  {/snippet}
</SplitPane>

SplitPane Props

Accessibility