Tailwind CSS Offcanvas / Drawer

Basic

Offcanvas is a sidebar component that can be toggled to appear from the left, right, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle.

Use bottom-0, top-0 and left-0 classes to place offcanvas on the left of the viewport.

Link with href

Offcanvas

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

HTML
javascript

        
            
      <a
        class="me-1.5 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
        data-twe-offcanvas-toggle
        href="#offcanvasExample"
        role="button"
        aria-controls="offcanvasExample"
        data-twe-ripple-init
        data-twe-ripple-color="light">
        Link with href
      </a>
      <button
        class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
        type="button"
        data-twe-offcanvas-toggle
        data-twe-target="#offcanvasExample"
        aria-controls="offcanvasExample"
        data-twe-ripple-init
        data-twe-ripple-color="light">
        Button with data-twe-target
      </button>

      <div
        class="invisible fixed bottom-0 left-0 top-0 z-[1045] flex w-96 max-w-full -translate-x-full flex-col border-none bg-white bg-clip-padding text-neutral-700 shadow-sm outline-none transition duration-300 ease-in-out data-[twe-offcanvas-show]:transform-none dark:bg-body-dark dark:text-white"
        tabindex="-1"
        id="offcanvasExample"
        aria-labelledby="offcanvasExampleLabel"
        data-twe-offcanvas-init>
        <div class="flex items-center justify-between p-4">
          <h5
            class="mb-0 font-semibold leading-normal"
            id="offcanvasExampleLabel">
            Offcanvas
          </h5>
          <button
            type="button"
            class="box-content rounded-none border-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-300 dark:focus:text-neutral-300"
            data-twe-offcanvas-dismiss
            aria-label="Close">
            <span class="[&>svg]:h-6 [&>svg]:w-6">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="currentColor"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M6 18L18 6M6 6l12 12" />
              </svg>
            </span>
          </button>
        </div>
        <div class="flex-grow overflow-y-auto p-4">
          <div>
            Some text as placeholder. In real life you can have the elements you
            have chosen. Like, text, images, lists, etc.
          </div>
          <div class="relative mt-4" data-twe-dropdown-ref>
            <button
              class="flex items-center whitespace-nowrap rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 motion-reduce:transition-none dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
              type="button"
              id="dropdownMenuButton"
              data-twe-dropdown-toggle-ref
              data-twe-ripple-init
              data-twe-ripple-color="light">
              Dropdown button
              <span class="ms-2 w-2 [&>svg]:h-5 [&>svg]:w-5">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                    clip-rule="evenodd" />
                </svg>
              </span>
            </button>
            <ul
              class="absolute z-[1000] float-left m-0 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg data-[twe-dropdown-show]:block dark:bg-surface-dark"
              aria-labelledby="dropdownMenuButton1"
              data-twe-dropdown-menu-ref>
              <li>
                <a
                  class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                  href="#"
                  data-twe-dropdown-item-ref
                  >Action</a
                >
              </li>
              <li>
                <a
                  class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                  href="#"
                  data-twe-dropdown-item-ref
                  >Another action</a
                >
              </li>
              <li>
                <a
                  class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                  href="#"
                  data-twe-dropdown-item-ref
                  >Something else here</a
                >
              </li>
            </ul>
          </div>
        </div>
      </div>

        
            
      // Initialization for ES Users
      import {
        Offcanvas,
        Ripple,
        Dropdown,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Offcanvas, Ripple, Dropdown });

Hey there 👋 we're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Placement - top

Use top-0, left-0 and right-0 classes to place offcanvas on the top of the viewport.

Offcanvas top

...

HTML
javascript

        
            
      <button
        class="me-1.5 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
        type="button"
        data-twe-offcanvas-toggle
        data-twe-target="#offcanvasTop"
        aria-controls="offcanvasTop"
        data-twe-ripple-init
        data-twe-ripple-color="light">
        Toggle top offcanvas
      </button>

      <div
        class="invisible fixed bottom-0 left-0 right-0 top-0 z-[1045] flex h-1/3 max-h-full max-w-full -translate-y-full flex-col border-none bg-white bg-clip-padding text-neutral-700 shadow-sm outline-none transition duration-300 ease-in-out data-[twe-offcanvas-show]:transform-none dark:bg-body-dark dark:text-white"
        tabindex="-1"
        id="offcanvasTop"
        aria-labelledby="offcanvasTopLabel"
        data-twe-offcanvas-init>
        <div class="flex items-center justify-between p-4">
          <h5 class="mb-0 font-semibold leading-normal" id="offcanvasTopLabel">
            Offcanvas top
          </h5>
          <button
            type="button"
            class="box-content rounded-none border-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-300 dark:focus:text-neutral-300"
            data-twe-offcanvas-dismiss
            aria-label="Close">
            <span class="[&>svg]:h-6 [&>svg]:w-6">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="currentColor"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M6 18L18 6M6 6l12 12" />
              </svg>
            </span>
          </button>
        </div>
        <div class="flex-grow overflow-y-auto p-4">...</div>
      </div>

        
            
      // Initialization for ES Users
      import {
        Offcanvas,
        Ripple,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Offcanvas, Ripple });

