What is Offcanvas?

Offcanvas is a hidden sidebar that slides in from the side when triggered. It is used for navigation menus, side panels, and additional content.

• data-bs-toggle=”offcanvas” → Triggers the Offcanvas panel
• data-bs-target=”#offcanvasExample” → Links the button to the Offcanvas component
• .offcanvas → Defines the Offcanvas component
• .offcanvas-start → Positions the Offcanvas from the left
• .offcanvas-end → Positions the Offcanvas from the right
• .offcanvas-top → Positions the Offcanvas from the top
• .offcanvas-bottom → Positions the Offcanvas from the bottom

Example: Basic Offcanvas

<!-- Button to Open Offcanvas -->
  <button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample">
    Open Sidebar
  </button>

  <!-- Offcanvas Sidebar -->
  <div class="offcanvas offcanvas-start" id="offcanvasExample">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title">Offcanvas Menu</h5>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
      <p>This is a basic offcanvas sidebar.</p>
    </div>
  </div>

Output:

Explanation:

• Clicking the button opens the Offcanvas panel from the left.
• The btn-close button closes the Offcanvas.