Offcanvas

Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and Alpine js.

Offcanvas Basic

              
<div x-data="{ open: false }">
  <!-- trigger Offcanvas -->
  <button @click="open = true">Show Offcanvas</button>

  <!-- Offcanvas dialogs -->
  <div x-show="open" :class="! open ? '' : 'show'" class="[&.show_.bgDialog]:opacity-60 [&.show_.bgDialog]:inset-0">

    <!-- background Offcanvas dialogs -->
    <div @click="open = false" class="bgDialog fixed z-[60] opacity-0 -top-full bg-neutral-900"></div>

    <!-- side Offcanvas dialogs -->
    <div x-show="open" style="display:none"
        x-transition:enter="transition-transform duration-[400ms]"
        x-transition:enter-start="ltr:translate-x-full rtl:-translate-x-full"
        x-transition:enter-end="translate-x-0"
        x-transition:leave="transition-transform duration-[400ms]"
        x-transition:leave-start="translate-x-0"
        x-transition:leave-end="ltr:translate-x-full rtl:-translate-x-full" 
        @click.away="open = false" class="fixed top-0 bottom-0 end-0 rounded-s-xl w-5/6 sm:w-[420px] z-[70] bg-white dark:bg-neutral-600 border-2 border-black flex ioajsklehsnm gap-2">
      <!-- header -->
      <div class="min-h-[56px] flex klsuaonrmcha layhetgsjdcb gap-3 dkslaoeyhnmj pt-6">
        <h3 class="flex grow text-lg tracking-[.009375em]">Title Side Offcanvas</h3>
        <button @click="open = false" class="flex layhetgsjdcb yhansklopals">
          <span class="pointer-events-none bi bi-x-lg"></span>
        </button>
      </div>

      <!-- body -->
      <div class="post-content relative text-start dkslaoeyhnmj py-2 overflow-y-scroll scrollbars">
        <p>Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow. Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow.</p>
        <p>Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow. Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow.</p>
        <p>Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow. Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow.</p>
        <p>Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow. Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow.</p>
      </div>
    </div>
  </div>
</div>
              
            
              
<!-- trigger Offcanvas -->
<button data-type="dialogs" data-target="#sheet_xb">Show Offcanvas</button>

<!-- Offcanvas dialogs -->
<div id="sheet_xb" class="[&.show_.bgDialog]:opacity-60 [&.show_.bgDialog]:inset-0 [&.show_.dialog]:translate-x-0">

  <!-- background Offcanvas dialogs -->
  <div data-close="#sheet_xb" class="bgDialog fixed z-[60] opacity-0 -top-full bg-neutral-900"></div>

  <!-- side Offcanvas dialogs -->
  <div class="dialog fixed top-0 bottom-0 end-0 rounded-s-xl w-5/6 sm:w-[420px] z-[70] bg-white dark:bg-neutral-600 border-2 border-black transition-transform translate-x-full duration-[400ms] flex ioajsklehsnm gap-2">
    <!-- header -->
    <div class="min-h-[56px] flex klsuaonrmcha layhetgsjdcb gap-3 dkslaoeyhnmj pt-6">
      <h3 class="flex grow text-lg tracking-[.009375em]">Title Side Offcanvas</h3>
      <button data-close="#sheet_xb" class="flex layhetgsjdcb yhansklopals">
        <span class="pointer-events-none bi bi-x-lg"></span>
      </button>
    </div>

    <!-- body -->
    <div class="post-content relative text-start dkslaoeyhnmj py-2 overflow-y-scroll scrollbars">
      <p>Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow. Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow.</p>
      <p>Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow. Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow.</p>
      <p>Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow. Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow.</p>
      <p>Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow. Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow.</p>
    </div>
  </div>
</div>

Offcanvas Left

              
<div x-data="{ open: false }">
  <!-- trigger Offcanvas -->
  <button @click="open = true" class="py-2.5 px-5 relative inline-flex klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 rounded-sm text-sm tracking-[.00714em] font-medium border border-black hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#000000] focus:-translate-x-0.5 focus:-translate-y-0.5 focus:shadow-[4px_4px_0_0_#000000] bg-lime-200 hover:bg-lime-300 focus:bg-lime-300 text-black">Offcanvas Left</button>

  <!-- Offcanvas dialogs -->
  <div x-show="open" :class="! open ? '' : 'show'" class="[&.show_.bgDialog]:opacity-60 [&.show_.bgDialog]:inset-0">

    <!-- background Offcanvas dialogs -->
    <div @click="open = false" class="bgDialog fixed z-[60] opacity-0 -top-full bg-neutral-900"></div>

    <!-- side Offcanvas dialogs -->
    <div x-show="open" style="display:none"
        x-transition:enter="transition-transform duration-[400ms]"
        x-transition:enter-start="ltr:-translate-x-full rtl:translate-x-full"
        x-transition:enter-end="translate-x-0"
        x-transition:leave="transition-transform duration-[400ms]"
        x-transition:leave-start="translate-x-0"
        x-transition:leave-end="ltr:-translate-x-full rtl:translate-x-full" 
        @click.away="open = false" class="fixed top-0 bottom-0 start-0 rounded-e-xl w-5/6 sm:w-[420px] z-[70] bg-white dark:bg-neutral-600 border-2 border-black flex ioajsklehsnm gap-2">
      <!-- header -->
      <div class="min-h-[56px] flex klsuaonrmcha layhetgsjdcb gap-3 dkslaoeyhnmj pt-6">
        <h3 class="flex grow text-lg tracking-[.009375em]">Title Side Offcanvas</h3>
        <button @click="open = false" class="flex layhetgsjdcb yhansklopals">
          <span class="pointer-events-none bi bi-x-lg"></span>
        </button>
      </div>

      <!-- body -->
      <div class="post-content relative text-start dkslaoeyhnmj py-2 overflow-y-scroll scrollbars">
        <p>Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow. Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow.</p>
        <p>Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow. Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow.</p>
        <p>Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow. Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow.</p>
        <p>Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow. Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow.</p>
      </div>
    </div>
  </div>
