diff --git a/docs/_includes/layout-templates/app.css.njk b/docs/_includes/layout-templates/app.css.njk
index b33a5b249..93efd02d9 100644
--- a/docs/_includes/layout-templates/app.css.njk
+++ b/docs/_includes/layout-templates/app.css.njk
@@ -17,6 +17,10 @@ wa-layout::part(header) {
   background-color: var(--wa-color-white);
 }
 
+wa-layout::part(drawer__panel) {
+  height: 100%;
+}
+
 wa-layout[view="mobile"] {
   background-color: var(--wa-color-white);
   --menu-width: 0px;
diff --git a/docs/_includes/layout-templates/app.html.njk b/docs/_includes/layout-templates/app.html.njk
index af912cbda..7784b3287 100644
--- a/docs/_includes/layout-templates/app.html.njk
+++ b/docs/_includes/layout-templates/app.html.njk
@@ -1,4 +1,7 @@
 <wa-layout main-id="main-content" class="wa-theme-light">
+  <header slot="header">
+    <wa-icon-button name="list" style="font-size: 1.5rem" onclick="this.closest('wa-layout').showNavigation()"></wa-icon>
+  </header>
   <wa-button href="#" variant="text" style="padding: 0 0.4rem" class="wa-button--logo wa-button--stretch wa-button--muted" size="large" slot="navigation-header">
     <wa-icon name="music-note" slot="prefix" style="font-size: 2rem;"></wa-icon>
     Musicify
diff --git a/src/components/layout/layout.component.ts b/src/components/layout/layout.component.ts
index 200a9fa5f..14c077d0a 100644
--- a/src/components/layout/layout.component.ts
+++ b/src/components/layout/layout.component.ts
@@ -76,6 +76,11 @@ export default class WaLayout extends WebAwesomeElement {
    */
   @property({ attribute: 'mobile-breakpoint' }) mobileBreakpoint = 768;
 
+  /**
+   * Where to place the navigation when in the mobile viewport.
+   */
+  @property({ attribute: 'navigation-placement', reflect: true }) navigationPlacement: 'start' | 'end' = 'start';
+
   layoutResizeObserver = new ResizeObserver(entries => {
     for (const entry of entries) {
       if (entry.contentBoxSize) {
@@ -236,7 +241,7 @@ export default class WaLayout extends WebAwesomeElement {
         </div>
       </div>
 
-      <wa-drawer placement=${this.navigationPlacement} part="navigation-drawer" class="navigation-drawer">
+      <wa-drawer placement=${this.navigationPlacement} part="navigation-drawer" exportparts="panel:drawer__panel" class="navigation-drawer">
         <slot slot="label" name=${this.view === 'mobile' ? 'navigation-header' : '___'}></slot>
         <slot name=${this.view === 'mobile' ? 'navigation' : '____'}></slot>
         <slot slot="footer" name=${this.view === 'mobile' ? 'navigation-footer' : '___'}></slot>