App Layout

App Layout is a component for building common application layouts.

Usage
Styling

Usage as Root Layout
Content Area
Navbar
Drawer
Scrolling Behavior
Bottom Navbar on Small Touchscreens
Best Practices

App Layout is a component for the root layout of a Vaadin application. It provides predefined areas for the navigation drawer, the header, and the view’s content.

Important

Scaled down examples

The examples on this page are scaled down so that their viewport-size-dependent behavior can be demonstrated. Some examples also change their behavior 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.icon.VaadinIcon;
import com.vaadin.flow.component.orderedlayout.Scroller;
import com.vaadin.flow.component.sidenav.SideNav;
import com.vaadin.flow.component.sidenav.SideNavItem;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.theme.lumo.LumoUtility;

@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");

        SideNav nav = getSideNav();

        Scroller scroller = new Scroller(nav);
        scroller.setClassName(LumoUtility.Padding.SMALL);

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

    private SideNav getSideNav() {
        SideNav sideNav = new SideNav();
        sideNav.addItem(
                new SideNavItem("Dashboard", "/dashboard",
                        VaadinIcon.DASHBOARD.create()),
                new SideNavItem("Orders", "/orders", VaadinIcon.CART.create()),
                new SideNavItem("Customers", "/customers",
                        VaadinIcon.USER_HEART.create()),
                new SideNavItem("Products", "/products",
                        VaadinIcon.PACKAGE.create()),
                new SideNavItem("Documents", "/documents",
                        VaadinIcon.RECORDS.create()),
                new SideNavItem("Tasks", "/tasks", VaadinIcon.LIST.create()),
                new SideNavItem("Analytics", "/analytics",
                        VaadinIcon.CHART.create()));
        return sideNav;
    }

      // tag::snippet[]
}
// end::snippet[]
app-layout-basic.tsximport '@vaadin/icons';
import React, { useEffect, useRef } from 'react';
import {
  AppLayout,
  DrawerToggle,
  Icon,
  Scroller,
  SideNav,
  type SideNavElement,
  SideNavItem,
} from '@vaadin/react-components';
import { patchSideNavNavigation } from '../../side-nav/react/side-nav-helper';

const h1Style = {
  fontSize: 'var(--lumo-font-size-l)',
  margin: 0,
};

function Example() {
  const sideNavRef = useRef<SideNavElement>(null);

  useEffect(() => {
    if (sideNavRef.current) {
      // Example-specific workaround
      patchSideNavNavigation(sideNavRef.current);
    }
  }, [sideNavRef.current]);

  return (
    // tag::snippet[]
    <AppLayout>
      <DrawerToggle slot="navbar" />
      <h1 slot="navbar" style={h1Style}>
        MyApp
      </h1>
      <Scroller slot="drawer" className="p-s">
        <SideNav ref={sideNavRef}>
          <SideNavItem path="/dashboard">
            <Icon icon="vaadin:dashboard" slot="prefix" />
            Dashboard
          </SideNavItem>
          <SideNavItem path="/orders">
            <Icon icon="vaadin:cart" slot="prefix" />
            Orders
          </SideNavItem>
          <SideNavItem path="/customers">
            <Icon icon="vaadin:user-heart" slot="prefix" />
            Customers
          </SideNavItem>
          <SideNavItem path="/products">
            <Icon icon="vaadin:package" slot="prefix" />
            Products
          </SideNavItem>
          <SideNavItem path="/documents">
            <Icon icon="vaadin:records" slot="prefix" />
            Documents
          </SideNavItem>
          <SideNavItem path="/tasks">
            <Icon icon="vaadin:list" slot="prefix" />
            Tasks
          </SideNavItem>
          <SideNavItem path="/analytics">
            <Icon icon="vaadin:chart" slot="prefix" />
            Analytics
          </SideNavItem>
        </SideNav>
      </Scroller>
    </AppLayout>
    // end::snippet[]
  );
}