Placement - right

Use top-0, right-0, w-96 classes to place offcanvas on the right of the viewport.

Offcanvas right

...

HTML
javascript

        
            
      <button
        class="me-1.5 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
        type="button"
        data-twe-offcanvas-toggle
        data-twe-target="#offcanvasRight"
        aria-controls="offcanvasRight"
        data-twe-ripple-init
        data-twe-ripple-color="light">
        Toggle right offcanvas
      </button>

      <div
        class="invisible fixed bottom-0 right-0 top-0 z-[1045] flex w-96 max-w-full translate-x-full flex-col border-none bg-white bg-clip-padding text-neutral-700 shadow-sm outline-none transition duration-300 ease-in-out data-[twe-offcanvas-show]:transform-none dark:bg-body-dark dark:text-white"
        tabindex="-1"
        id="offcanvasRight"
        aria-labelledby="offcanvasRightLabel"
        data-twe-offcanvas-init>
        <div class="flex items-center justify-between p-4">
          <h5
            class="mb-0 font-semibold leading-normal"
            id="offcanvasRightLabel">
            Offcanvas right
          </h5>
          <button
            type="button"
            class="box-content rounded-none border-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-300 dark:focus:text-neutral-300"
            data-twe-offcanvas-dismiss
            aria-label="Close">
            <span class="[&>svg]:h-6 [&>svg]:w-6">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="currentColor"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M6 18L18 6M6 6l12 12" />
              </svg>
            </span>
          </button>
        </div>
        <div class="offcanvas-body flex-grow overflow-y-auto p-4">...</div>
      </div>

        
            
      // Initialization for ES Users
      import {
        Offcanvas,
        Ripple,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Offcanvas, Ripple });

Placement - bottom

Use bottom-0, left-0, right-0 classes to place offcanvas on the bottom of the viewport.

Offcanvas bottom

...

HTML
javascript

        
            
      <button
        class="me-1.5 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
        type="button"
        data-twe-offcanvas-toggle
        data-twe-target="#offcanvasBottom"
        aria-controls="offcanvasBottom"
        data-twe-ripple-init
        data-twe-ripple-color="light">
        Toggle bottom offcanvas
      </button>

      <div
        class="invisible fixed bottom-0 left-0 right-0 z-[1045] flex h-1/3 max-h-full max-w-full translate-y-full flex-col border-none bg-white bg-clip-padding text-neutral-700 shadow-sm outline-none transition duration-300 ease-in-out data-[twe-offcanvas-show]:transform-none dark:bg-body-dark dark:text-white"
        tabindex="-1"
        id="offcanvasBottom"
        aria-labelledby="offcanvasBottomLabel"
        data-twe-offcanvas-init>
        <div class="flex items-center justify-between p-4">
          <h5
            class="mb-0 font-semibold leading-normal"
            id="offcanvasBottomLabel">
            Offcanvas bottom
          </h5>
          <button
            type="button"
            class="box-content rounded-none border-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-300 dark:focus:text-neutral-300"
            data-twe-offcanvas-dismiss
            aria-label="Close">
            <span class="[&>svg]:h-6 [&>svg]:w-6">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="currentColor"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M6 18L18 6M6 6l12 12" />
              </svg>
            </span>
          </button>
        </div>
        <div class="small flex-grow overflow-y-auto p-4">...</div>
      </div>

        
            
      // Initialization for ES Users
      import {
        Offcanvas,
        Ripple,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Offcanvas, Ripple });

Import

Importing components depends on how your application works. If you intend to use the TW elements ES format, you must first import the component and then initialize it with the initTWE method. If you are going to use the UMD format, just import the tw-elements package.

javascript
umd

