--- title: AppLayout description: AppLayout element: vaadin-app-layout --- ## Description `` is a Web Component providing a quick and easy way to get a common application layout structure done. ```html

Company Name

Menu item 1

Page title

Page content

``` For best results, the component should be added to the root level of your application (i.e., as a direct child of ``). The page should include a viewport meta tag which contains `viewport-fit=cover`, like the following: ```html ``` This causes the viewport to be scaled to fill the device display. To ensure that important content is displayed, use the provided css variables: - `--safe-area-inset-top` - `--safe-area-inset-right` - `--safe-area-inset-bottom` - `--safe-area-inset-left` ### Styling The following shadow DOM parts are available for styling: Part name | Description -----------------|---------------------------------------------------------| `backdrop` | Backdrop covering the layout when drawer is open as an overlay `navbar` | Container for the navigation bar `navbar-top` | Container for the top navigation bar `navbar-bottom` | Container for the bottom navigation bar `drawer` | Container for the drawer area `content` | Container for the content area The following state attributes are available for styling: Attribute | Description ---------------|------------- `has-drawer` | Set when the element has light DOM content in the drawer slot. `has-navbar` | Set when the element has light DOM content in the navbar slot. The following custom CSS properties are available for styling: Custom CSS property | :----------------------------------------------------| | `--vaadin-app-layout-drawer-background` | | `--vaadin-app-layout-drawer-width` | | `--vaadin-app-layout-navbar-background` | | `--vaadin-app-layout-navbar-gap` | | `--vaadin-app-layout-navbar-padding-bottom` | | `--vaadin-app-layout-navbar-padding-inline-end` | | `--vaadin-app-layout-navbar-padding-inline-start` | | `--vaadin-app-layout-navbar-padding-top` | | `--vaadin-app-layout-transition-duration` | | `--vaadin-overlay-backdrop-background` | | `--vaadin-overlay-shadow` | See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation. ### Component's slots The following slots are available to be set Slot name | Description -------------------|---------------------------------------------------| no name | Default container for the page content `navbar ` | Container for the top navbar area `drawer` | Container for an application menu `touch-optimized` | Container for the bottom navbar area (only visible for mobile devices) #### Touch optimized App Layout has a pseudo-slot `touch-optimized` in order to give more control of the presentation of elements with `slot[navbar]`. Internally, when the user is interacting with App Layout from a touchscreen device, the component will search for elements with `slot[navbar touch-optimized]` and move them to the bottom of the page. ### Navigation As the drawer opens as an overlay in small devices, it makes sense to close it once a navigation happens. If you are using Vaadin Router, this will happen automatically unless you change the `closeDrawerOn` event name. In order to do so, there are two options: - If the `vaadin-app-layout` instance is available, then `drawerOpened` can be set to `false` - If not, a custom event `close-overlay-drawer` can be dispatched either by calling `window.dispatchEvent(new CustomEvent('close-overlay-drawer'))` or by calling `AppLayout.dispatchCloseOverlayDrawerEvent()` ### Scrolling areas By default, the component will act with the "body scrolling", so on mobile (iOS Safari and Android Chrome), the toolbars will collapse when a scroll happens. To use the "content scrolling", in case of the content of the page relies on a pre-defined height (for instance, it has a `height:100%`), then the developer can set `height: 100%` to both `html` and `body`. That makes the content part of App Layout scrollable. In that case, the toolbars on mobile device won't collapse. ## Properties ### closeDrawerOn **Type:** `string` A global event that causes the drawer to close (be hidden) when it is in overlay mode. - The default is `vaadin-router-location-changed` dispatched by Vaadin Router ### drawerOpened **Type:** `boolean` Controls whether the drawer is opened (visible) or not. Its default value depends on the viewport: - `true`, for desktop size views - `false`, for mobile size views ### i18n **Type:** `AppLayoutI18n` The object used to localize this component. To change the default localization, replace this with an object that provides all properties, or just the individual properties you want to change. The object has the following structure and default values: ```js { drawer: 'Drawer' } ``` See also: [AppLayoutI18n](#applayouti18n) ### overlay **Type:** `boolean` Drawer is an overlay on top of the content Controlled via CSS using `--vaadin-app-layout-drawer-overlay: true|false`; ### primarySection **Type:** `"drawer" | "navbar"` Defines whether navbar or drawer will come first visually. - By default (`primary-section="navbar"`), the navbar takes the full available width and moves the drawer down. - If `primary-section="drawer"` is set, then the drawer will move the navbar, taking the full available height. ## Static Methods ### dispatchCloseOverlayDrawerEvent **Type:** `() => void` Helper static method that dispatches a `close-overlay-drawer` event ## Events ### close-overlay-drawer **Type:** `CustomEvent` App Layout listens to `close-overlay-drawer` on the window level. A custom event can be dispatched and the App Layout will close the drawer in overlay. That can be used, for instance, when a navigation occurs when user clicks in a menu item inside the drawer. See `dispatchCloseOverlayDrawerEvent()` helper method. ### drawer-opened-changed **Type:** [AppLayoutDrawerOpenedChangedEvent](#applayoutdraweropenedchangedevent) Fired when the `drawerOpened` property changes. ### overlay-changed **Type:** [AppLayoutOverlayChangedEvent](#applayoutoverlaychangedevent) Fired when the `overlay` property changes. ### primary-section-changed **Type:** [AppLayoutPrimarySectionChangedEvent](#applayoutprimarysectionchangedevent) Fired when the `primarySection` property changes. ## Types ### AppLayoutDrawerOpenedChangedEvent ```ts /** * Fired when the `drawerOpened` property changes. */ export type AppLayoutDrawerOpenedChangedEvent = CustomEvent<{ value: boolean }>; ``` ### AppLayoutI18n ```ts export interface AppLayoutI18n { drawer?: string; } ``` ### AppLayoutOverlayChangedEvent ```ts /** * Fired when the `overlay` property changes. */ export type AppLayoutOverlayChangedEvent = CustomEvent<{ value: boolean }>; ``` ### AppLayoutPrimarySectionChangedEvent ```ts /** * Fired when the `primarySection` property changes. */ export type AppLayoutPrimarySectionChangedEvent = CustomEvent<{ value: 'drawer' | 'navbar' }>; ```