app-layout-basic.tsimport '@vaadin/app-layout';
import '@vaadin/app-layout/vaadin-drawer-toggle';
import '@vaadin/icon';
import '@vaadin/icons';
import '@vaadin/scroller';
import '@vaadin/side-nav';
import { css, html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('app-layout-basic')
export class Example extends LitElement {
  static override styles = css`
    h1 {
      font-size: var(--lumo-font-size-l);
      margin: 0;
    }
  `;

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }


  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-app-layout>
        <vaadin-drawer-toggle slot="navbar"></vaadin-drawer-toggle>
        <h1 slot="navbar">MyApp</h1>
        <vaadin-scroller slot="drawer" class="p-s">
          <vaadin-side-nav>
            <vaadin-side-nav-item path="/dashboard">
              <vaadin-icon icon="vaadin:dashboard" slot="prefix"></vaadin-icon>
              Dashboard
            </vaadin-side-nav-item>
            <vaadin-side-nav-item path="/orders">
              <vaadin-icon icon="vaadin:cart" slot="prefix"></vaadin-icon>
              Orders
            </vaadin-side-nav-item>
            <vaadin-side-nav-item path="/customers">
              <vaadin-icon icon="vaadin:user-heart" slot="prefix"></vaadin-icon>
              Customers
            </vaadin-side-nav-item>
            <vaadin-side-nav-item path="/products">
              <vaadin-icon icon="vaadin:package" slot="prefix"></vaadin-icon>
              Products
            </vaadin-side-nav-item>
            <vaadin-side-nav-item path="/documents">
              <vaadin-icon icon="vaadin:records" slot="prefix"></vaadin-icon>
              Documents
            </vaadin-side-nav-item>
            <vaadin-side-nav-item path="/tasks">
              <vaadin-icon icon="vaadin:list" slot="prefix"></vaadin-icon>
              Tasks
            </vaadin-side-nav-item>
            <vaadin-side-nav-item path="/analytics">
              <vaadin-icon icon="vaadin:chart" slot="prefix"></vaadin-icon>
              Analytics
            </vaadin-side-nav-item>
          </vaadin-side-nav>
        </vaadin-scroller>
      </vaadin-app-layout>
      <!-- end::snippet[] -->
    `;
  }
}

The layout consists of three sections:

Content area, a view content area;
Navbar, a horizontal navigation bar; and
Drawer, a collapsible navigation drawer-

An application’s main navigation blocks should be positioned in the navbar or the drawer or both, whereas views are rendered in the content area. App Layout is responsive and adjusts automatically to fit desktop, tablet, and mobile screen sizes.

Usage as Root Layout

App Layout is designed to be the application’s root layout, within which most or all views are rendered. It’s not intended to be nested inside other elements.

Flow

With Flow, the root layout can be defined using the @Layout annotation, which tells the router to render all routes or views inside of it.

Source code

Java@Layout
public class MainLayout extends AppLayout {

}

Hilla

Files named @layout.tsx define the root layout for the other views defined in the same directory or its subdirectories. A @layout.tsx in the root of the views directory acts as the default root layout for all views in the application. An <Outlet/> element is used to tell the router where to render the contents of routes or views.

Source code

@layout.tsx
export default function MainLayout() {
  return (
    <AppLayout>
      <Outlet />
    </AppLayout>
  );
}

See Hilla routing documentation for details.

Content Area

The content area is where individual views are rendered. The route layout mechanisms in Flow and Hilla can automatically render the contents of routes and views there, but it can be invoked manually:

Source code

Javapublic class MainLayout extends AppLayout {
  public MainLayout() {
    MyView view = new MyView();
    setContent(view);
  }
}
Java
tsx<AppLayout>
  <MyView/>
</AppLayout>
tsx
HTML<vaadin-app-layout>
  <my-view></my-view>
</vaadin-app-layout>
HTML

The navbar is a header above the content area. It can contain primary or secondary navigation elements, the application’s title, or view-specific content such as the title of the current view.

Source code

Java@Layout
public class MainLayout extends AppLayout {
  public MainLayout() {
    H1 title = new H1("My App");
    addToNavbar(title);
  }
}
Java
tsx<AppLayout>
  <h1 slot="navbar">
    My App
  </h1>
</AppLayout>
tsx
HTML<vaadin-app-layout>
  <h1 slot="navbar">My App</h1>
</vaadin-app-layout>
HTML

The navbar can be located on top, or to the side of the drawer. When put it 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 (e.g., 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.icon.VaadinIcon;
import com.vaadin.flow.component.orderedlayout.Scroller;
import com.vaadin.flow.component.sidenav.SideNav;
import com.vaadin.flow.component.sidenav.SideNavItem;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.theme.lumo.LumoUtility;

@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");

        SideNav nav = getSideNav();

        Scroller scroller = new Scroller(nav);
        scroller.setClassName(LumoUtility.Padding.SMALL);

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

    private SideNav getSideNav() {
        SideNav nav = new SideNav();
        nav.addItem(
                new SideNavItem("Dashboard", "/dashboard",
                        VaadinIcon.DASHBOARD.create()),
                new SideNavItem("Orders", "/orders", VaadinIcon.CART.create()),
                new SideNavItem("Customers", "/customers",
                        VaadinIcon.USER_HEART.create()),
                new SideNavItem("Products", "/products",
                        VaadinIcon.PACKAGE.create()),
                new SideNavItem("Documents", "/documents",
                        VaadinIcon.RECORDS.create()),
                new SideNavItem("Tasks", "/tasks", VaadinIcon.LIST.create()),
                new SideNavItem("Analytics", "/analytics",
                        VaadinIcon.CHART.create()));
        return nav;
    }

      // tag::snippet[]
}
// end::snippet[]
app-layout-navbar-placement.tsximport '@vaadin/icons';
import React, { useEffect, useRef } from 'react';
import {
  AppLayout,
  DrawerToggle,
  Icon,
  Scroller,
  SideNav,
  type SideNavElement,
  SideNavItem,
} from '@vaadin/react-components';
import { patchSideNavNavigation } from '../../side-nav/react/side-nav-helper';

const h1Style = {
  fontSize: 'var(--lumo-font-size-l)',
  margin: 0,
};

function Example() {
  const sideNavRef = useRef<SideNavElement>(null);

  useEffect(() => {
    if (sideNavRef.current) {
      // Example-specific workaround
      patchSideNavNavigation(sideNavRef.current);
    }
  }, [sideNavRef.current]);

  return (
    // tag::snippet[]
    <AppLayout>
      <DrawerToggle slot="navbar" />
      <h1 slot="navbar" style={h1Style}>
        MyApp
      </h1>

      <Scroller slot="drawer" className="p-s">
        <SideNav ref={sideNavRef}>
          <SideNavItem path="/dashboard">
            <Icon icon="vaadin:dashboard" slot="prefix" />
            Dashboard
          </SideNavItem>
          <SideNavItem path="/orders">
            <Icon icon="vaadin:cart" slot="prefix" />
            Orders
          </SideNavItem>
          <SideNavItem path="/customers">
            <Icon icon="vaadin:user-heart" slot="prefix" />
            Customers
          </SideNavItem>
          <SideNavItem path="/products">
            <Icon icon="vaadin:package" slot="prefix" />
            Products
          </SideNavItem>
          <SideNavItem path="/documents">
            <Icon icon="vaadin:records" slot="prefix" />
            Documents
          </SideNavItem>
          <SideNavItem path="/tasks">
            <Icon icon="vaadin:list" slot="prefix" />
            Tasks
          </SideNavItem>
          <SideNavItem path="/analytics">
            <Icon icon="vaadin:chart" slot="prefix" />
            Analytics
          </SideNavItem>
        </SideNav>
      </Scroller>
    </AppLayout>
    // end::snippet[]
  );
}

app-layout-navbar-placement.tsimport '@vaadin/app-layout';
import '@vaadin/app-layout/vaadin-drawer-toggle';
import '@vaadin/icon';
import '@vaadin/icons';
import '@vaadin/scroller';
import '@vaadin/side-nav';
import { css, html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('app-layout-navbar-placement')
export class Example extends LitElement {
  static override styles = css`
    h1 {
      font-size: var(--lumo-font-size-l);
      margin: 0;
    }
  `;

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }


  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-app-layout>
        <vaadin-drawer-toggle slot="navbar"></vaadin-drawer-toggle>
        <h1 slot="navbar">MyApp</h1>
        <vaadin-scroller slot="drawer" class="p-s">
          <vaadin-side-nav>
            <vaadin-side-nav-item path="/dashboard">
              <vaadin-icon icon="vaadin:dashboard" slot="prefix"></vaadin-icon>
              <span>Dashboard</span>
            </vaadin-side-nav-item>
            <vaadin-side-nav-item path="/orders">
              <vaadin-icon icon="vaadin:cart" slot="prefix"></vaadin-icon>
              <span>Orders</span>
            </vaadin-side-nav-item>
            <!-- end::snippet[] -->
            <vaadin-side-nav-item path="/customers">
              <vaadin-icon icon="vaadin:user-heart" slot="prefix"></vaadin-icon>
              <span>Customers</span>
            </vaadin-side-nav-item>
            <vaadin-side-nav-item path="/products">
              <vaadin-icon icon="vaadin:package" slot="prefix"></vaadin-icon>
              <span>Products</span>
            </vaadin-side-nav-item>
            <vaadin-side-nav-item path="/documents">
              <vaadin-icon icon="vaadin:records" slot="prefix"></vaadin-icon>
              <span>Documents</span>
            </vaadin-side-nav-item>
            <vaadin-side-nav-item path="/tasks">
              <vaadin-icon icon="vaadin:list" slot="prefix"></vaadin-icon>
              <span>Tasks</span>
            </vaadin-side-nav-item>
            <vaadin-side-nav-item path="/analytics">
              <vaadin-icon icon="vaadin:chart" slot="prefix"></vaadin-icon>
              <span>Analytics</span>
            </vaadin-side-nav-item>
            <!-- tag::snippet[] -->
          </vaadin-side-nav>
        </vaadin-scroller>
      </vaadin-app-layout>
      <!-- end::snippet[] -->
    `;
  }
}

