Off-Canvas Content

An off-canvas section used for complementary content.

Copy: View demo

Dependencies

All components are built upon the CodyHouse Framework.

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

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.

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

💌 Join our newsletter

Get our monthly recap with the latest CodyHouse news