V5 Offcanvas : Missing .show class in docs

[devhoussam]

there is a missing class .show in offcanvas documentation

https://getbootstrap.com/docs/5.0/components/offcanvas/

current example :

<div class="offcanvas offcanvas-start" 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 text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
  </div>
</div>

updated example :

<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel" data-bs-backdrop="false" data-bs-scroll="true">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
  </div>
</div>

[rohit2sharma95]

That's just for the demonstration, so it is shown by the website's style sheet.

bootstrap/site/assets/scss/_component-examples.scss

Lines 204 to 214 in 488fd8a

	.bd-example-offcanvas {
	@include border-start-radius(0);
	.offcanvas {
	position: static;
	display: block;
	height: 200px;
	visibility: visible;
	transform: translate(0);
	}
	}

/CC @mdo

[mdo]

Yeah we'd have to do something like this to make it work properly because .show triggers the JS for our backdrop, scrolling, and focus. With the diff below, the focus is on the close button. That part feels wrong, though—we wouldn't want to steal focus when folks come right to the page.

diff --git a/site/content/docs/5.0/components/offcanvas.md b/site/content/docs/5.0/components/offcanvas.md
index b9dbd7ce8..e9743bf66 100644
--- a/site/content/docs/5.0/components/offcanvas.md
+++ b/site/content/docs/5.0/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" data-bs-scroll="true" data-bs-backdrop="false" 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 text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>

[k99sharma]

If a pull request is still required I created one with the necessary changes mentioned above.