When placed to the side, the navbar is often seen as a view header, containing the view’s title, as well as actions and secondary navigation that relate only 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.icon.VaadinIcon;
import com.vaadin.flow.component.orderedlayout.Scroller;
import com.vaadin.flow.component.sidenav.SideNav;
import com.vaadin.flow.component.sidenav.SideNavItem;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.theme.lumo.LumoUtility;

@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");

        SideNav nav = getSideNav();

        Scroller scroller = new Scroller(nav);
        scroller.setClassName(LumoUtility.Padding.SMALL);

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

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

    private SideNav getSideNav() {
        SideNav nav = new SideNav();
        nav.addItem(
                new SideNavItem("Dashboard", "/dashboard",
                        VaadinIcon.DASHBOARD.create()),
                new SideNavItem("Orders", "/orders", VaadinIcon.CART.create()),
                new SideNavItem("Customers", "/customers",
                        VaadinIcon.USER_HEART.create()),
                new SideNavItem("Products", "/products",
                        VaadinIcon.PACKAGE.create()),
                new SideNavItem("Documents", "/documents",
                        VaadinIcon.RECORDS.create()),
                new SideNavItem("Tasks", "/tasks", VaadinIcon.LIST.create()),
                new SideNavItem("Analytics", "/analytics",
                        VaadinIcon.CHART.create()));
        return nav;
    }

      // tag::snippet[]
}
// end::snippet[]
app-layout-navbar-placement-side.tsximport '@vaadin/icons';
import React, { useEffect, useRef } from 'react';
import {
  AppLayout,
  DrawerToggle,
  Icon,
  Scroller,
  SideNav,
  type SideNavElement,
  SideNavItem,
} from '@vaadin/react-components';
import { patchSideNavNavigation } from '../../side-nav/react/side-nav-helper';

const h1Style = {
  fontSize: 'var(--lumo-font-size-l)',
  margin: 0,
};

function Example() {
  const sideNavRef = useRef<SideNavElement>(null);

  useEffect(() => {
    if (sideNavRef.current) {
      // Example-specific workaround
      patchSideNavNavigation(sideNavRef.current);
    }
  }, [sideNavRef.current]);

  return (
    // tag::snippet[]
    <AppLayout primarySection="drawer">
      <DrawerToggle slot="navbar" />

      <h1 slot="navbar" style={h1Style}>
        Dashboard
      </h1>

      <Scroller slot="drawer" className="p-s">
        <SideNav ref={sideNavRef}>
          <SideNavItem path="/dashboard">
            <Icon icon="vaadin:dashboard" slot="prefix" />
            Dashboard
          </SideNavItem>

          <SideNavItem path="/orders">
            <Icon icon="vaadin:cart" slot="prefix" />
            Orders
          </SideNavItem>
          {/* end::snippet[] */}
          <SideNavItem path="/customers">
            <Icon icon="vaadin:user-heart" slot="prefix" />
            Customers
          </SideNavItem>

          <SideNavItem path="/products">
            <Icon icon="vaadin:package" slot="prefix" />
            Products
          </SideNavItem>

          <SideNavItem path="/documents">
            <Icon icon="vaadin:records" slot="prefix" />
            Documents
          </SideNavItem>
          <SideNavItem path="/tasks">
            <Icon icon="vaadin:list" slot="prefix" />
            Tasks
          </SideNavItem>

          <SideNavItem path="/analytics">
            <Icon icon="vaadin:chart" slot="prefix" />
            Analytics
          </SideNavItem>
          {/* tag::snippet[] */}
        </SideNav>
      </Scroller>
    </AppLayout>
    // end::snippet[]
  );
}

