Layout & display

SplitPane

A column docked to the start or the end of a page. Above its breakpoint the inner edge drags, a lock fixes the width, and the width and the lock are remembered for each reader. Below the breakpoint it stacks in the page, hides, or floats over the page as an overlay, as the page decides.

Basic

Put the pane and the main column side by side in a flex row, with the main column taking the rest. The pane names itself with label, which is the heading of its header, unless header takes its place, and the name a screen reader announces for the region. Drag the inner edge to resize it.

Canvas

From the keyboard

The handle is a focusable separator that reports the current width and its bounds. An arrow key moves the edge by 24px, Shift with an arrow moves it by 80px, and Home and End go to the smallest and the largest width. In a right-to-left page the edge follows the arrow the way it looks, so ArrowRight narrows a start pane there. The largest width also leaves the main column the pane's min, so a width stored on a wider screen never pushes the main column off this one.

Lock and collapse

The lock button in the header fixes the width and removes the handle until it is pressed again. collapsible adds a button that folds the pane to a narrow strip carrying its label, and the strip's own button opens it again. Folding or opening the pane from its own button moves focus to the button that undoes it. open is bindable, so a page can open the pane from elsewhere. The meta snippet keeps a count or a status beside the label or the header.

Thread

Below the breakpoint

breakpoint is where the drag, the lock and the collapse start, and it defaults to xl. Under it, below decides what the pane does. stack keeps it in the page's own flow across the full width, which is why the frames above turn into a column on a narrow screen. hidden removes it. overlay floats it over the page while overlay is true, and the parent then needs position: relative. The overlay slides in on the slow motion rung and out one rung faster, and while it is closed it takes no focus. It stays mounted, so what the reader typed in it survives a close and a resize. Narrow the window below 1280px to see this one float.

Storage

The width and the lock are kept in localStorage under storageKey, as {"width": <px>, "locked": <bool>}. Storage that is missing or throws leaves the pane at its default width for the session. The server renders the default width and never reads storage. A stored width outside the bounds the page passes now is clamped to them, and a width is written again only when the reader moves the edge or presses the lock.

API

Prop	Type	Default	Description
`storageKey` required	`string`	no default	The localStorage key the width and the lock are kept under.
`label` required	`string`	no default	The heading of the header unless header replaces it, the word on the strip and the name of the region.
`side` required	`'start' \| 'end'`	no default	The edge of the page it docks to. The handle sits on the other edge.
`width`	`number`	`280`	The width in pixels it opens at until somebody drags it.
`min`	`number`	`200`	The smallest width in pixels.
`max`	`number`	`560`	The largest width in pixels.
`breakpoint`	`'md' \| 'lg' \| 'xl'`	`'xl'`	Where the drag, the lock and the collapse start.
`below`	`'stack' \| 'overlay' \| 'hidden'`	`'stack'`	What it does under the breakpoint: stays in the flow, floats over the page, or hides.
`overlay`	`boolean`	`false`	Shows the overlay under the breakpoint. Read only with below="overlay".
`collapsible`	`boolean`	`false`	Offers a fold to a strip carrying the label.
`open`	`boolean`	`true`	Expanded above the breakpoint. Bindable.
`meta`	`Snippet`	no default	A count or a status beside the label or the header.
`header`	`Snippet`	no default	Takes the place of the label in the header row, for a pane whose own tabs name what it holds. Pass Tabs with inHeader. The label still names the region, the strip and the controls.
`class`	`string`	no default	Extra classes on the aside, such as its share of the height when stacked. Not applied with below="overlay".
`testId`	`string`	no default	The data-testid of the aside. Defaults to aside- followed by the storage key.
`children` required	`Snippet`	no default	The pane body, which scrolls.
`id`	`string`	no default	The aside's id, for a control outside the pane, such as a toolbar toggle, to name in aria-controls.