# Style and Interactivity

## Content

### **OverflowDropDownStyle Behavior**

When the Toolstrip has limited space:

* <span id="6b626fc8-42dd-4335-b41c-b32fe5f5fd12" annotationtype="inlineComment" data-mark-type="annotation" data-mark-annotation-type="inlineComment" data-id="6b626fc8-42dd-4335-b41c-b32fe5f5fd12" data-prosemirror-content-type="mark" data-prosemirror-mark-name="annotation">Tools that do not fit automatically move into an overflow menu.</span>
* <span id="fb9afbaf-bcce-4f9a-935f-7f73c2bb12d7" annotationtype="inlineComment" data-mark-type="annotation" data-mark-annotation-type="inlineComment" data-id="fb9afbaf-bcce-4f9a-935f-7f73c2bb12d7" data-prosemirror-content-type="mark" data-prosemirror-mark-name="annotation">The overflow dropdown appearance can be customized using the OverflowDropDownStyle property</span>

**Example: OverflowDropDownStyle Customization**

```auto
OverflowDropDownStyle="@("background: green !important; padding: 12px !important; border: 3px solid red !important;")"
```

**Result:**

* The overflow dropdown now has a green background, 12px padding, and a 3px red border.
* The **!important** keyword ensures the style overrides any other theme settings.

### Visual Properties for Styling Overflow Container

<span id="d4ca52c0-7871-4536-a187-12a3542e96ec" annotationtype="inlineComment" data-mark-type="annotation" data-mark-annotation-type="inlineComment" data-id="d4ca52c0-7871-4536-a187-12a3542e96ec" data-prosemirror-content-type="mark" data-prosemirror-mark-name="annotation">Customize various visual properties:</span>

| <span class="resizer-hover-zone">Property</span> | <span class="resizer-hover-zone">Description</span> |
| -------- | ----------- |
| <span class="code" spellcheck="false" data-prosemirror-content-type="mark" data-prosemirror-mark-name="code">color</span> | <span class="resizer-hover-zone">Text/icon color</span> |
| <span class="code" spellcheck="false" data-prosemirror-content-type="mark" data-prosemirror-mark-name="code">border</span> | <span class="resizer-hover-zone">Border style, thickness, and color</span> |
| <span class="code" spellcheck="false" data-prosemirror-content-type="mark" data-prosemirror-mark-name="code">border-radius</span> | <span class="resizer-hover-zone">Rounded corners</span> |
| <span class="code" spellcheck="false" data-prosemirror-content-type="mark" data-prosemirror-mark-name="code">padding</span> | <span class="resizer-hover-zone">Inner spacing</span> |
| <span class="code" spellcheck="false" data-prosemirror-content-type="mark" data-prosemirror-mark-name="code">margin</span> | <span class="resizer-hover-zone">Outer spacing</span> |
| <span class="code" spellcheck="false" data-prosemirror-content-type="mark" data-prosemirror-mark-name="code">box-shadow</span> | <span class="resizer-hover-zone">Drop shadow</span> |

### **Keyboard Navigation**

| <span class="resizer-hover-zone">Key</span> | <span class="resizer-hover-zone">Behavior</span> | <span class="resizer-hover-zone">Applies To</span> |
| --- | -------- | ---------- |
| **<span class="resizer-hover-zone">Left Arrow / Right Arrow</span>** | <span class="resizer-hover-zone">Moves focus between tools in a horizontal ToolStrip.</span> | <span class="resizer-hover-zone">All tool types in horizontal ToolStrip layouts.</span> |
| **<span class="resizer-hover-zone">Up Arrow / Down Arrow</span>** | <span class="resizer-hover-zone">Moves focus between tools in a vertical ToolStrip, and between menu items in dropdowns and menus.</span> | <span class="resizer-hover-zone">Vertical ToolStrip layouts, C1MenuTool, C1DropDownTool, and nested menus.</span> |
| **<span class="resizer-hover-zone">Enter</span>** | <span class="resizer-hover-zone">Activates the focused tool. Opens dropdowns and menu panels.</span> | <span class="resizer-hover-zone">C1MenuTool, C1DropDownTool, C1SelectTool, C1ButtonTool, C1ToggleButtonTool.</span> |
| **<span class="resizer-hover-zone">Spacebar</span>** | <span class="resizer-hover-zone">Activates buttons and toggles. Opens dropdowns and submenus.</span> | <span class="resizer-hover-zone">C1ButtonTool, C1ToggleButtonTool, C1MenuTool, C1DropDownTool.</span> |
| **<span class="resizer-hover-zone">Escape</span>** | <span class="resizer-hover-zone">Closes the active dropdown or submenu and returns focus to the originating tool.</span> | <span class="resizer-hover-zone">C1MenuTool, C1DropDownTool, C1SelectTool, nested menus.</span> |

### **Focus Management**

<span id="c4ea8293-fca6-404e-b3e1-2b3237dd9b02" annotationtype="inlineComment" data-mark-type="annotation" data-mark-annotation-type="inlineComment" data-id="c4ea8293-fca6-404e-b3e1-2b3237dd9b02" data-prosemirror-content-type="mark" data-prosemirror-mark-name="annotation">Focus is managed automatically in accordance with ARIA toolbar guidelines:</span>

* <span id="c4ea8293-fca6-404e-b3e1-2b3237dd9b02" annotationtype="inlineComment" data-mark-type="annotation" data-mark-annotation-type="inlineComment" data-id="c4ea8293-fca6-404e-b3e1-2b3237dd9b02" data-prosemirror-content-type="mark" data-prosemirror-mark-name="annotation">Focus remains within the ToolStrip when navigating with arrow keys.</span>
* <span id="c4ea8293-fca6-404e-b3e1-2b3237dd9b02" annotationtype="inlineComment" data-mark-type="annotation" data-mark-annotation-type="inlineComment" data-id="c4ea8293-fca6-404e-b3e1-2b3237dd9b02" data-prosemirror-content-type="mark" data-prosemirror-mark-name="annotation">When a dropdown expands, focus moves to the first interactive element within the dropdown.</span>
* <span id="c4ea8293-fca6-404e-b3e1-2b3237dd9b02" annotationtype="inlineComment" data-mark-type="annotation" data-mark-annotation-type="inlineComment" data-id="c4ea8293-fca6-404e-b3e1-2b3237dd9b02" data-prosemirror-content-type="mark" data-prosemirror-mark-name="annotation">Closing a dropdown returns focus to the originating tool in the ToolStrip.</span>
* <span id="c4ea8293-fca6-404e-b3e1-2b3237dd9b02" annotationtype="inlineComment" data-mark-type="annotation" data-mark-annotation-type="inlineComment" data-id="c4ea8293-fca6-404e-b3e1-2b3237dd9b02" data-prosemirror-content-type="mark" data-prosemirror-mark-name="annotation">Menu popups support sequential keyboard traversal for nested menus.</span>