app-layout-navbar-placement-side.tsimport '@vaadin/app-layout';
import '@vaadin/app-layout/vaadin-drawer-toggle';
import '@vaadin/icon';
import '@vaadin/icons';
import '@vaadin/scroller';
import '@vaadin/side-nav';
import { css, html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('app-layout-navbar-placement-side')
export class Example extends LitElement {
  static override styles = css`
    h1 {
      font-size: var(--lumo-font-size-l);
      margin: 0;
    }
  `;

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }


  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-app-layout primary-section="drawer">
        <vaadin-drawer-toggle slot="navbar"></vaadin-drawer-toggle>
        <h1 slot="navbar">Dashboard</h1>
        <vaadin-scroller slot="drawer" class="p-s">
          <vaadin-side-nav>
            <vaadin-side-nav-item path="/dashboard">
              <vaadin-icon icon="vaadin:dashboard" slot="prefix"></vaadin-icon>
              Dashboard
            </vaadin-side-nav-item>
            <vaadin-side-nav-item path="/orders">
              <vaadin-icon icon="vaadin:cart" slot="prefix"></vaadin-icon>
              Orders
            </vaadin-side-nav-item>
            <!-- end::snippet[] -->
            <vaadin-side-nav-item path="/customers">
              <vaadin-icon icon="vaadin:user-heart" slot="prefix"></vaadin-icon>
              Customers
            </vaadin-side-nav-item>
            <vaadin-side-nav-item path="/products">
              <vaadin-icon icon="vaadin:package" slot="prefix"></vaadin-icon>
              Products
            </vaadin-side-nav-item>
            <vaadin-side-nav-item path="/documents">
              <vaadin-icon icon="vaadin:records" slot="prefix"></vaadin-icon>
              Documents
            </vaadin-side-nav-item>
            <vaadin-side-nav-item path="/tasks">
              <vaadin-icon icon="vaadin:list" slot="prefix"></vaadin-icon>
              Tasks
            </vaadin-side-nav-item>
            <vaadin-side-nav-item path="/analytics">
              <vaadin-icon icon="vaadin:chart" slot="prefix"></vaadin-icon>
              Analytics
            </vaadin-side-nav-item>
            <!-- tag::snippet[] -->
          </vaadin-side-nav>
        </vaadin-scroller>
      </vaadin-app-layout>
      <!-- end::snippet[] -->
    `;
  }
}

Drawer

The drawer can switch between a fixed area next to the view’s content and an expandable panel, toggled via the drawer toggle. It typically contains the application’s primary navigation, such as a Side Navigation component.

Source code

Java@Layout
public class MainLayout extends AppLayout {
  public MainLayout() {
    SideNav nav = new SideNav();
    addToDrawer(nav);
  }
}
Java
tsx<AppLayout>
  <SideNav slot="drawer">
    ...
  </SideNav>
</AppLayout>
tsx
HTML<vaadin-app-layout>
  <vaadin-side-nav slot="drawer">
    ...
  </vaadin-side-nav>
</vaadin-app-layout>
HTML

Drawer Toggle

Show and hide the drawer using a Drawer Toggle or a Button. The Drawer Toggle, which is represented by the hamburger icon (i.e., ☰), should always be accessible — unless the drawer is empty. It’s usually situated in the navbar.

Scrolling Behavior

Depending on whether App Layout has a defined height, the way the content inside the layout scrolls can differ.

Auto Height

When the App Layout has an undefined or auto height set, which is the default, the <body> element is the scrolling container for the content inside the layout.

Open in a
new tab

Source code

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

import java.util.List;

import com.vaadin.flow.component.applayout.AppLayout;
import com.vaadin.flow.component.html.H1;
import com.vaadin.demo.domain.Person;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.router.Route;
import com.vaadin.demo.domain.DataService;

@Route("app-layout-height-auto")
// tag::snippet[]
public class AppLayoutHeightAuto extends AppLayout {

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

        Grid<Person> grid = new Grid<>(Person.class, false);
        grid.addColumn(Person::getFirstName).setHeader("First name");
        grid.addColumn(Person::getLastName).setHeader("Last name");
        grid.addColumn(Person::getEmail).setHeader("Email");
        grid.addColumn(Person::getProfession).setHeader("Profession");

        List<Person> people = DataService.getPeople(20);
        grid.setItems(people);
        grid.setAllRowsVisible(true);
        setContent(grid);
    }
    // end::snippet[]

      // tag::snippet[]
}
// end::snippet[]
app-layout-height-auto.tsximport React, { useEffect } from 'react';
import { useSignal } from '@vaadin/hilla-react-signals';
import { AppLayout, Grid, GridColumn } from '@vaadin/react-components';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';

const h1Style = {
  fontSize: 'var(--lumo-font-size-l)',
  margin: 'var(--lumo-space-m)',
};

function Example() {
  const items = useSignal<Person[]>([]);
  useEffect(() => {
    getPeople({ count: 20 }).then(({ people }) => {
      items.value = people;
    });
  }, []);

  return (
    // tag::snippet[]
    <AppLayout>
      <h1 slot="navbar" style={h1Style}>
        MyApp
      </h1>

      <Grid items={items.value} allRowsVisible>
        <GridColumn path="firstName" />
        <GridColumn path="lastName" />
        <GridColumn path="email" />
        <GridColumn path="profession" />
      </Grid>
    </AppLayout>
    // end::snippet[]
  );
}

app-layout-height-auto.tsimport '@vaadin/app-layout';
import '@vaadin/grid';
import { css, html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('app-layout-height-auto')
export class Example extends LitElement {
  static override styles = css`
    h1 {
      font-size: var(--lumo-font-size-l);
      margin: var(--lumo-space-m);
    }
  `;

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  @state()
  private items: Person[] = [];

  protected override async firstUpdated() {
    const { people } = await getPeople({ count: 20 });
    this.items = people;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-app-layout>
        <h1 slot="navbar">MyApp</h1>
        <vaadin-grid .items="${this.items}" all-rows-visible>
          <vaadin-grid-column path="firstName"></vaadin-grid-column>
          <vaadin-grid-column path="lastName"></vaadin-grid-column>
          <vaadin-grid-column path="email"></vaadin-grid-column>
          <vaadin-grid-column path="profession"></vaadin-grid-column>
        </vaadin-grid>
      </vaadin-app-layout>
      <!-- end::snippet[] -->
    `;
  }
}

The vertical scrollbar crosses the App Layout navbar and the content flows under it, allowing for translucent visual styles. Mobile browsers collapse and expand their toolbars when the user scrolls down and up, respectively. On iOS, you can tap the status bar (i.e., where signal strength, battery, and clock are indicated) to scroll back to the top of the page or view.

This behavior isn’t compatible with vertically scrollable Grids, or other scrolling containers within the content area that’s height is 100%. To support those, define 100% height for the App Layout.

Full Height (100%)

To allow a nested component to take all of the available vertical space inside the App Layout, you need to set an explicit height for the layout, typically 100%. A common use case is to let a data grid fill the entire content area.

Note	Make sure all parent components and elements have 100% height. The full hierarchy of components from the App Layout to the `<body>` element need to have 100% height.

Open in a
new tab

Source code

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

import java.util.List;

import com.vaadin.flow.component.applayout.AppLayout;
import com.vaadin.flow.component.html.H1;
import com.vaadin.demo.domain.Person;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.grid.GridVariant;
import com.vaadin.flow.router.Route;
import com.vaadin.demo.domain.DataService;

@Route("app-layout-height-full")
// tag::snippet[]
public class AppLayoutHeightFull extends AppLayout {

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

        Grid<Person> grid = new Grid<>(Person.class, false);
        grid.addColumn(Person::getFirstName).setHeader("First name");
        grid.addColumn(Person::getLastName).setHeader("Last name");
        grid.addColumn(Person::getEmail).setHeader("Email");
        grid.addColumn(Person::getProfession).setHeader("Profession");

        List<Person> people = DataService.getPeople();
        grid.setItems(people);
        setContent(grid);

        getElement().getStyle().set("height", "100%");
        grid.setHeight("100%");
        grid.addThemeVariants(GridVariant.LUMO_NO_BORDER);
    }
    // end::snippet[]

      // tag::snippet[]
}
// end::snippet[]
app-layout-height-full.tsximport React, { useEffect } from 'react';
import { useSignal } from '@vaadin/hilla-react-signals';
import { AppLayout, Grid, GridColumn } from '@vaadin/react-components';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';

const h1Style = {
  fontSize: 'var(--lumo-font-size-l)',
  margin: 'var(--lumo-space-m)',
};

function Example() {
  const items = useSignal<Person[]>([]);
  useEffect(() => {
    getPeople().then(({ people }) => {
      items.value = people;
    });
  }, []);

  return (
    // tag::snippet[]
    <AppLayout style={{ height: '100%' }}>
      <h1 slot="navbar" style={h1Style}>
        MyApp
      </h1>

      <Grid items={items.value} style={{ height: '100%' }} theme="no-border">
        <GridColumn path="firstName" />
        <GridColumn path="lastName" />
        <GridColumn path="email" />
        <GridColumn path="profession" />
      </Grid>
    </AppLayout>
    // end::snippet[]
  );
}

const hostStyles = css`
  :host {
    height: 100vh;
    margin: calc(-1 * var(--docs-space-l));
  }
`;

