App Layout 2 Migration Guide

Version 2 of AppLayout is introduced in Vaadin 14 and comes with several breaking changes.

Routing

AbstractAppRouterLayout was removed. AppLayout itself now implements RouterLayout. If you have a view like that extended AbstractRouterLayout

  1. public class MyView extends AbstractRouterLayout {
  2.     ...
  3. }

It should now extend AppLayout

  1. public class MyView extends AppLayout {
  2.     ...
  3. }

Menu

AppLayoutMenu and AppLayoutMenuItem were removed. The same functionality can be achieved by using vaadin-tabs. AppLayoutMenu can be directly replaced with Tabs.

  1. Tabs menu = new Tabs();
  2. tabs.setWidthFull();

To mimick AppLayoutMenu’s look, use horizontal orientation and place the menu in the navbar.

  1. tabs.setOrientation(Tabs.Orientation.HORIZONTAL);
  2. appLayout.addToNavbar(true, tabs);

Use vaadin-tab for menu items. To create a navigation item, the recommended approach is to add a router link inside the tab.

  1. RouterLink link = new RouterLink(null,TargetView.class);
  2. link.add(VaadinIcon.ARROW_RIGHT.create());
  3. link.add("link text");
  4. Tab tab = new Tab();
  5. tab.add(link);
  6. tabs.add(tab);

Additionally, use the appropriate theme variant to place the icon on top of the tab.

  1. tab.addThemeVariants(TabVariant.LUMO_ICON_ON_TOP);

Branding on navbar

To keep the same look of the previous version with the branding on the top left and having the menu center, add both elements to the navbar.

  1. Span appName = new Span("Branding");
  2. appName.addClassName("hide-on-mobile");
  4. this.addToNavbar(true, appName, tabs);

and add some styles to shared-styles.html

  1. <dom-module id="app-layout-theme" theme-for="vaadin-app-layout">
  2.   <template>
  3.     <style>
  4.       [part="navbar"] {
  5.         align-items: center;
  6.         justify-content: center;
  7.       }
  8.       [part="navbar"]::after {
  9.         content: '';
  10.       }
  11.       [part="navbar"] ::slotted(*:first-child),
  12.       [part="navbar"]::after {
  13.         flex: 1 0 0.001px;
  14.       }
  15.       @media (max-width: 425px) {
  16.         [part="navbar"] ::slotted(.hide-on-mobile) {
  17.           display: none;
  18.         }
  19.         [part="navbar"]::after {
  20.           content: none;
  21.         }
  22.     }
  23.     </style>
  24.   </template>
  25. </dom-module>
  27. <custom-style>
  28.   <style>
  29.     vaadin-app-layout vaadin-tab a:hover {
  30.       text-decoration: none;
  31.     }
  32.     vaadin-app-layout vaadin-tab:not([selected]) a {
  33.       color: var(--lumo-contrast-60pct);
  34.     }
  35.     vaadin-app-layout vaadin-tab iron-icon {
  36.       margin: 0 4px;
  37.       width: var(--lumo-icon-size-m);
  38.       height: var(--lumo-icon-size-m);
  39.       padding: .25rem;
  40.       box-sizing: border-box!important;
  41.     }
  42.   </style>
  43. </custom-style>

New DrawerToggle to open or close the drawer.

To use it, add a instance to the component, tipically to the navbar. It will cause a button to appear that will toggle the navbar when clicked.

  1. appLayout.addToNavbar(new DrawerToggle());

Updated 2021-03-08  Edit this article