Skip to content
BlazorUI

Buttons

MenuButton

Bit.BlazorUI

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.

Notes

The BitMenuButton is a Multi-API component which can accept the list of Items in 3 different ways:
1. The BitMenuButtonItem class
2. A Custom Generic class
3. The BitMenuButtonOption component

The component follows the WAI-ARIA menu button pattern: Enter, Space, and the arrow keys open the callout, ↑ / ↓ and Home / End navigate the items, typing a character jumps to the next matching item, and Esc or Tab closes it, returning the focus to the button.

Usage

Every example is live. Open its code to see exactly what produced the component running underneath.

Basic

The basic usage of BitMenuButton, opening a callout with a list of clickable items provided by the Items parameter using the BitMenuButtonItem class.

Split

In Split mode, the menu button renders in two parts: a main button that raises the OnClick event and a separate chevron button that opens the items callout.

Variant

The Variant parameter offers three visual variants: Fill (default), Outline, and Text, available in both normal and Split modes with proper disabled styling.





Sticky

In Sticky mode, clicking an item selects it and renders it as the header button, removing it from the callout list while it stays selected.



Icons

Customize the icons of the menu button: IconName sets the header icon, ChevronDownIconName replaces the default chevron icon, and each item can render its own icon next to its text.

Background

Use the Background parameter to control the background color of the callout using BitColorKind values.

Toggle

Enable toggle behavior on the header button in Split mode. Clicking the operator button toggles the IsToggled state, while the chevron button still opens the callout.

Toggle:



DefaultIsToggled:



Two-way binding:



OnToggleChange: False

NoIcon

Use the NoIcon parameter to hide the header icon of the menu button, including the selected item's icon in Sticky mode.


Templates

Customize the rendering of the menu button using HeaderTemplate for the header content, ItemTemplate for all items, or the Template property of an individual item.
Note that if Sticky is set to true, HeaderTemplate and Text will be ignored.

HeaderTemplate


ItemTemplate


Item's template

Events

Handle the click events of the menu button: OnClick is raised when an item (or the main button in Split mode) is clicked, and OnChange is raised in Sticky mode whenever the selected item changes. Each item can also provide its own click handler.

Non-Sticky


Sticky


Changed item:
Clicked item:

Binding

Control the state of the menu button with bindings: DefaultSelectedItem sets the initial selection, SelectedItem supports two-way binding, the IsSelected property pre-selects an item, and the IsOpen parameter controls the callout with one-way or two-way bindings.




DefaultSelectedItem:





Two-way SelectedItem:





Item's IsSelected:





One-way IsOpen (closes after 2 seconds):





Two-way IsOpen:

Separators

Use the IsSeparator property of the items to group related items using separator lines.

Links

Use the Href property of the items to render them as links (anchor tags) navigating to the provided url. The Target property customizes the navigation behavior and the Title property adds a tooltip to each item.

FullWidth

Use the FullWidth parameter to expand the menu button to 100% of the available width.


Loading

Use the IsLoading parameter to show a spinner in the header button while a long running operation is in progress. In Split mode, the chevron button still opens the callout during the loading state.

Title

Use the Title parameter to show a tooltip on hover over the header button. In Split mode, the ChevronDownAriaLabel parameter provides an accessible name for the chevron button for the benefit of screen readers.

DropDirection

Use the DropDirection parameter to control the directions in which the callout is allowed to open: TopAndBottom (default), or All which also allows opening to the sides when the vertical space is limited.

Color

The Color parameter applies the general theme colors of bit BlazorUI (Primary being the default) to the menu button across all variants, in both normal and Split modes.






















































Disabled:


















































External Icons

Icons from external libraries, like Font Awesome, can be used with the Icon parameter of both the menu button and its items, either as a plain CSS class string or a BitIconInfo instance. The ChevronDownIcon parameter accepts external icons in the same way.






Size

The Size parameter adjusts the size of the menu button among Small, Medium (default), and Large.



Style & Class

Customize the look of the menu button at any level: the Style and Class parameters of the root element, the Style and Class of each item, and the Styles and Classes parameters targeting the internal parts of the component.

Component's Style & Class:




Item's Style & Class:

Non-Sticky:

Sticky:



Styles & Classes:


RTL

Use the Dir parameter to render the menu button in right-to-left (RTL) direction.

API

Every parameter, public member, sub-class and enum this component exposes.

BitMenuButton 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.

BitComponentBase parameters

Name Type Default value Description
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.

BitComponentBase 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.

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.

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.

Feedback

Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.