Split Pane
Examples
Basic Split Pane
Initial Size
Pixel-Based Sizing
Min and Max Size
Secondary Size Preference
Vertical Split
Bordered Divider
Persistent State with Storage
Local Storage Persistence
Padded Layout
Padded Right
Responsive Behavior
Custom Captions
Programmatic Focus Control
Code Editor Layout
Dashboard Layout
Vertical Dashboard
Nested Split Panes
Touch Support
Customizing with CSS Variables
Importing
Slots
Events
Custom Properties
Parts
Dependencies

Split Pane

<zn-split-pane> | ZnSplitPane

Since 1.0

experimental

Short summary of the component’s intended use.

Primary Pane

This is the primary (left) pane. Drag the divider to resize.

Secondary Pane

This is the secondary (right) pane. It adjusts automatically as you resize the primary pane.

<zn-split-pane style="height: 400px;">
  <div slot="primary" style="padding: 20px;">
    <h3>Primary Pane</h3>
    <p>This is the primary (left) pane. Drag the divider to resize.</p>
  </div>
  <div slot="secondary" style="padding: 20px;">
    <h3>Secondary Pane</h3>
    <p>This is the secondary (right) pane. It adjusts automatically as you resize the primary pane.</p>
  </div>
</zn-split-pane>

Examples

Basic Split Pane

Create a basic split pane with two sections. By default, the split is horizontal (left/right) with the primary pane starting at 50% width.

Primary pane content

Secondary pane content

<zn-split-pane style="height: 300px;">
  <div slot="primary" style="padding: 20px; background: #f5f5f5;">
    <p>Primary pane content</p>
  </div>
  <div slot="secondary" style="padding: 20px;">
    <p>Secondary pane content</p>
  </div>
</zn-split-pane>

Initial Size

Use the initial-size attribute to set the starting size of the primary pane. By default, this is a percentage value (0–100).

Primary pane at 30%

Secondary pane at 70%

<zn-split-pane initial-size="30" style="height: 300px;">
  <div slot="primary" style="padding: 20px; background: #f5f5f5;">
    <p>Primary pane at 30%</p>
  </div>
  <div slot="secondary" style="padding: 20px;">
    <p>Secondary pane at 70%</p>
  </div>
</zn-split-pane>

Pixel-Based Sizing

Use the pixels attribute to switch from percentage-based sizing to pixel-based sizing. When enabled, initial-size, min-size, and max-size are all interpreted as pixel values.

Primary pane is 250px wide

Secondary pane fills remaining space

<zn-split-pane pixels initial-size="250" style="height: 300px;">
  <div slot="primary" style="padding: 20px; background: #f5f5f5;">
    <p>Primary pane is 250px wide</p>
  </div>
  <div slot="secondary" style="padding: 20px;">
    <p>Secondary pane fills remaining space</p>
  </div>
</zn-split-pane>

Min and Max Size

Use min-size and max-size to constrain how much users can resize the primary pane. These values match the unit type (percentage or pixels).

Primary pane can be resized between 20% and 80%

Secondary pane adjusts accordingly

<zn-split-pane min-size="20" max-size="80" style="height: 300px;">
  <div slot="primary" style="padding: 20px; background: #f5f5f5;">
    <p>Primary pane can be resized between 20% and 80%</p>
  </div>
  <div slot="secondary" style="padding: 20px;">
    <p>Secondary pane adjusts accordingly</p>
  </div>
</zn-split-pane>

With pixel sizing:

Primary pane can be resized between 150px and 400px

Secondary pane fills remaining space

<zn-split-pane pixels min-size="150" max-size="400" initial-size="250" style="height: 300px;">
  <div slot="primary" style="padding: 20px; background: #f5f5f5;">
    <p>Primary pane can be resized between 150px and 400px</p>
  </div>
  <div slot="secondary" style="padding: 20px;">
    <p>Secondary pane fills remaining space</p>
  </div>
</zn-split-pane>

Secondary Size Preference

Use the secondary attribute to make the initial-size value apply to the secondary pane instead of the primary pane.

Primary pane takes remaining space (70%)

Secondary pane is 30%

<zn-split-pane secondary initial-size="30" style="height: 300px;">
  <div slot="primary" style="padding: 20px; background: #f5f5f5;">
    <p>Primary pane takes remaining space (70%)</p>
  </div>
  <div slot="secondary" style="padding: 20px;">
    <p>Secondary pane is 30%</p>
  </div>
