App Layout

Navbar Placement
Drawer Toggle
Scrolling Behaviour
Bottom Navbar on Small Touchscreens
Best Practices

App Layout is a component for building common application layouts.

Important

Scaled down examples

The examples on this page are scaled down so that their viewport-size dependant behavior can be demonstrated. Some examples change their behavior also based on your browser viewport size.

Open in a
new tab

Source code

AppLayoutBasic.javapackage com.vaadin.demo.component.applayout;

import com.vaadin.flow.component.applayout.AppLayout;
import com.vaadin.flow.component.applayout.DrawerToggle;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.router.RouterLink;

@Route("app-layout-basic")
// tag::snippet[]
public class AppLayoutBasic extends AppLayout {

  public AppLayoutBasic() {
    DrawerToggle toggle = new DrawerToggle();

    H1 title = new H1("MyApp");
    title.getStyle()
      .set("font-size", "var(--lumo-font-size-l)")
      .set("margin", "0");

    Tabs tabs = getTabs();

    addToDrawer(tabs);
    addToNavbar(toggle, title);
  }
  // end::snippet[]

  private Tabs getTabs() {
    Tabs tabs = new Tabs();
    tabs.add(
      createTab(VaadinIcon.DASHBOARD, "Dashboard"),
      createTab(VaadinIcon.CART, "Orders"),
      createTab(VaadinIcon.USER_HEART, "Customers"),
      createTab(VaadinIcon.PACKAGE, "Products"),
      createTab(VaadinIcon.RECORDS, "Documents"),
      createTab(VaadinIcon.LIST, "Tasks"),
      createTab(VaadinIcon.CHART, "Analytics")
    );
    tabs.setOrientation(Tabs.Orientation.VERTICAL);
    return tabs;
  }

  private Tab createTab(VaadinIcon viewIcon, String viewName) {
    Icon icon = viewIcon.create();
    icon.getStyle()
            .set("box-sizing", "border-box")
            .set("margin-inline-end", "var(--lumo-space-m)")
            .set("margin-inline-start", "var(--lumo-space-xs)")
            .set("padding", "var(--lumo-space-xs)");

    RouterLink link = new RouterLink();
    link.add(icon, new Span(viewName));
    // Demo has no routes
    // link.setRoute(viewClass.java);
    link.setTabIndex(-1);

    return new Tab(link);
  }
  // tag::snippet[]
}
// end::snippet[]

The layout consists of three sections: a horizontal navigation bar (navbar), a collapsible navigation drawer (drawer) and a content area. An application’s main navigation blocks should be positioned in the navbar and/or drawer while views are rendered in the content area.

App Layout is responsive and adjusts automatically to fit desktop, tablet, and mobile screen sizes.

The navbar can be located on top or to the side of the drawer.

When put on top, the navbar is typically used as an application header. Application headers contain, for example, the application’s name and branding as well as actions that apply to the entire application such as notifications, settings, etc.

Open in a
new tab

Source code

AppLayoutNavbarPlacement.javapackage com.vaadin.demo.component.applayout;

import com.vaadin.flow.component.applayout.AppLayout;
import com.vaadin.flow.component.applayout.DrawerToggle;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.router.RouterLink;

@Route("app-layout-navbar-placement")
// tag::snippet[]
public class AppLayoutNavbarPlacement extends AppLayout {

  public AppLayoutNavbarPlacement() {
    DrawerToggle toggle = new DrawerToggle();

    H1 title = new H1("MyApp");
    title.getStyle()
      .set("font-size", "var(--lumo-font-size-l)")
      .set("margin", "0");

    Tabs tabs = getTabs();

    addToDrawer(tabs);
    addToNavbar(toggle, title);
  }
  // end::snippet[]

  private Tabs getTabs() {
    Tabs tabs = new Tabs();
    tabs.add(
      createTab(VaadinIcon.DASHBOARD, "Dashboard"),
      createTab(VaadinIcon.CART, "Orders"),
      createTab(VaadinIcon.USER_HEART, "Customers"),
      createTab(VaadinIcon.PACKAGE, "Products"),
      createTab(VaadinIcon.RECORDS, "Documents"),
      createTab(VaadinIcon.LIST, "Tasks"),
      createTab(VaadinIcon.CHART, "Analytics")
    );
    tabs.setOrientation(Tabs.Orientation.VERTICAL);
    return tabs;
  }

