<a class="btn btn-light" 

  href="/sidebar"

  data-bs-toggle="offcanvas"

  data-bs-target="#offcanvas">

  Open Sidebar

</a>

<hr>

See 

<a href="https://marcus-obst.de/blog/htmx-bootstrap-5-offcanvas" target="_blank">How to Load Content into a Bootstrap Offcanvas Component with HTMX and Save State as a Hash in the URL</a>

<div 

   id="offcanvas" 

   class="offcanvas offcanvas-start"

   hx-get="/sidebar" 

   hx-select=".sidebar" 

   hx-target=".offcanvas-body"

   hx-trigger="filter-event">

  <div class="offcanvas-body">

    Loading...

  </div>

</div>

​

<template url="/sidebar" delay="1500">

  <h2>Sidebar Headline only visible when /sidebar is directly requested</h2>

  <div class="sidebar">

    Sidebar

  </div>

</template>