🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →


Progress value is 30%

Off-Canvas Content

An off-canvas section used for complementary content.

Copy: View demo


All components are based on CodyFrame.

This component includes variations. All variations share the same SCSS/JS code. They only differ in their HTML.

How to

The Off-Canvas Content component is used to display complementary content, which is by default hidden below the main content of the page.

To connect the off-canvas content to its trigger (e.g., button), make sure the id value of the first one is equal to the aria-controls value of the second one.

By default, the off-canvas content will enter from left to right. If you want the content to enter from the right, add the off-canvas--right class to the .off-canvas element.

The --off-canvas-panel-width and --off-canvas-panel-width-opposite CSS variables are used to set the width of the off-canvas content (default value is 400px/-400px). Make sure to update both variables if you want to change the default panel width.

If you want the off-canvas content to be full width, add the off-canvas--full-width class.

You can listen to the opening/closing of an off-canvas panel element using the two custom events openPanel and closePanel that are emitted when the panel is open/close.


✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us