  private Tab createTab(VaadinIcon viewIcon, String viewName) {
    Icon icon = viewIcon.create();
    icon.getStyle()
      .set("box-sizing", "border-box")
      .set("margin-inline-end", "var(--lumo-space-m)")
      .set("margin-inline-start", "var(--lumo-space-xs)")
      .set("padding", "var(--lumo-space-xs)");

    RouterLink link = new RouterLink();
    link.add(icon, new Span(viewName));
    // Demo has no routes
    // link.setRoute(viewClass.java);
    link.setTabIndex(-1);

    return new Tab(link);
  }
  // tag::snippet[]
}
// end::snippet[]

When placed to the side, the navbar is often seen as a view header, housing the view’s title, actions and secondary navigation that only relate to the current view.

Open in a
new tab

Source code

AppLayoutNavbarPlacementSide.javapackage com.vaadin.demo.component.applayout;

import com.vaadin.flow.component.applayout.AppLayout;
import com.vaadin.flow.component.applayout.DrawerToggle;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.router.RouterLink;

@Route("app-layout-navbar-placement-side")
// tag::snippet[]
public class AppLayoutNavbarPlacementSide extends AppLayout {

  public AppLayoutNavbarPlacementSide() {
    DrawerToggle toggle = new DrawerToggle();

    H1 title = new H1("Dashboard");
    title.getStyle()
      .set("font-size", "var(--lumo-font-size-l)")
      .set("margin", "0");

    Tabs tabs = getTabs();

    addToDrawer(tabs);
    addToNavbar(toggle, title);

    setPrimarySection(Section.DRAWER);
  }
  // end::snippet[]

  private Tabs getTabs() {
    Tabs tabs = new Tabs();
    tabs.add(
      createTab(VaadinIcon.DASHBOARD, "Dashboard"),
      createTab(VaadinIcon.CART, "Orders"),
      createTab(VaadinIcon.USER_HEART, "Customers"),
      createTab(VaadinIcon.PACKAGE, "Products"),
      createTab(VaadinIcon.RECORDS, "Documents"),
      createTab(VaadinIcon.LIST, "Tasks"),
      createTab(VaadinIcon.CHART, "Analytics")
    );
    tabs.setOrientation(Tabs.Orientation.VERTICAL);
    return tabs;
  }

  private Tab createTab(VaadinIcon viewIcon, String viewName) {
    Icon icon = viewIcon.create();
    icon.getStyle()
      .set("box-sizing", "border-box")
      .set("margin-inline-end", "var(--lumo-space-m)")
      .set("padding", "var(--lumo-space-xs)");

    RouterLink link = new RouterLink();
    link.add(icon, new Span(viewName));
    // Demo has no routes
    // link.setRoute(viewClass.java);
    link.setTabIndex(-1);

    return new Tab(link);
  }
  // tag::snippet[]
}
// end::snippet[]

Drawer Toggle

Show and hide the drawer using a Drawer Toggle (or a Button). The Drawer Toggle (☰) should always be accessible (unless the drawer is empty) and is most often situated in the navbar.

Scrolling Behaviour

Mobile browsers will collapse and expand their address bars when the user scrolls down and up respectively. On iOS you can tap the status bar (signal strength, battery, clock, etc) to scroll back to the top of the page/view. To enable this effect, neither the App Layout or its parent should have their heights defined.

Note	Scrolling containers with 100% height This behaviour is not compatible with vertically scrollable Grids, or other scrolling containers within the content area, whose height is 100%.

When the navbar is used for navigation, the touch-optimized navbar slot can be used to provide a separate version of the navigation at the bottom of the UI, optimized for mobile phones.

Open in a
new tab

Source code

AppLayoutBottomNavbar.javapackage com.vaadin.demo.component.applayout;

import com.vaadin.flow.component.applayout.AppLayout;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.html.H2;
import com.vaadin.flow.component.html.Paragraph;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.component.tabs.TabsVariant;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.router.RouterLink;

@Route("app-layout-bottom-navbar")
// tag::snippet[]
public class AppLayoutBottomNavbar extends AppLayout {

