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

The DockManager component facilitates the organization and navigation of multiple user interface panels within an application. It allows users to dock, undock, and rearrange these panels according to their preferences, creating a customizable workspace. It supports various pane types, such as tabbed and scrollable panes.\
\
The dock management overlay enables the easy arrangement and alignment of panes to top, right, bottom, or left areas, both in a vertical and a horizontal layout.

### Live Demo

<LiveDemo data='{"links":[{"text":"jQuery","url":"https://docs.telerik.com/kendo-ui/controls/dockmanager/overview"},{"text":"ASP.NET Core","url":"https://docs.telerik.com/aspnet-core/html-helpers/layout/dockmanager/overview"},{"text":"ASP.NET MVC","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/layout/dockmanager/overview"}],"demo":"components/dockmanager/overview"}'></LiveDemo>

### Anatomy

The anatomy of the DockManager summarizes the elements of the component.

<BlueprintImage data='{"description":"","labels":[{"text":"Tabbed pane (tab)"},{"text":"Resize handle"},{"text":"Scrollable pane (header)"},{"text":"Pin/Unpin button"},{"text":"Delete button"},{"text":"Content area"},{"text":"DockManager navigator"},{"text":"Toolbar"}]}'>![](images/components-dockmanager-overview-anatomy.png "")</BlueprintImage>

### Pane Types

The DockManager supports different pane types—such as tabbed and scrollable, enabling users to customize their workspace in the most efficient way. 

<BlueprintImage data='{"description":"","labels":[{"text":"Tabbed pane"},{"text":"Scrollable pane"}]}'>![A Telerik and Kendo UI DockManager rendering with tabbed and scrollable panes.](images/components-dockmanager-overview-pane-types-1.png "A Telerik and Kendo UI DockManager component showcasing the tabbed and scrollable pane type options.")</BlueprintImage>

### Alignment

The Navigator feature of the DockManager lets users choose how to arrange the panes in their application by aligning them to the top, bottom, left, or right—both vertically and horizontally. 

<BlueprintImage data='{"description":"","labels":[{"text":"Left-aligned"},{"text":"Right-aligned"},{"text":"Bottom-aligned"},{"text":"Top-aligned"}]}'>![Four options of pane orientation for the Telerik and Kendo UI DockManager component - top, bottom, left and right.](images/components-dockmanager-overview-orientation.png "In the Telerik and Kendo UI DockManager you can set custom orientation.")</BlueprintImage>

### Unpinned Pane—Expanded View

The unpinned or undocked items in the DockManager are positioned in a toolbar so that they always stay visible and accessible. Once selected the unpinned item can be either docked to the application or removed. 

<BlueprintImage data='{"description":"","labels":[]}'>![](images/components-dockmanager-overview-unpinned-pane-expanded-view.png "")</BlueprintImage>

### Framework-Specific Documentation

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

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

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

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

</Wrap>