An off-canvas section used for complementary content.
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.
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
Bug Report & Feedback
Get in touch: suggest a component or report a bug.