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.
- Vaadin 8 -> App-Layout
- Vaadin 10 -> App-Layout
- Vaadin 13 or Vaadin 14 with bower mode -> App-Layout
- Vaadin 14 with NPM Mode -> App-Layout
- Vaadin 21 -> App-Layout
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
- 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!
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.
- 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 8.0+ in 0.6.0
- Vaadin 10+ in 2.0.0
- Vaadin 13+ in 3.0.0.beta4
- Vaadin 14+ in 4.0.0.beta1
- Vaadin 21 in 21.0.0-beta1
- Vaadin 8.1+ in 0.5.0
- Google Chrome
- Android Browser
- Microsoft Edge