Directory

App Layout Add-on - Vaadin Add-on Directory

A modern and highly customizable menu with a fluent API App Layout Add-on - Vaadin Add-on Directory
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. ## Versioning * Vaadin 8 -> [App-Layout `1.*`](https://vaadin.com/directory/component/app-layout-add-on/1.0.2) * Vaadin 10 -> [App-Layout `2.*`](https://vaadin.com/directory/component/app-layout-add-on/2.1.0) * Vaadin 13 or Vaadin 14 with bower mode -> [App-Layout `3.*`](https://vaadin.com/directory/component/app-layout-add-on/3.0.0.beta5) * Vaadin 14 with NPM Mode -> [App-Layout `4.*`](https://vaadin.com/directory/component/app-layout-add-on) * Vaadin 21 -> [App-Layout `21.*`](https://vaadin.com/directory/component/app-layout-add-on) Note that the API changed significantly from V1 to V2: * [Vaadin 8 Examples](https://github.com/appreciated/vaadin-app-layout/tree/V8/app-layout-examples) * [Vaadin 10 Examples](https://github.com/appreciated/vaadin-app-layout/tree/V10/app-layout-examples/app-layout-examples-vaadin-10) * [Vaadin 12 Examples](https://github.com/appreciated/vaadin-app-layout/tree/V10/app-layout-examples/app-layout-examples-vaadin-10) * [Vaadin 14 with NPM Mode Examples](https://github.com/appreciated/vaadin-app-layout/tree/master/app-layout-examples) This Addon uses the Polymer Component [app-layout](https://www.webcomponents.org/element/PolymerElements/app-layout/demo/demo/index.html) 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. ###### Features - [Up navigation](https://developer.android.com/training/design-navigation/ancestral-temporal) 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!](https://github.com/appreciated/vaadin-app-layout)
Discussion Forum
Issue tracker
View on GitHub
Wiki
Online Demo

App Layout Add-on version 0.5.0
null

App Layout Add-on version 0.6.0
null

App Layout Add-on version 0.6.1
null

App Layout Add-on version 0.6.2
null

App Layout Add-on version 0.6.3
- removed padding on the right side of the app bar - increased height of the layout inside the app bar to allow button to use the full height - added demo which allows to switch between the available variations - fixed Issue #1

App Layout Add-on version 0.6.4
fixes issue #1 take 2

App Layout Add-on version 0.6.5
- fixed a bug that caused custom components not to be added to the menu - added possibility to replace the default components for sections and menu elements

App Layout Add-on version 0.6.6
- allow to provide your own Navigator in the Builder - allow access the initialized Navigator via the Builder

App Layout Add-on version 0.6.7
- added new scss variables - added new variant LEFT_RESPONSIVE_SMALL_NO_APP_BAR - added new variant LEFT_RESPONSIVE_SMALL

App Layout Add-on version 0.6.8
- Feature requested in Issue #3 | Added possibility to add a menu element with a custom click action

App Layout Add-on version 0.6.9
- fixes issue - empty menu buttons - fixes issue - non visible burger icon - removed unused import - fixed some z-index related issues (f.e. DateField Icon underneath Drawer)

App Layout Add-on version 0.8.4
null

App Layout Add-on version 0.8.6

App Layout Add-on version 0.8.7

App Layout Add-on version 0.8.8

App Layout Add-on version 0.8.9

App Layout Add-on version 0.9.0

App Layout Add-on version 0.9.1

App Layout Add-on version 0.9.3

App Layout Add-on version 0.9.4

App Layout Add-on version 0.9.5

App Layout Add-on version 0.9.7
- renamed LEFT_RESPONSIVE_HYBRID to LEFT_HYBRID - added replacement for the LEFT_RESPONSIVE_HYBRID with a responsive variant as you would expect it - fixes issue #18 - updated bower dependency - fixes issue #17 - do not require the navigator when using Submenus Elements by default

App Layout Add-on version 0.9.8
- Improvements for Spring - Example with Spring Views added

