app-layout | Vaadin

App layout elements

Published on NPM Build status Published on

App Layout

A collection of elements, along with guidelines and templates that can be used to structure your app’s layout.

What is inside


  • app-box - A container element that can have scroll effects - visual effects based on scroll position.

  • app-drawer - A navigation drawer that can slide in from the left or right.

  • app-drawer-layout - A wrapper element that positions an app-drawer and other content.

  • app-grid - A helper class useful for creating responsive, fluid grid layouts using custom properties.

  • app-header - A container element for app-toolbars at the top of the screen that can have scroll effects - visual effects based on scroll position.

  • app-header-layout - A wrapper element that positions an app-header and other content.

  • app-toolbar - A horizontal toolbar containing items that can be used for label, navigation, search and actions.


The templates are a means to define, illustrate and share best practices in App Layout. Pick a template and customize it:


Sample code for various UI patterns:

  • Transform navigation: As more screen space is available, side navigation can transform into tabs. (Demo - Source)

  • Expand Card: Content cards may expand to take up more horizontal space. (Demo - Source)

  • Material Design Responsive Toolbar: Toolbar changes its height and padding to adapt mobile screen size. (Demo - Source)


Here are some web apps built with App Layout:

See: Documentation, Demo.



npm install --save @polymer/app-layout

In an html file

    <script type="module">
      import '@polymer/app-layout/app-layout.js';
    <app-header reveals>
        <div main-title>My app</div>
    <app-drawer id="drawer" swipe-open></app-drawer>

In a Polymer 3 element

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

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <app-header reveals>
          <div main-title>My app</div>
      <app-drawer id="drawer" swipe-open></app-drawer>
customElements.define('sample-element', SampleElement);


If you want to send a PR to this element, here are the instructions for running the tests and demo locally:


git clone
cd app-layout
npm install
npm install -g polymer-cli

Running the demo locally

polymer serve --npm

Running the tests

polymer test --npm


Link to this version
ImportedReleased 27 November 2018BSD 3-clause "New" or "Revised" License
Framework Support
Polymer 1.0+
Polymer 3.0+
Also supported:
Polymer 2 (2.1.1)
Browser Compatibility
Install with
npm install @polymer/app-layout"@3.0.2"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 3.0.2


  • @polymer/iron-flex-layout#^3.0.0-pre.26
  • @polymer/iron-media-query#^3.0.0-pre.26
  • @polymer/iron-resizable-behavior#^3.0.0-pre.26
  • @polymer/iron-scroll-target-behavior#^3.0.0-pre.26
  • @polymer/polymer#^3.0.0