Offcanvas custom element

![](./assets/preview.webp)

Examples

- Codepen:
Overview
2 - Panel placement
3 - Panel scroll
4 - Custom icons
5 - Backdrop content
6 - Backdrop static
7 - Panel responsive

- [Stackblitz]():
Overview

Installation

#### NPM

``

bash

npm install @components-1812/offcanvas

JSON visualizer package





#### CDN



Load the component bundle directly from a CDN — this will automatically register the element and inject styles:

html





Alternatively, you can manually import, load the styles, and define the element yourself:

html





- jsdelivr:





- unpkg:










Usage



$3



If you are using Vite or a Vite-based framework such as Astro, you can import the component in a client-side script:

js

import '@components-1812/offcanvas';





and use it in your HTML:

html





    

    Header



    

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.

    



    Footer



    

    ❌

    ➡️



    

    

        This is the backdrop content.

        You can add any content here.





$3



If you are using a builder or framework that does not support importing with

?raw

, 



you can load and register the component using the

bundle version in dist/index.min.js, which includes all CSS injected via CSS-in-JS and AdoptedStyleSheets

js

import '@components-1812/offcanvas/dist/index.min.js';





For customizing the component definition or manually loading the stylesheets, see Defining and 

Adding Stylesheets Manually.





> Node

>

> The

dist folder includes minified versions: Offcanvas.min.css and Offcanvas.min.js

, which can be used anywhere.








Defining and Adding Stylesheets Manually



If you want to add custom stylesheets to the component or need to load stylesheets from a different path, you can do it like this:



- ### AdoptedStyleSheets (recommended)



    Using your builder’s import raw method,

CSSStyleSheet, and the component’s AdoptedStyleSheets

 property:

js

    import Offcanvas from "@components-1812/offcanvas/Offcanvas.js";

    import OffcanvasRawCSS from "@components-1812/offcanvas/Offcanvas.css?raw";



    //Create a CSSStyleSheet and add it to the component

    const OffcanvasCSS = new CSSStyleSheet();



    OffcanvasCSS.replaceSync(OffcanvasRawCSS);



    Offcanvas.stylesSheets.adopted.push(OffcanvasCSS);



    //Define the component with default tag name

    Offcanvas.define();





- ### Raw CSS in a