# DropMenu
## Description
DropMenu is a button that opens a callout hosting any content: 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, closes on an outside click or Escape, and becomes a swipeable panel on small screens. It opens on click or hover, keeps the keyboard where it belongs, and its button comes in every color, variant and size of the library.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Alignment | `BitPlacement?` | null | How the callout is lined up with the button across the side it opens on: Start (the default), Center or End, which follow the reading direction; Left and Right are honoured above or below the button, Top and Bottom beside it. Anything else falls back to Start. |
| AriaDescription | `string?` | null | The description of the drop menu for screen readers, rendered as visually hidden text the button points at through aria-describedby. |
| 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, as an action list should. Off by default, so a form or a filter panel stays open while it is 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. An explicit value wins over --bit-DropMenu-callout-background; left unset, the callout is the primary background unless it says otherwise. |
| Body | `RenderFragment?` | null | Alias of the ChildContent. |
| Border | `BitColorKind?` | null | The color kind of the border of the callout of the drop menu. An explicit value wins over --bit-DropMenu-callout-border-color; left unset, the callout has no border unless the --bit-DropMenu-callout-border-* variables say otherwise. |
| 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. An explicit value wins over the --bit-DropMenu-* button color variables; left unset, the button takes the PrimaryBackground look unless they say otherwise. |
| 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. |
| Gap | `int` | 0 | The distance in pixels between the button and the callout, on whichever side the callout ends up on. |
| 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: the icon becomes a spinner, an open callout closes and it cannot be opened again until the loading ends. The button keeps the focus and is marked aria-disabled and aria-busy. |
| IsOpen | `bool` | false | Determines the opening state of the callout of the drop menu. |
| LazyRender | `bool` | false | Keeps the content of the callout out of the page until the first opening, then keeps it, so its state survives a close. |
| 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. A callout opened by hovering stays out of the keyboard's way - a Tab on the button moves on past it, and AutoFocus and TrapFocus leave the focus where it is - until an arrow key, Enter or Space on the button, or the keyboard moving the focus into it, hands it to the keyboard. A callout the keyboard holds is left open when the pointer leaves it. |
| PanelPlacement | `BitPlacement?` | null | The position of the responsive panel to show on the screen. Start and End follow the text direction, Left and Right stay where they are named in both; Center and the two combined values fall back to End. |
| 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. |
| Placement | `BitPlacement?` | null | The side of the button the callout opens on when there is room for it there; it falls back to the opposite side when there is not. Top, Bottom, Left and Right are honoured as they are named, Start and End against the reading direction; Center, the two combined values, or none leave the choice to DropDirection. |
| Size | `BitSize?` | null | The size of the button of the drop menu. An explicit value wins over the --bit-DropMenu-* size variables; left unset, the button is medium unless they say otherwise. |
| 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. |
| Disabled | `bool` | false | Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction. |
| 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. An attribute written on the component wins over an entry of the same name. |
| Id | `string?` | null | Gets or sets the unique identifier for the component's root element. |
| 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. |
### BitPlacement Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Top | 0 | The top edge. |
| Bottom | 1 | The bottom edge. |
| Start | 2 | The edge the reading direction starts from - the left in LTR, the right in RTL. On the vertical axis, which does not turn around, it is the top. |
| End | 3 | The edge the reading direction ends at - the right in LTR, the left in RTL. On the vertical axis, which does not turn around, it is the bottom. |
| Left | 4 | The left edge, in both reading directions. |
| Right | 5 | The right edge, in both reading directions. |
| Center | 6 | The middle of the axis, against neither edge. |
| TopAndBottom | 7 | Both edges of the block axis at once. |
| StartAndEnd | 8 | Both edges of the inline axis at once, following the reading direction the way Start and End do. |
### 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. |
## CSS Variables
Public CSS custom properties read off the component's root. Set one on `:root` to restyle every instance, on any ancestor to restyle the ones inside it, or on the `Style` of one instance to restyle it and every instance nested inside it, which inherits the value too - a parameter changes one alone, as does the real CSS property on its `Style` / `Styles` when that property does not inherit (`opacity`); an inherited one (`color`, `font-family`) reaches the nested instances that do not set it themselves.
| Name | Default Value | Description |
| :--- | :------------ | :---------- |
| `--bit-DropMenu-color` | --bit-clr-fg-pri | Text and icon color of the button at rest. The Color parameter wins over it. Shared by the three variants: --bit-DropMenu-fill-color, --bit-DropMenu-outline-color and --bit-DropMenu-text-color are read ahead of it; a drop menu with no Variant reads it alone. |
| `--bit-DropMenu-background` | --bit-clr-bg-pri (transparent for Outline, Text and Transparent) | Background of the button at rest. The Color parameter wins over it where the look paints one; the transparent background of Outline, Text and Transparent is its alone. Shared by the three variants: --bit-DropMenu-fill-background, --bit-DropMenu-outline-background and --bit-DropMenu-text-background are read ahead of it; a drop menu with no Variant reads it alone. |
| `--bit-DropMenu-border-color` | Per Variant | Border color of the button, in every state. The Color parameter wins over it where the look paints the border with the Color. Shared by the three variants: --bit-DropMenu-fill-border-color, --bit-DropMenu-outline-border-color and --bit-DropMenu-text-border-color are read ahead of it; a drop menu with no Variant reads it alone. |
| `--bit-DropMenu-hover-border-color` | --bit-DropMenu-border-color, or per Variant | Border color of the button on hover. Shared by the three variants: --bit-DropMenu-fill-hover-border-color, --bit-DropMenu-outline-hover-border-color and --bit-DropMenu-text-hover-border-color are read ahead of it; a drop menu with no Variant reads it alone. |
| `--bit-DropMenu-active-border-color` | --bit-DropMenu-border-color, or per Variant | Border color of the button while pressed or open. Shared by the three variants: --bit-DropMenu-fill-active-border-color, --bit-DropMenu-outline-active-border-color and --bit-DropMenu-text-active-border-color are read ahead of it; a drop menu with no Variant reads it alone. |
| `--bit-DropMenu-border-width` | --bit-shp-brd-width | Border thickness of the button. |
| `--bit-DropMenu-radius` | --bit-shp-radius-button | Corner radius of the button, followed by its focus ring. |
| `--bit-DropMenu-hover-color` | --bit-clr-fg-pri | Text and icon color on hover. The Color parameter wins over it. Shared by the three variants: --bit-DropMenu-fill-hover-color, --bit-DropMenu-outline-hover-color and --bit-DropMenu-text-hover-color are read ahead of it; a drop menu with no Variant reads it alone. |
| `--bit-DropMenu-hover-background` | --bit-clr-bg-pri-hover | Background on hover. The Color parameter wins over it. Shared by the three variants: --bit-DropMenu-fill-hover-background, --bit-DropMenu-outline-hover-background and --bit-DropMenu-text-hover-background are read ahead of it; a drop menu with no Variant reads it alone. |
| `--bit-DropMenu-active-color` | --bit-clr-fg-pri | Text and icon color while pressed or while the callout is open. The Color parameter wins over it. Shared by the three variants: --bit-DropMenu-fill-active-color, --bit-DropMenu-outline-active-color and --bit-DropMenu-text-active-color are read ahead of it; a drop menu with no Variant reads it alone. |
| `--bit-DropMenu-active-background` | --bit-clr-bg-pri-active | Background while pressed or while the callout is open. The Color parameter wins over it. Shared by the three variants: --bit-DropMenu-fill-active-background, --bit-DropMenu-outline-active-background and --bit-DropMenu-text-active-background are read ahead of it; a drop menu with no Variant reads it alone. |
| `--bit-DropMenu-disabled-color` | --bit-clr-fg-dis | Text and icon color when disabled or loading. The Color parameter wins over it. Shared by the three variants: --bit-DropMenu-fill-disabled-color, --bit-DropMenu-outline-disabled-color and --bit-DropMenu-text-disabled-color are read ahead of it; a drop menu with no Variant reads it alone. |
| `--bit-DropMenu-disabled-background` | --bit-clr-bg-pri (transparent for Outline, Text and Transparent) | Background when disabled or loading. The Color parameter wins over it where the look paints one. Shared by the three variants: --bit-DropMenu-fill-disabled-background, --bit-DropMenu-outline-disabled-background and --bit-DropMenu-text-disabled-background are read ahead of it; a drop menu with no Variant reads it alone. |
| `--bit-DropMenu-disabled-border-color` | Per Variant | Border color when disabled or loading. Shared by the three variants: --bit-DropMenu-fill-disabled-border-color, --bit-DropMenu-outline-disabled-border-color and --bit-DropMenu-text-disabled-border-color are read ahead of it; a drop menu with no Variant reads it alone. |
| `--bit-DropMenu-fill-color` | --bit-DropMenu-color | Text and icon color of the button at rest of a Fill drop menu alone, read ahead of --bit-DropMenu-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-DropMenu-fill-background` | --bit-DropMenu-background | Background of the button at rest of a Fill drop menu alone, read ahead of --bit-DropMenu-background so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-DropMenu-fill-border-color` | --bit-DropMenu-border-color | Border color of the button, in every state, of a Fill drop menu alone, read ahead of --bit-DropMenu-border-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-DropMenu-fill-hover-color` | --bit-DropMenu-hover-color | Text and icon color on hover of a Fill drop menu alone, read ahead of --bit-DropMenu-hover-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-DropMenu-fill-hover-background` | --bit-DropMenu-hover-background | Background on hover of a Fill drop menu alone, read ahead of --bit-DropMenu-hover-background so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-DropMenu-fill-hover-border-color` | --bit-DropMenu-hover-border-color | Border color on hover of a Fill drop menu alone, read ahead of --bit-DropMenu-hover-border-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-DropMenu-fill-active-color` | --bit-DropMenu-active-color | Text and icon color while pressed or open of a Fill drop menu alone, read ahead of --bit-DropMenu-active-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-DropMenu-fill-active-background` | --bit-DropMenu-active-background | Background while pressed or open of a Fill drop menu alone, read ahead of --bit-DropMenu-active-background so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-DropMenu-fill-active-border-color` | --bit-DropMenu-active-border-color | Border color while pressed or open of a Fill drop menu alone, read ahead of --bit-DropMenu-active-border-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-DropMenu-fill-disabled-color` | --bit-DropMenu-disabled-color | Text and icon color when disabled or loading of a Fill drop menu alone, read ahead of --bit-DropMenu-disabled-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-DropMenu-fill-disabled-background` | --bit-DropMenu-disabled-background | Background when disabled or loading of a Fill drop menu alone, read ahead of --bit-DropMenu-disabled-background so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-DropMenu-fill-disabled-border-color` | --bit-DropMenu-disabled-border-color | Border color when disabled or loading of a Fill drop menu alone, read ahead of --bit-DropMenu-disabled-border-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-DropMenu-outline-color` | --bit-DropMenu-color | Text and icon color of the button at rest of an Outline drop menu alone, read ahead of --bit-DropMenu-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-DropMenu-outline-background` | --bit-DropMenu-background | Background of the button at rest of an Outline drop menu alone, read ahead of --bit-DropMenu-background so a theme can set this variant apart from the other two. The Color parameter leaves it alone. |
| `--bit-DropMenu-outline-border-color` | --bit-DropMenu-border-color | Border color of the button, in every state, of an Outline drop menu alone, read ahead of --bit-DropMenu-border-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-DropMenu-outline-hover-color` | --bit-DropMenu-hover-color | Text and icon color on hover of an Outline drop menu alone, read ahead of --bit-DropMenu-hover-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-DropMenu-outline-hover-background` | --bit-DropMenu-hover-background | Background on hover of an Outline drop menu alone, read ahead of --bit-DropMenu-hover-background so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-DropMenu-outline-hover-border-color` | --bit-DropMenu-hover-border-color | Border color on hover of an Outline drop menu alone, read ahead of --bit-DropMenu-hover-border-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-DropMenu-outline-active-color` | --bit-DropMenu-active-color | Text and icon color while pressed or open of an Outline drop menu alone, read ahead of --bit-DropMenu-active-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-DropMenu-outline-active-background` | --bit-DropMenu-active-background | Background while pressed or open of an Outline drop menu alone, read ahead of --bit-DropMenu-active-background so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-DropMenu-outline-active-border-color` | --bit-DropMenu-active-border-color | Border color while pressed or open of an Outline drop menu alone, read ahead of --bit-DropMenu-active-border-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-DropMenu-outline-disabled-color` | --bit-DropMenu-disabled-color | Text and icon color when disabled or loading of an Outline drop menu alone, read ahead of --bit-DropMenu-disabled-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-DropMenu-outline-disabled-background` | --bit-DropMenu-disabled-background | Background when disabled or loading of an Outline drop menu alone, read ahead of --bit-DropMenu-disabled-background so a theme can set this variant apart from the other two. The Color parameter leaves it alone. |
| `--bit-DropMenu-outline-disabled-border-color` | --bit-DropMenu-disabled-border-color | Border color when disabled or loading of an Outline drop menu alone, read ahead of --bit-DropMenu-disabled-border-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-DropMenu-text-color` | --bit-DropMenu-color | Text and icon color of the button at rest of a Text drop menu alone, read ahead of --bit-DropMenu-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-DropMenu-text-background` | --bit-DropMenu-background | Background of the button at rest of a Text drop menu alone, read ahead of --bit-DropMenu-background so a theme can set this variant apart from the other two. The Color parameter leaves it alone. |
| `--bit-DropMenu-text-border-color` | --bit-DropMenu-border-color | Border color of the button, in every state, of a Text drop menu alone, read ahead of --bit-DropMenu-border-color so a theme can set this variant apart from the other two. The Color parameter leaves it alone. |
| `--bit-DropMenu-text-hover-color` | --bit-DropMenu-hover-color | Text and icon color on hover of a Text drop menu alone, read ahead of --bit-DropMenu-hover-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-DropMenu-text-hover-background` | --bit-DropMenu-hover-background | Background on hover of a Text drop menu alone, read ahead of --bit-DropMenu-hover-background so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-DropMenu-text-hover-border-color` | --bit-DropMenu-hover-border-color | Border color on hover of a Text drop menu alone, read ahead of --bit-DropMenu-hover-border-color so a theme can set this variant apart from the other two. The Color parameter leaves it alone. |
| `--bit-DropMenu-text-active-color` | --bit-DropMenu-active-color | Text and icon color while pressed or open of a Text drop menu alone, read ahead of --bit-DropMenu-active-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-DropMenu-text-active-background` | --bit-DropMenu-active-background | Background while pressed or open of a Text drop menu alone, read ahead of --bit-DropMenu-active-background so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-DropMenu-text-active-border-color` | --bit-DropMenu-active-border-color | Border color while pressed or open of a Text drop menu alone, read ahead of --bit-DropMenu-active-border-color so a theme can set this variant apart from the other two. The Color parameter leaves it alone. |
| `--bit-DropMenu-text-disabled-color` | --bit-DropMenu-disabled-color | Text and icon color when disabled or loading of a Text drop menu alone, read ahead of --bit-DropMenu-disabled-color so a theme can set this variant apart from the other two. The Color parameter wins over it. |
| `--bit-DropMenu-text-disabled-background` | --bit-DropMenu-disabled-background | Background when disabled or loading of a Text drop menu alone, read ahead of --bit-DropMenu-disabled-background so a theme can set this variant apart from the other two. The Color parameter leaves it alone. |
| `--bit-DropMenu-text-disabled-border-color` | --bit-DropMenu-disabled-border-color | Border color when disabled or loading of a Text drop menu alone, read ahead of --bit-DropMenu-disabled-border-color so a theme can set this variant apart from the other two. The Color parameter leaves it alone. |
| `--bit-DropMenu-focus-color` | --bit-clr-pri-focus | Focus ring color of the button. The Color parameter wins over it. While it is unset, the focus ring is the library's own --bit-shd-focus-ring, so replacing that token re-shapes it too. |
| `--bit-DropMenu-min-height` | --bit-siz-ctrl-md | Smallest height of the button, and the width of one that holds only an icon. The Size parameter wins over it. |
| `--bit-DropMenu-padding` | --bit-siz-ctrl-pad-y-md --bit-siz-ctrl-pad-x-md | Padding of the button. The Size parameter wins over it. |
| `--bit-DropMenu-gap` | spacing(1) | Room between the icon, the text and the chevron. |
| `--bit-DropMenu-font-size` | --bit-tpg-fs-sm | Text size of the button. The Size parameter wins over it. |
| `--bit-DropMenu-font-weight` | --bit-tpg-font-weight | Text weight of the button. |
| `--bit-DropMenu-icon-size` | --bit-siz-icon-md | Size of the icon, the chevron and the spinner. The Size parameter wins over it. |
| `--bit-DropMenu-spinner-color` | The button's own text color | The moving arc of the loading spinner. |
| `--bit-DropMenu-spinner-track-color` | The text color at 25% | The ring the spinner's arc travels on. |
| `--bit-DropMenu-callout-background` | --bit-clr-bg-pri, or the Background kind | Background of the callout. The Background parameter wins over it. |
| `--bit-DropMenu-callout-color` | --bit-clr-fg-pri | Text color of the callout. |
| `--bit-DropMenu-callout-border-color` | None, or the Border kind | Border color of the callout. The Border parameter wins over it. |
| `--bit-DropMenu-callout-border-width` | 0, or --bit-shp-brd-width with Border | Border thickness of the callout. |
| `--bit-DropMenu-callout-radius` | --bit-shp-radius-popup | Corner radius of the callout. |
| `--bit-DropMenu-callout-shadow` | --bit-shd-popup | Elevation of the callout. |
| `--bit-DropMenu-callout-padding` | 0 | Padding around the content of the callout. |
| `--bit-DropMenu-callout-width` | auto (the Width parameter) | Width of the callout. |
| `--bit-DropMenu-callout-min-width` | auto (the MinWidth parameter) | Narrowest the callout gets. |
| `--bit-DropMenu-callout-max-width` | none (the MaxWidth parameter) | Widest the callout gets. |
| `--bit-DropMenu-callout-max-height` | The MaxHeight parameter | Tallest the callout grows before it scrolls; only read when MaxHeight is set. |
| `--bit-DropMenu-overlay-background` | transparent | The layer behind an open callout. |
## Examples
\n**Basic**:
```razor
Save
```
\n**Icons**:
```razor
Send by email
Copy link
Settings
Sign out
Rename
Delete
```
\n**Template**:
```razor
Departs 18:40 from gate B22
Details
Change the date
```
\n**Variant**:
```razor
Rename
Duplicate
Rename
Duplicate
Rename
Duplicate
Rename
```
```csharp
private BitVariant variant = BitVariant.Fill;
```
\n**Loading & lazy content**:
```razor
Last synced 5 minutes ago
Sync now
Rendered on the first opening
```
```csharp
private bool isLoading;
```
\n**Callout appearance**:
```razor
```
```csharp
private BitColorKind backgroundColorKind = BitColorKind.Primary;
private BitColorKind borderColorKind = BitColorKind.Primary;
```
\n**Sizing the callout**:
```razor
MatchWidth
A callout 16rem wide
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**Placement**:
```razor
@for (var i = 1; i <= 15; i++)
{
Category @i
}
Settings
Sign out
Send by email
Copy link
```
```csharp
private BitDropDirection dropDirection = BitDropDirection.TopAndBottom;
private BitPlacement alignment = BitPlacement.Start;
private BitPlacement side = BitPlacement.End;
```
\n**Responsive**:
```razor
Swipe to dismiss
```
```csharp
private BitPlacement panelPosition = BitPlacement.End;
```
\n**Open on hover**:
```razor
Platform
Solutions
Pricing
Opens after 400ms, closes after 600ms
Documentation
Release notes
```
\n**Binding**:
```razor
@(isOpen ? "Close" : "Open") the bound one
Toggle through the reference
Rename
Duplicate
Settings
Sign out
}
```
```csharp
private bool isOpen;
private bool mountDefaultIsOpen;
private BitDropMenu? dropMenuRef;
```
\n**Events**:
```razor
Rename
Duplicate
Clicked: @clickCounter, Opened: @openCounter, Dismissed: @dismissCounter
```
```csharp
private int clickCounter;
private int openCounter;
private int dismissCounter;
```
\n**Auto close**:
```razor
Rename
Duplicate
Delete
```
```csharp
private string autoCloseAction = "none";
```
\n**Accessibility**:
```razor
Go
Subscribe
```
\n**Cascading parameters**:
```razor
New
Save
Undo
Redo
Email
Copy link
```
```csharp
private readonly BitDropMenuParams[] toolbarDropMenuParams =
[
new()
{
Gap = 4,
Color = BitColor.Primary,
Variant = BitVariant.Outline,
AutoClose = true
}
];
```
\n**Color**:
```razor
Settings
Sign out
Settings
Sign out
Settings
Sign out
```
```csharp
private BitColor color = BitColor.Primary;
```
\n**External Icons**:
```razor
Home
Dashboard
Clone
Download ZIP
```
\n**Size**:
```razor
```
\n**Style & Class**:
```razor
Rename
Duplicate
Rename
Duplicate
Rename
Duplicate
Rename
Duplicate
Rename
Duplicate
Taller, primary while open, on a tinted callout
Taller, primary while open, on a tinted callout
```
\n**RTL**:
```razor
تنظیمات
خروج
پنل از ابتدا
```