Documentation versions (currently viewingVaadin 23)

You are viewing documentation for Vaadin 23. View latest documentation

Using Parent Layout

Polymer templates are deprecated. Lit templates are recommended instead.

A PolymerTemplate can be used as a parent layout by using the <slot> in the position where the child view should be displayed.

Example: JavaScript Polymer template showing the actual view, MainLayout, below a heading and menu.

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';

class MainLayout extends PolymerElement {
  static get template() {
    return html`
      <h1>Site title</h1>
      <div class="menu">...</div>
      <!-- child content comes here -->

  static get is() {
    return 'main-layout';

customElements.define(, MainLayout);

To use this template file, you need a basic Java template class that’s mapped to the JavaScript template file (using the @JsModule annotation) and that implements the RouterLayout interface.

Example: Mapped Java template class that imports the JavaScript template and implements RouterLayout.

public class MainLayout extends PolymerTemplate<TemplateModel>
        implements RouterLayout {
  • The showRouterLayoutContent(HasElement) method in the RouterLayout interface has a default implementation. This makes it unnecessary to write additional code, but you can override and re-implement it, if necessary.

You can now use MainLayout as a parent layout using the @Route or @ParentLayout annotations.

Example: Using the layout parameter in the @Route annotation to mark MainLayout as the parent layout.

@Route(value="editor", layout=MainLayout.class)
public class Editor extends Div {
public class MenuBar extends Div {

See the following resources for related information: