---
title: Drawer
url: "https://native-sdk.dev/docs/components/drawer"
docs_index: /llms.txt
lastUpdated: 2026-10-16
---

> For an index of all documentation, see [/llms.txt](/llms.txt).

Use `drawer` for a modal surface pinned to the bottom of the root view. It spans the root width. `text` supplies the title. Render it inside an `if` bound to an open flag, and clear the flag in response to `on-dismiss` after Escape or a click outside. Start a body column with a fixed-height spacer to leave room for the title. See [dialog](/docs/components/dialog) for the shared visibility contract and [sheet](/docs/components/sheet) for a right-edge surface.

## Markup

```html
<column padding="24">
  <button variant="outline" icon="menu" on-press="open_filters">Filters</button>
  <if test="{filters_open}">
    <drawer text="Filters" height="260" padding="24" on-dismiss="close_filters">
      <column gap="12">
        <spacer height="34"></spacer>
        <checkbox checked="{only_unread}" on-toggle="toggle_unread">Only unread</checkbox>
        <checkbox checked="{has_attachments}" on-toggle="toggle_attachments">Has attachments</checkbox>
        <switch checked="{compact_rows}" on-toggle="toggle_compact">Compact rows</switch>
      </column>
    </drawer>
  </if>
</column>
```

## Programmatic construction (Zig)

In a Zig view, the `canvas.Ui` builder constructs the same tree programmatically:

```zig
// Rendered only while model.filters_open is true; on_dismiss clears it in update.
ui.el(.drawer, .{ .text = "Filters", .height = 260, .padding = 24, .on_dismiss = .close_filters }, .{
    ui.column(.{ .gap = 12 }, .{
        ui.column(.{ .height = 34 }, .{}), // clears the engine-drawn title line
        ui.checkbox(.{ .text = "Only unread", .checked = model.only_unread, .on_toggle = .toggle_unread }),
        ui.checkbox(.{ .text = "Has attachments", .checked = model.has_attachments, .on_toggle = .toggle_attachments }),
        ui.el(.switch_control, .{ .text = "Compact rows", .checked = model.compact_rows, .on_toggle = .toggle_compact }, .{}),
    }),
})
```

## Attributes

The drawer rejects `gap` — it layers children like the other stacking surfaces; put a column (or row) inside for flow.

| Attribute    | Description                                                                                                                                                                                                                                                                                                   |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `text`       | Text value for text-bearing elements; a literal or one \{binding}.                                                                                                                                                                                                                                            |
| `width`      | Definite width (plain number): the element is exactly this wide; content neither shrinks nor overflows it. On resizable it is the initial width.                                                                                                                                                              |
| `height`     | Definite height (plain number): the element is exactly this tall; content neither shrinks nor overflows it.                                                                                                                                                                                                   |
| `padding`    | Uniform padding (plain number).                                                                                                                                                                                                                                                                               |
| `on-dismiss` | Dismissible surfaces only (dialog, drawer, sheet, dropdown-menu): Msg dispatched when Escape or a click outside dismisses the surface, so the MODEL owns the close (clear the open flag in update). The engine hides the surface immediately as an optimistic echo; the source tree wins on the next rebuild. |

---

For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)

For an index of all available documentation, see [/llms.txt](/llms.txt)

For agent-facing discovery, including API and MCP surfaces, see [/agents.md](/agents.md)