# Display Modes

The Kendo UI for Vue Drawer provides [expand modes](https://www.telerik.com/kendo-vue-ui-develop/components/layout/drawer/display_modes#expand-modes) and a [compact mini view](https://www.telerik.com/kendo-vue-ui-develop/components/layout/drawer/display_modes#mini-view).

## Expand Modes

For displaying its content, the Drawer provides the following expand modes:

* `"overlay"`—The Drawer expands on top of the container content and displays a grayed overlay over it. Use `onOverlayClick` event handler to handle when the overlay is clicked.
* `"push"`—The Drawer expands side by side to the container content by shrinking its width.

To configure the expand mode, use the [`mode`](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/drawerprops#mode) property of the Drawer.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/layout/drawer/display-modes/source.txt)

## Mini View

A compact view can be displayed when the Drawer is collapsed. To toggle between expanded and compact views, use its [`mini`](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/drawerprops#mode) property of the Drawer.

> The Drawer will always be visible displaying only the item icon even when collapsed.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/layout/drawer/mini-mode/source.txt)

## Suggested Links

* [API Reference of the Drawer Props](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/drawerprops)