Split pane

Two panes with a draggable, keyboard-resizable separator.

editor

results

<mm-split-pane default-position="280" storage-key="query.tree" label="Resize source tree">
  <nav slot="start" aria-label="Sources">…</nav>
  <mm-split-pane slot="end" orientation="vertical" default-position="240" storage-key="query.editor" label="Resize editor">
    <div slot="start">editor</div>
    <div slot="end">results</div>
  </mm-split-pane>
</mm-split-pane>

Guidance

A split pane puts two related panes side by side (or one above the other) with a hairline separator people can drag: the source tree beside the editor and results in Query, or the term list beside the article in Glossary. The separator is a 1px mm-rule line with a wider grab area; it darkens on hover, while dragging and on focus. Panes are never boxed: the hairline is the only structure.

The size of the start pane is kept in pixels between min-start and the container size less min-end. With storage-key it is remembered in localStorage. Double-clicking the separator returns it to default-position and forgets the stored size.

Keyboard (https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/): the separator is a focusable role="separator" with aria-valuenow, aria-valuemin and aria-valuemax. Left and Right (or Up and Down when stacked) move it by 16px, flipped in right-to-left layouts so the arrow always points the way the separator moves. Home and End move it to the minimum and maximum.

Properties

Property	Attribute	Type	Default	Description
orientation	orientation	'horizontal' | 'vertical'	'horizontal'	horizontal (default) puts the panes side by side; vertical stacks them.
position	position	number | undefined		Size of the start pane in pixels. Set it to control the split; it updates as people resize.
defaultPosition	default-position	number	280	Start pane size in pixels before anything is stored, and after a double-click reset.
minStart	min-start	number	200	Smallest start pane, in pixels.
minEnd	min-end	number	240	Smallest end pane, in pixels.
storageKey	storage-key	string	''	localStorage key that remembers the position. Leave empty to not persist.
label	label	string	''	Accessible name of the separator, naming what it resizes ("Resize source tree").

Events

Event	Detail	Description
mm-resize	CustomEvent<{ position: number }>	The start pane was resized by pointer or keyboard, in pixels.

Slots

Slot	Description
start	The first pane (inline start, or top when stacked).
end	The second pane.

CSS parts

Part	Description
start	The start pane wrapper.
end	The end pane wrapper.
separator	The separator.

Examples

Every state of mm-split-pane in Storybook, with keyboard and screen reader tests.