Discuss

Creating Offcanvas Sidebar with Bootstrap 5

On this page

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:

Screenshot_1|690x429

Open the Components menu and select Dynamic Offcanvas:

Screenshot_1|690x429

The Offcanvas component has been added on your page.

Options

You can find its properties in the Properties panel:

Screenshot_3|690x429

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

Screenshot_4|690x429

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

Screenshot_5|690x429

Layout

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

Screenshot_6|690x429

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:

Screenshot_7|690x429

Select Offcanvas:

Screenshot_8|690x429

And select your offcanvas in the menu:

Screenshot_9|690x429

Using Dynamic Events

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

Screenshot_10|690x429

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

Screenshot_11|690x429

And click the Action Picker button:

Screenshot_12|690x429

Select Show under the Offcanvas Component and add it:

Screenshot_13|690x429

Click Select and you are done:

Screenshot_14|690x429

You can preview the page in the browser:

offcanvas|690x467