diff --git a/site/assets/js/application.js b/site/assets/js/application.js
index 55e8969802..20d917990e 100644
--- a/site/assets/js/application.js
+++ b/site/assets/js/application.js
@@ -131,4 +131,12 @@
       modalBodyInput.value = recipient
     })
   }
+
+  // Offcanvas demo
+  const myOffcanvas = document.querySelector('.bd-example-offcanvas #offcanvas')
+  if (myOffcanvas) {
+    myOffcanvas.addEventListener('show.bs.offcanvas', event => {
+      event.preventDefault()
+    }, false)
+  }
 })()
diff --git a/site/content/docs/5.1/components/offcanvas.md b/site/content/docs/5.1/components/offcanvas.md
index 10d184ed57..5df9aecc1e 100644
--- a/site/content/docs/5.1/components/offcanvas.md
+++ b/site/content/docs/5.1/components/offcanvas.md
@@ -28,7 +28,7 @@ Offcanvas is a sidebar component that can be toggled via JavaScript to appear fr
 Below is an offcanvas example that is shown by default (via `.show` on `.offcanvas`). Offcanvas includes support for a header with a close button and an optional body class for some initial `padding`. We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action.
 
 {{< example class="bd-example-offcanvas p-0 bg-light overflow-hidden" >}}
-<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
+<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
   <div class="offcanvas-header">
     <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
     <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>