Offcanvas: Improve offcanvas drawer support for same-page navigation

js/src/offcanvas.js

@@ -49,13 +49,15 @@ const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="offcanvas"]'
 const Default = {
   backdrop: true,
   keyboard: true,
-  scroll: false
+  scroll: false,
+  focus: true
 }
 
 const DefaultType = {
   backdrop: '(boolean|string)',
   keyboard: 'boolean',
-  scroll: 'boolean'
+  scroll: 'boolean',
+  focus: 'boolean'
 }
 
 /**
@@ -240,20 +242,23 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
     return
   }
 
-  EventHandler.one(target, EVENT_HIDDEN, () => {
-    // focus on trigger when it is closed
-    if (isVisible(this)) {
-      this.focus()
-    }
-  })
-
   // avoid conflict when clicking a toggler of an offcanvas, while another is open
   const alreadyOpen = SelectorEngine.findOne(OPEN_SELECTOR)
   if (alreadyOpen && alreadyOpen !== target) {
     Offcanvas.getInstance(alreadyOpen).hide()
   }
 
   const data = Offcanvas.getOrCreateInstance(target)
+
+  if (data._config.focus) {
+    EventHandler.one(target, EVENT_HIDDEN, () => {
+      // focus on trigger when it is closed
+      if (isVisible(this)) {
+        this.focus({ preventScroll: true })
+      }
+    })
+  }
+
   data.toggle(this)
 })
 

site/content/docs/5.3/components/offcanvas.md

@@ -309,6 +309,7 @@ const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap
 | `backdrop` | boolean or the string `static` | `true` | Apply a backdrop on body while offcanvas is open. Alternatively, specify `static` for a backdrop which doesn't close the offcanvas when clicked. |
 | `keyboard` | boolean | `true` | Closes the offcanvas when escape key is pressed. |
 | `scroll` | boolean | `false` | Allow body scrolling while offcanvas is open. |
+| `focus` | boolean | `true` | Return focus to the data-bs-toggle element. |
 {{< /bs-table >}}
 
 ### Methods

site/content/docs/5.3/examples/navbar-single/index.html

@@ -0,0 +1,58 @@
+---
+layout: examples
+title: Single page website navbar
+extra_css:
+  - "navbar-single.css"
+---
+
+<nav id="navbar-example" class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+  <div class="container-fluid">
+    <a class="navbar-brand" href="#">Single page offcanvas navbar</a>
+    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel" data-bs-focus="false">
+      <div class="offcanvas-header">
+        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      </div>
+      <div class="offcanvas-body">
+        <div class="navbar-nav justify-content-end flex-grow-1 pe-3">
+          <a class="nav-link" href="#section-1">
+            <span data-bs-dismiss="offcanvas">Section 1</span>
+          </a>
+          <a class="nav-link" href="#section-2">
+            <span data-bs-dismiss="offcanvas">Section 2</span>
+          </a>
+          <a class="nav-link" href="#section-3">
+            <span data-bs-dismiss="offcanvas">Section 3</span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</nav>
+
+<main class="container" data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" tabindex="0">
+  <div class="bg-body-tertiary p-5 rounded">
+    <h1>Navbar example for single page websites</h1>
+    <p class="lead">This example is a quick exercise to illustrate how to configure an offcanvas nav drawer to:</p>
+    <ul>
+      <li class="mb-3">close the offcanvas nav drawer when a link is clicked using <code>&lt;span data-bs-dismiss="offcanvas">&lt;/span></code></li>
+      <li>have focus be applied to the linked object rather than the offcanvas toggler using <code>data-bs-focus="false"</code></li>
+    </ul>
+    <a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs &raquo;</a>
+  </div>
+  <section id="section-1">
+    <h1>Section 1</h1>
+    <p><a href="#section-2">Link to Section 2</a></p>
+  </section>
+  <section id="section-2">
+    <h1>Section 2</h1>
+    <p><a href="#section-3">Link to Section 3</a></p>
+  </section>
+  <section id="section-3">
+    <h1>Section 3</h1>
+    <p><a href="#section-1">Link to Section 1</a></p>
+  </section>
+</main>

site/content/docs/5.3/examples/navbar-single/navbar-single.css

@@ -0,0 +1,13 @@
+/* Show it is fixed to the top */
+html {
+  scroll-padding-top: 3.5rem;
+}
+
+body {
+  min-height: 75rem;
+  padding-top: 4.5rem;
+}
+
+section {
+  height: 120vh;
+}

site/data/examples.yml

@@ -116,6 +116,8 @@
       description: "Single navbar example of a static top navbar along with some additional content."
     - name: Navbar fixed
       description: "Single navbar example with a fixed top navbar along with some additional content."
+    - name: Navbar single
+      description: "Navbar offcanvas example for use with a single-page website."
     - name: Navbar bottom
       description: "Single navbar example with a bottom navbar along with some additional content."
     - name: Offcanvas navbar