# DropMenu
## Description
DropMenu is a button that opens a callout hosting any content you put in it: an action list, a form, a filter panel, or a navigation menu. The callout is anchored to the button, flips to the side with the most room, can be sized in every direction, and closes on an outside click or the Escape key. It opens on a click or on hover, carries the menu-button semantics and the keyboard that goes with them, can keep the focus inside itself while it is open or close itself as soon as its content is clicked, and turns into a swipeable side panel on small screens. The button itself comes in the filled, outlined and text variants of every color of the library, in three sizes.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| AriaDescription | `string?` | null | The description of the drop menu for the benefit of screen readers, rendered as the aria-describedby of the button. |
| AriaHidden | `bool` | false | If true, adds an aria-hidden attribute instructing screen readers to ignore the button of the drop menu. |
| AutoClose | `bool` | false | Closes the callout as soon as a click lands anywhere inside it, which is what an action list is expected to do: picking an item completes the interaction. It is off by default, since a callout hosting a form or a filter panel is meant to stay open while it is being used. |
| AutoFocus | `bool` | false | Moves the focus into the callout as soon as it opens, to its first focusable element, or to the callout itself when it holds none. |
| Background | `BitColorKind?` | null | The color kind of the background of the callout of the drop menu. |
| Body | `RenderFragment?` | null | Alias of the ChildContent. |
| Border | `BitColorKind?` | null | The color kind of the border of the callout of the drop menu. |
| ChevronDownIcon | `BitIconInfo?` | null | The icon for the chevron down part of the drop menu using custom CSS classes for external icon libraries. Takes precedence over ChevronDownIconName when both are set. |
| ChevronDownIconName | `string?` | null | The icon name for the chevron down part of the drop menu from the built-in Fluent UI icons. For external icon libraries, use ChevronDownIcon instead. |
| ChildContent | `RenderFragment?` | null | The content of the callout of the drop menu. |
| Classes | `BitDropMenuClassStyles?` | null | Custom CSS classes for different parts of the drop menu. |
| Color | `BitColor?` | null | The general color of the button of the drop menu. |
| DefaultIsOpen | `bool?` | null | The initial opening state of the callout in the uncontrolled mode, which is when the IsOpen parameter is not set. |
| DropDirection | `BitDropDirection` | BitDropDirection.TopAndBottom | Determines the allowed drop directions of the callout of the drop menu. |
| FullWidth | `bool` | false | Expands the drop menu width to 100% of the available width. |
| HoverCloseDelay | `int` | 150 | The delay in milliseconds before the callout closes once the pointer leaves the drop menu in the OpenOnHover mode. It bridges the gap between the button and the callout, so moving the pointer from one to the other does not close what the pointer is on its way to. |
| HoverOpenDelay | `int` | 0 | The delay in milliseconds before the callout opens once the pointer enters the drop menu in the OpenOnHover mode, so that passing over the button on the way somewhere else does not open it. |
| Icon | `BitIconInfo?` | null | The icon to display inside the header using custom CSS classes for external icon libraries. Takes precedence over IconName when both are set. |
| IconName | `string?` | null | The name of the icon to display inside the header from the built-in Fluent UI icons. For external icon libraries, use Icon instead. |
| IsLoading | `bool` | false | Determines whether the drop menu is in the loading state. It replaces the icon of the button with a spinner and disables the button, so the callout can no longer be opened by the user or by the Open and Toggle methods, and a callout that is already open is closed. |
| IsOpen | `bool` | false | Determines the opening state of the callout of the drop menu. |
| MatchWidth | `bool` | false | Expands the callout of the drop menu to at least the width of the button of the drop menu. It is applied after the callout is measured, so it takes precedence over Width. |
| MaxHeight | `string?` | null | The maximum height of the callout of the drop menu as a CSS value (e.g. "20rem"), beyond which its content scrolls. It takes over from the automatic cap that otherwise keeps the callout within the room the viewport leaves, so it should stay within what the shortest screen the drop menu is used on can show. |
| MaxWidth | `string?` | null | The maximum width of the callout of the drop menu as a CSS value (e.g. "20rem"), beyond which its content wraps. |
| MinWidth | `string?` | null | The minimum width of the callout of the drop menu as a CSS value (e.g. "20rem"), so that a narrow content does not end up in a cramped callout. |
| NoChevron | `bool` | false | Removes the chevron-down icon from the button of the drop menu. |
| NoShadow | `bool` | false | Removes the box-shadow from the callout of the drop menu. |
| OnClick | `EventCallback` | | The callback is called when the drop menu is clicked. |
| OnDismiss | `EventCallback` | | The callback is called when the drop menu is dismissed. |
| OnOpen | `EventCallback` | | The callback is called when the callout of the drop menu is opened. |
| OpenOnHover | `bool` | false | Opens the callout when the pointer enters the drop menu and closes it when the pointer leaves it, which is what a navigation menu is usually expected to do. The button keeps toggling the callout on a click, so the keyboard and the touch screens - where hovering does not exist and this mode turns itself off - are left with a way to reach it. |
| PanelPosition | `BitPanelPosition?` | null | The position of the responsive panel to show on the screen. |
| Responsive | `bool` | false | Renders the drop menu in responsive mode on small screens. |
| ScrollContainerId | `string?` | null | The id of the element which needs to be scrollable in the content of the callout of the drop menu. |
| Size | `BitSize?` | null | The size of the button of the drop menu. |
| Styles | `BitDropMenuClassStyles?` | null | Custom CSS styles for different parts of the drop menu. |
| Template | `RenderFragment?` | null | The custom content to render inside the header of the drop menu. |
| Text | `string?` | null | The text to show inside the header of the drop menu. |
| Title | `string?` | null | The tooltip to show when the mouse is placed on the button of the drop menu. |
| Transparent | `bool` | false | Makes the background of the header of the drop menu transparent. |
| TrapFocus | `bool` | false | Keeps the keyboard inside the callout while it is open: the focus moves into it as it opens, Tab and Shift+Tab cycle within it instead of running on into the page behind it, and the callout reports itself as a modal dialog to the screen readers. It implies AutoFocus. |
| Variant | `BitVariant?` | null | The visual variant of the button of the drop menu: filled (the default look), outlined, or text only. It decides how the Color is painted onto the button, so the two are set together. |
| Width | `string?` | null | The width of the callout of the drop menu as a CSS value (e.g. "20rem"). By default the callout is only as wide as its content needs. MatchWidth takes precedence over it. |
| AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. |
| ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | `string?` | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | `bool` | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
## Public Members
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Open | `() => Task` | | Opens the callout of the drop menu programmatically, unless the drop menu is disabled or loading. |
| Close | `() => Task` | | Closes the callout of the drop menu programmatically. |
| Toggle | `() => Task` | | Toggles the callout of the drop menu programmatically. |
| UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. |
## Enums
### BitColor Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Primary | 0 | Primary general color. |
| Secondary | 1 | Secondary general color. |
| Tertiary | 2 | Tertiary general color. |
| Info | 3 | Info general color. |
| Success | 4 | Success general color. |
| Warning | 5 | Warning general color. |
| SevereWarning | 6 | SevereWarning general color. |
| Error | 7 | Error general color. |
| PrimaryBackground | 8 | Primary background color. |
| SecondaryBackground | 9 | Secondary background color. |
| TertiaryBackground | 10 | Tertiary background color. |
| PrimaryForeground | 11 | Primary foreground color. |
| SecondaryForeground | 12 | Secondary foreground color. |
| TertiaryForeground | 13 | Tertiary foreground color. |
| PrimaryBorder | 14 | Primary border color. |
| SecondaryBorder | 15 | Secondary border color. |
| TertiaryBorder | 16 | Tertiary border color. |
### BitColorKind Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Primary | 0 | The primary color kind. |
| Secondary | 1 | The secondary color kind. |
| Tertiary | 2 | The tertiary color kind. |
| Transparent | 3 | The transparent color kind. |
### BitDropDirection Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| All | 0 | The direction determined automatically based on the available spaces in all directions. |
| TopAndBottom | 1 | The direction determined automatically based on the available spaces in only top and bottom directions. |
### BitPanelPosition Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Start | 0 | The panel is positioned at the start edge (left in LTR). |
| End | 1 | The panel is positioned at the end edge (right in LTR). |
| Top | 2 | The panel is positioned at the top edge. |
| Bottom | 3 | The panel is positioned at the bottom edge. |
### BitSize Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Small | 0 | The small size. |
| Medium | 1 | The medium size. |
| Large | 2 | The large size. |
### BitVariant Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Fill | 0 | Fill styled variant. |
| Outline | 1 | Outline styled variant. |
| Text | 2 | Text styled variant. |
### BitVisibility Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
### BitDir Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
## Sub Classes
### BitDropMenuClassStyles Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | Custom CSS classes/styles for the root element of the BitDropMenu. |
| Opened | `string?` | null | Custom CSS classes/styles for the root element of the BitDropMenu while its callout is open, applied on top of the Root ones. |
| Button | `string?` | null | Custom CSS classes/styles for the button of the BitDropMenu. |
| Spinner | `string?` | null | Custom CSS classes/styles for the loading spinner of the BitDropMenu. |
| Icon | `string?` | null | Custom CSS classes/styles for the icon of the BitDropMenu. |
| Text | `string?` | null | Custom CSS classes/styles for the text of the BitDropMenu. |
| ChevronDown | `string?` | null | Custom CSS classes/styles for the chevron-down icon of the BitDropMenu. |
| Overlay | `string?` | null | Custom CSS classes/styles for the overlay of the BitDropMenu. |
| Callout | `string?` | null | Custom CSS classes/styles for the callout of the BitDropMenu. |
### BitIconInfo Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Name | `string?` | null | Gets or sets the name of the icon. |
| BaseClass | `string?` | null | Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty. |
| Prefix | `string?` | null | Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty. |
## Examples
\n**Basic**:
```razor
Quick settings
Save
Quick settings
Save
Quick settings
Save
Quick settings
Save
Quick settings
Save
```
\n**Background**:
```razor
Quick settings
Save
```
```csharp
private BitColorKind backgroundColorKind = BitColorKind.Primary;
```
\n**Border**:
```razor
Quick settings
Save
```
```csharp
private BitColorKind borderColorKind = BitColorKind.Primary;
```
\n**Icon**:
```razor
Send by email
Copy link
Download
Filters
Apply
Jane Cooper
Product designer
Settings
Sign out
Rename
Duplicate
Delete
```
\n**Responsive**:
```razor
A list that scrolls inside the panel
A list that scrolls inside the panel
Swipe up to dismiss it
Apply
Swipe down to dismiss it
Apply
```
\n**Template**:
```razor
Flight BA 117
Departs 18:40 from gate B22
Details
Change the date
```
\n**Loading**:
```razor
Cloud sync
Last synced 5 minutes ago
Sync now
```
```csharp
private bool isLoading;
```
\n**Sizing the callout**:
```razor
MatchWidth
A callout of a fixed width
Short
A rather long piece of content that wraps instead of stretching the callout across the screen
@for (var i = 1; i <= 20; i++)
{
Item @i
}
```
\n**DropDirection**:
```razor
Categories
@for (var i = 1; i <= 15; i++)
{
Category @i
}
```
```csharp
private BitDropDirection dropDirection = BitDropDirection.TopAndBottom;
```
\n**Open on hover**:
```razor
Products
Solutions
Pricing
Opens after 400ms, closes after 600ms
Documentation
Release notes
```
\n**Binding**:
```razor
@(isOpen ? "Close" : "Open") the bound one
Toggle through the reference
Filters
Rename
Duplicate
Delete
@* A drop menu that only needs to start out open uses DefaultIsOpen instead of binding IsOpen. *@
Jane Cooper
Product designer
Settings
Sign out
}
```
```csharp
private bool isOpen;
private bool mountDefaultIsOpen;
private BitDropMenu? dropMenuRef;
```
\n**Keyboard & focus**:
```razor
Submit
Submit
```
\n**Events**:
```razor
Rename
Duplicate
Delete
Rename
Duplicate
Delete
@* Without AutoClose the callout stays open while the content is being used. *@
```
```csharp
private string autoCloseAction = "none";
```
\n**Variant**:
```razor
Rename
Duplicate
Delete
Rename
Duplicate
Delete
Rename
Duplicate
Delete
```
```csharp
private BitVariant variant = BitVariant.Fill;
```
\n**Color**:
```razor
Jane Cooper
Product designer
Settings
Sign out
```
```csharp
private BitColor color = BitColor.Primary;
```
\n**External Icons**:
```razor
Home
Dashboard
Reports
Favorites
Clone
Download ZIP
Open issues
Home
Dashboard
Reports
Settings
```
\n**Size**:
```razor
Filters
Apply
Filters
Apply
Filters
Apply
```
\n**Style & Class**:
```razor
Rename
Duplicate
Delete
Rename
Duplicate
Delete
Rename
Duplicate
Delete
Rename
Duplicate
Delete
```
\n**RTL**:
```razor
جین کوپر
طراح محصول
تنظیمات
خروج
لیستی که داخل پنل اسکرول می شود
لیستی که داخل پنل اسکرول می شود
```
Clicked: @clickCounter, Opened: @openCounter, Dismissed: @dismissCounter
```
```csharp
private int clickCounter;
private int openCounter;
private int dismissCounter;
```
\n**Auto close**:
```razor