← Back

App Layout Add-on

A modern and highly customizable menu with a fluent API





A modern looking, material, mobile friendly, responsive and customizable Sliding Menu + Appbar with a fluent API with focus on offering many display modes, to satisfy a variety of requirements.


Note that the API changed significantly from V1 to V2:

This Addon uses the Polymer Component app-layout but is not meant as a port of all the features that come with it. Instead it offers some ready to use templates in which you can add your Vaadin Components. If you are not satisfied with the offered templates you can add your own Polymer templates.

  • Up navigation support
  • Route and Route Alias Highlighting support
  • Lumo support
  • Supports opening the drawer via touch swiping
  • Multiple UI behaviours available, checkout the demo to see them
  • Notification Component
  • Profile Button Component
  • Search Button Component
Features Vaadin 8
  • customizable
  • no round-trip delay when opening the menu
  • build in (but optional) Navigator support
  • supports opening the drawer via touch swiping
  • by default in multiple variations available
  • notification badge built in

For Vaadin 8 CDI or Vaadin 8 + Spring Users -> Check out the Vaadin 8 Code examples

You need help, miss a feature or found a bug? Create an issue on Github!


(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.


Breaking changes:

  • some Components were renamed or put into different packages. Please check the demo!

Changes since 2.0.8: Fixed issues:

  • #252 new method in AppLayoutBuilder to disable "swipe-open" withSwipeOpen (will stay enabled by default)
  • #190 new Behavior LEFT_RESPONSIVE_DOUBLE
  • #236 fixes issues in Edge (and eventually in Firefox 60 ESR) which caused content not to be displayed
  • #249 styling issues for the material theme
  • #245 TOP_LARGE styling issue
  • #246 Bad path to custom-style.html in app-layout-styles.html bug
  • #175 reimplemented Submenu (this also closed #242, #236, #230, #214)
  • #240 fixes styling issues that werepresent when using the app-layout in the bakery example
  • #253 Menu item is not highlighted when using @RouteAlias

As always thank you very much for your contributions! And thanks to everybody for finding bugs!

Apache License 2.0


Vaadin 10
Vaadin 11
Vaadin 12
Vaadin 21 in 21.0.0-beta1
Vaadin 14+ in 4.0.0
Vaadin 13+ in 3.0.0.beta5
Vaadin 10+ in 2.0.8
Vaadin 8.0+ in 0.9.3
Vaadin 8.1+ in 1.0.5
Google Chrome
Android Browser
Microsoft Edge

Vaadin Add-on Directory

Find open-source widgets, add-ons, themes, and integrations for your Vaadin application. Vaadin Add-on Directory
The channel for finding, promoting, and distributing Vaadin add-ons.