</zn-split-pane>

Vertical Split

Use the vertical attribute to create a vertical split (top/bottom) instead of horizontal (left/right).

Top Pane

This is the primary (top) pane.

Bottom Pane

This is the secondary (bottom) pane.

<zn-split-pane vertical style="height: 400px;">
  <div slot="primary" style="padding: 20px; background: #f5f5f5;">
    <h3>Top Pane</h3>
    <p>This is the primary (top) pane.</p>
  </div>
  <div slot="secondary" style="padding: 20px;">
    <h3>Bottom Pane</h3>
    <p>This is the secondary (bottom) pane.</p>
  </div>
</zn-split-pane>

Bordered Divider

Use the bordered attribute to add a visible border to the divider, making it more prominent.

Primary pane

Secondary pane with bordered divider

<zn-split-pane bordered style="height: 300px;">
  <div slot="primary" style="padding: 20px; background: #f5f5f5;">
    <p>Primary pane</p>
  </div>
  <div slot="secondary" style="padding: 20px;">
    <p>Secondary pane with bordered divider</p>
  </div>
</zn-split-pane>

Persistent State with Storage

Use the store-key attribute to persist the split position across page reloads. By default, the position is stored in session storage.

Resize this pane and reload the page.

Your position will be remembered during this session.

Secondary pane content

<zn-split-pane store-key="my-split-pane" style="height: 300px;">
  <div slot="primary" style="padding: 20px; background: #f5f5f5;">
    <p>Resize this pane and reload the page.</p>
    <p>Your position will be remembered during this session.</p>
  </div>
  <div slot="secondary" style="padding: 20px;">
    <p>Secondary pane content</p>
  </div>
</zn-split-pane>

Local Storage Persistence

Use local-storage with store-key to persist the split position across browser sessions. Use store-ttl to set an expiration time in seconds.

This position persists for 24 hours (86400 seconds).

Secondary pane content

<zn-split-pane store-key="persistent-split" local-storage store-ttl="86400" style="height: 300px;">
  <div slot="primary" style="padding: 20px; background: #f5f5f5;">
    <p>This position persists for 24 hours (86400 seconds).</p>
  </div>
  <div slot="secondary" style="padding: 20px;">
    <p>Secondary pane content</p>
  </div>
</zn-split-pane>

Padded Layout

Use the padded attribute to add padding and styling to the split pane, giving it a more distinct visual appearance with borders and rounded corners.

Padded Primary

The padded attribute adds visual styling.

Padded Secondary

Both panes have styled borders.

<zn-split-pane padded style="height: 400px;">
  <div slot="primary">
    <zn-sp padded>
      <h3>Padded Primary</h3>
      <p>The padded attribute adds visual styling.</p>
    </zn-sp>
  </div>
  <div slot="secondary">
    <zn-sp padded>
      <h3>Padded Secondary</h3>
      <p>Both panes have styled borders.</p>
    </zn-sp>
  </div>
</zn-split-pane>

Padded Right

Use the padded-right attribute for padding on the right pane specifically.

Primary pane

Secondary pane with right padding

<zn-split-pane padded-right style="height: 300px;">
  <div slot="primary">
    <zn-sp padded>
      <p>Primary pane</p>
    </zn-sp>
  </div>
  <div slot="secondary">
    <zn-sp padded>
      <p>Secondary pane with right padding</p>
    </zn-sp>
  </div>
</zn-split-pane>

Responsive Behavior

On smaller screens (below medium breakpoint), the split pane automatically converts to a tabbed navigation interface, allowing users to toggle between the primary and secondary panes.

Details

On small screens, this becomes a tab.

Settings

Toggle between panes using the navigation.

<zn-split-pane
  primary-caption="Details"
  secondary-caption="Settings"
  style="height: 300px;">
  <div slot="primary" style="padding: 20px; background: #f5f5f5;">
    <h3>Details</h3>
    <p>On small screens, this becomes a tab.</p>
  </div>
  <div slot="secondary" style="padding: 20px;">
    <h3>Settings</h3>
    <p>Toggle between panes using the navigation.</p>
  </div>
</zn-split-pane>

Note: Resize your browser window to see the responsive behavior in action. Below the medium breakpoint (~750px), tabs will appear at the top.

Custom Captions

