« Back to main Free Hosting Bootstrap Builder Free UI Kit

Create basic off-canvas sidebar panel (left and right)

View demo Download


Get 700+ Material components for the latest Bootstrap 5 for free. This component is also available as ready-to-use solution in MDB UI Kit. Learn more about Bootstrap Dropdown here, or download MDB Free version with 700+ components here.

Today many websites using off-canvas sidebars for mobile and desktop view, some of them using push-screen animations. In this example we will show basic jquery code and css styling which creates offcanvas sidebar with screen dimmer (darken rest screen when offcanvas is active).

With following script you can use turn any element into off-canvas. It is for all screen sizes. All you need to add a single class name and unique id.

Steps to make desktop off-canvas sidebar
  • Crate div element with some content inside
  • Add class name offcanvas, and write following CSS styling
  • Add another element with class name screen-overlay, to overlay screen with dark transparent background
  • Write jquery script with toggleClass("show") to show or hide our off-canvas panel
  • Also add another toggleClass("show") to screen-overlay element.
Here are basic code snippets

« Back to all examples

Creating e-commerce project?