  public AppLayoutBottomNavbar() {
    H1 title = new H1("MyApp");
    title.getStyle()
      .set("font-size", "var(--lumo-font-size-l)")
      .set("margin", "var(--lumo-space-m) var(--lumo-space-l)");

    Tabs tabs = getTabs();

    H2 viewTitle = new H2("View title");
    Paragraph viewContent = new Paragraph("View content");

    Div content = new Div();
    content.add(viewTitle, viewContent);

    addToNavbar(title);
    addToNavbar(true, tabs);

    setContent(content);
  }
  // end::snippet[]

  private Tabs getTabs() {
    Tabs tabs = new Tabs();
    tabs.add(
      createTab(VaadinIcon.DASHBOARD, "Dashboard"),
      createTab(VaadinIcon.CART, "Orders"),
      createTab(VaadinIcon.USER_HEART, "Customers"),
      createTab(VaadinIcon.PACKAGE, "Products")
    );
    tabs.addThemeVariants(TabsVariant.LUMO_MINIMAL, TabsVariant.LUMO_EQUAL_WIDTH_TABS);
    return tabs;
  }

  private Tab createTab(VaadinIcon viewIcon, String viewName) {
    Icon icon = viewIcon.create();
    icon.setSize("var(--lumo-icon-size-s)");
    icon.getStyle().set("margin", "auto");

    RouterLink link = new RouterLink();
    link.add(icon);
    // Demo has no routes
    // link.setRoute(viewClass.java);
    link.setTabIndex(-1);

    return new Tab(link);
  }
  // tag::snippet[]
}
// end::snippet[]

Best Practices

Make the choice between navbar and drawer primarily based on the number of items placed in it.

The navbar is a good choice for a small number of items (3–5), as these can fit into the viewport without scrolling.

Open in a
new tab

Source code

AppLayoutNavbar.javapackage com.vaadin.demo.component.applayout;

import com.vaadin.flow.component.applayout.AppLayout;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.router.RouterLink;

@Route("app-layout-navbar")
// tag::snippet[]
public class AppLayoutNavbar extends AppLayout {

  public AppLayoutNavbar() {
    H1 title = new H1("MyApp");
    title.getStyle()
      .set("font-size", "var(--lumo-font-size-l)")
      .set("left", "var(--lumo-space-l)")
      .set("margin", "0")
      .set("position", "absolute");

    Tabs tabs = getTabs();

    addToNavbar(title, tabs);
  }
  // end::snippet[]

  private Tabs getTabs() {
    Tabs tabs = new Tabs();
    tabs.getStyle().set("margin", "auto");
    tabs.add(
      createTab("Dashboard"),
      createTab("Orders"),
      createTab("Customers"),
      createTab("Products")
    );
    return tabs;
  }

  private Tab createTab(String viewName) {
    RouterLink link = new RouterLink();
    link.add(viewName);
    // Demo has no routes
    // link.setRoute(viewClass.java);
    link.setTabIndex(-1);

    return new Tab(link);
  }
  // tag::snippet[]
}
// end::snippet[]

When more items need to be displayed, or if small screen support is a priority, the drawer is a better choice, as it can accommodate a longer list of links without scrolling, and collapses into a hamburger menu on small screens. Furthermore, a vertical list of items is easier for the user to scan.

Open in a
new tab

Source code

AppLayoutDrawer.javapackage com.vaadin.demo.component.applayout;

import com.vaadin.flow.component.applayout.AppLayout;
import com.vaadin.flow.component.applayout.DrawerToggle;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.router.RouterLink;

@Route("app-layout-drawer")
// tag::snippet[]
public class AppLayoutDrawer extends AppLayout {

  public AppLayoutDrawer() {
    DrawerToggle toggle = new DrawerToggle();

    H1 title = new H1("Dashboard");
    title.getStyle()
      .set("font-size", "var(--lumo-font-size-l)")
      .set("margin", "0");

    Tabs tabs = getTabs();

    addToDrawer(tabs);
    addToNavbar(toggle, title);

    setPrimarySection(Section.DRAWER);
  }
  // end::snippet[]

  private Tabs getTabs() {
    Tabs tabs = new Tabs();
    tabs.add(
      createTab(VaadinIcon.DASHBOARD, "Dashboard"),
      createTab(VaadinIcon.CART, "Orders"),
      createTab(VaadinIcon.USER_HEART, "Customers"),
      createTab(VaadinIcon.PACKAGE, "Products"),
      createTab(VaadinIcon.RECORDS, "Documents"),
      createTab(VaadinIcon.LIST, "Tasks"),
      createTab(VaadinIcon.CHART, "Analytics")
    );
    tabs.setOrientation(Tabs.Orientation.VERTICAL);
    return tabs;
  }