Use primary-caption and secondary-caption to customize the labels shown in the responsive tab navigation.

File Browser

index.html
styles.css
script.js

Editor

File contents would appear here.

<zn-split-pane
  primary-caption="File Browser"
  secondary-caption="Editor"
  style="height: 350px;">
  <div slot="primary" style="padding: 20px; background: #f5f5f5;">
    <h3>File Browser</h3>
    <ul>
      <li>index.html</li>
      <li>styles.css</li>
      <li>script.js</li>
    </ul>
  </div>
  <div slot="secondary" style="padding: 20px;">
    <h3>Editor</h3>
    <p>File contents would appear here.</p>
  </div>
</zn-split-pane>

Programmatic Focus Control

Use the split-pane-focus attribute on clickable elements to programmatically switch between panes on small screens.

Primary pane content

Show Secondary

Secondary pane content

Show Primary

<zn-split-pane style="height: 300px;">
  <div slot="primary" style="padding: 20px; background: #f5f5f5;">
    <p>Primary pane content</p>
    <zn-button split-pane-focus="1">Show Secondary</zn-button>
  </div>
  <div slot="secondary" style="padding: 20px;">
    <p>Secondary pane content</p>
    <zn-button split-pane-focus="0">Show Primary</zn-button>
  </div>
</zn-split-pane>

Code Editor Layout

A practical example showing a split pane used for a code editor with file browser.

Files

📁 src/
📄 index.ts
📄 app.ts
📁 styles/
📄 main.css
📄 package.json

Editor - index.ts

import { Component } from './app';

const app = new Component({
  name: 'MyApp',
  version: '1.0.0'
});

app.init();

<zn-split-pane
  pixels
  initial-size="200"
  min-size="150"
  max-size="400"
  store-key="code-editor"
  primary-caption="Files"
  secondary-caption="Editor"
  style="height: 400px;">
  <div slot="primary" style="padding: 15px; background: #f8f8f8;">
    <h4 style="margin-top: 0;">Files</h4>
    <div style="font-family: monospace; font-size: 0.9em;">
      <div style="padding: 4px 0;">📁 src/</div>
      <div style="padding: 4px 0; padding-left: 20px;">📄 index.ts</div>
      <div style="padding: 4px 0; padding-left: 20px;">📄 app.ts</div>
      <div style="padding: 4px 0;">📁 styles/</div>
      <div style="padding: 4px 0; padding-left: 20px;">📄 main.css</div>
      <div style="padding: 4px 0;">📄 package.json</div>
    </div>
  </div>
  <div slot="secondary" style="padding: 15px;">
    <h4 style="margin-top: 0;">Editor - index.ts</h4>
    <pre style="background: #f5f5f5; padding: 15px; border-radius: 4px; overflow: auto;"><code>import { Component } from './app';

const app = new Component({
  name: 'MyApp',
  version: '1.0.0'
});

app.init();</code></pre>
  </div>
</zn-split-pane>

Dashboard Layout

A dashboard layout example with a sidebar and main content area.

Navigation

Dashboard Overview

Total Users

1,234

Revenue

$45.6K

Active Sessions

<zn-split-pane
  initial-size="25"
  min-size="20"
  max-size="40"
  bordered
  store-key="dashboard-layout"
  primary-caption="Menu"
  secondary-caption="Dashboard"
  style="height: 400px;">
  <div slot="primary" style="padding: 20px; background: #f8f9fa;">
    <h4 style="margin-top: 0;">Navigation</h4>
    <nav>
      <zn-menu>
        <zn-menu-item>Dashboard</zn-menu-item>
        <zn-menu-item>Analytics</zn-menu-item>
        <zn-menu-item>Reports</zn-menu-item>
        <zn-menu-item>Settings</zn-menu-item>
      </zn-menu>
    </nav>
  </div>
  <div slot="secondary" style="padding: 20px;">
    <h3 style="margin-top: 0;">Dashboard Overview</h3>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
      <div style="background: #e3f2fd; padding: 20px; border-radius: 8px;">
        <h4 style="margin: 0 0 10px 0;">Total Users</h4>
        <p style="font-size: 2em; margin: 0;">1,234</p>
      </div>
      <div style="background: #f3e5f5; padding: 20px; border-radius: 8px;">
        <h4 style="margin: 0 0 10px 0;">Revenue</h4>
        <p style="font-size: 2em; margin: 0;">$45.6K</p>
      </div>
      <div style="background: #e8f5e9; padding: 20px; border-radius: 8px;">
        <h4 style="margin: 0 0 10px 0;">Active Sessions</h4>
        <p style="font-size: 2em; margin: 0;">89</p>
      </div>
    </div>
  </div>