App Layout Add-on version 0.9.10
Fixed Issues: - \#31 | Sass compilation error - \#29 | Added Annotation to Contain a VaadinIcon for Spring Views

App Layout Add-on version 0.9.11
- Proper demo added - Heavy refactoring -> Expect bugs - API changes - New behaviours added TOP and TOP_LARGE

App Layout Add-on version 0.9.13
Bugfixes: - removed Fallback layout - added proper support for ES5 Browsers (IE11, many older Browsers) - fixes many many styling issues under several Browsers - removed button descriptions since it does not work properly on iOS Devices

App Layout Add-on version 0.9.14
- CDI improvements - added DefaultSpringNavigationElementInfoProvider ##### Fixed several issues: - \#56 thanks @Daguinos for reporting - \#55 thanks @kamuffe for reporting

App Layout Add-on version 0.9.15
- Unified sass variables (Every Sass Variable was renamed so if you used one before change it) - fixes #58 | Thanks @De Soca - allow ViewNameInterceptor to be used in combination with NavigationElementInfoProvider (when not using CDI) - added missing methods for View instances to AppLayoutBuilder - fixes #62 | Thanks @Panos Bariamis - fixed styling issues for sub-sub-menus - added Runtime exception in favor of #60 | Thanks @Henrik Adamski - fixes #58 | Thanks @mscho88

App Layout Add-on version 0.9.16
- Fixes #67 | Allow to add indention to submenu elements - Fixes #49 | Allow close the notifications automatically on click - Fixes #63 | Setting the design via the builder dis not work properly - Fixes #52 | TOP Large Styling Issues under Internet Explorer

App Layout Add-on version 0.9.17
- fixes #68 | Grid not adjusting the column width on opening, closing or resizing the menu

App Layout Add-on version 0.9.18
###Changes: NotificationAppBarButton renamed to AppBarNotificationButton ###Fixed issues: - \#73 reported by Henrik Adamski | NavigationElement with Position Footer is left assign if Behaviour.TOP is selected enhancement - \#74 requested by bladem | Allow modifying padding and spacing between menu elements enhancement - \#72 reported by Dinu Mihnea | Margin does not reset on small devices bug enhancement question Thank very much you for reporting the issues!

App Layout Add-on version 0.9.19
###Changes: NotificationAppBarButton renamed to AppBarNotificationButton ###Fixed issues: - \#75 reported by Sergio70 | Scroll to top when navigating to another view - \#69 reported by bladem | Collapse Submenus when navigating to another view - \#78 reported by Dinu Mihnea | Variable to set the Drawerwidth has no effect in edge & IE11 browser Thanks again for reporting the issues!

App Layout Add-on version 0.9.20
# API Changes The API was changed to make it easier for the user to use it correctly. Instead of giving you one Builder that allows you to build a AppLayout with Navigator, CDI Navigator and without Navigator there now are three different builders with their unique functions to avoid Exceptions. ## Fixes Issues: - \#90 | Separate View name from label. enhancement question - thank you for reporting @bsutton - \#91 | Allow to set the withTitle Component - thank you for reporting @rodrifmed - \#88 | Allow creating the AppLayout without navigator - thank you for reporting @rodrifmed - \#87 | Main menu not closing when item selected bug - thank you for reporting @bsutton - \#83 | Collapse subMenu when click other menu - thank you for reporting @bladem - \#81 | Make it easier to provide a custom @MenuIcon Annotation - thank you for reporting @dangllucas - \#78 | Drawer width in edge & IE11 browser bug - thank you for reporting @DinuMihnea

App Layout Add-on version 0.9.21
* added more JavaDocs * adjusted the project for Vaadin Elements (BIG thanks to @deya here!)

App Layout Add-on version 0.9.22
- improved stability when added invalid configurations

App Layout Add-on version 0.9.23
Featuring: - updated Vaadin and Webcomponent dependencies - added new method withNavigationElementClickListener to allow to listen to clicks on specific NavigationElements Fixes issues: - #115 passed captions to the add method will now overwrite the values of the annotation - #114 missing path parameter for menu