</div>
              
            
              
<!-- trigger Offcanvas -->
<button data-type="dialogs" data-target="#offcanvas-left">Offcanvas left</button>

<!-- Offcanvas dialogs -->
<div id="offcanvas-left" class="[&.show_.bgDialog]:opacity-60 [&.show_.bgDialog]:inset-0 [&.show_.dialog]:translate-x-0">

  <!-- background Offcanvas dialogs -->
  <div data-close="#offcanvas-left" class="bgDialog fixed z-[60] opacity-0 -top-full bg-neutral-900"></div>

  <!-- side Offcanvas dialogs -->
  <div class="dialog fixed top-0 bottom-0 start-0 rounded-e-xl w-5/6 sm:w-[420px] z-[70] bg-white dark:bg-neutral-600 border-2 border-black transition-transform -translate-x-full duration-[400ms] flex ioajsklehsnm gap-2">
    <!-- header -->
    <div class="min-h-[56px] flex klsuaonrmcha layhetgsjdcb gap-3 dkslaoeyhnmj pt-6">
      <h3 class="flex grow text-lg tracking-[.009375em]">Title Side Offcanvas</h3>
      <button data-close="#offcanvas-left" class="flex layhetgsjdcb yhansklopals">
        <span class="pointer-events-none bi bi-x-lg"></span>
      </button>
    </div>

    <!-- body -->
    <div class="post-content relative text-start dkslaoeyhnmj py-2 overflow-y-scroll scrollbars">
      <p>Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow. Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow.</p>
      <p>Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow. Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow.</p>
      <p>Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow. Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow.</p>
      <p>Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow. Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow.</p>
    </div>
  </div>
</div>

Offcanvas Bottom

              
<div x-data="{ open: false }">
  <!-- trigger bottom offcanvas -->
  <button @click="open = true">Offcanvas bottom</button>

  <!-- bottom offcanvas -->
  <div x-show="open" :class="! open ? '' : 'show'" class="[&.show_.bg-offcanvas]:opacity-60 [&.show_.bg-offcanvas]:inset-0">
    <!-- background offcanvas dialogs -->
    <div @click="open = false" class="bg-offcanvas fixed z-[60] opacity-0 -top-full bg-black"></div>

    <!-- bottom offcanvas content -->
    <div x-show="open" style="display:none"
        x-transition:enter="transition-transform duration-[400ms]"
        x-transition:enter-start="translate-y-full"
        x-transition:enter-end="translate-y-0"
        x-transition:leave="transition-transform duration-[400ms]"
        x-transition:leave-start="translate-y-0"
        x-transition:leave-end="translate-y-full" 
        @click.away="open = false" 
        class="fixed left-0 right-0 bottom-0 z-[70] flex ioajsklehsnm layhetgsjdcb w-full md:w-5/6 lg:w-1/2 gap-3 sm:mx-auto rounded-t-[28px] min-h-[40%] max-h-[70%] bg-white dark:bg-neutral-600 border-2 border-black shadow-xl">
      <div class="flex yhansklopals p-4 w-full h-9">
        <div class="w-8 h-1 opacity-40 bg-black boalstehwqbj"></div>
      </div>

      <div class="relative dkslaoeyhnmj md:maksueyropls scrollbars overflow-y-auto">
         <h3 class="text-xl tracking-[.009375em] text-center mb-3">Title Bottom Offcanvas</h3>
         <div class="post-content">
           <p>Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow. Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow.</p>
           <p>Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow. Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow.</p>
         </div>
      </div>
    </div>
  </div>
</div>
              
            
              
<!-- trigger bottom offcanvas -->
<button data-type="dialogs" data-target="#offcanvas_sb">Offcanvas bottom</button>

<!-- bottom offcanvas -->
<div id="offcanvas_sb" class="[&.show_.bg-offcanvas]:opacity-60 [&.show_.bg-offcanvas]:inset-0 [&.show_.content-offcanvas]:translate-y-0">
  <!-- background offcanvas dialogs -->
  <div data-close="#offcanvas_sb" class="bg-offcanvas fixed z-[60] opacity-0 -top-full bg-black"></div>

  <!-- bottom offcanvas content -->
  <div class="content-offcanvas fixed left-0 right-0 bottom-0 z-[70] transition-transform translate-y-full duration-[400ms] flex ioajsklehsnm layhetgsjdcb w-full md:w-5/6 lg:w-1/2 gap-3 sm:mx-auto rounded-t-[28px] min-h-[40%] max-h-[70%] bg-white dark:bg-neutral-600 border-2 border-black shadow-xl">
    <div class="flex yhansklopals p-4 w-full h-9">
      <div class="w-8 h-1 opacity-40 bg-black boalstehwqbj"></div>
    </div>

    <div class="relative dkslaoeyhnmj md:maksueyropls scrollbars overflow-y-auto">
       <h3 class="text-xl tracking-[.009375em] text-center mb-3">Title Bottom Offcanvas</h3>
       <div class="post-content">
         <p>Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow. Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow.</p>
         <p>Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow. Offcanvas are surfaces containing supplementary content or actions to support tasks as part of a flow.</p>
       </div>
    </div>
  </div>
</div>