Accent color
# DropMenu
## Description
DropMenu component is a versatile dropdown menu used in Blazor applications. It allows you to create a button that, when clicked, opens a callout or dropdown menu. This can be particularly useful for creating navigation menus, action lists, or any other interactive elements that require a dropdown.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| 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. |
| 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. |
| IsOpen | `bool` | false | Determines the opening state of 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. |
| NoShadow | `bool` | false | Removes the box-shadow from the callout of the drop menu. |
| ScrollContainerId | `string?` | | The id of the element which needs to be scrollable in the content of the callout of the drop menu. |
| Responsive | `bool` | false | Renders the drop menu in responsive mode on small screens. |
| 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. |
| Transparent | `bool` | false | Makes the background of the header of the drop menu transparent. |
| 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 |
| :--- | :--- | :------------ | :---------- |
| 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
### 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. |
### 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 opened callout state of the BitDropMenu. |
| Button | `string?` | null | Custom CSS classes/styles for the button 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
This is the content
Click me
Toggle me
This is the content
Click me
Toggle me
This is the content
Click me
Toggle me
This is the content
Click me
Toggle me
```
\n**Background**:
```razor
This is the content
Click me
Toggle me
@code {
private BitColorKind backgroundColorKind = BitColorKind.Primary;
}
```
\n**Border**:
```razor
This is the content
Click me
Toggle me
@code {
private BitColorKind borderColorKind = BitColorKind.Primary;
}
```
\n**Icon**:
```razor
This is the content
This is the content
```
\n**Responsive**:
```razor
This is the content This is the content This is the content
This is the content
This is the content
This is the content
This is the content This is the content This is the content
This is the content
This is the content
This is the content
```
\n**Template**:
```razor
This is the content
```
\n**Events**:
```razor
This is the content
```
```csharp
private int clickCounter;
```
\n**External Icons**:
```razor
This is the content
This is the content
This is the content
This is the content
This is the content
```
\n**Style & Class**:
```razor
This is the content
This is the content
This is the content
This is the content
```
\n**RTL**:
```razor
این یک محتوای تستی می باشد.
این یک محتوای تستی می باشد این یک محتوای تستی می باشد این یک محتوای تستی می باشد
این یک محتوای تستی می باشد
این یک محتوای تستی می باشد
این یک محتوای تستی می باشد این یک محتوای تستی می باشد این یک محتوای تستی می باشد
این یک محتوای تستی می باشد
این یک محتوای تستی می باشد
```