App Layout Add-on version 1.0.0

App Layout Add-on version 1.0.1
Fixes the following issues: #119 - styling issues related to the notification window | Thanks for reporting @kamuffe #128 - improved styling for IE 11 | Thanks for reporting @bekirmavus #125 - added Vaadin CDI support | Thanks @JDo-Jimenez fixing an issue of component provider set via the builder won't overwrite the final ones in the component

App Layout Add-on version 1.0.2

App Layout Add-on version 2.0.0
Initial Vaadin 10 release - currently no IE11 Support

App Layout Add-on version 2.0.2
# Prepare for API breaking changes - Lumo support for dark and light theme - Fixed problems when running the app-layout on non default context paths - improved styling possiblities by adding css variables. - fixed issue #159 AppLayoutRouterLayout.getCurrent() returned always null - allow to use the Builder without supplying a menu - reintroduced Annotations Support - allow to set the Locale for the Notifications ... Many more fixes for details see on Github Thanks to everybody helping to find one of the many issues!

App Layout Add-on version 2.0.3
fixed issues: - #201 AppLayoutRouterLayout.getCurrent() returned wrong type | Thanks for reporting to slatequarry - #204 Allow using the AppLayoutRouterLayout without any Menu Navigation Component | Thanks for reporting to vrepetenko

App Layout Add-on version 2.0.4
- updated dependecies

App Layout Add-on version 2.0.5
- improved path handling and back navigation - improved behaviour on small screens

App Layout Add-on version 2.0.7
- hotfix for #217 | Thanks @ marcoebbinghaus for reporting - To fix #138 it was necessary to change the initalization of the AppLayout please check the Code Examples to see what changed.

App Layout Add-on version 2.0.8
- fix #219 issues in production mode | thanks @Slugger2k for reporting

App Layout Add-on version 2.1.0
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!

App Layout Add-on version 2.1.1.beta2
closes issues: - #228 minor focus issues when using a ContextMenu inside the app-bar - #260 improves padding in the app-bar - #210 Allow closing the submenus on navigation (will be enabled by default, can be disabled) - #250 iOS scrolling behaviour Fixes also: - styling issues - major issue which caused wrong app-layout instance to be returned when using the getCurrent method

App Layout Add-on version 3.0.0.beta4
closes issues: - #228 minor focus issues when using a ContextMenu inside the app-bar - #260 improves padding in the app-bar - #210 Allow closing the submenus on navigation (will be enabled by default, can be disabled) - #250 iOS scrolling behaviour Fixes also: - styling issues - major issue which caused wrong app-layout instance to be returned when using the getCurrent method

App Layout Add-on version 2.1.1
fix issues: - #210 | Allow closing the submenus on navigation - #266 | Padding issues in Behaviors with a "small"

App Layout Add-on version 3.0.0.beta5
fix issues: - #210 | Allow closing the submenus on navigation - #266 | Padding issues in Behaviors with a "small"

App Layout Add-on version 4.0.0.beta1
- inital version for Vaadin 14 expect bugs ## Note Currently `flow-server-compatibility-mode` is not supported!

App Layout Add-on version 4.0.0.beta2
- fixed #287 ## Note Currently `flow-server-compatibility-mode` is not supported!

App Layout Add-on version 4.0.0.beta3
fixes issue #289 / #288

App Layout Add-on version 4.0.0.beta4
# !API changes ahead! - Behavior enum was removed instead now the Actual classes need to used directly (LEFT -> LeftLayouts.Left) - Many Component Builders were reworked to support multiple components at once - AppBarNotificationButton was renamed to AppBarNotificationButton + the Component was replaced (See V14 Examples) - Search Component was added (See V14 Examples) - Profile Button Component was added (See V14 Examples)

