---
url: /api/renderers/web-components/src/variables/drawerLayout.md
---
[pantoken-root](../../../../index.md) / [renderers/web-components/src](../index.md) / drawerLayout

# Variable: drawerLayout

> `const` **drawerLayout**: [`ElementDefinition`](../interfaces/ElementDefinition.md)

Alpha

`<instui-drawer-layout>` — a side tray plus main content area. The `open` attribute reveals the
tray; `placement` (`start`|`end`) picks the side. Drivable from light DOM via Invoker Commands:
`<button command="--toggle|--open|--close" commandfor="drawer-id">`. Content goes in the default
slot; the tray in `slot="tray"`. The interactions behavior auto-toggles overlay mode based on the
`--pantoken-bp-md` threshold.

## Accessibility

The content pane carries `role="region"`, matching InstUI's DrawerLayout; label it with `aria-label`/`aria-labelledby` when the surrounding context doesn't already name it.

## Example

```html
<button command="--toggle" commandfor="drawer">Toggle panel</button>
<instui-drawer-layout id="drawer" open placement="start">
  <nav slot="tray">…</nav>
  <article>Main content</article>
</instui-drawer-layout>
```