# MenuButton **Also known as:** DropdownButton, SplitButton, Menu ## Description A menu button combines a button with a callout menu of related actions or links. It supports split and sticky modes, toggle behavior, nested submenus, check and single-choice items, group headers, separators, links, keyboard shortcuts, 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. | | AutoFocus | `bool` | false | If true, the header button automatically receives focus when the page renders. It is dropped on a menu button hidden from assistive technologies, and on a disabled one that is not kept focusable. | | AutoLoading | `bool` | false | Enters the loading state automatically while awaiting OnClick and ignores further clicks of the header button until it returns. Meant for the main half of a split menu button, whose chevron keeps opening the menu while the command runs. | | Background | `BitColorKind?` | null | The background color kind of the callout. An explicit value wins over --bit-MenuButton-callout-background; left unset, the callout takes the primary background unless it says otherwise. | | ButtonType | `BitButtonType?` | null | The value of the type attribute of the items, and of the main half of a split menu button when it is set. Left unset, the items are submit buttons inside an EditForm and plain buttons elsewhere; a submit or reset item acts on the form the menu button sits in, although its open menu is moved out of it to the body. | | CheckIcon | `BitIconInfo?` | null | The icon of the check mark shown on a checked item, from an external icon library. Takes precedence over CheckIconName. | | CheckIconName | `string?` | null | The name of the icon of the check mark shown on a checked item. Defaults to the Accept icon. | | ChevronDownAriaLabel | `string?` | "More options" | The aria-label of the chevron down button of the split menu button. The chevron carries no text of its own, so without a name it reaches a screen reader as an unlabelled button. | | 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. | | ChevronDownTitle | `string?` | null | The tooltip to show when the mouse is placed on the chevron down button of the split 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. | | CloseOnItemClick | `bool` | true | Closes the callout when an item is clicked. Turn it off for a menu of checkable items, so several can be toggled without reopening it. | | Color | `BitColor?` | null | The general color of the menu button. An explicit value wins over the --bit-MenuButton-* color variables, the toggled ones and the item focus and check mark colors included; left unset, the menu button is primary unless they say otherwise. | | DefaultSelectedItem | `TItem?` | null | Default value of the SelectedItem. | | DefaultIsToggled | `bool?` | null | Default value of the IsToggled parameter in toggle mode. | | DisabledInteractive | `bool` | false | Keeps a disabled menu button, and the disabled items of any menu button, focusable: the state is conveyed with the aria-disabled attribute instead of the native disabled one, so they stay reachable and are announced as unavailable rather than silently skipped. Their actions stay suppressed either way. | | DropDirection | `BitDropDirection` | BitDropDirection.TopAndBottom | Determines the allowed drop directions of the callout. | | FormId | `string?` | null | The id of the form element the menu button is associated with, rendered as the form attribute of the header button and of the items. It lets a submit or reset command sit outside of its form. | | 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. | | IconOnly | `bool` | false | Renders the header button as its icon alone: the text and the chevron beside it are dropped and the button becomes a square of the control's own height - the overflow trigger of a toolbar or a row. It then has no text to be named by, so give it an AriaLabel. In split mode only the main half is squared up, since the chevron half is the only way into the menu. | | 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 ignores its click; in split mode the chevron still opens the menu. | | 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. | | LoadingDelay | `int` | 0 | The delay in milliseconds before the spinner appears after the menu button enters the loading state, which keeps a fast operation from flashing one. The click guard applies immediately regardless. | | LoadingLabel | `string?` | null | The text to show beside the spinner in the loading state, replacing the text of the header button. It is also announced by screen readers through a status live region. | | LoadingTemplate | `RenderFragment?` | null | The custom template that replaces the spinner and the label of the header button while the menu button is in the loading state. | | MaxHeight | `string?` | null | The tallest the callout grows before its items start to scroll, as a CSS length. Without one the callout is capped to the room the viewport leaves. | | NameSelectors | `BitMenuButtonNameSelectors<TItem>?` | null | Names and selectors of the custom input type properties. | | NewTabHint | `string?` | null | Replaces the visually hidden "(opens in a new tab)" an item whose Target is _blank is announced with, e.g. to translate it. An empty value removes it. | | NoIcon | `bool` | false | If true, the icon of the header button is hidden. | | NoNewTabHint | `bool` | false | Stops the items whose Target is _blank from announcing that they open a new tab - only for where a visible label or heading already says so. | | OnClick | `EventCallback<TItem?>` | | The callback that is called when the header button is clicked, with the selected item in Sticky mode and null otherwise, and when an item of the menu is activated outside of Sticky mode, with that item. | | 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. | | RadioIcon | `BitIconInfo?` | null | The icon of the bullet shown on a checked single-choice item, using custom CSS classes for external icon libraries. Takes precedence over RadioIconName when both are set. | | RadioIconName | `string?` | null | The name of the icon of the bullet shown on a checked single-choice item (one whose RadioGroup is set). | | Reclickable | `bool` | false | Enables re-clicking the header button while the menu button is in the loading state. By default its click is ignored, which is what protects against a double submission. | | SelectedItem | `TItem?` | null | Determines the current selected item that acts as the header item. | | Size | `BitSize?` | null | The size of the menu button. An explicit value wins over the --bit-MenuButton-* size variables, the item ones included; left unset, the menu button is medium unless they say otherwise. | | 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. | | StopPropagation | `bool` | false | If true, stops the propagation of the click event of the menu button to the parent elements. Useful when the menu button is placed inside clickable containers like rows or cards. | | Styles | `BitMenuButtonClassStyles?` | null | Custom CSS styles for different parts of the menu button. | | SubmenuIcon | `BitIconInfo?` | null | The icon of the chevron an item that opens a submenu carries, using custom CSS classes for external icon libraries. Takes precedence over SubmenuIconName when both are set. | | SubmenuIconName | `string?` | null | The name of the icon of the chevron an item that opens a submenu carries. It is mirrored in a right-to-left menu, so one icon serves both directions. | | 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. | | 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 | | :--- | :--- | :------------ | :---------- | | 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 | 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 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. | ### BitLinkRels Enum | Name | Value | Description | | :--- | :--- | :---------- | | Alternate | 1 | Provides a link to an alternate representation of the document. (i.e. print page, translated or mirror) | | Author | 2 | Provides a link to the author of the document. | | Bookmark | 4 | Permanent URL used for bookmarking. | | External | 8 | Indicates that the referenced document is not part of the same site as the current document. | | Help | 16 | Provides a link to a help document. | | License | 32 | Provides a link to licensing information for the document. | | Next | 64 | Provides a link to the next document in the series. | | NoFollow | 128 | Links to an unendorsed document, like a paid link. ("NoFollow" is used by Google, to specify that the Google search spider should not follow that link) | | NoOpener | 256 | Requires that any browsing context created by following the hyperlink must not have an opener browsing context. | | NoReferrer | 512 | Makes the referrer unknown. No referrer header will be included when the user clicks the hyperlink. | | Prev | 1024 | The previous document in a selection. | | Search | 2048 | Links to a search tool for the document. | | Tag | 4096 | A tag (keyword) for the current document. | | Me | 8192 | Indicates that the linked document represents the person who owns the current content. (used for identity verification) | | Opener | 16384 | Requires that any browsing context created by following the hyperlink keeps its opener browsing context. (reverses the implicit noopener modern browsers apply to _blank targets) | | PrivacyPolicy | 32768 | Links to the privacy policy that applies to the current document. (rendered as privacy-policy) | | Sponsored | 65536 | Marks the link as an advertisement or paid placement, so search engines do not count it as an organic endorsement. | | TermsOfService | 131072 | Links to the terms of service that apply to the current document. (rendered as terms-of-service) | | Ugc | 262144 | Marks the link as user-generated content, like forum posts or comments, for search engines. | ### 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 | | :--- | :--- | :------------ | :---------- | | AriaLabel | `string?` | null | The accessible name of the item, for the benefit of screen readers. Set it on an item whose visible label is an icon alone. | | Checkable | `bool` | false | Turns the item into a check item: it is announced as a checkbox inside the menu, carries its IsChecked state as a check mark, and flips that state when it is clicked. | | ChildItems | `List<BitMenuButtonItem>` | [] | The items of the submenu that opens from this item. An item that has children opens its submenu instead of raising a click: it is announced with aria-haspopup, it carries a trailing chevron, and the arrow keys walk into and out of it. | | 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. | | IsChecked | `bool` | false | The checked state of a Checkable item. The menu button writes it back as the item is clicked. | | IsDisabled | `bool` | false | Whether or not the item is disabled. | | IsHeader | `bool` | false | If true, the item renders as the label of the group of items that follow it. It is presentational: the keyboard navigation steps over it. | | 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 | `Action<BitMenuButtonItem>?` | null | Click event handler of the item. | | RadioGroup | `string?` | null | Turns the item into a single-choice item: it is announced as a radio button inside the menu, carries its IsChecked state as a bullet, and checking it clears every other item of the menu button that names the same group. It outranks Checkable where both are set. | | Rel | `BitLinkRels?` | null | The rel attribute of the link of the item. A Target of _blank adds noopener to it, unless it already says NoOpener, NoReferrer or Opener; noreferrer is never added on its own. | | SecondaryText | `string?` | null | The trailing text of the item, shown at its far end and read after its label - a keyboard shortcut, a count, a short hint. | | 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 | | :--- | :--- | :------------ | :---------- | | AriaLabel | `string?` | null | The accessible name of the option, for the benefit of screen readers. Set it on an option whose visible label is an icon alone. | | Checkable | `bool` | false | Turns the option into a check item: it is announced as a checkbox inside the menu, carries its IsChecked state as a check mark, and flips that state when it is clicked. | | ChildContent | `RenderFragment?` | null | The nested BitMenuButtonOption components of the submenu that opens from this option. An option that has children opens its submenu instead of raising a click: it is announced with aria-haspopup, it carries a trailing chevron, and the arrow keys walk into and out of it. | | 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. | | IsChecked | `bool` | false | The checked state of a Checkable option, which supports two-way binding (@bind-IsChecked). | | IsCheckedChanged | `EventCallback<bool>` | | The callback that is called when the IsChecked value changes, which is what makes @bind-IsChecked work. | | IsDisabled | `bool` | false | Whether or not the option is disabled. | | IsHeader | `bool` | false | If true, the option renders as the label of the group of options that follow it. It is presentational: the keyboard navigation steps over it. | | 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<BitMenuButtonOption>` | | Click event handler of the option. | | RadioGroup | `string?` | null | Turns the option into a single-choice option: it is announced as a radio button inside the menu, carries its IsChecked state as a bullet, and checking it clears every other option of the menu button that names the same group. It outranks Checkable where both are set. | | Rel | `BitLinkRels?` | null | The rel attribute of the link of the option. A Target of _blank adds noopener to it, unless it already says NoOpener, NoReferrer or Opener; noreferrer is never added on its own. | | SecondaryText | `string?` | null | The trailing text of the option, shown at its far end and read after its label - a keyboard shortcut, a count, a short hint. | | 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. | | Submenu | `string?` | null | Custom CSS classes/styles for the submenu callout of each item of the BitMenuButton that opens one. | | 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. | | ItemCheckIcon | `string?` | null | Custom CSS classes/styles for the mark of each check or single-choice item of the BitMenuButton. | | ItemChevron | `string?` | null | Custom CSS classes/styles for the chevron of each item of the BitMenuButton that opens a submenu. | | ItemHeader | `string?` | null | Custom CSS classes/styles for each group header item of the BitMenuButton. | | ItemSecondaryText | `string?` | null | Custom CSS classes/styles for the secondary text of each item 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 | | :--- | :--- | :------------ | :---------- | | AriaLabel | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitMenuButtonItem.AriaLabel)) | AriaLabel field name and selector of the custom input class. | | Checkable | `BitNameSelectorPair<TItem, bool>` | new(nameof(BitMenuButtonItem.Checkable)) | Checkable field name and selector of the custom input class. | | ChildItems | `BitNameSelectorPair<TItem, List<TItem>?>` | new(nameof(BitMenuButtonItem.ChildItems)) | ChildItems field name and selector of the custom input class. | | 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. | | IsChecked | `BitNameSelectorPair<TItem, bool>` | new(nameof(BitMenuButtonItem.IsChecked)) | IsChecked field name and selector of the custom input class. The menu button writes the new state back to the named property as a check item is clicked, so a selector alone leaves the toggling to the page. | | IsDisabled | `BitNameSelectorPair<TItem, bool>` | new(nameof(BitMenuButtonItem.IsDisabled)) | IsDisabled field name and selector of the custom input class. | | IsHeader | `BitNameSelectorPair<TItem, bool>` | new(nameof(BitMenuButtonItem.IsHeader)) | IsHeader 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. | | RadioGroup | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitMenuButtonItem.RadioGroup)) | RadioGroup field name and selector of the custom input class. | | Rel | `BitNameSelectorPair<TItem, BitLinkRels?>` | new(nameof(BitMenuButtonItem.Rel)) | The Rel field name and selector of the custom input class. | | SecondaryText | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitMenuButtonItem.SecondaryText)) | SecondaryText 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. | | Template | `BitNameSelectorPair<TItem, RenderFragment<TItem>?>` | new(nameof(BitMenuButtonItem.Template)) | Template 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. | ## 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-MenuButton-color` | --bit-clr-pri-text (Fill) or --bit-clr-pri (Outline, Text) | Text and icon color of both halves of the button at rest. The Color parameter wins over it. Shared by the three variants: --bit-MenuButton-fill-color, --bit-MenuButton-outline-color and --bit-MenuButton-text-color are read ahead of it. | | `--bit-MenuButton-background` | --bit-clr-pri (Fill), transparent (Outline, Text) | Background of the button at rest. The Color parameter wins over it in Fill; the transparent background of Outline and Text is its alone. Shared by the three variants: --bit-MenuButton-fill-background, --bit-MenuButton-outline-background and --bit-MenuButton-text-background are read ahead of it. | | `--bit-MenuButton-border-color` | The background, or transparent for the Text variant | Border color of the button. The Color parameter wins over it, except over the transparent border of Text. Shared by the three variants: --bit-MenuButton-fill-border-color, --bit-MenuButton-outline-border-color and --bit-MenuButton-text-border-color are read ahead of it. | | `--bit-MenuButton-border-width` | --bit-shp-brd-width | Border thickness of the button. | | `--bit-MenuButton-radius` | --bit-shp-radius-button | Corner radius of the button, followed by its focus ring. | | `--bit-MenuButton-hover-color` | --bit-clr-pri-text | Text and icon color of the hovered half (pointer devices only). The Color parameter wins over it. Shared by the three variants: --bit-MenuButton-fill-hover-color, --bit-MenuButton-outline-hover-color and --bit-MenuButton-text-hover-color are read ahead of it. | | `--bit-MenuButton-hover-background` | --bit-clr-pri-hover | Background of the hovered half (pointer devices only). The Color parameter wins over it. Shared by the three variants: --bit-MenuButton-fill-hover-background, --bit-MenuButton-outline-hover-background and --bit-MenuButton-text-hover-background are read ahead of it. | | `--bit-MenuButton-active-color` | --bit-clr-pri-text | Text and icon color of the pressed half, and of the chevron while the menu is open. The Color parameter wins over it. Shared by the three variants: --bit-MenuButton-fill-active-color, --bit-MenuButton-outline-active-color and --bit-MenuButton-text-active-color are read ahead of it. | | `--bit-MenuButton-active-background` | --bit-clr-pri-active | Background of the pressed half, and of the chevron while the menu is open. The Color parameter wins over it. Shared by the three variants: --bit-MenuButton-fill-active-background, --bit-MenuButton-outline-active-background and --bit-MenuButton-text-active-background are read ahead of it. | | `--bit-MenuButton-toggled-color` | --bit-clr-pri-text | Text and icon color of the header button while it is toggled. The Color parameter wins over it. | | `--bit-MenuButton-toggled-background` | --bit-clr-pri-dark | Background of the header button while it is toggled. The Color parameter wins over it. | | `--bit-MenuButton-toggled-hover-background` | --bit-clr-pri-dark-hover | Background of the toggled header button on hover (pointer devices only). The Color parameter wins over it. | | `--bit-MenuButton-toggled-active-background` | --bit-clr-pri-dark-active | Background of the toggled header button while it is pressed. The Color parameter wins over it. | | `--bit-MenuButton-disabled-color` | --bit-clr-pri-dis-text | Text and icon color when the menu button is disabled, and of the divider between the two halves then. The Color parameter wins over it. | | `--bit-MenuButton-disabled-background` | --bit-clr-pri-dis (Fill), transparent (Outline, Text) | Background when the menu button is disabled. The Color parameter wins over it in Fill; the transparent background of Outline and Text is its alone. Shared by the three variants: --bit-MenuButton-fill-disabled-background, --bit-MenuButton-outline-disabled-background and --bit-MenuButton-text-disabled-background are read ahead of it. | | `--bit-MenuButton-disabled-border-color` | The disabled background | Border color when the menu button is disabled. The Color parameter wins over it, except over the transparent border of Text. Shared by the three variants: --bit-MenuButton-fill-disabled-border-color, --bit-MenuButton-outline-disabled-border-color and --bit-MenuButton-text-disabled-border-color are read ahead of it. | | `--bit-MenuButton-fill-color` | --bit-MenuButton-color | Text and icon color of both halves at rest of a Fill menu button alone, read ahead of --bit-MenuButton-color so a theme can set this variant apart from the other two. The Color parameter wins over it. | | `--bit-MenuButton-fill-background` | --bit-MenuButton-background | Background at rest of a Fill menu button alone, read ahead of --bit-MenuButton-background so a theme can set this variant apart from the other two. The Color parameter wins over it. | | `--bit-MenuButton-fill-border-color` | --bit-MenuButton-border-color | Border color of a Fill menu button alone, read ahead of --bit-MenuButton-border-color so a theme can set this variant apart from the other two. The Color parameter wins over it. | | `--bit-MenuButton-fill-hover-color` | --bit-MenuButton-hover-color | Text and icon color of the hovered half (pointer devices only) of a Fill menu button alone, read ahead of --bit-MenuButton-hover-color so a theme can set this variant apart from the other two. The Color parameter wins over it. | | `--bit-MenuButton-fill-hover-background` | --bit-MenuButton-hover-background | Background of the hovered half (pointer devices only) of a Fill menu button alone, read ahead of --bit-MenuButton-hover-background so a theme can set this variant apart from the other two. The Color parameter wins over it. | | `--bit-MenuButton-fill-active-color` | --bit-MenuButton-active-color | Text and icon color of a pressed half, and of the chevron while the menu is open, of a Fill menu button alone, read ahead of --bit-MenuButton-active-color so a theme can set this variant apart from the other two. The Color parameter wins over it. | | `--bit-MenuButton-fill-active-background` | --bit-MenuButton-active-background | Background of a pressed half, and of the chevron while the menu is open, of a Fill menu button alone, read ahead of --bit-MenuButton-active-background so a theme can set this variant apart from the other two. The Color parameter wins over it. | | `--bit-MenuButton-fill-disabled-background` | --bit-MenuButton-disabled-background | Background when disabled of a Fill menu button alone, read ahead of --bit-MenuButton-disabled-background so a theme can set this variant apart from the other two. The Color parameter wins over it. | | `--bit-MenuButton-fill-disabled-border-color` | --bit-MenuButton-disabled-border-color | Border color when disabled of a Fill menu button alone, read ahead of --bit-MenuButton-disabled-border-color so a theme can set this variant apart from the other two. The Color parameter wins over it. | | `--bit-MenuButton-outline-color` | --bit-MenuButton-color | Text and icon color of both halves at rest of an Outline menu button alone, read ahead of --bit-MenuButton-color so a theme can set this variant apart from the other two. The Color parameter wins over it. | | `--bit-MenuButton-outline-background` | --bit-MenuButton-background | Background at rest of an Outline menu button alone, read ahead of --bit-MenuButton-background so a theme can set this variant apart from the other two. The Color parameter leaves it alone. | | `--bit-MenuButton-outline-border-color` | --bit-MenuButton-border-color | Border color of an Outline menu button alone, read ahead of --bit-MenuButton-border-color so a theme can set this variant apart from the other two. The Color parameter wins over it. | | `--bit-MenuButton-outline-hover-color` | --bit-MenuButton-hover-color | Text and icon color of the hovered half (pointer devices only) of an Outline menu button alone, read ahead of --bit-MenuButton-hover-color so a theme can set this variant apart from the other two. The Color parameter wins over it. | | `--bit-MenuButton-outline-hover-background` | --bit-MenuButton-hover-background | Background of the hovered half (pointer devices only) of an Outline menu button alone, read ahead of --bit-MenuButton-hover-background so a theme can set this variant apart from the other two. The Color parameter wins over it. | | `--bit-MenuButton-outline-active-color` | --bit-MenuButton-active-color | Text and icon color of a pressed half, and of the chevron while the menu is open, of an Outline menu button alone, read ahead of --bit-MenuButton-active-color so a theme can set this variant apart from the other two. The Color parameter wins over it. | | `--bit-MenuButton-outline-active-background` | --bit-MenuButton-active-background | Background of a pressed half, and of the chevron while the menu is open, of an Outline menu button alone, read ahead of --bit-MenuButton-active-background so a theme can set this variant apart from the other two. The Color parameter wins over it. | | `--bit-MenuButton-outline-disabled-background` | --bit-MenuButton-disabled-background | Background when disabled of an Outline menu button alone, read ahead of --bit-MenuButton-disabled-background so a theme can set this variant apart from the other two. The Color parameter leaves it alone. | | `--bit-MenuButton-outline-disabled-border-color` | --bit-MenuButton-disabled-border-color | Border color when disabled of an Outline menu button alone, read ahead of --bit-MenuButton-disabled-border-color so a theme can set this variant apart from the other two. The Color parameter wins over it. | | `--bit-MenuButton-text-color` | --bit-MenuButton-color | Text and icon color of both halves at rest of a Text menu button alone, read ahead of --bit-MenuButton-color so a theme can set this variant apart from the other two. The Color parameter wins over it. | | `--bit-MenuButton-text-background` | --bit-MenuButton-background | Background at rest of a Text menu button alone, read ahead of --bit-MenuButton-background so a theme can set this variant apart from the other two. The Color parameter leaves it alone. | | `--bit-MenuButton-text-border-color` | --bit-MenuButton-border-color | Border color of a Text menu button alone, read ahead of --bit-MenuButton-border-color so a theme can set this variant apart from the other two. The Color parameter leaves it alone. | | `--bit-MenuButton-text-hover-color` | --bit-MenuButton-hover-color | Text and icon color of the hovered half (pointer devices only) of a Text menu button alone, read ahead of --bit-MenuButton-hover-color so a theme can set this variant apart from the other two. The Color parameter wins over it. | | `--bit-MenuButton-text-hover-background` | --bit-MenuButton-hover-background | Background of the hovered half (pointer devices only) of a Text menu button alone, read ahead of --bit-MenuButton-hover-background so a theme can set this variant apart from the other two. The Color parameter wins over it. | | `--bit-MenuButton-text-active-color` | --bit-MenuButton-active-color | Text and icon color of a pressed half, and of the chevron while the menu is open, of a Text menu button alone, read ahead of --bit-MenuButton-active-color so a theme can set this variant apart from the other two. The Color parameter wins over it. | | `--bit-MenuButton-text-active-background` | --bit-MenuButton-active-background | Background of a pressed half, and of the chevron while the menu is open, of a Text menu button alone, read ahead of --bit-MenuButton-active-background so a theme can set this variant apart from the other two. The Color parameter wins over it. | | `--bit-MenuButton-text-disabled-background` | --bit-MenuButton-disabled-background | Background when disabled of a Text menu button alone, read ahead of --bit-MenuButton-disabled-background so a theme can set this variant apart from the other two. The Color parameter leaves it alone. | | `--bit-MenuButton-text-disabled-border-color` | --bit-MenuButton-disabled-border-color | Border color when disabled of a Text menu button alone, read ahead of --bit-MenuButton-disabled-border-color so a theme can set this variant apart from the other two. The Color parameter leaves it alone. | | `--bit-MenuButton-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-MenuButton-min-height` | --bit-siz-ctrl-md | Smallest height of the button, the width of the chevron half unless that is set on its own, and the width of an IconOnly header. It is a floor, so the button still grows with a taller icon or a wrapped label. The Size parameter wins over it. | | `--bit-MenuButton-min-width` | min-content | Smallest width of the button. By default it is the parts that never give up room - the icon, the chevron, the chevron half and the padding and gaps around them - while the label is ellipsized all the way down, so a row too narrow for the button never clips them away. Set it to 0 to let a row shrink the button past them, or to a length to keep more of the label. | | `--bit-MenuButton-padding` | --bit-siz-ctrl-pad-y-md --bit-siz-ctrl-pad-x-sm | Padding of each half of the button. The chevron half drops the side padding, since it is a square. The Size parameter wins over it. | | `--bit-MenuButton-gap` | 0.5rem | Room between the icon, the text and the chevron. | | `--bit-MenuButton-font-size` | --bit-tpg-fs-sm | Text size of the button and of the items, which inherit it from the callout. The Size parameter wins over it. | | `--bit-MenuButton-icon-size` | --bit-siz-icon-md | Size of every glyph the component draws: the header icon, the chevron, the spinner, an item icon and a check mark. The Size parameter wins over it. | | `--bit-MenuButton-chevron-width` | The min-height of the button | Width of the chevron half of a split button. The Size parameter wins over it. | | `--bit-MenuButton-divider-color` | --bit-MenuButton-color, then --bit-clr-pri-text (Fill); --bit-MenuButton-border-color, then --bit-clr-pri (Outline); --bit-clr-pri (Text) | The hairline between the two halves of a split button. The Color parameter wins over it, and a disabled menu button draws it in the disabled color. Shared by the three variants: --bit-MenuButton-fill-divider-color, --bit-MenuButton-outline-divider-color and --bit-MenuButton-text-divider-color are read ahead of it. | | `--bit-MenuButton-fill-divider-color` | --bit-MenuButton-divider-color | The hairline between the two halves of a Fill menu button alone, read ahead of --bit-MenuButton-divider-color so a theme can set this variant apart from the other two. The Color parameter wins over it, and a disabled menu button draws it in the disabled color. | | `--bit-MenuButton-outline-divider-color` | --bit-MenuButton-divider-color | The hairline between the two halves of an Outline menu button alone, read ahead of --bit-MenuButton-divider-color so a theme can set this variant apart from the other two. The Color parameter wins over it, and a disabled menu button draws it in the disabled color. | | `--bit-MenuButton-text-divider-color` | --bit-MenuButton-divider-color | The hairline between the two halves of a Text menu button alone, read ahead of --bit-MenuButton-divider-color so a theme can set this variant apart from the other two. The Color parameter wins over it, and a disabled menu button draws it in the disabled color. | | `--bit-MenuButton-callout-background` | --bit-clr-bg-pri | Background of the callout, and of every submenu opened from inside it. The Background parameter wins over it. | | `--bit-MenuButton-callout-radius` | --bit-shp-radius-popup | Corner radius of the callout, applied to the corners away from the button. | | `--bit-MenuButton-callout-shadow` | --bit-shd-popup | Elevation of the callout. | | `--bit-MenuButton-callout-max-height` | The room the viewport leaves | The tallest the callout grows before its items scroll. Only read when the MaxHeight parameter is set, which is what the parameter writes it as. | | `--bit-MenuButton-callout-min-width` | The width of the button | Narrowest the callout gets. The positioning code already stretches the callout to the width of the button, so this is a floor beyond that. | | `--bit-MenuButton-callout-max-width` | The width of the viewport | The widest the callout gets before the labels of its items are ellipsized. Without a cap, one long label would widen the callout past the side of the screen. | | `--bit-MenuButton-callout-padding` | 0 | Padding around the list of items inside the callout. Flush by default, so a menu is the list of its rows and nothing else. | | `--bit-MenuButton-item-color` | --bit-clr-fg-pri | Text and icon color of an item. | | `--bit-MenuButton-item-min-height` | --bit-siz-item-md | Smallest height of an item. The Size parameter wins over it. | | `--bit-MenuButton-item-padding` | --bit-siz-ctrl-pad-y-md --bit-siz-ctrl-pad-x-sm | Padding of an item, and of a group header. The Size parameter wins over it. | | `--bit-MenuButton-item-gap` | 0.5rem | Room between the check column, the icon, the label and the secondary text of an item. | | `--bit-MenuButton-item-hover-background` | --bit-clr-bg-pri-hover | Background of a hovered item, and of the row whose submenu is open. The items are neutral surfaces, so the label keeps its own color. | | `--bit-MenuButton-item-active-background` | --bit-clr-bg-pri-active | Background of a pressed item. | | `--bit-MenuButton-item-checked-background` | --bit-clr-bg-sec | Background of a checked item, kept while the pointer is elsewhere. | | `--bit-MenuButton-item-checked-color` | --bit-clr-pri | The mark of a checked item: the check mark of a check item, the bullet of a single-choice one. The Color parameter wins over it. | | `--bit-MenuButton-item-disabled-color` | --bit-clr-fg-dis | Text and icon color of a disabled item. | | `--bit-MenuButton-item-focus-color` | --bit-clr-pri-focus | Focus ring of the item the keyboard navigation is on. It is drawn inside the item, since the callout clips what overflows it. The Color parameter wins over it. | | `--bit-MenuButton-item-separator-color` | --bit-clr-brd-sec | The hairline of a separator item. | | `--bit-MenuButton-item-secondary-color` | --bit-clr-fg-sec | The secondary text of an item - a keyboard shortcut, a count. | | `--bit-MenuButton-item-header-color` | --bit-clr-fg-sec | The label of a group header item. | ## Examples