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

        
            
      <div class="flex space-x-2">
        <div>
          <a
            class="mr-1.5 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)]"
            data-te-offcanvas-toggle
            href="#offcanvasExample"
            role="button"
            aria-controls="offcanvasExample"
            data-te-ripple-init
            data-te-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-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)]"
            type="button"
            data-te-offcanvas-toggle
            data-te-target="#offcanvasExample"
            aria-controls="offcanvasExample"
            data-te-ripple-init
            data-te-ripple-color="light">
            Button with data-te-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 dark:bg-neutral-800 dark:text-neutral-200 [&[data-te-offcanvas-show]]:transform-none"
            tabindex="-1"
            id="offcanvasExample"
            aria-labelledby="offcanvasExampleLabel"
            data-te-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 opacity-50 hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
                data-te-offcanvas-dismiss>
                <span
                  class="w-[1em] focus:opacity-100 disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&.disabled]:pointer-events-none [&.disabled]:select-none [&.disabled]:opacity-25">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    class="h-6 w-6">
                    <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-te-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-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] motion-reduce:transition-none"
                  type="button"
                  id="dropdownMenuButton"
                  data-te-dropdown-toggle-ref
                  data-te-ripple-init
                  data-te-ripple-color="light">
                  Dropdown button
                  <span class="ml-2 w-2">
                    <svg
                      aria-hidden="true"
                      focusable="false"
                      data-prefix="fas"
                      data-icon="caret-down"
                      role="img"
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 320 512">
                      <path
                        fill="currentColor"
                        d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path>
                    </svg>
                  </span>
                </button>
                <ul
                  class="absolute z-[1000] float-left m-0 hidden min-w-max list-none rounded-lg border-none bg-white bg-clip-padding py-2 text-left text-base shadow-lg dark:bg-neutral-700 dark:text-neutral-200 [&[data-te-dropdown-show]]:block"
                  aria-labelledby="dropdownMenuButton"
                  data-te-dropdown-menu-ref>
                  <li>
                    <a
                      class="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-neutral-100 active:text-neutral-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-neutral-400 dark:text-neutral-100 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500"
                      href="#"
                      data-te-dropdown-item-ref
                      >Action
                    </a>
                  </li>
                  <li>
                    <a
                      class="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-neutral-100 active:text-neutral-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-neutral-400 dark:text-neutral-100 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500"
                      href="#"
                      data-te-dropdown-item-ref
                      >Another action
                    </a>
                  </li>
                  <li>
                    <a
                      class="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-neutral-100 active:text-neutral-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-neutral-400 dark:text-neutral-100 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500"
                      href="#"
                      data-te-dropdown-item-ref
                      >Something else here
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

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