</zn-split-pane>

Vertical Dashboard

A vertical split pane showing a header area and main content.

Activity Feed

New user registration

System update completed

New comment posted

Content Area

Main content goes here. The vertical split is useful for layouts with header/footer sections.

<zn-split-pane
  vertical
  initial-size="30"
  min-size="20"
  max-size="50"
  bordered
  style="height: 400px;">
  <div slot="primary" style="padding: 20px; background: #f8f9fa;">
    <h3 style="margin-top: 0;">Activity Feed</h3>
    <div style="overflow-y: auto;">
      <div style="padding: 10px; border-bottom: 1px solid #ddd;">New user registration</div>
      <div style="padding: 10px; border-bottom: 1px solid #ddd;">System update completed</div>
      <div style="padding: 10px; border-bottom: 1px solid #ddd;">New comment posted</div>
    </div>
  </div>
  <div slot="secondary" style="padding: 20px;">
    <h3 style="margin-top: 0;">Content Area</h3>
    <p>Main content goes here. The vertical split is useful for layouts with header/footer sections.</p>
  </div>
</zn-split-pane>

Nested Split Panes

Split panes can be nested to create complex layouts with multiple resizable sections.

Sidebar

Fixed left sidebar

Top Section

This is a nested vertical split

Bottom Section

Resize both horizontal and vertical dividers

<zn-split-pane
  pixels
  initial-size="250"
  min-size="150"
  max-size="400"
  style="height: 400px;">
  <div slot="primary" style="padding: 20px; background: #f8f9fa;">
    <h4 style="margin-top: 0;">Sidebar</h4>
    <p>Fixed left sidebar</p>
  </div>
  <zn-split-pane
    slot="secondary"
    vertical
    initial-size="40"
    min-size="30"
    max-size="60">
    <div slot="primary" style="padding: 20px;">
      <h4 style="margin-top: 0;">Top Section</h4>
      <p>This is a nested vertical split</p>
    </div>
    <div slot="secondary" style="padding: 20px; background: #f5f5f5;">
      <h4 style="margin-top: 0;">Bottom Section</h4>
      <p>Resize both horizontal and vertical dividers</p>
    </div>
  </zn-split-pane>
</zn-split-pane>

Touch Support

The split pane fully supports touch events for mobile devices. Users can drag the divider with their finger to resize.

Touch and drag the divider on mobile devices

Touch events are fully supported

<zn-split-pane style="height: 300px;">
  <div slot="primary" style="padding: 20px; background: #f5f5f5;">
    <p>Touch and drag the divider on mobile devices</p>
  </div>
  <div slot="secondary" style="padding: 20px;">
    <p>Touch events are fully supported</p>
  </div>
</zn-split-pane>

Customizing with CSS Variables

The split pane exposes CSS variables for advanced customization.

Custom CSS variables applied

Thicker divider with custom sizing

<zn-split-pane
  style="
    height: 300px;
    --min-panel-size: 150px;
    --max-panel-size: 500px;
    --initial-size: 300px;
    --resize-size: 4px;
    --resize-margin: 10px;
  "
  pixels>
  <div slot="primary" style="padding: 20px; background: #f5f5f5;">
    <p>Custom CSS variables applied</p>
  </div>
  <div slot="secondary" style="padding: 20px;">
    <p>Thicker divider with custom sizing</p>
  </div>
</zn-split-pane>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

To import this component from the CDN using a script tag:

<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.86/dist/components/split-pane/split-pane.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.86/dist/components/split-pane/split-pane.js';

To import this component using a bundler:

import '@kubex/zinc/dist/components/split-pane/split-pane.js';

Slots

Name	Description
(default)	The default slot.
`example`	An example slot.

Learn more about using slots.

Events

Name	React Event	Description	Event Detail
`zn-event-name`		Emitted as an example.	-

Learn more about events.

Custom Properties

Name	Description	Default
`--example`	An example CSS custom property.

Learn more about customizing CSS custom properties.

Parts

Name	Description
`base`	The component’s base wrapper.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

<zn-example>