ES UMD

        
            
        import { Offcanvas, initTWE } from "tw-elements";
        initTWE({ Offcanvas });

        
            
        import "tw-elements";

Usage

Via data attributes

Add data-twe-offcanvas-toggle and a data-twe-target or href to the element to automatically assign control of one offcanvas element. The data-twe-target attribute accepts a CSS selector to apply the offcanvas to. For ES format, you must first import and call the initTWE method.

Add a dismiss button with the data-twe-offcanvas-dismiss attribute, which triggers the JavaScript functionality. Be sure to use the <button> element with it for proper behavior across all devices.

HTML

        
            

          <a
            class="me-1.5 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
            data-twe-offcanvas-toggle
            href="#offcanvasExample"
            role="button"
            aria-controls="offcanvasExample"
            data-twe-ripple-init
            data-twe-ripple-color="light">
            Link with href
          </a>
          <button
            class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
            type="button"
            data-twe-offcanvas-toggle
            data-twe-target="#offcanvasExample"
            aria-controls="offcanvasExample"
            data-twe-ripple-init
            data-twe-ripple-color="light">
            Button with data-twe-target
          </button>

          <div
            class="invisible fixed bottom-0 left-0 top-0 z-[1045] flex w-96 max-w-full -translate-x-full flex-col border-none bg-white bg-clip-padding text-neutral-700 shadow-sm outline-none transition duration-300 ease-in-out data-[twe-offcanvas-show]:transform-none dark:bg-body-dark dark:text-white"
            tabindex="-1"
            id="offcanvasExample"
            aria-labelledby="offcanvasExampleLabel"
            data-twe-offcanvas-init>
            <div class="flex items-center justify-between p-4">
              <h5
                class="mb-0 font-semibold leading-normal"
                id="offcanvasExampleLabel">
                Offcanvas
              </h5>
              <button
                type="button"
                class="box-content rounded-none border-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-300 dark:focus:text-neutral-300"
                data-twe-offcanvas-dismiss
                aria-label="Close">
                <span class="[&>svg]:h-6 [&>svg]:w-6">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="currentColor"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M6 18L18 6M6 6l12 12" />
                  </svg>
                </span>
              </button>
            </div>
            <div class="flex-grow overflow-y-auto p-4">
              <div>
                Some text as placeholder. In real life you can have the elements
                you have chosen. Like, text, images, lists, etc.
              </div>
              <div class="relative mt-4" data-twe-dropdown-ref>
                <button
                  class="flex items-center whitespace-nowrap rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 motion-reduce:transition-none dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
                  type="button"
                  id="dropdownMenuButton"
                  data-twe-dropdown-toggle-ref
                  data-twe-ripple-init
                  data-twe-ripple-color="light">
                  Dropdown button
                  <span class="ms-2 w-2 [&>svg]:h-5 [&>svg]:w-5">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 20 20"
                      fill="currentColor">
                      <path
                        fill-rule="evenodd"
                        d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                        clip-rule="evenodd" />
                    </svg>
                  </span>
                </button>
                <ul
                  class="absolute z-[1000] float-left m-0 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg data-[twe-dropdown-show]:block dark:bg-surface-dark"
                  aria-labelledby="dropdownMenuButton1"
                  data-twe-dropdown-menu-ref>
                  <li>
                    <a
                      class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                      href="#"
                      data-twe-dropdown-item-ref
                      >Action</a
                    >
                  </li>
                  <li>
                    <a
                      class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                      href="#"
                      data-twe-dropdown-item-ref
                      >Another action</a
                    >
                  </li>
                  <li>
                    <a
                      class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                      href="#"
                      data-twe-dropdown-item-ref
                      >Something else here</a
                    >
                  </li>
                </ul>
              </div>
            </div>
          </div>

Dismiss

Dismissal can be achieved with data attributes on a button within the offcanvas as demonstrated below:

HTML

        
            
          <button
            type="button"
            class="box-content rounded-none border-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-300 dark:focus:text-neutral-300"
            data-twe-offcanvas-dismiss
            aria-label="Close">
            <span class="[&>svg]:h-6 [&>svg]:w-6">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="currentColor"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M6 18L18 6M6 6l12 12" />
              </svg>
            </span>
          </button>

or on a button outside the offcanvas using the data-twe-target as demonstrated below:

