Creating Offcanvas Sidebar with Bootstrap 5

Intro

You can add hidden sidebars for your web sites and apps for navigation, shopping carts, and more which appear from the left, right, or bottom edge of the viewport. You can show and hide them using buttons, links or other elements on your page. You can also control the Offcanvas Sidebars using App Connect dynamic events.
This is possible thanks to the Offcanvas component in Bootstrap 5.

Creating Offcanvas Sidebar

We created a simple Bootstrap 5 page, where we want to add the Offcanvas component.
Open the App Connect panel, select App and add a new component:

Open the Components menu and select Dynamic Offcanvas:

The Offcanvas component has been added on your page.

Options

You can find its properties in the Properties panel:

You can select the position of the Offcanvas - Start, End or Bottom.
Start - The Offcanvas appears from the left edge of the viewport
End - The Offcanvas appears from the right edge of the viewport
Bottom - The Offcanvas appears from the bottom edge of the viewport

Customize the rest of the options as you need:

Scroll - Allow body scrolling while offcanvas is open
Auto Show - Show the officanvas when the page loads
No Backdrop - Disable the backdrop on page body while offcanvas is open
No Keyboard - Disable closing of the offcanvas when escape key is pressed

Layout

The offcanvas component contains a header and body.
You can add your content in the offcanvas body:

Controlling Offcanvas

You can control the Offcanvas Component using any any element on your page.

Using Action Toggle

The easiest way to control the offcanvas is using a button. Select your button and open the Action Toggle menu:

Select Offcanvas:

And select your offcanvas in the menu:

Using Dynamic Events

You can also use App Connect Dynamic Events to Open, Close or Toggle the offcanvas:

Select the event you want to use, in our case on click:

And click the Action Picker button:

Select Show under the Offcanvas Component and add it:

Click Select and you are done:

You can preview the page in the browser:

Community Page
Last updated: