SplitLayout

A main area and a secondary panel side by side, with a configurable width, a collapsible panel and no breakpoints.

Invoice INV-1042

Northwind ordered 25 seats of the Pro plan. The invoice was sent on October 1 and is due in 14 days.

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add split-layout

Dependencies

What add split-layout installs alongside the component. The CLI skips any you already have in a compatible version.

ZUNO registry

@zuno/utils
@zuno/button

Examples

2 examples · 1 component

Invoice INV-1042

Northwind ordered 25 seats of the Pro plan. The invoice was sent on October 1 and is due in 14 days.

A details panel

The trigger hides and shows the panel; narrow the window to see it wrap under the main area.

24 results

Open the filters panel to narrow the results.

Panel at the start

Rendered before the main area, the filters panel sits at the start; collapsed by default.

API reference

Forwards props and ref to the container element; it only adds composition utilities.

Prop	Type	Default
`asideWidth` Width of the panel when it sits beside the main area; any CSS length. Stacked, it takes the full width.	`string`	`"20rem"`
`mainMinWidth` The narrowest the main area may get beside the panel. Below asideWidth + mainMinWidth the panel wraps under it.	`string`	`"20rem"`
`collapsed / defaultCollapsed / onCollapsedChange` Controlled or uncontrolled collapse.	`boolean / boolean / (collapsed) => void`	`— / false / —`
`SplitLayoutMain` The main area. Render it first for a panel at the end, second for a panel at the start.	`div`	—
`SplitLayoutAside` The secondary panel, a complementary landmark. Name it with aria-label.	`aside`	—
`SplitLayoutTrigger` Shows or hides the panel, with aria-expanded and aria-controls.	`Button`	`aria-label: "Side panel"`

States

The states that apply to this component and their visual treatment.

State	Treatment
Side by side	The box fits asideWidth + mainMinWidth: two columns, the main area taking the extra space.
Stacked	Narrower boxes: the panel wraps under (or above) the main area at full width.
Collapsed	The panel removed; the main area takes the full width.

Accessibility

SplitLayoutAside is an aside landmark; name it ("Details", "Filters") so it can be found in the landmark list.

The trigger reports aria-expanded and points to the panel with aria-controls. Name it after the panel ("Details panel").

Collapsed, the panel gets the hidden attribute: it leaves the layout, the Tab order and the accessibility tree.

The side follows source order, so what you see first is also what screen readers read and Tab reaches first. There is no CSS reordering to drift from the DOM.

It has no breakpoint: the panel wraps under the main area whenever the box gets narrower than both widths together, inside a dialog or a narrow column too.