HTML

        
            
          <button
            type="button"
            class="box-content rounded-none border-none text-neutral-500 hover:text-neutral-800 hover:no-underline focus:text-neutral-800 focus:opacity-100 focus:shadow-none focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-300 dark:focus:text-neutral-300"
            data-twe-offcanvas-dismiss
            data-twe-target="#my-offcanvas">
            <span class="[&>svg]:h-6 [&>svg]:w-6">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="currentColor"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M6 18L18 6M6 6l12 12" />
              </svg>
            </span>
          </button>

Via JavaScript

You can access an instance from your Javascript code, by using the getInstance static method of the Offcanvas class - it allows making use of all the public methods listed in the Methods section.

javascript
umd

ES UMD

        
            
        const offcanvasElementList = [].slice.call(document.querySelectorAll('[data-twe-offcanvas-init]'))
        const offcanvasList = offcanvasElementList.map((offcanvasEl) => {
          return new Offcanvas(offcanvasEl)
        });

        
            
        const offcanvasElementList = [].slice.call(document.querySelectorAll('[data-twe-offcanvas-init]'))
        const offcanvasList = offcanvasElementList.map((offcanvasEl) => {
          return new twe.Offcanvas(offcanvasEl)
        });

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-twe-, as in data-twe-backdrop="false".

Name	Type	Default	Description
`backdrop`	boolean	`true`	Apply a backdrop on body while offcanvas is open.
`keyboard`	boolean	`true`	Closes the modal when escape key is pressed.
`scroll`	boolean	`false`	Allow body scrolling while offcanvas is open

Methods

Asynchronous methods and transitions:
All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

Activates your content as an offcanvas element. Accepts an optional options object.

Method	Description	Example
`toggle`	Toggles an offcanvas element to shown or hidden. Returns to the caller before the offcanvas element has actually been shown or hidden (i.e. before the `shown.twe.offcanvas` or `hidden.twe.offcanvas` event occurs).	`myOffcanvas.toggle()`
`show`	Shows an offcanvas element. Returns to the caller before the offcanvas element has actually been shown (i.e. before the `shown.twe.offcanvas` event occurs).	`myOffcanvas.show()`
`hide`	Hides an offcanvas element.Returns to the caller before the offcanvas element has actually been hidden (i.e. before the `hidden.twe.offcanvas` event occurs).	`myOffcanvas.hide()`
`getInstance`	Static method which allows you to get the modal instance associated with a DOM element.	`Offcanvas.getInstance()`
`getOrCreateInstance`	Static method which allows you to get the modal instance associated with a DOM element or create a new one in case it wasn't initialized.	`Offcanvas.getOrCreateInstance()`

javascript
umd

ES UMD

        
            
              const myOffcanvasEl = document.getElementById("myOffcanvas");
              const myOffcanvas = new Offcanvas(myOffcanvasEl);
              myOffcanvas.show();

        
            
              const myOffcanvasEl = document.getElementById("myOffcanvas");
              const myOffcanvas = new twe.Offcanvas(myOffcanvasEl);
              myOffcanvas.show();

Events

Bootstrap’s offcanvas class exposes a few events for hooking into offcanvas functionality.

Event type	Description
`show.twe.offcanvas`	This event fires immediately when the `show` instance method is called.
`shown.twe.offcanvas`	This event is fired when an offcanvas element has been made visible to the user (will wait for CSS transitions to complete).
`hide.twe.offcanvas`	This event is fired immediately when the `hide` instance method has been called.
`hidden.twe.offcanvas`	This event is fired when an offcanvas element has been hidden from the user (will wait for CSS transitions to complete).

JavaScript

        
            
            const myOffcanvasEl = document.getElementById("myOffcanvas");
            myOffcanvasEl.addEventListener("hidden.twe.offcanvas", (e) => {
              // do something...
            });

Offcanvas

Basic

Offcanvas

Placement - top

Offcanvas top

Placement - right

Offcanvas right

Placement - bottom

Offcanvas bottom

Offcanvas - API

Import

Usage

Via data attributes

Dismiss

Via JavaScript

Options

Methods

Events

Access restricted

To view this section you must have an active PRO account

Offcanvas

Tailwind CSS Offcanvas / Drawer

Basic

Offcanvas

Placement - top

Offcanvas top

Placement - right

Offcanvas right

Placement - bottom

Offcanvas bottom

Related resources

Tutorials:

Extended Docs:

Generators and builders:

Design System (Figma):

Offcanvas - API

Import

Usage

Via data attributes

Dismiss

Via JavaScript

Options

Methods

Events