Hey there 👋 we want to make Tailwind Elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Share via Reddit Share via StumbleUpon

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="mr-1.5 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)]"
        type="button"
        data-te-offcanvas-toggle
        data-te-target="#offcanvasTop"
        aria-controls="offcanvasTop"
        data-te-ripple-init
        data-te-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 dark:bg-neutral-800 dark:text-neutral-200 [&[data-te-offcanvas-show]]:transform-none"
        tabindex="-1"
        id="offcanvasTop"
        aria-labelledby="offcanvasTopLabel"
        data-te-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 opacity-50 hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
            data-te-offcanvas-dismiss>
            <span
              class="w-[1em] focus:opacity-100 disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&.disabled]:pointer-events-none [&.disabled]:select-none [&.disabled]:opacity-25">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="h-6 w-6">
                <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,
        initTE,
      } from "tw-elements";
      
      initTE({ 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="mr-1.5 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)]"
        type="button"
        data-te-offcanvas-toggle
        data-te-target="#offcanvasRight"
        aria-controls="offcanvasRight"
        data-te-ripple-init
        data-te-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 dark:bg-neutral-800 dark:text-neutral-200 [&[data-te-offcanvas-show]]:transform-none"
        tabindex="-1"
        id="offcanvasRight"
        aria-labelledby="offcanvasRightLabel"
        data-te-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 opacity-50 hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
            data-te-offcanvas-dismiss>
            <span
              class="w-[1em] focus:opacity-100 disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&.disabled]:pointer-events-none [&.disabled]:select-none [&.disabled]:opacity-25">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="h-6 w-6">
                <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,
        initTE,
      } from "tw-elements";
      
      initTE({ 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="mr-1.5 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)]"
        type="button"
        data-te-offcanvas-toggle
        data-te-target="#offcanvasBottom"
        aria-controls="offcanvasBottom"
        data-te-ripple-init
        data-te-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 dark:bg-neutral-800 dark:text-neutral-200 [&[data-te-offcanvas-show]]:transform-none"
        tabindex="-1"
        id="offcanvasBottom"
        aria-labelledby="offcanvasBottomLabel"
        data-te-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 opacity-50 hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
            data-te-offcanvas-dismiss>
            <span
              class="w-[1em] focus:opacity-100 disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&.disabled]:pointer-events-none [&.disabled]:select-none [&.disabled]:opacity-25">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="h-6 w-6">
                <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,
        initTE,
      } from "tw-elements";
      
      initTE({ Offcanvas, Ripple });

Import

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

javascript
umd

ES UMD

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

        
            
        import "tw-elements";

Usage

Via data attributes

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

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

HTML

        
            
          <div class="flex space-x-2">
            <div>
              <a
                class="mr-1.5 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)]"
                data-te-offcanvas-toggle
                href="#offcanvasExample"
                role="button"
                aria-controls="offcanvasExample"
                data-te-ripple-init
                data-te-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-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)]"
                type="button"
                data-te-offcanvas-toggle
                data-te-target="#offcanvasExample"
                aria-controls="offcanvasExample"
                data-te-ripple-init
                data-te-ripple-color="light">
                Button with data-te-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 dark:bg-neutral-800 dark:text-neutral-200 [&[data-te-offcanvas-show]]:transform-none"
                tabindex="-1"
                id="offcanvasExample"
                aria-labelledby="offcanvasExampleLabel"
                data-te-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 opacity-50 hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
                    data-te-offcanvas-dismiss>
                    <span
                      class="w-[1em] focus:opacity-100 disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&.disabled]:pointer-events-none [&.disabled]:select-none [&.disabled]:opacity-25">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor"
                        class="h-6 w-6">
                        <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-te-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-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] motion-reduce:transition-none"
                      type="button"
                      id="dropdownMenuButton"
                      data-te-dropdown-toggle-ref
                      data-te-ripple-init
                      data-te-ripple-color="light">
                      Dropdown button
                      <span class="ml-2 w-2">
                        <svg
                          aria-hidden="true"
                          focusable="false"
                          data-prefix="fas"
                          data-icon="caret-down"
                          role="img"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 320 512">
                          <path
                            fill="currentColor"
                            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path>
                        </svg>
                      </span>
                    </button>
                    <ul
                      class="absolute z-[1000] float-left m-0 hidden min-w-max list-none rounded-lg border-none bg-white bg-clip-padding py-2 text-left text-base shadow-lg dark:bg-neutral-700 dark:text-neutral-200 [&[data-te-dropdown-show]]:block"
                      aria-labelledby="dropdownMenuButton"
                      data-te-dropdown-menu-ref>
                      <li>
                        <a
                          class="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-neutral-100 active:text-neutral-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-neutral-400 dark:text-neutral-100 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500"
                          href="#"
                          data-te-dropdown-item-ref
                          >Action
                        </a>
                      </li>
                      <li>
                        <a
                          class="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-neutral-100 active:text-neutral-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-neutral-400 dark:text-neutral-100 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500"
                          href="#"
                          data-te-dropdown-item-ref
                          >Another action
                        </a>
                      </li>
                      <li>
                        <a
                          class="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-neutral-100 active:text-neutral-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-neutral-400 dark:text-neutral-100 dark:hover:bg-neutral-500 dark:focus:bg-neutral-500"
                          href="#"
                          data-te-dropdown-item-ref
                          >Something else here
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </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 opacity-50 hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
            data-te-offcanvas-dismiss></button>

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

HTML

        
            
          <button
            type="button"
            class="box-content rounded-none border-none opacity-50 hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
            data-te-offcanvas-dismiss
            data-te-target="#my-offcanvas"></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-te-offcanvas-init]'))
        const offcanvasList = offcanvasElementList.map((offcanvasEl) => {
          return new Offcanvas(offcanvasEl)
        });

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

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-te-, as in data-te-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.te.offcanvas` or `hidden.te.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.te.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.te.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 te.Offcanvas(myOffcanvasEl);
              myOffcanvas.show();

Events

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

Event type	Description
`show.te.offcanvas`	This event fires immediately when the `show` instance method is called.
`shown.te.offcanvas`	This event is fired when an offcanvas element has been made visible to the user (will wait for CSS transitions to complete).
`hide.te.modal`	This event is fired immediately when the `hide` instance method has been called.
`hidden.te.modal`	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.te.offcanvas", (e) => {
              // do something...
            });

Offcanvas

Basic

Offcanvas

Placement - top

Offcanvas top

Placement - right

Offcanvas right

Placement - bottom

Offcanvas bottom

Related resources

Tutorials:

Extended Docs:

Design System (Figma):

Offcanvas - API

Import

Usage

Via data attributes

Dismiss

Via JavaScript

Options

Methods

Events