Skip to content
BlazorUI

Buttons

MenuButton

Bit.BlazorUIDropdownButtonSplitButtonMenu

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.

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. The button is the only thing in the tab order; from it, Enter, Space and the arrow keys open the menu and move the focus into it. Inside, ↑ / ↓ and Home / End move between the items (wrapping around, and stepping over the separators and the group headers), typing jumps to the item that starts with what was typed - the keystrokes that arrive within a second of each other are one search string, and the same character pressed again cycles through the items under it - Enter or Space activates the focused item, and Esc or Tab closes the menu, 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. Split then makes the header a command of its own, running the selected item's action; without it the header only opens the menu.



Icons

IconName sets the header icon, ChevronDownIconName replaces the chevron - which turns over while the menu is open - and each item carries its own icon. NoIcon drops the header icon, including the icon of the selected item in Sticky mode. IconOnly drops the text and the chevron instead, squaring the header into the overflow trigger of a toolbar or a row - give it an AriaLabel, since it has no text left to be named by.



NoIcon:



IconOnly:

Callout

Background picks the callout surface from the BitColorKind kinds. MaxHeight caps the list and scrolls the rest; without one the callout is still capped to the room the viewport leaves, so a long menu never runs off screen.



MaxHeight:

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. The toggled header is painted with the darker end of its color role in every variant, so the button that is on reads stronger than the one that is off.

Toggle:



DefaultIsToggled:



Variant:




Two-way binding:



OnToggleChange: False

Checkable

A Checkable item carries its IsChecked state as a check mark and flips it when clicked, announced to screen readers as a checkbox inside the menu. RadioGroup makes it one of a set of mutually exclusive choices instead - announced as a radio button, marked with a bullet, and picking one clears the rest of its group. Pair Checkable with CloseOnItemClick="false" so that several items can be toggled without reopening the menu. CheckIconName and RadioIconName replace the two marks.


Visible columns: Name, Status, sorted by Name

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:

Grouping

IsSeparator draws a divider between two runs of items, IsHeader labels the run that follows it, and SecondaryText adds trailing text - a keyboard shortcut, a count - read after the label of the item. Separators and headers are presentational, so the arrow keys step over them.

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

IsLoading replaces the header icon with a spinner and ignores the click of the header button; in Split mode the chevron still opens the menu, and Reclickable lifts the guard where a second click is wanted. AutoLoading holds that state for as long as the OnClick handler runs, and LoadingDelay keeps a fast one from flashing a spinner. LoadingLabel replaces the text beside the spinner and is announced through a status live region, which is what tells a user who cannot see the spinner that it started; LoadingTemplate replaces both.



LoadingTemplate:

Accessibility

Title and ChevronDownTitle are the tooltips of the two halves. AriaLabel names an icon-only header and ChevronDownAriaLabel the chevron, which already defaults to More options. AriaDescription is read after the name, the AriaLabel of an item replaces its own label, and DisabledInteractive keeps the disabled items reachable by the arrow keys so they are announced as unavailable instead of silently skipped. AutoFocus, left out here so the page is not pulled down to it, moves the focus to the header button on the first render, and it steps aside for a menu button that is hidden or disabled.

Opens a menu of three commands.

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.

Submenu

An item with ChildItems opens a submenu beside it instead of raising a click of its own. The pointer opens it on hover, the keyboard with ArrowRight, and ArrowLeft or Escape walks back out one level. Submenus nest, and carry the icons, separators, group headers and shortcuts of any other menu. SubmenuIconName replaces the chevron that marks the row.


Clicked item:

Cascading parameters

BitParams carries a BitMenuButtonParams down to every menu button under it, so a toolbar or a section of a page sets a variant, an icon or a tooltip once instead of repeating it at every menu button. What it carries is a default and not an override: a menu button that sets a parameter for itself keeps its own value, and only what it left unset is filled in from the cascade. Each parameter is filled in on its own, so a menu button can take the variant from the cascade and the text from its own markup. The params class is not generic although the component is: everything it carries is independent of the item type, while Items, SelectedItem, NameSelectors, the templates and the callbacks stay with each menu button.

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, the Styles and Classes parameters targeting the internal parts of the component, and the public CSS variables - set on the Style, Styles.Root or an ancestor (or its class), which reach the button and the menu it opens alike (the menu is moved to the end of the body while it is open, yet keeps inheriting from the button and its ancestors), on Styles.Callout for the menu alone, and on the Style of a single item for that row alone, which is how one destructive command is coloured without a class. The variables restyle the default, not a choice: an explicit Color, Size or Background wins over them for what it sets.

Component's Style & Class:




Item's Style & Class:

Non-Sticky:

Sticky:



Styles & Classes:





CSS variables:



RTL

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

CSS variables

The public custom properties this component reads off its root, for what no parameter covers.

Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property: set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it, or on the Style of one instance to restyle it - and any instance nested inside it, which inherits the value too; a parameter changes one alone, as does the real CSS property on the instance's Style / Styles when that property does not inherit (opacity: 1 keeps one disabled instance undimmed without undimming a disabled one inside it), while an inherited one such as color or font-family also reaches the nested instances that do not set it themselves. Leave a variable unset and the component falls back to the theme token beside it.

BitMenuButton CSS variables

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

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

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

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

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.

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.