  private Tab createTab(VaadinIcon viewIcon, String viewName) {
    Icon icon = viewIcon.create();
    icon.getStyle()
      .set("box-sizing", "border-box")
      .set("margin-inline-end", "var(--lumo-space-m)")
      .set("padding", "var(--lumo-space-xs)");

    RouterLink link = new RouterLink();
    link.add(icon, new Span(viewName));
    // Demo has no routes
    // link.setRoute(viewClass.java);
    link.setTabIndex(-1);

    return new Tab(link);
  }
  // tag::snippet[]
}
// end::snippet[]

For applications that require multilevel or hierarchical navigation use the drawer to (at least) house the first level. The secondary (and tertiary) navigation items can be placed in either the drawer or the navbar.

Open in a
new tab

Source code

AppLayoutSecondaryNavigation.javapackage com.vaadin.demo.component.applayout;

import com.vaadin.flow.component.applayout.AppLayout;
import com.vaadin.flow.component.applayout.DrawerToggle;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.html.H2;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.router.RouterLink;

@Route("app-layout-secondary-navigation")
// tag::snippet[]
public class AppLayoutSecondaryNavigation extends AppLayout {

  public AppLayoutSecondaryNavigation() {
    H1 appTitle = new H1("MyApp");
    appTitle.getStyle()
      .set("font-size", "var(--lumo-font-size-l)")
      .set("line-height", "var(--lumo-size-l)")
      .set("margin", "0 var(--lumo-space-m)");

    Tabs views = getPrimaryNavigation();

    DrawerToggle toggle = new DrawerToggle();

    H2 viewTitle = new H2("Orders");
    viewTitle.getStyle()
      .set("font-size", "var(--lumo-font-size-l)")
      .set("margin", "0");

    Tabs subViews = getSecondaryNavigation();

    HorizontalLayout wrapper = new HorizontalLayout(toggle, viewTitle);
    wrapper.setAlignItems(FlexComponent.Alignment.CENTER);
    wrapper.setSpacing(false);

    VerticalLayout viewHeader = new VerticalLayout(wrapper, subViews);
    viewHeader.setPadding(false);
    viewHeader.setSpacing(false);

    addToDrawer(appTitle, views);
    addToNavbar(viewHeader);

    setPrimarySection(Section.DRAWER);
  }
  // end::snippet[]

  private Tabs getPrimaryNavigation() {
    Tabs tabs = new Tabs();
    tabs.add(
      createTab(VaadinIcon.DASHBOARD, "Dashboard"),
      createTab(VaadinIcon.CART, "Orders"),
      createTab(VaadinIcon.USER_HEART, "Customers"),
      createTab(VaadinIcon.PACKAGE, "Products"),
      createTab(VaadinIcon.RECORDS, "Documents"),
      createTab(VaadinIcon.LIST, "Tasks"),
      createTab(VaadinIcon.CHART, "Analytics")
    );
    tabs.setOrientation(Tabs.Orientation.VERTICAL);
    tabs.setSelectedIndex(1);
    return tabs;
  }

  private Tab createTab(VaadinIcon viewIcon, String viewName) {
    Icon icon = viewIcon.create();
    icon.getStyle()
            .set("box-sizing", "border-box")
            .set("margin-inline-end", "var(--lumo-space-m)")
            .set("padding", "var(--lumo-space-xs)");

    RouterLink link = new RouterLink();
    link.add(icon, new Span(viewName));
    // Demo has no routes
    // link.setRoute(viewClass.java);
    link.setTabIndex(-1);

    return new Tab(link);
  }

  private Tabs getSecondaryNavigation() {
    Tabs tabs = new Tabs();
    tabs.add(
            new Tab("All"),
            new Tab("Open"),
            new Tab("Completed"),
            new Tab("Cancelled")
    );
    return tabs;
  }
  // tag::snippet[]
}
// end::snippet[]

F24E5FA2-4A7D-4002-B95E-CFF16029F5B6

Docs

Docs

App Layout

Navbar Placement

Drawer Toggle

Scrolling Behaviour

Bottom Navbar on Small Touchscreens

Best Practices

Navbar vs Drawer