Split Layout is a component with two content areas and a draggable split handle between them.

Note
Work In Progress

The Java examples for this component are currently in progress. In the meantime, you can view the previous examples.

<vaadin-split-layout style="max-height: 280px;">
  <master-content></master-content>
  <detail-content></detail-content>
</vaadin-split-layout>

Orientation

The default orientation is horizontal, placing the content areas side by side. The orientation can also be vertical.

Orientation should be set based on the content and the screen size. The user can also be allowed to choose which orientation they wish to use.

<vaadin-split-layout style="max-height: 350px;" orientation="vertical">
  <master-content></master-content>
  <detail-content></detail-content>
</vaadin-split-layout>

Splitter Position

The initial splitter position is determined by the default size of the two content area components. Their height and width affect the position when using a vertical and horizontal orientation, respectively.

The initial split position can also be explicitly set using a percentage value.

<vaadin-split-layout style="max-height: 280px;">
  <master-content style="width: 50%;"></master-content>
  <detail-content style="width: 50%;"></detail-content>
</vaadin-split-layout>

The splitter respects the minimum and maximum size of the content area components.

<vaadin-split-layout style="max-height: 280px;">
  <master-content style="min-width: 200px; max-width: 400px;"></master-content>
  <detail-content></detail-content>
</vaadin-split-layout>

The split can be adjusted programmatically, for example, by using a Button. This is useful when the user wants to toggle between certain positions.

@state()
private sidebarCollapsed = false;

render() {
  const sidebarWidthPercentage = this.sidebarCollapsed ? 13 : 40;

  return html`
    <vaadin-split-layout style="max-height: 280px;">
      <div style="overflow: hidden; width: ${sidebarWidthPercentage}%">
        <vaadin-button
          theme="icon tertiary"
          aria-label="Expand/collapse sidebar"
          @click="${this.toggleSidebar}"
          style="float: right;"
        >
          <iron-icon
            icon="${this.sidebarCollapsed ? 'vaadin:arrow-right' : 'vaadin:arrow-left'}"
          ></iron-icon>
        </vaadin-button>
        <master-content></master-content>
      </div>
      <detail-content style="width: ${100 - sidebarWidthPercentage}%"></detail-content>
    </vaadin-split-layout>
  `;
}

toggleSidebar() {
  this.sidebarCollapsed = !this.sidebarCollapsed;
}

Theme Variants

Split Layout has two theme variants: small and minimal.

<vaadin-split-layout style="max-height: 280px;" theme="small">
  <master-content></master-content>
  <detail-content></detail-content>
</vaadin-split-layout>

The small theme variant makes the divider smaller. The minimal theme variant hides the visual divider. Both variants only show the split handle on hover and are not ideal for touch devices.

<vaadin-split-layout style="max-height: 280px;" theme="minimal">
  <master-content></master-content>
  <detail-content></detail-content>
</vaadin-split-layout>

When using the minimal theme variant, it is recommended to somehow suggest the split between the two sides, for example by styling one side as a layer on top of the other.

While these variants reduce the visual clutter, they make it less obvious to the user that the content is resizable.

Best Practices

  • Don’t use Split Layout when either content area has, or should have, a fixed size.

  • Split Layouts can be difficult to use in responsive applications due to the splitter position being percentage based and thus the content scales with the viewport.

  • Use Split Layout to give the user the ability to adjust the layout. However, if the only distinct positions such as collapsed and expanded are useful to the user, use a toggle button instead. Non-adjustable layouts should use Ordered Layouts or Flex Layout.