DropDownButton: Add Overview (#7753) (#8068)

Author: arman-boyakhchyan

concepts/05 UI Components/DropDownButton/03 Overview/00 Overview.md

@@ -0,0 +1,3 @@
+DevExtreme DropDownButton is a UI component that can display a list of actions. You can configure the component to trigger actions on button or list item click.
+
+This overview highlights DropDownButton elements, key features, and what to explore next.

concepts/05 UI Components/DropDownButton/03 Overview/05 Elements.md

@@ -0,0 +1,8 @@
+![DropDownButton Elements](/images/DropDownButton/dropdownbutton-elements.png)
+
+1. [Icon](/Documentation/ApiReference/UI_Components/dxDropDownButton/Configuration/#icon)
+2. [Text](/Documentation/ApiReference/UI_Components/dxDropDownButton/Configuration/#text)
+3. [Dropdown arrow](/Documentation/ApiReference/UI_Components/dxDropDownButton/Configuration/#showArrowIcon)
+4. [Items](/Documentation/ApiReference/UI_Components/dxDropDownButton/Configuration/items/)
+5. [Drop-down popup](/Documentation/ApiReference/UI_Components/dxDropDownButton/Configuration/#dropDownOptions)
+6. [Item badge](/Documentation/ApiReference/UI_Components/dxDropDownButton/Configuration/items/#badge)

concepts/05 UI Components/DropDownButton/03 Overview/10 Key Features.md

@@ -0,0 +1,23 @@
+- **Action Binding**    
+DropDownButton can trigger actions on button click ([onButtonClick](/Documentation/ApiReference/UI_Components/dxDropDownButton/Configuration/#onButtonClick)) or list item click ([onItemClick](/Documentation/ApiReference/UI_Components/dxDropDownButton/Configuration/#onItemClick)). You can also specify individual [click handlers](/Documentation/ApiReference/UI_Components/dxDropDownButton/Configuration/items/#onClick) for each item within the component data source.
+
+- **Appearance Settings**    
+You can specify an [icon](/Documentation/ApiReference/UI_Components/dxDropDownButton/Configuration/#icon) and [text](/Documentation/ApiReference/UI_Components/dxDropDownButton/Configuration/#text), as well as configure [drop-down arrow](/Documentation/ApiReference/UI_Components/dxDropDownButton/Configuration/#showArrowIcon) visibility to customize component appearance.
+
+- **Item Configuration**    
+You can configure [text](/Documentation/ApiReference/UI_Components/dxDropDownButton/Configuration/items/#text), [icons](/Documentation/ApiReference/UI_Components/dxDropDownButton/Configuration/items/#icon), and [badges](/Documentation/ApiReference/UI_Components/dxDropDownButton/Configuration/items/#badge) to customize drop-down item appearance. The component also allows you to implement unique [click handlers](/Documentation/ApiReference/UI_Components/dxDropDownButton/Configuration/items/#onClick) for each item, as well as [custom templates](/Documentation/ApiReference/UI_Components/dxDropDownButton/Configuration/items/#template).
+
+- **Split Button Support**    
+DevExtreme DropDownButton supports a [split button](/Documentation/ApiReference/UI_Components/dxDropDownButton/Configuration/#splitButton) mode. In this mode, the component separates the action and drop-down buttons.
+
+- **Predefined Styling Modes**    
+You can choose one of three [styling modes](/Documentation/ApiReference/UI_Components/dxDropDownButton/Configuration/#stylingMode) to configure DropDownButton appearance: text only, contained, and outlined (default). The component also includes [four built-in colors](/Documentation/ApiReference/UI_Components/dxDropDownButton/Configuration/#type).
+
+- **Selection**    
+When [selection](/Documentation/ApiReference/UI_Components/dxDropDownButton/Configuration/#useSelectMode) is enabled, the component displays the selected item text and icon. You can [handle selection change](/Documentation/ApiReference/UI_Components/dxDropDownButton/Configuration/#onSelectionChanged) and process [selected item](/Documentation/ApiReference/UI_Components/dxDropDownButton/Configuration/#selectedItemKey) data at runtime.
+
+- **Accessibility and Keyboard Navigation**    
+DropDownButton [conforms](/Documentation/Guide/UI_Components/DropDownButton/Accessibility/) to WCAG 2.x, European Accessibility Act (EAA), and Americans with Disabilities Act (ADA) standards. The component supports keyboard navigation and custom key handlers. TagBox also ships with right-to-left ([RTL](/Documentation/ApiReference/UI_Components/dxDropDownButton/Configuration/#rtlEnabled)) representation support.
+
+- **Custom Templates**    
+DropDownButton supports custom markup for the component [action button](/Documentation/ApiReference/UI_Components/dxDropDownButton/Configuration/#template) and the [drop-down content](/Documentation/ApiReference/UI_Components/dxDropDownButton/Configuration/#dropDownContentTemplate).  You can also specify custom templates for [specific](/Documentation/ApiReference/UI_Components/dxDropDownButton/Configuration/items/#template) drop-down items or a [common template](/Documentation/ApiReference/UI_Components/dxDropDownButton/Configuration/#itemTemplate) for all items.

concepts/05 UI Components/DropDownButton/03 Overview/15 Explore More.md

@@ -0,0 +1,5 @@
+- [Getting Started with DropDownButton](/Documentation/Guide/UI_Components/DropDownButton/Getting_Started_with_DropDownButton/)
+
+- [API](/Documentation/ApiReference/UI_Components/dxDropDownButton/)
+
+- [Demos](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DropDownButton/Overview/)