search results:

    Get started License Playground Services Free hosting Community
    • + D
    • Light
    • Dark
    Tailwind Elements
    • Getting started
      • Quick start
      • Dark mode
      • Theming
      • Changelog
      • Contribute
    • Integrations
      • Angular
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • React
      • Svelte
      • Vue
    • Content & styles
      • Animations
      • 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
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Checkbox
      • Datepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
    • Data
      • Charts
      • Tables
    • Methods
      • Ripple
    • 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
      • React
      • Templates
      • Vue
    • 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.


    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
            
                
          <div class="flex space-x-2">
            <div>
              <a
                class="mr-1.5 inline-block rounded bg-primary px-6 pt-2.5 pb-2 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 pt-2.5 pb-2 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 top-0 left-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 pt-2.5 pb-2 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 py-2 px-4 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 py-2 px-4 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 py-2 px-4 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>
          
            
        

    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
            
                
          <button
            class="mr-1.5 inline-block rounded bg-primary px-6 pt-2.5 pb-2 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 top-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="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>
          
            
        

    Placement - right

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

    Offcanvas right
    ...
    • HTML
            
                
          <button
            class="mr-1.5 inline-block rounded bg-primary px-6 pt-2.5 pb-2 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 top-0 right-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>
          
            
        

    Placement - bottom

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

    Offcanvas bottom
    ...
    • HTML
            
                
          <button
            class="mr-1.5 inline-block rounded bg-primary px-6 pt-2.5 pb-2 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>
          
            
        

    Related resources

    Bootstrap Offcanvas Bootstrap Sidebar Bootstrap Hamburger Menu Bootstrap Sidenav Tutorial

    If you are looking for more advanced options, try Bootstrap Sidenav from MDBootstrap.

    • Basic example
    • Placement - top
    • Placement - right
    • Placement - bottom
    • Related resources

    Offcanvas - API


    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. Be sure to add the class offcanvas to the offcanvas element.

    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 pt-2.5 pb-2 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 pt-2.5 pb-2 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 top-0 left-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 pt-2.5 pb-2 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 py-2 px-4 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 py-2 px-4 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 py-2 px-4 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

    Enable manually with:

    • JavaScript
            
                
            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
            
                
                  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...
                });
            
            
        
    • 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