App Layout Styling
Style Variants
The following Button variants are supported by the Drawer Toggle:
| Variant | Description | Supported by |
|---|---|---|
| Used to make the drawer toggle more prominent | Aura |
| Used to make the drawer toggle less prominent | Aura |
Style Properties
The following style properties can be used in CSS stylesheets to customize the appearance of this component.
To apply values to these properties globally in your application UI, place them in a CSS block using the html {…} selector.
See Component Style Properties for more information on style properties.
App Layout Properties
| Property | Supported by |
|---|---|
| Aura |
| Aura, Lumo |
| Aura |
| Aura |
| Aura |
| Aura |
| Aura |
| Aura |
| Aura, Lumo |
| Aura |
| Aura |
Drawer Toggle Properties
| Property | Supported by |
|---|---|
| Aura, Lumo |
| Lumo |
| Aura |
| Aura, Lumo |
| Aura |
| Aura, Lumo |
| Aura, Lumo |
| Aura |
| Aura, Lumo |
| Lumo |
| Aura, Lumo |
| Aura, Lumo |
| Aura |
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) - Top navbar
-
vaadin-app-layout::part(navbar-top) - 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