Accent color
# MenuButton
## Description
A menu button combines a button with a callout menu of related actions or links. It supports split and sticky modes, toggle behavior, separator and link items, a loading state, and full keyboard navigation with proper ARIA menu semantics.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| AriaDescription | `string?` | null | Detailed description of the menu button for the benefit of screen readers. |
| AriaHidden | `bool` | false | If true, add an aria-hidden attribute instructing screen readers to ignore the menu button. |
| Background | `BitColorKind?` | null | The background color kind of the callout. |
| ButtonType | `BitButtonType?` | null | The value of the type attribute of the menu button. |
| ChevronDownAriaLabel | `string?` | null | The aria-label of the chevron down button of the split menu button for the benefit of screen readers. |
| ChevronDownIcon | `BitIconInfo?` | null | The icon for the chevron down part of the menu button. |
| ChevronDownIconName | `string?` | null | The icon name of the chevron down part of the menu button. |
| ChildContent | `RenderFragment?` | null | The content of the menu button, that are BitMenuButtonOption components. |
| Classes | `BitMenuButtonClassStyles?` | null | Custom CSS classes for different parts of the menu button. |
| Color | `BitColor?` | null | The general color of the menu button. |
| DefaultSelectedItem | `TItem?` | null | Default value of the SelectedItem. |
| DefaultIsToggled | `bool?` | null | Default value of the IsToggled parameter in toggle mode. |
| DropDirection | `BitDropDirection` | BitDropDirection.TopAndBottom | Determines the allowed drop directions of the callout. |
| FullWidth | `bool` | false | Expands the menu button width to 100% of the available width. |
| HeaderTemplate | `RenderFragment?` | null | The content inside the header of menu button can be customized. |
| Icon | `BitIconInfo?` | null | The icon to display using custom CSS classes for external icon libraries. Takes precedence over IconName when both are set. |
| IconName | `string?` | null | The icon from built-in Fluent UI icons to show inside the header of menu button. |
| IsLoading | `bool` | false | Determines whether the menu button is in the loading state. It replaces the default icon of the header button with a spinner and disables its click. |
| IsOpen | `bool` | false | Determines the opening state of the callout. |
| IsToggled | `bool` | false | Determines whether the header button is in the toggled state when Toggle is enabled. |
| Items | `IEnumerable<TItem>` | new List<TItem>() | List of items to show in the menu button. |
| ItemTemplate | `RenderFragment<TItem>?` | null | The custom template content to render each item. |
| NameSelectors | `BitMenuButtonNameSelectors<TItem>?` | null | Names and selectors of the custom input type properties. |
| NoIcon | `bool` | false | If true, the icon of the header button is hidden. |
| OnClick | `EventCallback<MouseEventArgs>` | | The callback is called when the menu button header is clicked. |
| OnChange | `EventCallback<TItem>` | | The callback that is called when the selected item has changed. |
| OnToggleChange | `EventCallback<bool>` | | The callback that is called when the IsToggled value changes in toggle mode. |
| Options | `RenderFragment?` | null | Alias of the ChildContent. |
| SelectedItem | `TItem?` | null | Determines the current selected item that acts as the header item. |
| Size | `BitSize?` | null | The size of the menu button. |
| Split | `bool` | false | If true, the menu button renders as a split button. |
| Sticky | `bool` | false | If true, the selected item is going to change the header item. |
| Styles | `BitMenuButtonClassStyles?` | null | Custom CSS styles for different parts of the menu button. |
| Text | `string?` | null | The text to show inside the header of menu button. |
| Title | `string?` | null | The tooltip to show when the mouse is placed on the header button. |
| Toggle | `bool` | false | If true, enables toggle behavior on the header button in Split mode. |
| Variant | `BitVariant?` | null | The visual variant of the menu button. |
| 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. |
### BitButtonType Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Button | 0 | The button is a clickable button. |
| Submit | 1 | The button is a submit button (submits form-data). |
| Reset | 2 | The button is a reset button (resets the form-data to its initial values). |
### BitColor Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Primary | 0 | Info 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. |
### BitDropDirection Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| All | 0 | The callout is positioned in all directions. |
| TopAndBottom | 1 | The callout is positioned in the top and bottom directions. |
### 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
### BitMenuButtonItem Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Class | `string?` | null | The custom CSS classes of the item. |
| Href | `string?` | null | The value of the href attribute of the item. If provided, the item renders as an anchor tag instead of button. |
| Icon | `BitIconInfo?` | null | The icon to render next to the item text. Takes precedence over IconName. |
| IconName | `string?` | null | Name of an icon to render next to the item text. |
| IsEnabled | `bool` | true | Whether or not the item is enabled. |
| IsSelected | `bool` | false | Determines the selection state of the item. |
| IsSeparator | `bool` | false | If true, the item renders as a separator line instead of a clickable item. |
| Key | `string?` | null | A unique value to use as a Key of the item. |
| OnClick | `EventCallback` | | Click event handler of the item. |
| Style | `string?` | null | The custom value for the style attribute of the item. |
| Target | `string?` | null | The value of the target attribute of the item when the item renders as an anchor tag (by providing the Href value). |
| Template | `RenderFragment<BitMenuButtonItem>?` | null | The custom template for the item. |
| Text | `string?` | null | Text to render in the item. |
| Title | `string?` | null | The tooltip to show when the mouse is placed on the item. |
### BitMenuButtonOption Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Class | `string?` | null | The custom CSS classes of the option. |
| Href | `string?` | null | The value of the href attribute of the option. If provided, the option renders as an anchor tag instead of button. |
| Icon | `BitIconInfo?` | null | The icon to render next to the option text. Takes precedence over IconName. |
| IconName | `string?` | null | Name of an icon to render next to the option text. |
| IsEnabled | `bool` | true | Whether or not the option is enabled. |
| IsSelected | `bool` | false | Determines the selection state of the item. |
| IsSeparator | `bool` | false | If true, the option renders as a separator line instead of a clickable item. |
| Key | `string?` | null | A unique value to use as a key of the option. |
| OnClick | `EventCallback` | | Click event handler of the option. |
| Style | `string?` | null | The custom value for the style attribute of the option. |
| Target | `string?` | null | The value of the target attribute of the option when the option renders as an anchor tag (by providing the Href value). |
| Template | `RenderFragment<BitMenuButtonOption>?` | null | The custom template for the option. |
| Text | `string?` | null | Text to render in the option. |
| Title | `string?` | null | The tooltip to show when the mouse is placed on the option. |
### BitMenuButtonClassStyles Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | Custom CSS classes/styles for the root element of the BitMenuButton. |
| Opened | `string?` | null | Custom CSS classes/styles for the opened callout state of the BitMenuButton. |
| OperatorButton | `string?` | null | Custom CSS classes/styles for operator button of the BitMenuButton. |
| OperatorButtonIcon | `string?` | null | Custom CSS classes/styles for operator button icon of the BitMenuButton. |
| OperatorButtonText | `string?` | null | Custom CSS classes/styles for operator button text of the BitMenuButton. |
| Callout | `string?` | null | Custom CSS classes/styles for the callout of the BitMenuButton. |
| CalloutContainer | `string?` | null | Custom CSS classes/styles for the callout container of the BitMenuButton. |
| ChevronDownButton | `string?` | null | Custom CSS classes/styles for the chevron down button of the BitMenuButton. |
| ChevronDown | `string?` | null | Custom CSS classes/styles for the chevron down of the BitMenuButton. |
| Separator | `string?` | null | Custom CSS classes/styles for the separator of the BitMenuButton. |
| Icon | `string?` | null | Custom CSS classes/styles for the icon of the BitMenuButton. |
| ItemWrapper | `string?` | null | Custom CSS classes/styles for each item wrapper of the BitMenuButton. |
| ItemButton | `string?` | null | Custom CSS classes/styles for each item of the BitMenuButton. |
| ItemIcon | `string?` | null | Custom CSS classes/styles for each item icon of the BitMenuButton. |
| ItemSeparator | `string?` | null | Custom CSS classes/styles for each item separator of the BitMenuButton. |
| ItemText | `string?` | null | Custom CSS classes/styles for each item text of the BitMenuButton. |
| Overlay | `string?` | null | Custom CSS classes/styles for each overlay of the BitMenuButton. |
| Spinner | `string?` | null | Custom CSS classes/styles for the spinner of the BitMenuButton in the loading state. |
| Text | `string?` | null | Custom CSS classes/styles for the text of the BitMenuButton. |
| Toggled | `string?` | null | Custom CSS classes/styles for the toggled state of the BitMenuButton. |
### BitMenuButtonNameSelectors Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Class | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitMenuButtonItem.Class)) | The CSS Class field name and selector of the custom input class. |
| Href | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitMenuButtonItem.Href)) | Href field name and selector of the custom input class. |
| Icon | `BitNameSelectorPair<TItem, BitIconInfo?>` | new(nameof(BitMenuButtonItem.Icon)) | Icon field name and selector of the custom input class. |
| IconName | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitMenuButtonItem.IconName)) | IconName field name and selector of the custom input class. |
| IsEnabled | `BitNameSelectorPair<TItem, bool>` | new(nameof(BitMenuButtonItem.IsEnabled)) | IsEnabled field name and selector of the custom input class. |
| IsSelected | `BitNameSelectorPair<TItem, bool>` | new(nameof(BitMenuButtonItem.IsSelected)) | IsSelected field name and selector of the custom input class. |
| IsSeparator | `BitNameSelectorPair<TItem, bool>` | new(nameof(BitMenuButtonItem.IsSeparator)) | IsSeparator field name and selector of the custom input class. |
| Key | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitMenuButtonItem.Key)) | Key field name and selector of the custom input class. |
| OnClick | `BitNameSelectorPair<TItem, Action<TItem>?>` | new(nameof(BitMenuButtonItem.OnClick)) | OnClick field name and selector of the custom input class. |
| Style | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitMenuButtonItem.Style)) | Style field name and selector of the custom input class. |
| Target | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitMenuButtonItem.Target)) | Target field name and selector of the custom input class. |
| Text | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitMenuButtonItem.Text)) | Text field name and selector of the custom input class. |
| Title | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitMenuButtonItem.Title)) | Title field name and selector of the custom input class. |
### BitNameSelectorPair Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Name | `string` | | Custom class property name. |
| Selector | `Func<TItem, TProp?>?` | | Custom class property selector. |
### 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
basicItems =
[
new() { Text = "Item A", Key = "A" },
new() { Text = "Item B", Key = "B", IsEnabled = false },
new() { Text = "Item C", Key = "C" }
];
```
\n**Templates**:
```razor
basicItems =
[
new() { Text = "Item A", Key = "A" },
new() { Text = "Item B", Key = "B", IsEnabled = false },
new() { Text = "Item C", Key = "C" }
];
private List itemTemplateItems =
[
new() { Text = "Add", Key = "add-key", IconName = BitIconName.Add },
new() { Text = "Edit", Key = "edit-key", IconName = BitIconName.Edit },
new() { Text = "Delete", Key = "delete-key", IconName = BitIconName.Delete }
];
private List itemTemplateItems2 =
[
new()
{
Text = "Add", Key = "add-key", IconName = BitIconName.Add,
Template = (item => @ externalIconItems =
[
new() { Text = "Add", Icon = "fa-solid fa-plus" },
new() { Text = "Edit", Icon = BitIconInfo.Css("fa-solid fa-pen") },
new() { Text = "Delete", Icon = BitIconInfo.Fa("solid trash") }
];
```
\n**Style & Class**:
```razor
basicItems = new()
{
new() { Text = "Item A", Key = "A" },
new() { Text = "Item B", Key = "B", IsEnabled = false },
new() { Text = "Item C", Key = "C" }
};
private static List itemStyleClassItems =
[
new() { Text = "Item A (Default)", Key = "A", IconName = BitIconName.Emoji, Style = "color: brown" },
new() { Text = "Item C (Styled)", Key = "B", IconName = BitIconName.Emoji, Style = "color: tomato; border-color: brown; background-color: peachpuff;" },
new() { Text = "Item B (Classed)", Key = "C", IconName = BitIconName.Emoji2, Class = "custom-item" }
];
```
Custom Header!
@item.Text (@item.Key)
@item.Text (@item.Key)
)
},
new ()
{
Text = "Edit", Key = "edit-key", IconName = BitIconName.Edit,
Template = (item => @@item.Text (@item.Key)
)
},
new()
{
Text = "Delete", Key = "delete-key", IconName = BitIconName.Delete,
Template = (item => @@item.Text (@item.Key)
)
}
];
```
\n**External Icons**:
```razor