Bootstrap Offcanvas Sidebar

Introduction

In this tour you’ll learn how Bootstrap offcanvas works in Wappler: the trigger/target wiring, placement, and the key Properties to control behavior.

Offcanvas sample

This offcanvas sample shows how Bootstrap can reveal secondary content without taking the user to another page or stacking everything in the main layout. It is useful for menus, filters, and contextual tools, and it helps to understand the whole interaction before inspecting individual options.

tip: Offcanvas is often a better mobile menu than a full-screen modal because it keeps context and supports scrolling.

Two parts: trigger + panel

Offcanvas is a trigger element plus a separate offcanvas panel (header/body) that slides in.

What you’ll focus on

Trigger/target wiring and placement behavior (start/end/top/bottom).

Trigger vs offcanvas

Offcanvas is a separate element from its trigger. App Structure helps you select the trigger and the offcanvas container independently.

If clicking your trigger does nothing, it’s usually a missing/incorrect target ID or toggle type.

tip: Most issues come down to the trigger target and the offcanvas id not matching.

Screenshot: Trigger vs offcanvasClick to open the larger image

Review Trigger + Offcanvas

Now we’ll select the trigger button and the offcanvas element, and highlight the key Properties to review.

Trigger button

The trigger button is where the toggle type and target are configured. This step matters because Trigger button is part of Design View, and understanding that context makes the next action easier to repeat in your own project.

tip: Triggers are usually Buttons, Links, or Navbar togglers.

Screenshot: Trigger buttonClick to open the larger image

Orient yourself in Properties panel

Start with the wider context in the Properties panel so the next control makes sense in the full workflow. In the next step, you will focus on Trigger: Toggle type and see how it fits into this area.

Screenshot: Orient yourself in Properties panelClick to open the larger image

Trigger: Toggle type

In Properties, set the trigger Toggle type to Offcanvas. This step matters because Trigger: Toggle type is part of Selection Panels Properties Btndatatooggle, and understanding that context makes the next action easier to repeat in your own project.

important: Toggle type + target must match the offcanvas element id.

Screenshot: Trigger: Toggle typeClick to open the larger image

Trigger: Target

In Properties, set the trigger Target to the offcanvas element id. This step matters because Trigger: Target is part of Selection Panels Properties Btntoggletargetoffcanvas, and understanding that context makes the next action easier to repeat in your own project.

Screenshot: Trigger: TargetClick to open the larger image

Offcanvas element

The offcanvas element is where you configure placement and behavior. This step matters because Offcanvas element is part of Design View, and understanding that context makes the next action easier to repeat in your own project.

tip: Offcanvas can slide from start/end/top/bottom and can optionally allow body scrolling.

Screenshot: Offcanvas elementClick to open the larger image

Offcanvas: Placement

In Properties, set Placement (start/end/top/bottom) based on how you want the panel to slide in.

Screenshot: Offcanvas: PlacementClick to open the larger image

Offcanvas: Backdrop

Backdrop controls the overlay behind the offcanvas. Disable it only when you have a clear dismissal pattern.

Screenshot: Offcanvas: BackdropClick to open the larger image

Offcanvas: Scroll

Scroll controls whether the body can scroll while the offcanvas is open (when supported). This step matters because Offcanvas: Scroll is part of Selection Panels Properties Offcanvasscroll, and understanding that context makes the next action easier to repeat in your own project.

tip: Keep content inside offcanvas-body for consistent padding and scrolling.

Screenshot: Offcanvas: ScrollClick to open the larger image

Offcanvas: Header structure

In App Structure, check the header/title/close button are inside the offcanvas header for consistent UX.

Screenshot: Offcanvas: Header structureClick to open the larger image

Offcanvas close button

Offcanvas headers typically include a Close button (.btn-close) with data-bs-dismiss="offcanvas" and an aria-label.

Screenshot: Offcanvas close buttonClick to open the larger image

Wrap-up

Offcanvas works like a trigger + a separate panel element. Most issues come down to the trigger target and the offcanvas id not matching.

Practical tips

Common patterns:

• Use offcanvas for mobile navigation
• Keep actions in the header and main content in offcanvas-body
• Choose placement start/end based on your UI direction
• Keep dismissal intuitive (close button + backdrop unless intentional)

Best use-case

Offcanvas is great for mobile navigation and secondary panels that shouldn’t block the entire page.

Keep dismissal intuitive

Provide a close button + backdrop unless you have a deliberate reason not to.

Next steps

Continue with a related tour or go back to the Bootstrap tours index.