MenuButton - bit BlazorUI
Home Docs

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

Items
    • Clicked Item:
    Icons
    • Clicked Item:
    Style & Class
    Component's Style & Class:

    • Clicked Item:




    Item's Style & Class:

    • Clicked Item:




    Styles & Classes:

    • Clicked Item:
    Visibility
    Visible: [
    • ]
    Hidden: [
    • ]
    Collapsed: [
    • ]
    HeaderTemplate
    • Clicked Item:
    ItemTemplate
    • Clicked Item:




    Item's Template

    • Clicked Item:

    Implementation

    BitMenuButton parameters
    Name
    Type
    Default value
    Description
    AriaDescription string? null Detailed description of the button for the benefit of screen readers.
    AriaHidden bool false If true, add an aria-hidden attribute instructing screen readers to ignore the element.
    ButtonStyle BitButtonStyle BitButtonStyle.Primary The style of button, Possible values: Primary | Standard.
    ButtonType BitButtonType null The type of the button.
    ChevronDownIcon string ChevronDown Icon name of the chevron down part of the BitMenuButton.
    ChildContent RenderFragment? null The content of the BitMenuButton, that are BitMenuButtonOption components.
    Classes BitMenuButtonClassStyles? null Custom CSS classes for different parts of the BitMenuButton.
    HeaderTemplate RenderFragment? null The content inside the header of BitMenuButton can be customized.
    IconName string? null The icon name to show inside the header of BitMenuButton.
    Items IEnumerable<TItem> new List<TItem>() List of Item, each of which can be a Button with different action in the BitMenuButton.
    ItemTemplate RenderFragment<TItem>? null The custom 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 BitMenuButton header is clicked.
    OnItemClick EventCallback<TItem> OnClick of each item returns that item with its property.
    Options RenderFragment? null Alias of ChildContent.
    Styles BitMenuButtonClassStyles? null Custom CSS styles for different parts of the BitMenuButton.
    Text string? null The text to show inside the header of BitMenuButton.
    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.
    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
    Callout string? null Custom CSS classes/styles for the callout container of the BitMenuButton.
    ChevronDown string? null Custom CSS classes/styles for the chevron down of the BitMenuButton.
    Icon string? null Custom CSS classes/styles for the icon 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.
    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.
    BitButtonStyle enum
    Name
    Value
    Description
    Primary 0 The button with white text on a blue background.
    Standard 1 The button with black text on a white background.
    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).
    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).