Documentation

App Layout

API: TypeScript / Java

Source: TypeScript / Java

Usage
Styling

CSS Selectors

CSS Selectors

The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the Styling documentation for more details on how to style components.

Root element: vaadin-app-layout

Parts

Navbar: vaadin-app-layout::part(navbar)
Bottom "touch optimized" navbar: vaadin-app-layout::part(navbar bottom)
Drawer: vaadin-app-layout::part(drawer)
Drawer toggle: vaadin-drawer-toggle
Drawer toggle icon wrapper: vaadin-drawer-toggle::part(icon)
Drawer toggle icon: vaadin-drawer-toggle::part(icon)::before

States

Navbar on top of drawer: vaadin-app-layout[primary-section="navbar"]
Navbar next to drawer: vaadin-app-layout[primary-section="drawer"]
Drawer opened: vaadin-app-layout[drawer-opened]
Overlay drawer (small screen) mode: vaadin-app-layout[overlay]