> Markdown version of [Using Parent Layout](https://vaadin.com/docs/v24/flow/create-ui/templates/polymer/parent-layout). Section index: [llms.txt](https://vaadin.com/docs/v24/flow/llms.txt)

# Using Parent Layout (deprecated since V18)

> **Warning:** Polymer support has been deprecated since Vaadin 18 (released in November 2020), in favor of faster and simpler [Lit templates](https://vaadin.com/docs/v24/flow/create-ui/templates.md). The built-in support for Polymer templates has been removed and is only available as a commercial add-on. However, a free conversion tool is available to assist in converting Polymer templates to Lit.
>
> Read more about setting up the commercial Polymer templates addon in the [Upgrade Guide](https://vaadin.com/docs/v24/upgrading.md#polymer-templates).

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

You can see in the example the JavaScript Polymer template showing the actual view, `MainLayout`, below a heading and menu:

```javascript
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 -->
      <slot></slot>
    `;
  }

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

customElements.define(MainLayout.is, 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.

This example shows a mapped Java template class that imports the JavaScript template and implements `RouterLayout`:

```java
@Tag("main-layout")
@JsModule("./com/example/main-layout.js")
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.

This example is using the `layout` parameter in the `@Route` annotation to mark `MainLayout` as the parent layout:

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

See [Router Layouts and Nested Router Targets](https://vaadin.com/docs/v24/flow/routing/layout.md) for more about parent views, and [Creating a Simple Component Using the Template API](https://vaadin.com/docs/v24/flow/create-ui/templates/polymer/polymer-template-basic.md) for general information about the `PolymerTemplate` API.

`24E23F32-0623-456B-8F09-EE90F9605FA4`