TabbedLayout – Design

​

Options

TabbedLayout holds one or more tabs and arranges them either as a tab strip or two simultaneously-visible panes.

​

Display Modes

​

Stacked

The classic tabs interaction: a tab strip with one panel visible at a time. Always available, and the mode every layout falls back to below 720px or with anything other than exactly two tabs.

​

Vertical Split

Both panels shown side by side, divided by a vertical rule. Offered only with exactly two tabs, at ≥ 720px.

​

Horizontal Split

Both panels stacked top and bottom, divided by a horizontal rule. Same two-tab, ≥ 720px constraint as Vertical Split.

​

Narrow

Below 720px — measured on the layout’s own width, not the viewport — the layout is forced to Stacked and the mode menu hides, regardless of defaultMode. The last chosen mode is remembered and restored once it grows back past the threshold.

​

Single Tab

A single tab shows neither a tab strip nor the mode menu — there’s nothing to switch between or arrange, so the layout renders just that tab’s label heading and content.

​

Behavior

The layout adapts to its own measured width and lets the user resize or rearrange its panes.

​

Mode Picker

The top-right options menu lets the user pick a display mode — shown only when a split is currently possible (≥ 720px, exactly two tabs). The current mode carries a check. When the layout is the artifact drawer, a close button joins the same corner and dismisses the drawer via the app surface.

​

Split Resize

Drag the separator between the two panes (or focus it and use the arrow keys) to resize them. Both panes are clamped to a per-axis minimum, so neither can be dragged small enough to lose its heading and all its content.

​

Overflow Handling

Content taller than a panel scrolls inside its padding — the scroll region is inset, so the scrollbar and the scrolled content stop at the padded edge rather than running flush to the panel’s border.

​

Keyboard Interaction

Users can switch tabs, resize a split, and choose a display mode using standard keyboard controls.

​

Patterns that use this component

• Agentic Experience Shell — Organizes multiple related views within the supporting workspace