Drawer

A slide-in panel anchored to an edge.

import { BuiDrawer } from 'ng-blatui';

<button (click)="open.set(true)">Open</button>
<bui-drawer [(open)]="open" direction="right">Panel content</bui-drawer>

From bottom

<bui-drawer [(open)]="open" direction="bottom">…</bui-drawer>

From left

<bui-drawer [(open)]="open" direction="left">…</bui-drawer>

Scrollable

<bui-drawer [(open)]="open" direction="right" class="w-80">
  <h2>Changelog</h2>
  <div class="flex-1 overflow-y-auto">…long content…</div>
  <button buiButton>Close</button>
</bui-drawer>

Static backdrop

closeOnOverlay="false" keeps a multi-step flow open when a stray click lands on the backdrop. It governs the backdrop only — Escape and your own close button stay wired, because a dialog you can't leave from the keyboard is a trap.

<!-- A stray click on the backdrop no longer discards the flow. Escape still closes. -->
<bui-drawer [(open)]="open" direction="right" [closeOnOverlay]="false">…</bui-drawer>

API reference

Inputs

Prop	Type	Default	Description
`direction`	`"bottom" \| "left" \| "right" \| "top"`	`'bottom'`	Screen edge the drawer is anchored to and slides in from.
`ariaLabel`	`string`	`'Drawer'`	Accessible label applied to the drawer dialog.
`closeOnOverlay`	`boolean`	`true`	Whether clicking the backdrop closes the drawer. Set `false` for a static backdrop — a multi-step flow a stray click shouldn't discard. It governs the backdrop and nothing else: Escape stays wired, because a dialog you can't leave from the keyboard is a trap.

Two-way models

Bind with [(name)], or one-way as an input.

Prop	Type	Default	Description
`open`	`boolean`	`false`	Whether the drawer is open. Two-way bindable with `[(open)]`.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.