app-layout-height-full.tsimport '@vaadin/app-layout';
import '@vaadin/grid';
import { css, html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('app-layout-height-full')
export class Example extends LitElement {
  static override styles = css`
    :host {
      height: 100vh;
    }

    h1 {
      font-size: var(--lumo-font-size-l);
      margin: var(--lumo-space-m);
    }
  `;

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  @state()
  private items: Person[] = [];

  protected override async firstUpdated() {
    const { people } = await getPeople();
    this.items = people;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-app-layout style="height: 100%;">
        <h1 slot="navbar">MyApp</h1>
        <vaadin-grid .items="${this.items}" style="height: 100%;" theme="no-border">
          <vaadin-grid-column path="firstName"></vaadin-grid-column>
          <vaadin-grid-column path="lastName"></vaadin-grid-column>
          <vaadin-grid-column path="email"></vaadin-grid-column>
          <vaadin-grid-column path="profession"></vaadin-grid-column>
        </vaadin-grid>
      </vaadin-app-layout>
      <!-- end::snippet[] -->
    `;
  }

  connectedCallback() {
    super.connectedCallback();
    // TODO: workaround to remove the padding from parent container (coming from Design System Publisher)
    if (this.parentElement) this.parentElement.style.padding = '0';
  }
}

The vertical scrollbar stays within the layout content area, and mobile browsers don’t collapse their toolbars when the content area is scrolled down.

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.VaadinIcon;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.router.RouterLink;
import com.vaadin.flow.theme.lumo.LumoUtility;

@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)");

        HorizontalLayout nav = getNavigation();

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

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

        addToNavbar(title);
        addToNavbar(true, nav);

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

    private HorizontalLayout getNavigation() {
        HorizontalLayout navigation = new HorizontalLayout();
        navigation.addClassNames(LumoUtility.Width.FULL,
                LumoUtility.JustifyContent.EVENLY,
                LumoUtility.AlignSelf.STRETCH);
        navigation.setPadding(false);
        navigation.setSpacing(false);
        navigation.add(createLink(VaadinIcon.DASHBOARD, "Dashboard"),
                createLink(VaadinIcon.CART, "Orders"),
                createLink(VaadinIcon.USER_HEART, "Customers"),
                createLink(VaadinIcon.PACKAGE, "Products"));

        return navigation;
    }

    private RouterLink createLink(VaadinIcon icon, String viewName) {
        RouterLink link = new RouterLink();
        // Demo has no routes
        // link.setRoute(viewClass.java);
        link.addClassNames(LumoUtility.Display.FLEX,
                LumoUtility.AlignItems.CENTER,
                LumoUtility.Padding.Horizontal.LARGE,
                LumoUtility.TextColor.SECONDARY);
        link.add(icon.create());
        link.getElement().setAttribute("aria-label", viewName);
        return link;
    }

      // tag::snippet[]
}
// end::snippet[]
app-layout-bottom-navbar.tsximport '@vaadin/icons';
import React, { useEffect, useRef } from 'react';
import {
  AppLayout,
  type AppLayoutElement,
  HorizontalLayout,
  type HorizontalLayoutElement,
  Icon,
} from '@vaadin/react-components';
import { patchAppLayoutNavigation } from '../app-layout-helper';

const h1Style = {
  fontSize: 'var(--lumo-font-size-l)',
  margin: 'var(--lumo-space-m) var(--lumo-space-l)',
};

const iconStyle = {
  height: 'var(--lumo-icon-size-s)',
  margin: 'auto',
  width: 'var(--lumo-icon-size-s)',
};

function Example() {
  const appLayoutRef = useRef<AppLayoutElement>(null);
  const horizontalLayoutRef = useRef<HorizontalLayoutElement>(null);
  useEffect(() => {
    const appLayout = appLayoutRef.current;
    if (appLayout) {
      // --vaadin-app-layout-touch-optimized is only enforced as part of this example
      appLayout.style.setProperty('--vaadin-app-layout-touch-optimized', 'true');
      (appLayout as any)._updateTouchOptimizedMode();
    }
  }, [appLayoutRef.current]);

  useEffect(() => {
    const horizontalLayout = horizontalLayoutRef.current;
    if (horizontalLayout) {
      patchAppLayoutNavigation(horizontalLayout);
    }
  }, [horizontalLayoutRef.current]);

  return (
    // tag::snippet[]
    <AppLayout ref={appLayoutRef}>
      <h1 slot="navbar" style={h1Style}>
        MyApp
      </h1>

      <HorizontalLayout
        slot="navbar touch-optimized"
        className="w-full justify-evenly self-stretch"
        ref={horizontalLayoutRef}
      >
        <a
          href="/dashboard"
          aria-label="Dashboard"
          className="text-secondary px-l flex items-center"
        >
          <Icon icon="vaadin:dashboard" style={iconStyle} />
        </a>
        <a href="/orders" aria-label="Orders" className="text-secondary px-l flex items-center">
          <Icon icon="vaadin:cart" style={iconStyle} />
        </a>
        <a
          href="/customers"
          aria-label="Customers"
          className="text-secondary px-l flex items-center"
        >
          <Icon icon="vaadin:user-heart" style={iconStyle} />
        </a>
        <a href="/products" aria-label="Products" className="text-secondary px-l flex items-center">
          <Icon icon="vaadin:package" style={iconStyle} />
        </a>
      </HorizontalLayout>

      <div className="content">
        <h2>View title</h2>
        <p>View content</p>
      </div>
    </AppLayout>
    // end::snippet[]
  );
}

app-layout-bottom-navbar.tsimport '@vaadin/app-layout';
import '@vaadin/app-layout/vaadin-drawer-toggle';
import '@vaadin/horizontal-layout';
import '@vaadin/icon';
import '@vaadin/icons';
import { css, html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('app-layout-bottom-navbar')
export class Example extends LitElement {
  static override styles = css`
    h1 {
      font-size: var(--lumo-font-size-l);
      margin: var(--lumo-space-m) var(--lumo-space-l);
    }

  `;


  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <!-- --vaadin-app-layout-touch-optimized is only enforced as part of this example -->
      <vaadin-app-layout style="--vaadin-app-layout-touch-optimized: true">
        <h1 slot="navbar">MyApp</h1>
        <vaadin-horizontal-layout
          slot="navbar touch-optimized"
          class="w-full justify-evenly self-stretch"
        >
          <a href="/dashboard" aria-label="Dashboard" class="text-secondary px-l flex items-center">
            <vaadin-icon icon="vaadin:dashboard"></vaadin-icon>
          </a>
          <a href="/orders" aria-label="Orders" class="text-secondary px-l flex items-center">
            <vaadin-icon icon="vaadin:cart"></vaadin-icon>
          </a>
          <!-- end::snippet[] -->
          <a href="/customers" aria-label="Customers" class="text-secondary px-l flex items-center">
            <vaadin-icon icon="vaadin:user-heart"></vaadin-icon>
          </a>
          <a href="/products" aria-label="Products" class="text-secondary px-l flex items-center">
            <vaadin-icon icon="vaadin:package"></vaadin-icon>
          </a>
          <!-- tag::snippet[] -->
        </vaadin-horizontal-layout>
        <div class="content">
          <h2>View title</h2>
          <p>View content</p>
        </div>
      </vaadin-app-layout>
      <!-- end::snippet[] -->
    `;
  }
}

Best Practices

Choose between navbar and drawer based primarily on the number of items placed in it. The navbar is a good choice for a small number of items (i.e., three to five), as they 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.orderedlayout.HorizontalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.router.RouterLink;
import com.vaadin.flow.theme.lumo.LumoUtility;

@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");

        HorizontalLayout navigation = getNavigation();
        navigation.getElement()

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

    private HorizontalLayout getNavigation() {
        HorizontalLayout navigation = new HorizontalLayout();
        navigation.addClassNames(LumoUtility.JustifyContent.CENTER,
                LumoUtility.Gap.SMALL, LumoUtility.Height.MEDIUM,
                LumoUtility.Width.FULL);
        navigation.add(createLink("Dashboard"), createLink("Orders"),
                createLink("Customers"), createLink("Products"));
        return navigation;
    }

    private RouterLink createLink(String viewName) {
        RouterLink link = new RouterLink();
        link.add(viewName);
        // Demo has no routes
        // link.setRoute(viewClass.java);

        link.addClassNames(LumoUtility.Display.FLEX,
                LumoUtility.AlignItems.CENTER,
                LumoUtility.Padding.Horizontal.MEDIUM,
                LumoUtility.TextColor.SECONDARY, LumoUtility.FontWeight.MEDIUM);
        link.getStyle().set("text-decoration", "none");

        return link;
    }

      // tag::snippet[]
}
// end::snippet[]
app-layout-navbar.tsximport React, { useEffect, useRef } from 'react';
import {
  AppLayout,
  HorizontalLayout,
  type HorizontalLayoutElement,
} from '@vaadin/react-components';
import { patchAppLayoutNavigation } from '../app-layout-helper';

