C&C Docs
Log in

cnc-drawer

An edge-aligned panel that can float over the viewport or its parent, or participate in layout and push adjacent content. Opening and closing is the host's job: the drawer reports a close request and never dismisses itself.

Quick start

Bind $open to state and set it back to false from the drawer's own close event. The drawer never closes itself — it asks, and the host decides — so a drawer with no handler and no close button cannot be dismissed.

never closed 
<div x-data="{ shown: false }">
  <cnc-button @press="shown = true">Open drawer</cnc-button>

  <cnc-drawer
    position="right"
    backdrop="dark"
    close-on-backdrop="true"
    $open="shown"
    @close="shown = false"
  >
    <div class="w-80 p-6">Details</div>
  </cnc-drawer>
</div>

Sizing and customization

Left/right drawers default to 18–32rem constraints; top/bottom drawers default to 12–32rem. Override host variables such as --panel-inline-size and --panel-block-size, or size slotted content with utility classes.

Usage guidance

Always give a drawer a way out. It does not close on Escape (#649) and close-on-backdrop is off by default, so a drawer opened with neither enabled and no close button in its content is a trap — particularly in the default full-viewport floating mode, which covers the page behind a backdrop. Set close-on-backdrop="true", put a close control in the panel, or both.

Choose the mode by what the panel is FOR. Floating over the viewport suits a task the user finishes and dismisses; floating="false" push layout suits navigation that lives alongside the content and stays open while they work; fullViewport="false" keeps both inside a dashboard pane rather than taking the whole page. Reach for cnc-modal instead when the content is a short decision rather than a panel, and for cnc-drop when it is a menu.

← Back to Widgets