Slideover

Overview

Slideovers are commonly used for contextual modals or navigation. Slideovers are implemented using the Stimulus slideover_controller.

<div data-controller="slideover">
  
  <button class="btn btn-secondary" data-action="slideover#show:prevent">Open Slideover</button>



  <dialog data-slideover-target="dialog" data-action="click->slideover#backdropClose" class="slideover h-dvh max-h-dvh m-0 ml-auto backdrop:bg-black/50">
    <div class="h-full w-96 p-8">
      <button type="button" data-action="slideover#hide:prevent" class="hover:cursor-pointer absolute right-4 top-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><line x1="18" x2="6" y1="6" y2="18"></line><line x1="6" x2="18" y1="6" y2="18"></line></svg>
        <span class="sr-only">Close</span>
      </button>

          <h4 class="mt-0">This is the panel content.</h4>

    </div>
  </dialog>
</div>