Tabbed Layout

For development, import TabbedLayout from @servicetitan/anvil2-ai-kit. For design, find it in the AI Kit Web Component Library file.

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.

Usage Guidelines

When to Use

Use the Tabbed Layout when:

Related views in the artifact region – Supporting content in the artifact region of an App Shell or Window needs access to multiple related views.
Two views at once – Exactly two views benefit from being visible together, side by side (Vertical Split) or top and bottom (Horizontal Split), in a layout at least 720px wide.
A single artifact view – One view needs a heading and content without a tab strip or mode menu.

When not to use

Avoid using the Tabbed Layout for:

Three or more views at once – Split modes require exactly two tabs. With three or more tabs, the layout always shows one panel at a time in Stacked mode.
Side-by-side views in a narrow region – Below 720px, the layout forces Stacked mode and hides the mode menu, so a split never appears.

Keyboard Interaction

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

Key	Description
Tab	Moves focus among the tab strip, panel, and controls
Arrow Left / Arrow Right	Moves focus to the previous/next tab (Stacked)
Arrow keys	Resizes the split when the separator is focused
Enter / Space	Activates the focused tab or control
Escape	Closes the layout options menu

Patterns that use this component

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

Code

Implementation
TabbedLayout Props
TabbedLayoutTab

Common Examples

To use the TabbedLayout, pass one or more tabs with a unique key, a localized label, and content. The kit forbids children.

import { TabbedLayout } from "@servicetitan/anvil2-ai-kit";

function ExampleComponent() {
  return (
    <TabbedLayout
      tabs={[
        { key: "a", label: "Summary", content: <Summary /> },
        { key: "b", label: "Details", content: <Details /> },
      ]}
    />
  );
}

Its primary home is the artifact region of an AppShell or Window. When the artifact is a drawer, the layout surfaces a close button wired through useAppSurface.

Display modes

stacked shows one panel at a time. vertical-split and horizontal-split show both panels. Splits are offered only with exactly two tabs and a component width of at least 720px. Below that, the layout forces stacked and hides the mode picker. The last chosen mode is restored when the layout grows past the threshold.Seed the starting mode with defaultMode. The layout coerces to stacked when a split is unavailable.

Single tab

A single tab shows neither a tab strip nor the mode menu — only its content. The drawer close button still appears when applicable.

Selection

Pass defaultSelectedKey for uncontrolled selection, or selectedKey with onSelectionChange to own it. Selection changes the visible panel only in stacked mode. Split modes show both panels.

Overflow and narrow widths

Extra tabs overflow the strip. Below 720px the layout stays stacked.

Split resize

Split modes include a drag handle between panes.

Internationalization

TabbedLayout owns these localized strings:

ai-kit.tabbedLayout.layoutOptions
ai-kit.tabbedLayout.layoutMenu
ai-kit.tabbedLayout.modeStacked
ai-kit.tabbedLayout.modeVerticalSplit
ai-kit.tabbedLayout.modeHorizontalSplit
ai-kit.tabbedLayout.close
ai-kit.tabbedLayout.resizePanes
ai-kit.tabbedLayout.tabs

Localize tab label values before passing them. Mount AiKitIntlProvider inside CartoTheme to switch the chrome strings.

React Accessibility

The tab strip is a labeled tablist. Split pane resize exposes a localized name.
Close appears only when the artifact is a drawer, and uses the localized close label.

<TabbedLayout
  tabs={tabs}
  defaultMode="stacked"
  selectedKey={key}
  onSelectionChange={setKey}
/>

`TabbedLayout` Props

The TabbedLayout accepts the following props and forwards remaining <div> attributes except children and style.

TabbedLayoutTab[]

required

One or more tabs. Split modes require exactly two.

string

Class merged onto the root element.

"stacked" | "vertical-split" | "horizontal-split"

default:"stacked"

Uncontrolled starting display mode. Coerced to stacked when a split is unavailable.

string

Uncontrolled selected tab at mount. Defaults to the first tab.

(key: string) => void

Fired when the user picks a tab, controlled or not.

string

Controlled selected tab. Pair with onSelectionChange.

const tab: TabbedLayoutTab = {
  key: "summary",
  label: "Summary",
  content: <Summary />,
};

`TabbedLayoutTab`

ReactNode

required

Panel content.

string

required

Stable identity. Must be unique within tabs.

string

required

Localized label for the strip and split pane heading.

Concepts & Guidelines

Anvil2

Resources

Tabbed Layout - Web

Options

Display Modes

Stacked

Vertical Split

Horizontal Split

Narrow

Single Tab

Behavior

Mode Picker

Split Resize

Overflow Handling

Usage Guidelines

When to Use

When not to use

Keyboard Interaction

Patterns that use this component

Code

Common Examples

Display modes

Single tab

Selection

Overflow and narrow widths

Split resize

Internationalization

React Accessibility

`TabbedLayout` Props

`TabbedLayoutTab`

​Options

​Display Modes

​Stacked

​Vertical Split

​Horizontal Split

​Narrow

​Single Tab

​Behavior

​Mode Picker

​Split Resize

​Overflow Handling

​Usage Guidelines

​When to Use

​When not to use

​Keyboard Interaction

​Patterns that use this component

​Code

​Common Examples

​Display modes

​Single tab

​Selection

​Overflow and narrow widths

​Split resize

​Internationalization

​React Accessibility

​TabbedLayout Props

​TabbedLayoutTab

Options

Display Modes

Stacked

Vertical Split

Horizontal Split

Narrow

Single Tab

Behavior

Mode Picker

Split Resize

Overflow Handling

Usage Guidelines

When to Use

When not to use

Keyboard Interaction

Patterns that use this component

Code

Common Examples

Display modes

Single tab

Selection

Overflow and narrow widths

Split resize

Internationalization

React Accessibility

`TabbedLayout` Props

`TabbedLayoutTab`