---
title: Overview
position: 1
seo_title: Overview of the Drawer Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
  Drawer component and its types, check out the extensive set of available
  options in its live demo, and change its appearance by setting the variant of
  the component.
---
## Drawer Overview

The Drawer component is a UI element that allows you to add dismissible, collapsible, or permanently visible side panel for navigating in responsive web applications. You can also use it to house additional content that doesn't need to be visible at all times. It can appear on top of the main content or push it to the side, depending on the design requirements. This component is extremely effective when it comes to maximizing space and keeping the interface uncluttered, making it a popular choice for both mobile and desktop applications. The drawer size, content, and alignment are easy to customize, making the component suitable for different design requirements.

### Live Demo

<LiveDemo data='{"links":[{"text":"Angular","url":"https://www.telerik.com/kendo-angular-ui/components/layout/drawer/"},{"text":"Blazor","url":"https://demos.telerik.com/blazor-ui/drawer/overview"},{"text":"jQuery","url":"https://demos.telerik.com/kendo-ui/drawer/index"},{"text":"React","url":"https://www.telerik.com/kendo-react-ui/components/layout/drawer/"},{"text":"Vue","url":"https://www.telerik.com/kendo-vue-ui/components/layout/drawer/"},{"text":"ASP.NET Core","url":"https://demos.telerik.com/aspnet-core/drawer"},{"text":"ASP.NET MVC","url":"https://demos.telerik.com/aspnet-mvc/drawer"}],"demo":"components/drawer/overview"}'></LiveDemo>

### Appearance

Drawers provide built-in styling options that grant visually appealing and flexible rendering experience. 

Apart from the default vision of the Telerik and Kendo UI Drawer, the component supports alternative styling options that enable you to configure the individual aspects of its appearance.

#### Anatomy

The next image shows the anatomy of a Drawer and includes the following elements:

<BlueprintImage data='{"description":"","labels":[{"text":"Drawer items"},{"text":"Drawer content"},{"text":"Drawer item - Selected"},{"text":"Separator"},{"text":"Item icon"},{"text":"Item label"}]}'>![A Telerik and Kendo UI Drawer component](images/components-drawer-overview-anatomy.png "Anatomy and elements of a Telerik and Kendo UI Drawer component")</BlueprintImage>

#### Variants

Depending on the position, the Telerik and Kendo UI Drawer can be any of the following types:

* Left-aligned
* Right-aligned

<BlueprintImage data='{"description":"","labels":[{"text":"Left-aligned"},{"text":"Right-aligned"}]}'>![A Telerik and Kendo UI Drawer component position variants](images/components-drawer-overview-orientation.png "Position variants of a Telerik and Kendo UI Drawer component")</BlueprintImage>

#### Mini Mode

The mini mode of the Drawer component offers a compact, icon-only view, ideal for maximizing screen space while keeping essential navigation accessible.

<BlueprintImage data='{"description":"","labels":[]}'>![A Telerik and Kendo UI Drawer component mini mode](images/components-drawer-overview-mini-mode.png "Mini mode of a Telerik and Kendo UI Drawer component")</BlueprintImage>

#### Hierarchy

The Drawer component provides an easy way to create a hierarchical structure, allowing for intuitive navigation through nested levels of content.

<BlueprintImage data='{"description":"","labels":[]}'>![A Telerik and Kendo UI Drawer component hierarchy structure](images/components-drawer-overview-hierarchy.png "Hierarchy structure of a Telerik and Kendo UI Drawer component")</BlueprintImage>

### Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

<Wrap>
<ExternalResource data='{"title":"Kendo UI for Angular Drawer","description":"Find more information about the Kendo UI for Angular Drawer in the official product documentation of the component.","url":"https://www.telerik.com/kendo-angular-ui/components/layout/drawer/"}'>![Kendo UI for Angular logo.](/images/angular-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for Blazor Drawer","description":"Find more information about the Telerik UI for Blazor Drawer in the official product documentation of the component.","url":"https://docs.telerik.com/blazor-ui/components/drawer/overview"}'>![Telerik UI for Blazor logo.](/images/blazor-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for jQuery Drawer","description":"Find more information about the Kendo UI for jQuery Drawer in the official product documentation of the component.","url":"https://docs.telerik.com/kendo-ui/controls/drawer/overview"}'>![Kendo UI for jQuery logo.](/images/jquery-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"KendoReact Drawer","description":"Find more information about the KendoReact Drawer in the official product documentation of the component.","url":"https://www.telerik.com/kendo-react-ui/components/layout/drawer/"}'>![Kendo UI for React logo.](/images/react-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for Vue Drawer","description":"Find more information about the Kendo UI for Vue Drawer in the official product documentation of the component.","url":"https://www.telerik.com/kendo-vue-ui/components/layout/drawer/"}'>![Kendo UI for Vue logo.](/images/vue-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET Core Drawer","description":"Find more information about the Telerik UI for ASP.NET Core Drawer component.","url":"https://docs.telerik.com/aspnet-core/html-helpers/navigation/drawer/overview"}'>![Telerik UI for ASP.NET Core logo.](/images/core-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET MVC Drawer","description":"Find more information about the Telerik UI for ASP.NET MVC Drawer component.","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/navigation/drawer/overview"}'>![Telerik UI for ASP.NET MVC logo.](/images/mvc-logo.svg)</ExternalResource>
</Wrap>