htmlvue.jsbootstrap-5navbaroff-canvas-menu

Bootstrap 5.3 Offcanvas Navbar - auto-close when click on nav-item, throws: this._config is undefined

I am struggling with Bootstrap 5.3 and the OffCanvas Navbar. The official example from Bootstrap works fine, except one thing: It doesn't close the OffCanvas after selecting a nav-item.

Offcanvas navbar example at Boostrap

I therefore added data-bs-toggle="offcanvas" in each <li> item. It makes the OffCanvas close after selection a nav-item as I wanted.

    <nav class="navbar navbar-expand-lg fixed-top me-2 ms-2">
        <a class="navbar-brand birdware" href="#">My Site</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" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
            <div class="offcanvas-body">
                <ul class="navbar-nav justify-content-start flex-grow-1 pe-3">
                    <li class="nav-item" **data-bs-toggle="offcanvas"** v-for="route in visibleRoutes">
                        <router-link class="nav-link" :to="route.path">{{ route.meta.title }}</router-link>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

But it also throws an error in the console:

Uncaught TypeError: this._config is undefined
_initializeBackDrop offcanvas.js:178
_Offcanvas offcanvas.js:70
getOrCreateInstance base-component.js:65
offcanvas.js:256
handler event-handler.js:118
addHandler event-handler.js:184
on event-handler.js:216
offcanvas.js:232

What am I missing?

Solution

  • Instead of toggle, use dismiss: data-bs-dismiss="offcanvas":

    <li class="nav-item" **data-bs-dismiss="offcanvas"** v-for="route in visibleRoutes">

    see Dismiss

    demo:

    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>Bootstrap Example</title>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body class="p-3 m-0 border-0 bd-example m-0 border-0">



  <nav class="navbar navbar-expand-lg fixed-top me-2 ms-2">
    <a class="navbar-brand birdware" href="#">My Site</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" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-start flex-grow-1 pe-3">
          <li class="nav-item" data-bs-dismiss="offcanvas">
            Link 1
          </li>
          <li class="nav-item" data-bs-dismiss="offcanvas">
            Link 2
          </li>
        </ul>
      </div>
    </div>
  </nav>




</body>

</html>