diff --git a/core/src/components/back-button/test/basic/index.html b/core/src/components/back-button/test/basic/index.html
index 53b3af5529..4295340660 100644
--- a/core/src/components/back-button/test/basic/index.html
+++ b/core/src/components/back-button/test/basic/index.html
@@ -86,11 +86,40 @@
       <ion-content padding>
         <h1>Page Three</h1>
         <p>Custom back button</p>
+        <ion-button class="next">Go to Page Four</ion-button>
       </ion-content>
     `;
 
     // okay cool, we're in the DOM now
     await nav.push(thirdPage);
+
+    const nextButton = thirdPage.querySelector('ion-button .next');
+    nextButton.addEventListener('click', async () => {
+      await goToPageFour(nav);
+    });
+  }
+
+  async function goToPageFour(nav) {
+    const fourthPage = document.createElement('div');
+    fourthPage.classList.add('fourth-page');
+    fourthPage.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-menu-button auto-hide="false"></ion-menu-button>
+            <ion-back-button color="danger"></ion-back-button>
+          </ion-buttons>
+          <ion-title>Page Four</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content padding>
+        <h1>Page Four</h1>
+        <p>Back button and menu button</p>
+      </ion-content>
+    `;
+
+    // okay cool, we're in the DOM now
+    await nav.push(fourthPage);
   }
 </script>
 </html>