MenuButton
A menu button is a menu item that displays a word or phrase that the user can click to initiate an operation.
Notes
The BitMenuButton is a Multi-API component which can accept the list of Items in 3 different ways: BitMenuButtonItem class, a custom Generic class, and BitMenuButtonOption component.Usage
Basic
Split
Explore the Split behavior of BitMenuButton, demonstrating buttons divided into two sections. One section triggers an action on click, while the other section opens a callout to reveal additional options.
Variant
The MenuButton offers three variants: Fill (default), Outline, and Text.
Color
Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.
Size
Varying sizes for menu buttons tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.
Sticky
Experience the Sticky functionality of BitMenuButton, showcasing a button that remains sticky after an item selection. The button displays the selected item and retains its state for continuous user interaction.
Icons
Present BitMenuButton instances with customized icons, enriching the visual options for representing menu buttons.
Style & Class
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.
Component's Style & Class:
Item's Style & Class:
Styles & Classes:
Templates
Explore BitMenuButton's customization capabilities.
Note that if Sticky set to true, HeaderTemplate and Text will be ignored.
HeaderTemplate
ItemTemplate
Item's template
Events
Demonstrate BitMenuButton instances highlighting item click events, offering versatile interactions within the menu buttons.
Non-Sticky
Sticky
Changed item:
Clicked item:
Binding
This example demonstrates different ways to handle item selection and changes within the component.
DefaultSelectedItem:
Two-way SelectedItem:
Item's IsSelected:
One-way IsOpen (closes after 2 seconds):
Two-way IsOpen:
RTL
Use BitMenuButton in right-to-left (RTL).
API
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. |
| ButtonType | BitButtonType | null | The value of the type attribute of the menu button. |
| ChevronDownIcon | 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. |
| HeaderTemplate | RenderFragment? | null | The content inside the header of menu button can be customized. |
| IconName | string? | null | The icon to show inside the header of menu button. |
| IsOpen | bool | false | Determines the opening state of the callout. |
| 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. |
| 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. | |
| 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. |
| Variant | BitVariant? | null | The visual variant of the menu button. |
BitComponentBase parameters
Name |
Type |
Default value |
Description |
|---|---|---|---|
| AriaLabel | string? | null | The aria-label of the control for the benefit of screen readers. |
| Class | string? | null | Custom CSS class for the root element of the component. |
| Dir | BitDir? | null | Determines the component direction. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Capture and render additional attributes in addition to the component's parameters. |
| Id | string? | null | Custom id attribute for the root element. if null the UniqueId will be used instead. |
| IsEnabled | bool | true | Whether or not the component is enabled. |
| Style | string? | null | Custom CSS style for the root element of the component. |
| Visibility | BitVisibility | BitVisibility.Visible | Whether the component is visible, hidden or collapsed. |
BitComponentBase public members
Name |
Type |
Default value |
Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction. |
| RootElement | ElementReference | The ElementReference of the root element. |
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. |
| 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. |
| Text | string? | null | Custom CSS classes/styles for the text 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. |
| 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. |
| 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. |
| Text | BitNameSelectorPair<TItem, string?> | new(nameof(BitMenuButtonItem.Text)) | Text 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. |
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. |
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. |
- On this page