An off-canvas section used for complementary content.
All components are based on CodyFrame.
This component includes variations. All variations share the same SCSS/JS code. They only differ in their HTML.
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-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
You can listen to the opening/closing of an off-canvas panel element using the two custom events
closePanel that are emitted when the panel is open/close.