const h1Style: React.CSSProperties = {
  fontSize: 'var(--lumo-font-size-l)',
  left: 'var(--lumo-space-l)',
  margin: 0,
  position: 'absolute',
};

const linkStyle = {
  textDecoration: 'none',
};

function Example() {
  const horizontalLayoutRef = useRef<HorizontalLayoutElement>(null);

  useEffect(() => {
    const horizontalLayout = horizontalLayoutRef.current;
    if (horizontalLayout) {
      patchAppLayoutNavigation(horizontalLayout);
    }
  }, [horizontalLayoutRef.current]);

  return (
    // tag::snippet[]
    <AppLayout>
      <h1 slot="navbar" style={h1Style}>
        MyApp
      </h1>
      <HorizontalLayout
        ref={horizontalLayoutRef}
        slot="navbar"
        className="h-m w-full justify-center gap-s"
      >
        <a
          href="/dashboard"
          className="flex items-center px-m text-secondary font-medium"
          style={linkStyle}
        >
          Dashboard
        </a>
        <a
          href="/orders"
          className="flex items-center px-m text-secondary font-medium"
          style={linkStyle}
        >
          Orders
        </a>
        <a
          href="/customers"
          className="flex items-center px-m text-secondary font-medium"
          style={linkStyle}
        >
          Customers
        </a>
        <a
          href="/products"
          className="flex items-center px-m text-secondary font-medium"
          style={linkStyle}
        >
          Products
        </a>
      </HorizontalLayout>
    </AppLayout>
    // end::snippet[]
  );
}

app-layout-navbar.tsimport '@vaadin/app-layout';
import '@vaadin/app-layout/vaadin-drawer-toggle';
import '@vaadin/horizontal-layout';
import '@vaadin/icon';
import '@vaadin/icons';
import { css, html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('app-layout-navbar')
export class Example extends LitElement {
  static override styles = css`
    h1 {
      font-size: var(--lumo-font-size-l);
      left: var(--lumo-space-l);
      margin: 0;
      position: absolute;
    }

    vaadin-tabs {
      margin: auto;
    }
  `;

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }


  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-app-layout>
        <h1 slot="navbar">MyApp</h1>
        <vaadin-horizontal-layout slot="navbar" class="h-m w-full justify-center gap-s">
          <a
            href="/dashboard"
            class="flex items-center px-m text-secondary font-medium"
            style="text-decoration: none"
          >
            Dashboard
          </a>
          <a
            href="/orders"
            class="flex items-center px-m text-secondary font-medium"
            style="text-decoration: none"
          >
            Orders
          </a>
          <!-- end::snippet[] -->
          <a
            href="/customers"
            class="flex items-center px-m text-secondary font-medium"
            style="text-decoration: none"
          >
            Customers
          </a>
          <a
            href="/products"
            class="flex items-center px-m text-secondary font-medium"
            style="text-decoration: none"
          >
            Products
          </a>
          <!-- tag::snippet[] -->
        </vaadin-horizontal-layout>
      </vaadin-app-layout>
      <!-- end::snippet[] -->
    `;
  }
}

When more items need to be displayed, or if small-screen support is a priority, the drawer is a better choice. 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.icon.VaadinIcon;
import com.vaadin.flow.component.orderedlayout.Scroller;
import com.vaadin.flow.component.sidenav.SideNav;
import com.vaadin.flow.component.sidenav.SideNavItem;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.theme.lumo.LumoUtility;

@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");

        SideNav nav = getTabs();

        Scroller scroller = new Scroller(nav);
        scroller.setClassName(LumoUtility.Padding.SMALL);

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

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

    private SideNav getTabs() {
        SideNav nav = new SideNav();
        nav.addItem(
                new SideNavItem("Dashboard", "/dashboard",
                        VaadinIcon.DASHBOARD.create()),
                new SideNavItem("Orders", "/orders", VaadinIcon.CART.create()),
                new SideNavItem("Customers", "/customers",
                        VaadinIcon.USER_HEART.create()),
                new SideNavItem("Products", "/products",
                        VaadinIcon.PACKAGE.create()),
                new SideNavItem("Documents", "/documents",
                        VaadinIcon.RECORDS.create()),
                new SideNavItem("Tasks", "/tasks", VaadinIcon.LIST.create()),
                new SideNavItem("Analytics", "/analytics",
                        VaadinIcon.CHART.create()));
        return nav;
    }

      // tag::snippet[]
}
// end::snippet[]
app-layout-drawer.tsximport '@vaadin/icons';
import React, { useEffect, useRef } from 'react';
import {
  AppLayout,
  DrawerToggle,
  Icon,
  Scroller,
  SideNav,
  type SideNavElement,
  SideNavItem,
} from '@vaadin/react-components';
import { patchSideNavNavigation } from '../../side-nav/react/side-nav-helper';

const h1Style = {
  fontSize: 'var(--lumo-font-size-l)',
};

function Example() {
  const sideNavRef = useRef<SideNavElement>(null);

  useEffect(() => {
    if (sideNavRef.current) {
      // Example-specific workaround
      patchSideNavNavigation(sideNavRef.current);
    }
  }, [sideNavRef.current]);

  return (
    // tag::snippet[]
    <AppLayout primarySection="drawer">
      <DrawerToggle slot="navbar" />

      <h1 slot="navbar" style={h1Style}>
        Dashboard
      </h1>

      <Scroller slot="drawer" className="p-s">
        <SideNav ref={sideNavRef}>
          <SideNavItem path="/dashboard">
            <Icon icon="vaadin:dashboard" slot="prefix" />
            Dashboard
          </SideNavItem>
          <SideNavItem path="/orders">
            <Icon icon="vaadin:cart" slot="prefix" />
            Orders
          </SideNavItem>
          <SideNavItem path="/customers">
            <Icon icon="vaadin:user-heart" slot="prefix" />
            Customers
          </SideNavItem>
          <SideNavItem path="/products">
            <Icon icon="vaadin:package" slot="prefix" />
            Products
          </SideNavItem>
          <SideNavItem path="/documents">
            <Icon icon="vaadin:records" slot="prefix" />
            Documents
          </SideNavItem>
          <SideNavItem path="/tasks">
            <Icon icon="vaadin:list" slot="prefix" />
            Tasks
          </SideNavItem>
          <SideNavItem path="/analytics">
            <Icon icon="vaadin:chart" slot="prefix" />
            Analytics
          </SideNavItem>
        </SideNav>
      </Scroller>
    </AppLayout>
    // end::snippet[]
  );
}

app-layout-drawer.tsimport '@vaadin/app-layout';
import '@vaadin/app-layout/vaadin-drawer-toggle';
import '@vaadin/icon';
import '@vaadin/icons';
import '@vaadin/scroller';
import '@vaadin/side-nav';
import { css, html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('app-layout-drawer')
export class Example extends LitElement {
  static override styles = css`
    h1 {
      font-size: var(--lumo-font-size-l);
      margin: 0;
    }
  `;

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }


  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-app-layout primary-section="drawer">
        <vaadin-drawer-toggle slot="navbar"></vaadin-drawer-toggle>
        <h1 slot="navbar">Dashboard</h1>
        <vaadin-scroller slot="drawer" class="p-s">
          <vaadin-side-nav>
            <vaadin-side-nav-item path="/dashboard">
              <vaadin-icon icon="vaadin:dashboard" slot="prefix"></vaadin-icon>
              Dashboard
            </vaadin-side-nav-item>
            <vaadin-side-nav-item path="/orders">
              <vaadin-icon icon="vaadin:cart" slot="prefix"></vaadin-icon>
              Orders
            </vaadin-side-nav-item>
            <!-- end::snippet[] -->
            <vaadin-side-nav-item path="/customers">
              <vaadin-icon icon="vaadin:user-heart" slot="prefix"></vaadin-icon>
              Customers
            </vaadin-side-nav-item>
            <vaadin-side-nav-item path="/products">
              <vaadin-icon icon="vaadin:package" slot="prefix"></vaadin-icon>
              Products
            </vaadin-side-nav-item>
            <vaadin-side-nav-item path="/documents">
              <vaadin-icon icon="vaadin:records" slot="prefix"></vaadin-icon>
              Documents
            </vaadin-side-nav-item>
            <vaadin-side-nav-item path="/tasks">
              <vaadin-icon icon="vaadin:list" slot="prefix"></vaadin-icon>
              Tasks
            </vaadin-side-nav-item>
            <vaadin-side-nav-item path="/analytics">
              <vaadin-icon icon="vaadin:chart" slot="prefix"></vaadin-icon>
              Analytics
            </vaadin-side-nav-item>
            <!-- tag::snippet[] -->
          </vaadin-side-nav>
        </vaadin-scroller>
      </vaadin-app-layout>
      <!-- end::snippet[] -->
    `;
  }
}

