search results:

    • Standard
    • React
    License Free hosting Learn Services Community
    • + D
    • Light
    • Dark
    • System
    logo Tailwind Elements
    • Getting started
      • Quick start
      • Tutorials
      • Design system
      • Local installation
      • Optimization
      • Dark mode
      • Theming
      • Changelog
      • Contribute
      • Internationalization guide
    • Integrations
      • Angular
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • React
      • Remix
      • Solid
      • Svelte
      • Vue
    • Content & styles
      • Animations
      • Animations Extended
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Headers
      • Mega menu
      • Navbar
      • Offcanvas
      • Pagination
      • Pills
      • Scrollspy
      • Sidenav
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Chips
      • Collapse
      • Dropdown
      • Gallery
      • Jumbotron
      • Lightbox
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popconfirm
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Checkbox
      • Datepicker
      • Datetimepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
      • Validation
    • Data
      • Charts
      • Charts advanced
      • Datatables
      • Tables
    • Methods
      • Clipboard
      • Infinite scroll
      • Lazy loading
      • Loading management
      • Ripple
      • Scrollbar
      • Smooth scroll
      • Sticky
      • Touch
    • Design Blocks
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Team
      • Testimonials
    • Coming Soon
      • Angular
      • Builder
      • Templates
      • Vue
    • ResourcesNew
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New
      • UI / UX tips
    • Overview
    • API

    Offcanvas

    Tailwind CSS Offcanvas / Drawer

    Use responsive offcanvas component with helper examples for side drawer component with left, right, top, and bottom side panels. See examples & use them for free.

    Required ES init: Offcanvas *
    * UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using Tailwind Elements ES format then you should pass the required components to the initTE method.

    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.
    • Action
    • Another action
    • Something else here
    • 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 Dev.to Share via Twitter Share via Facebook Share via Pinterest Share via Reddit Share via StumbleUpon Share via Vkontakte Share via Weibo Share via HackerNews Share via Gmail Share via Email

    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 });
          
            
        

    Related resources

    Tutorials:

    navbar icons focus active and others dark mode flexbox spacing buttons lists sizing inputs badges

    Extended Docs:

    icons navbar sidenav accordion buttons link list group social buttons checkbox datepicker radio range search select switch timepicker breakpoints dark theme display flex icons overflow position spacing sticky visibility hidden z index

    Design System (Figma):

    introduction content should be the star less is more power of visual hierarchy art of prioritization de emphasize with no mercy size matters lowering contrast low contrast vs low aesthetics let it breathe user experience do not start with the roof project personality design system principles tips and tricks
    • Basic example
    • Placement - top
    • Placement - right
    • Placement - bottom
    • Related resources

    Offcanvas - API


    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
            
                
            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
            
                
            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
            
                
                  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...
                });
            
            
        
    • Import
    • Usage
    • Options
    • Methods
    • Events
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2023 Copyright: MDBootstrap.com