Drawer | UI Showcase
WRNexus UI
Overlays component

Drawer

Present responsive modal side or bottom content with focus management, backdrop behavior, slots, and close events.

20 props4 slots3 outputsTheme readyResponsive
Interactive playground

Configure Drawer

Change any prop and inspect the server-rendered component immediately.

Live preview
Component code
<Drawer
  title="Drawer example"
  description="A polished default drawer for a modern application."
  closeLabel="Drawer"
  triggerLabel="Drawer">
  <div data-slot="trigger">
    <div class="showcase-slot">trigger slot</div>
  </div>
  <div data-slot="header">
    <div class="showcase-slot">header slot</div>
  </div>
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</Drawer>
Event outputInteract with the preview to inspect the typed payload.
Component props20 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Right-side detail drawer

Keep supporting record details or forms available without leaving the page.

01
Live preview

Click the trigger to open the drawer

Component usage.wrn
<Drawer
  title="Citizen service details"
  description="Review supporting information without leaving the current page."
  icon="icon-[lucide--panel-right]"
  closeLabel="Drawer"
  triggerLabel="Open drawer"
  triggerIcon="icon-[lucide--panel-right-open]">
  <div data-slot="trigger">
    <div class="showcase-slot">trigger slot</div>
  </div>
  <div data-slot="header">
    <div class="showcase-slot">header slot</div>
  </div>
  <div class="showcase-overlay-content"><p>Place forms, filters, navigation, or record details here.</p></div>
  <div data-slot="footer">
    <button type="button" class="showcase-action showcase-action--primary">Save changes</button>
  </div>
</Drawer>
Compact

Bottom mobile drawer

Use a bottom sheet for compact mobile workflows and contextual actions.

02
Live preview

Click the trigger to open the drawer

Component usage.wrn
<Drawer
  placement="bottom"
  size="sm"
  variant="soft"
  title="Choose an action"
  description="A compact configuration for dashboards and dense product surfaces."
  icon="icon-[lucide--arrow-right]"
  label="Compact example"
  closeLabel="Compact example"
  triggerLabel="Open mobile sheet">
  <div data-slot="trigger">
    <div class="showcase-slot">trigger slot</div>
  </div>
  <div data-slot="header">
    <div class="showcase-slot">header slot</div>
  </div>
  <div class="showcase-overlay-content"><p>Mobile-friendly supporting actions.</p></div>
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</Drawer>
Advanced

Wide navigation drawer

Open a wide, scrollable drawer with custom header and footer content from an explicit trigger.

03
Live preview

Click the trigger to open the drawer

Component usage.wrn
<Drawer
  placement="left"
  size="lg"
  variant="success"
  title="Navigation and filters"
  description="A wide drawer for complex supporting workflows."
  icon="icon-[lucide--trash-2]"
  label="Advanced example"
  closeLabel="Advanced example"
  triggerLabel="Open navigation drawer"
  triggerIcon="icon-[lucide--panel-left-open]">
  <div data-slot="trigger">
    <div class="showcase-slot">trigger slot</div>
  </div>
  <div data-slot="header">
    <div class="showcase-slot">header slot</div>
  </div>
  <div class="showcase-overlay-content showcase-overlay-content--tall"><p>Long scrollable content</p><p>Filters, navigation, details, and forms can be composed here.</p></div>
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</Drawer>
Component outputs

Receive every typed component output

Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.

@openFires after the component opens.
@closeFires after the component closes.
@cancelFires when the user cancels or dismisses the current workflow.
Declarative handlers.wrn
<Drawer
  @open='console.log(payload)'
  @close='console.log(payload)'
  @cancel='console.log(payload)'
/>
Direct output handlers.js
import { registerOutputHandler } from "@wrnexus/csr/outputs"

const component = document.querySelector("[data-ui-component=\"Drawer\"], [data-component=\"Drawer\"]")

if (component) registerOutputHandler(component, "open", (payload) => {
  console.log("open", payload)
})

if (component) registerOutputHandler(component, "close", (payload) => {
  console.log("close", payload)
})

if (component) registerOutputHandler(component, "cancel", (payload) => {
  console.log("cancel", payload)
})
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
openbooleanfalseNo
defaultOpenbooleanfalseNo
placementstring"right"No
sizestring"md"No
colorstring"primary"No
variantstring"default"No
titlestring"Drawer"No
descriptionstring""No
iconstring""No
labelstring"Drawer"No
closeLabelstring"Close drawer"No
showClosebooleantrueNo
closeOnBackdropbooleantrueNo
closeOnEscapebooleantrueNo
durationnumber260No
overlaybooleantrueNo
scrollablebooleantrueNo
triggerLabelstring""No
triggerIconstring""No
classstring""No