For applications that require multilevel or hierarchical navigation, use the drawer to contain at least 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.icon.VaadinIcon;
import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.Scroller;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.sidenav.SideNav;
import com.vaadin.flow.component.sidenav.SideNavItem;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.router.RouterLink;
import com.vaadin.flow.theme.lumo.LumoUtility;

@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)");

        SideNav views = getPrimaryNavigation();

        Scroller scroller = new Scroller(views);
        scroller.setClassName(LumoUtility.Padding.SMALL);

        DrawerToggle toggle = new DrawerToggle();

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

        HorizontalLayout 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, scroller);
        addToNavbar(viewHeader);

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

    private SideNav getPrimaryNavigation() {
        SideNav sideNav = new SideNav();
        sideNav.addItem(
                new SideNavItem("Dashboard", "/dashboard",
                        VaadinIcon.DASHBOARD.create()),
                new SideNavItem("Orders", "/orders", VaadinIcon.CART.create()),
                new SideNavItem("Customers", "/customers",
                        VaadinIcon.USER_HEART.create()),
                new SideNavItem("Products", "/products",
                        VaadinIcon.PACKAGE.create()),
                new SideNavItem("Documents", "/documents",
                        VaadinIcon.RECORDS.create()),
                new SideNavItem("Tasks", "/tasks", VaadinIcon.LIST.create()),
                new SideNavItem("Analytics", "/analytics",
                        VaadinIcon.CHART.create()));
        return sideNav;
    }

    private HorizontalLayout getSecondaryNavigation() {
        HorizontalLayout navigation = new HorizontalLayout();
        navigation.addClassNames(LumoUtility.JustifyContent.CENTER,
                LumoUtility.Gap.SMALL, LumoUtility.Height.MEDIUM);
        navigation.add(createLink("All"), createLink("Open"),
                createLink("Completed"), createLink("Cancelled"));
        return navigation;
    }

    private RouterLink createLink(String viewName) {
        RouterLink link = new RouterLink();
        link.add(viewName);
        // Demo has no routes
        // link.setRoute(viewClass.java);

        link.addClassNames(LumoUtility.Display.FLEX,
                LumoUtility.AlignItems.CENTER,
                LumoUtility.Padding.Horizontal.MEDIUM,
                LumoUtility.TextColor.SECONDARY, LumoUtility.FontWeight.MEDIUM);
        link.getStyle().set("text-decoration", "none");

        return link;
    }

      // tag::snippet[]
}
// end::snippet[]
app-layout-secondary-navigation.tsximport '@vaadin/icons';
import React, { useEffect, useRef } from 'react';
import {
  AppLayout,
  DrawerToggle,
  HorizontalLayout,
  type HorizontalLayoutElement,
  Icon,
  Scroller,
  SideNav,
  type SideNavElement,
  SideNavItem,
} from '@vaadin/react-components';
import { patchSideNavNavigation } from '../../side-nav/react/side-nav-helper';
import { patchAppLayoutNavigation } from '../app-layout-helper';

const h1Style = {
  fontSize: 'var(--lumo-font-size-l)',
  lineHeight: 'var(--lumo-size-l)',
  margin: '0 var(--lumo-space-m)',
};

const h2Style = {
  fontSize: 'var(--lumo-font-size-l)',
  margin: 0,
};