App Layout Add-on version 4.0.0.beta5
# !API changes ahead! - Behavior enum was removed instead now the Actual classes need to used directly (LEFT -> LeftLayouts.Left) - Many Component Builders were reworked to support multiple components at once - AppBarNotificationButton was renamed to AppBarNotificationButton + the Component was replaced (See V14 Examples) - Search Component was added (See V14 Examples) - Profile Button Component was added (See V14 Examples) # beta5 - improved NotificationsOverlayView.java and SearchOverlayView.java styling for smaller screens ## Note Currently `flow-server-compatibility-mode` is not supported!

App Layout Add-on version 4.0.0.beta7
# !API changes ahead! - Behavior enum was removed instead now the Actual classes need to used directly (LEFT -> LeftLayouts.Left) - Many Component Builders were reworked to support multiple components at once - AppBarNotificationButton was renamed to AppBarNotificationButton + the Component was replaced (See V14 Examples) - Search Component was added (See V14 Examples) - Profile Button Component was added (See V14 Examples) # beta5 - improved NotificationsOverlayView.java and SearchOverlayView.java styling for smaller screens #beta6 - minor styling improvements #beta7 - updated dependencies ## Note Currently `flow-server-compatibility-mode` is not supported!

App Layout Add-on version 4.0.0.beta8
# !API changes ahead! - Behavior enum was removed instead now the Actual classes need to used directly (LEFT -> LeftLayouts.Left) - Many Component Builders were reworked to support multiple components at once - AppBarNotificationButton was renamed to AppBarNotificationButton + the Component was replaced (See V14 Examples) - Search Component was added (See V14 Examples) - Profile Button Component was added (See V14 Examples) # beta5 - beta8 - improved NotificationsOverlayView.java and SearchOverlayView.java styling for smaller screens - minor styling improvements - updated dependencies ## Note Currently `flow-server-compatibility-mode` is not supported!

App Layout Add-on version 4.0.0.rc1
# !API changes ahead! - Behavior enum was removed instead now the Actual classes need to used directly (LEFT -> LeftLayouts.Left) - Many Component Builders were reworked to support multiple components at once - AppBarNotificationButton was renamed to AppBarNotificationButton + the Component was replaced (See V14 Examples) - Search Component was added (See V14 Examples) - Profile Button Component was added (See V14 Examples) # beta5 - beta8 - improved NotificationsOverlayView.java and SearchOverlayView.java styling for smaller screens - minor styling improvements - updated dependencies # rc1 - added ThemableMixin - added Material Design Support - added convenience Constants for theming ## Note Currently `flow-server-compatibility-mode` is not supported!

App Layout Add-on version 4.0.0.rc2
fixes issues: - #298 | Components transparency issue with LeftOverlay Layout when scrolling bug - thanks @mschoeffel for reportin - #296 | App Layout without an app menu bug - thanks @imran-momin4041 for reporting - #277 | Make vaadin-menu-bar on the app bar become responsive - thanks @boniechacha for reporting

App Layout Add-on version 4.0.0.rc3
now really fixes #298 | Components transparency issue with LeftOverlay Layout when scrolling bug - thanks @mschoeffel again for reporting!

App Layout Add-on version 4.0.0.rc4
- fixed minor styling issue related to notifications - updated dependencies ## *The compatibility mode is currently not supported!*

App Layout Add-on version 4.0.0.rc5
- added possible fix for the spring boot, please let me know if this works - updated vaadin version - allow using DataProvider instead of ConfigurableFilterDataProvider in the Search | Thanks @kamuffe for the PR! - replaced label with span | Thanks @pbaris for the PR!

App Layout Add-on version 4.0.0
- updated vaadin version - updated dependencies - includes pull request #294 | add css variables for app-menu-item icons size | thanks @pbaris - fixes #332 | styling issue in combination with the material theme ## *The compatibility mode is currently not supported!*

App Layout Add-on version 1.0.4
- updated Vaadin version - Share the opened-state via attribute to the app-toolbar in the left and the left-responsive behaviour

App Layout Add-on version 21.0.0-beta1
Initial Vaadin 21 support

App Layout Add-on version 1.0.5
- changed http to https maven repositories