# Drawer

A Drawer is a customizable [view](https://docs.appfarm.io/reference/apps/ui/views), often used to provide a navigational menu. Drawers can be anchored to any side of the screen and can be permanently visible or controlled using the [Toggle drawer action node](https://docs.appfarm.io/library/action-nodes/toggle-drawer).

The Drawer is often used to represent menus, details pane (for viewing or editing information of a single object), search panes or help menus. For example, when toggling a menu icon on a responsive App, you may open a Drawer from the left og right side. Or clicking the Edit icon on a Table may open a Drawer from the right. A persistent Drawer may represent global headers (with menu) for your App.

{% hint style="info" %}
**Example**

A Drawer example is available in our [Showroom.](https://showroom.appfarm.app/ui-components/drawers) You can view the demo, as well as access the setup in Appfarm Create. Don't have access? [Register](https://showroom.appfarm.app/sign-up).
{% endhint %}

## Main app drawer

It is possible to configure a **Main App Drawer** in [App settings](https://docs.appfarm.io/reference/app-settings#app-drawer). This is optional, but defining a main app drawer enables some additional built-in features:

* The drawer state is accessible via the built-in [app variable](https://docs.appfarm.io/reference/apps/data/app-variables) **Is Main Drawer Open**.
* If the drawer's **Type** property is `Temporary`, the drawer will be automatically closed when navigating using action nodes such as [Navigate](https://docs.appfarm.io/library/action-nodes/navigate) and Open dialog.

## General properties

<table><thead><tr><th width="240">Property</th><th>Description</th></tr></thead><tbody><tr><td><strong>Type</strong></td><td><p>The display behavior of the drawer. The options are:</p><ul><li><code>Persistent</code>: Always visible.</li><li><code>Temporary</code>: Display as a modal window. The rest of the app is covered by a backdrop and interactions outside of the dialog are blocked. The drawer can be closed by clicking the backdrop, swiping on touch devices, or via the <a href="../../../../library/action-nodes/toggle-drawer">Toggle drawer action node</a>.</li><li><code>Responsive</code>: Adapt according to the client screen size. Persistent will be applied by Large and Medium devices, while Temporary will be applied on Small and Extra Small devices.</li></ul></td></tr><tr><td><strong>Position</strong></td><td><p>The anchor position of the drawer. If <strong>Type</strong> is <code>Temporary</code>,  the drawer will animate into view. The options are:</p><ul><li><code>Left</code></li><li><code>Right</code></li><li><code>Top</code></li><li><code>Bottom</code></li></ul></td></tr><tr><td><strong>Custom Width/Height</strong></td><td>Enable width or height properties (depending on <strong>Position</strong>) in the <strong>Style properties</strong> to customize the size of the drawer. Default sizing will no longer apply.</td></tr></tbody></table>

{% hint style="info" %}
**Good to know**

Drawers with **Type** <mark style="color:blue;">`Temporary`</mark> and **Position** <mark style="color:blue;">`Left`</mark> or <mark style="color:blue;">`Right`</mark> position have a default width of 256 pixels or 100% - 56 px on Extra Small devices.
{% endhint %}

## App bar

App bar properties for dialogs are the same as for [views](https://docs.appfarm.io/reference/apps/ui/views/..#app-bar).

## Event handlers

<table><thead><tr><th width="251">Property</th><th>Description</th></tr></thead><tbody><tr><td><strong>On Drawer Open</strong></td><td>Triggered once the drawer has been opened and is visible.</td></tr><tr><td><strong>On Backdrop Click</strong></td><td><em>Available when Type is Temporary or Responsive</em><br>Triggered when the user clicks on the backdrop outside of the drawer. This will also be triggered when the user presses the <code>Esc</code> key on their keyboard. <br><br>This action will not be triggered if <strong>Type</strong> is <code>Responsive</code> and the device size is Large or Medium.</td></tr></tbody></table>