function Example() {
  const sideNavRef = useRef<SideNavElement>(null);
  const horizontalLayoutRef = useRef<HorizontalLayoutElement>(null);

  useEffect(() => {
    if (sideNavRef.current) {
      // Example-specific workaround
      patchSideNavNavigation(sideNavRef.current);
    }
  }, [sideNavRef.current]);

  useEffect(() => {
    if (horizontalLayoutRef.current) {
      // Example-specific workaround
      patchAppLayoutNavigation(horizontalLayoutRef.current);
    }
  }, [horizontalLayoutRef.current]);

  return (
    // tag::snippet[]
    <AppLayout primarySection="drawer">
      <h1 style={h1Style} slot="drawer">
        MyApp
      </h1>
      <Scroller slot="drawer" className="p-s">
        <SideNav ref={sideNavRef}>
          <SideNavItem>
            <Icon icon="vaadin:dashboard" slot="prefix" />
            Dashboard
          </SideNavItem>

          <SideNavItem path="/orders">
            <Icon icon="vaadin:cart" slot="prefix" />
            Orders
          </SideNavItem>
          {/* end::snippet[] */}
          <SideNavItem path="/customers">
            <Icon icon="vaadin:user-heart" slot="prefix" />
            Customers
          </SideNavItem>
          <SideNavItem path="/products">
            <Icon icon="vaadin:package" slot="prefix" />
            Products
          </SideNavItem>
          <SideNavItem path="/documents">
            <Icon icon="vaadin:records" slot="prefix" />
            Documents
          </SideNavItem>
          <SideNavItem path="/tasks">
            <Icon icon="vaadin:list" slot="prefix" />
            Tasks
          </SideNavItem>
          <SideNavItem path="/analytics">
            <Icon icon="vaadin:chart" slot="prefix" />
            Analytics
          </SideNavItem>
          {/* tag::snippet[] */}
        </SideNav>
      </Scroller>

      <div slot="navbar">
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <DrawerToggle />
          <h2 style={h2Style}>Orders</h2>
        </div>

        <HorizontalLayout ref={horizontalLayoutRef} className="h-m justify-center gap-s">
          <a
            href="/all"
            className="flex items-center px-m text-secondary font-medium"
            style={{ textDecoration: 'none' }}
          >
            All
          </a>
          <a
            href="/open"
            className="flex items-center px-m text-secondary font-medium"
            style={{ textDecoration: 'none' }}
          >
            Open
          </a>
          {/* end::snippet[] */}
          <a
            href="/completed"
            className="flex items-center px-m text-secondary font-medium"
            style={{ textDecoration: 'none' }}
          >
            Completed
          </a>
          <a
            href="/cancelled"
            className="flex items-center px-m text-secondary font-medium"
            style={{ textDecoration: 'none' }}
          >
            Cancelled
          </a>
          {/* tag::snippet[] */}
        </HorizontalLayout>
      </div>
    </AppLayout>
    // end::snippet[]
  );
}

app-layout-secondary-navigation.tsimport '@vaadin/app-layout';
import '@vaadin/app-layout/vaadin-drawer-toggle';
import '@vaadin/horizontal-layout';
import '@vaadin/icon';
import '@vaadin/icons';
import '@vaadin/scroller';
import '@vaadin/side-nav';
import '@vaadin/vertical-layout';
import { css, html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('app-layout-secondary-navigation')
export class Example extends LitElement {
  static override styles = css`
    h1 {
      font-size: var(--lumo-font-size-l);
      line-height: var(--lumo-size-l);
      margin: 0 var(--lumo-space-m);
    }

    h2 {
      font-size: var(--lumo-font-size-l);
      margin: 0;
    }
  `;

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }


  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-app-layout primary-section="drawer">
        <h1 slot="drawer">MyApp</h1>
        <vaadin-scroller slot="drawer" class="p-s">
          <vaadin-side-nav>
            <vaadin-side-nav-item path="/dashboard">
              <vaadin-icon icon="vaadin:dashboard" slot="prefix"></vaadin-icon>
              Dashboard
            </vaadin-side-nav-item>
            <vaadin-side-nav-item path="/orders">
              <vaadin-icon icon="vaadin:cart" slot="prefix"></vaadin-icon>
              Orders
            </vaadin-side-nav-item>
            <!-- end::snippet[] -->
            <vaadin-side-nav-item path="/customers">
              <vaadin-icon icon="vaadin:user-heart" slot="prefix"></vaadin-icon>
              Customers
            </vaadin-side-nav-item>
            <vaadin-side-nav-item path="/products">
              <vaadin-icon icon="vaadin:package" slot="prefix"></vaadin-icon>
              Products
            </vaadin-side-nav-item>
            <vaadin-side-nav-item path="/documents">
              <vaadin-icon icon="vaadin:records" slot="prefix"></vaadin-icon>
              Documents
            </vaadin-side-nav-item>
            <vaadin-side-nav-item path="/tasks">
              <vaadin-icon icon="vaadin:list" slot="prefix"></vaadin-icon>
              Tasks
            </vaadin-side-nav-item>
            <vaadin-side-nav-item path="/analytics">
              <vaadin-icon icon="vaadin:chart" slot="prefix"></vaadin-icon>
              Analytics
            </vaadin-side-nav-item>
            <!-- tag::snippet[] -->
          </vaadin-side-nav>
        </vaadin-scroller>
        <vaadin-vertical-layout slot="navbar">
          <vaadin-horizontal-layout style="align-items: center;">
            <vaadin-drawer-toggle></vaadin-drawer-toggle>
            <h2>Orders</h2>
          </vaadin-horizontal-layout>
          <vaadin-horizontal-layout id="navigation" class="h-m justify-center gap-s">
            <a
              href="/all"
              class="flex items-center px-m text-secondary font-medium"
              style="text-decoration: none"
              >All</a
            >
            <a
              href="/open"
              class="flex items-center px-m text-secondary font-medium"
              style="text-decoration: none"
              >Open</a
            >
            <!-- end::snippet[] -->
            <a
              href="/completed"
              class="flex items-center px-m text-secondary font-medium"
              style="text-decoration: none"
              >Completed</a
            >
            <a
              href="/cancelled"
              class="flex items-center px-m text-secondary font-medium"
              style="text-decoration: none"
              >Cancelled</a
            >
            <!-- tag::snippet[] -->
          </vaadin-horizontal-layout>
        </vaadin-vertical-layout>
      </vaadin-app-layout>
      <!-- end::snippet[] -->
    `;
  }
}

3005EA19-8E28-4BF2-8A0A-FC3F46C04F1B

Docs

Docs

App Layout

Usage as Root Layout

Flow

Hilla

Content Area

Navbar

Navbar Placement

Drawer

Drawer Toggle

Scrolling Behavior

Auto Height

Full Height (100%)

Bottom Navbar on Small Touchscreens

Best Practices

Navbar vs Drawer