Accent color
MenuButton
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
Basic
<BitMenuButton Text="MenuButton" Items="basicItems" />@code { private List<BitMenuButtonItem> basicItems = [ new() { Text = "Item A", Key = "A" }, new() { Text = "Item B", Key = "B", IsEnabled = false }, new() { Text = "Item C", Key = "C" } ]; }
The basic usage of BitMenuButton, opening a callout with a list of clickable items provided by the Items
parameter using the BitMenuButtonItem class.
Split
<BitMenuButton Text="Split" Items="basicItems" Split />@code { private List<BitMenuButtonItem> basicItems = [ new() { Text = "Item A", Key = "A" }, new() { Text = "Item B", Key = "B", IsEnabled = false }, new() { Text = "Item C", Key = "C" } ]; }
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
<BitMenuButton Text="Fill" Items="basicItems" Variant="BitVariant.Fill" /> <BitMenuButton Text="Outline" Items="basicItems" Variant="BitVariant.Outline" /> <BitMenuButton Text="Text" Items="basicItems" Variant="BitVariant.Text" /> <BitMenuButton Text="Fill" Items="basicItems" Variant="BitVariant.Fill" IsEnabled="false" /> <BitMenuButton Text="Outline" Items="basicItems" Variant="BitVariant.Outline" IsEnabled="false" /> <BitMenuButton Text="Text" Items="basicItems" Variant="BitVariant.Text" IsEnabled="false" /> <BitMenuButton Text="Fill" Items="basicItems" Variant="BitVariant.Fill" Split /> <BitMenuButton Text="Outline" Items="basicItems" Variant="BitVariant.Outline" Split /> <BitMenuButton Text="Text" Items="basicItems" Variant="BitVariant.Text" Split /> <BitMenuButton Text="Fill" Items="basicItems" Variant="BitVariant.Fill" IsEnabled="false" Split /> <BitMenuButton Text="Outline" Items="basicItems" Variant="BitVariant.Outline" IsEnabled="false" Split /> <BitMenuButton Text="Text" Items="basicItems" Variant="BitVariant.Text" IsEnabled="false" Split />@code { private List<BitMenuButtonItem> basicItems = [ new() { Text = "Item A", Key = "A" }, new() { Text = "Item B", Key = "B", IsEnabled = false }, new() { Text = "Item C", Key = "C" } ]; }
The Variant parameter offers three visual variants: Fill (default), Outline, and Text, available in both normal
and Split modes with proper disabled styling.
Sticky
<BitMenuButton Items="basicItems" Variant="BitVariant.Fill" Sticky /> <BitMenuButton Items="basicItems" Variant="BitVariant.Fill" Split Sticky /> <BitMenuButton Items="basicItems" Variant="BitVariant.Outline" Sticky /> <BitMenuButton Items="basicItems" Variant="BitVariant.Outline" Split Sticky /> <BitMenuButton Items="basicItems" Variant="BitVariant.Text" Sticky /> <BitMenuButton Items="basicItems" Variant="BitVariant.Text" Split Sticky />@code { private List<BitMenuButtonItem> basicItems = [ new() { Text = "Item A", Key = "A" }, new() { Text = "Item B", Key = "B", IsEnabled = false }, new() { Text = "Item C", Key = "C" } ]; }
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
<BitMenuButton Text="IconName" Items="basicItemsIcon" IconName="@BitIconName.Edit" /> <BitMenuButton Text="ChevronDownIconName" Items="basicItemsIcon" ChevronDownIconName="@BitIconName.DoubleChevronDown" Split />@code { private List<BitMenuButtonItem> basicItemsIcon = [ new() { Text = "Item A", Key = "A", IconName = BitIconName.Emoji }, new() { Text = "Item B", Key = "B", IconName = BitIconName.Emoji, IsEnabled = false }, new() { Text = "Item C", Key = "C", IconName = BitIconName.Emoji2 } ]; }
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
<BitMenuButton Text="Primary" Items="basicItems" Background="BitColorKind.Primary" /> <BitMenuButton Text="Secondary" Items="basicItems" Background="BitColorKind.Secondary" /> <BitMenuButton Text="Tertiary" Items="basicItems" Background="BitColorKind.Tertiary" /> <BitMenuButton Text="Transparent" Items="basicItems" Background="BitColorKind.Transparent" />@code { private List<BitMenuButtonItem> basicItems = [ new() { Text = "Item A", Key = "A" }, new() { Text = "Item B", Key = "B", IsEnabled = false }, new() { Text = "Item C", Key = "C" } ]; }
Use the Background parameter to control the background color of the callout using BitColorKind values.
Toggle
<BitMenuButton Text="Toggle" Items="basicItems" Split Toggle /> <BitMenuButton Text="DefaultIsToggled" Items="basicItems" Split Toggle DefaultIsToggled="true" /> <BitMenuButton Text="Two-way" Items="basicItems" Split Toggle @bind-IsToggled="itemIsToggled" /> <BitCheckbox Label="IsToggled" @bind-Value="itemIsToggled" /> <div>OnToggleChange: @itemToggledValue</div> <BitMenuButton Text="OnToggleChange" Items="basicItems" Split Toggle OnToggleChange="v => itemToggledValue = v" />@code { private bool itemIsToggled; private bool itemToggledValue; private List<BitMenuButtonItem> basicItems = [ new() { Text = "Item A", Key = "A" }, new() { Text = "Item B", Key = "B", IsEnabled = false }, new() { Text = "Item C", Key = "C" } ]; }
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
<BitMenuButton Text="With icon" Items="basicItemsIcon" IconName="@BitIconName.Edit" /> <BitMenuButton Text="No icon" Items="basicItemsIcon" IconName="@BitIconName.Edit" NoIcon /> <BitMenuButton Sticky Items="basicItemsIcon" /> <BitMenuButton Sticky Items="basicItemsIcon" NoIcon />@code { private List<BitMenuButtonItem> basicItemsIcon = [ new() { Text = "Item A", Key = "A", IconName = BitIconName.Emoji }, new() { Text = "Item B", Key = "B", IconName = BitIconName.Emoji, IsEnabled = false }, new() { Text = "Item C", Key = "C", IconName = BitIconName.Emoji2 } ]; }
Use the NoIcon parameter to hide the header icon of the menu button, including the selected item's icon in
Sticky mode.
Templates
<style> .item-template-box { display: flex; width: 100%; } </style> <BitMenuButton Items="basicItems"> <HeaderTemplate> <div style="font-weight: bold; color: #d13438;"> Custom Header! </div> </HeaderTemplate> </BitMenuButton> <BitMenuButton Text="Items" Items="itemTemplateItems" Split> <ItemTemplate Context="item"> <div class="item-template-box"> <span style="color:brown">@item.Text (@item.Key)</span> </div> </ItemTemplate> </BitMenuButton> <BitMenuButton Text="Items" Items="itemTemplateItems2" />@code { private List<BitMenuButtonItem> basicItems = [ new() { Text = "Item A", Key = "A" }, new() { Text = "Item B", Key = "B", IsEnabled = false }, new() { Text = "Item C", Key = "C" } ]; private List<BitMenuButtonItem> itemTemplateItems = [ new() { Text = "Add", Key = "add-key", IconName = BitIconName.Add }, new() { Text = "Edit", Key = "edit-key", IconName = BitIconName.Edit }, new() { Text = "Delete", Key = "delete-key", IconName = BitIconName.Delete } ]; private List<BitMenuButtonItem> itemTemplateItems2 = [ new() { Text = "Add", Key = "add-key", IconName = BitIconName.Add, Template = (item => @<div class="item-template-box" style="color:green">@item.Text (@item.Key)</div>) }, new () { Text = "Edit", Key = "edit-key", IconName = BitIconName.Edit, Template = (item => @<div class="item-template-box" style="color:yellow">@item.Text (@item.Key)</div>) }, new() { Text = "Delete", Key = "delete-key", IconName = BitIconName.Delete, Template = (item => @<div class="item-template-box" style="color:red">@item.Text (@item.Key)</div>) } ]; }
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
<BitMenuButton Text="Items" Items="basicItems" OnChange="(BitMenuButtonItem item) => eventsChangedItem = item?.Key" OnClick="(BitMenuButtonItem item) => eventsClickedItem = item?.Key" /> <BitMenuButton Split Text="Items" Items="basicItemsOnClick" OnChange="(BitMenuButtonItem item) => eventsChangedItem = item?.Key" OnClick="@((BitMenuButtonItem item) => eventsClickedItem = "Main button clicked")" /> <BitMenuButton Sticky Items="basicItems" OnChange="(BitMenuButtonItem item) => eventsChangedItem = item?.Key" OnClick="(BitMenuButtonItem item) => eventsClickedItem = item?.Key" /> <BitMenuButton Sticky Split Items="basicItemsOnClick" OnChange="(BitMenuButtonItem item) => eventsChangedItem = item?.Key" OnClick="(BitMenuButtonItem item) => eventsClickedItem = item?.Key" /> <div>Changed item: @eventsChangedItem</div> <div>Clicked item: @eventsClickedItem</div>@code { private string? eventsClickedItem; private string? eventsChangedItem; private List<BitMenuButtonItem> basicItems = [ new() { Text = "Item A", Key = "A" }, new() { Text = "Item B", Key = "B", IsEnabled = false }, new() { Text = "Item C", Key = "C" } ]; private List<BitMenuButtonItem> basicItemsOnClick = [ new() { Text = "Item A", Key = "A", IconName = BitIconName.Emoji }, new() { Text = "Item B", Key = "B", IconName = BitIconName.Emoji, IsEnabled = false }, new() { Text = "Item C", Key = "C", IconName = BitIconName.Emoji2 } ]; protected override void OnInitialized() { Action<BitMenuButtonItem> onClick = item => { eventsClickedItem = $"{item.Text}"; StateHasChanged(); }; basicItemsOnClick.ForEach(i => i.OnClick = onClick); } }
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
<BitMenuButton Split Sticky Items="basicItems" DefaultSelectedItem="basicItems[1]" /> <BitMenuButton Sticky Items="basicItems" @bind-SelectedItem="twoWaySelectedItem" /> <BitChoiceGroup Horizontal Items="@choiceGroupItems" @bind-Value="@twoWaySelectedItem" /> <BitMenuButton Sticky Items="isSelectedItems" /> <BitMenuButton Sticky Items="basicItems" IsOpen="oneWayIsOpen" /> <BitCheckbox Label="One-way IsOpen" @bind-Value="oneWayIsOpen" OnChange="async _ => { await Task.Delay(2000); oneWayIsOpen = false; }" /> <BitMenuButton Sticky Items="basicItems" @bind-IsOpen="twoWayIsOpen" /> <BitCheckbox Label="Two-way IsOpen" @bind-Value="twoWayIsOpen" />@code { private BitMenuButtonItem twoWaySelectedItem = default!; private bool oneWayIsOpen; private bool twoWayIsOpen; private static List<BitMenuButtonItem> basicItems = [ new() { Text = "Item A", Key = "A" }, new() { Text = "Item B", Key = "B", IsEnabled = false }, new() { Text = "Item C", Key = "C" } ]; private static IEnumerable<BitChoiceGroupItem<BitMenuButtonItem>> choiceGroupItems = basicItems.Select(i => new BitChoiceGroupItem<BitMenuButtonItem>() { Id = i.Key, Text = i.Text, IsEnabled = i.IsEnabled, Value = i }); private List<BitMenuButtonItem> isSelectedItems = [ new() { Text = "Item A", Key = "A", IconName = BitIconName.Emoji }, new() { Text = "Item B", Key = "B", IconName = BitIconName.Emoji }, new() { Text = "Item C", Key = "C", IconName = BitIconName.Emoji2, IsSelected = true } ]; protected override void OnInitialized() { twoWaySelectedItem = basicItems[2]; } }
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
<BitMenuButton Text="File" Items="separatorItems" IconName="@BitIconName.OpenFile" /> <BitMenuButton Split Sticky Items="separatorItems" />@code { private static List<BitMenuButtonItem> separatorItems = [ new() { Text = "New", Key = "new", IconName = BitIconName.Add }, new() { Text = "Open", Key = "open", IconName = BitIconName.OpenFile }, new() { IsSeparator = true }, new() { Text = "Save", Key = "save", IconName = BitIconName.Save }, new() { Text = "Save as", Key = "save-as", IconName = BitIconName.SaveAs }, new() { IsSeparator = true }, new() { Text = "Delete", Key = "delete", IconName = BitIconName.Delete } ]; }
Use the IsSeparator property of the items to group related items using separator lines.
Links
<BitMenuButton Text="Links" Items="linkItems" IconName="@BitIconName.Globe" />@code { private static List<BitMenuButtonItem> linkItems = [ new() { Text = "bit platform", Key = "bit", IconName = BitIconName.Globe, Href = "https://bitplatform.dev", Target = "_blank", Title = "The bit platform website" }, new() { Text = "GitHub repo", Key = "github", IconName = BitIconName.Link, Href = "https://github.com/bitfoundation/bitplatform", Target = "_blank", Title = "The bit platform GitHub repository" }, new() { IsSeparator = true }, new() { Text = "Item C", Key = "C", IconName = BitIconName.Emoji2, Title = "A regular item" } ]; }
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
<BitMenuButton Text="Full width" Items="basicItemsIcon" FullWidth /> <BitMenuButton Text="Full width split" Items="basicItemsIcon" FullWidth Split />@code { private static List<BitMenuButtonItem> basicItemsIcon = [ new() { Text = "Item A", Key = "A", IconName = BitIconName.Emoji }, new() { Text = "Item B", Key = "B", IconName = BitIconName.Emoji, IsEnabled = false }, new() { Text = "Item C", Key = "C", IconName = BitIconName.Emoji2 } ]; }
Use the FullWidth parameter to expand the menu button to 100% of the available width.
Loading
<BitMenuButton Split Text="Save" Items="basicItemsIcon" IconName="@BitIconName.Save" IsLoading="itemAutoIsLoading" OnClick="(BitMenuButtonItem item) => HandleOnLoadingClick()" /> <BitMenuButton Text="Loading" Items="basicItemsIcon" IsLoading="itemIsLoading" /> <BitCheckbox Label="IsLoading" @bind-Value="itemIsLoading" />@code { private bool itemIsLoading; private bool itemAutoIsLoading; private static List<BitMenuButtonItem> basicItemsIcon = [ new() { Text = "Item A", Key = "A", IconName = BitIconName.Emoji }, new() { Text = "Item B", Key = "B", IconName = BitIconName.Emoji, IsEnabled = false }, new() { Text = "Item C", Key = "C", IconName = BitIconName.Emoji2 } ]; private async Task HandleOnLoadingClick() { itemAutoIsLoading = true; await Task.Delay(2000); itemAutoIsLoading = false; } }
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
<BitMenuButton Text="Hover over me" Title="The menu button tooltip" Items="basicItemsIcon" /> <BitMenuButton Split Text="Split" Title="The main button tooltip" ChevronDownAriaLabel="Open the menu" Items="basicItemsIcon" />@code { private static List<BitMenuButtonItem> basicItemsIcon = [ new() { Text = "Item A", Key = "A", IconName = BitIconName.Emoji }, new() { Text = "Item B", Key = "B", IconName = BitIconName.Emoji, IsEnabled = false }, new() { Text = "Item C", Key = "C", IconName = BitIconName.Emoji2 } ]; }
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
<BitMenuButton Text="TopAndBottom" Items="dropDirectionItems" DropDirection="BitDropDirection.TopAndBottom" /> <BitMenuButton Text="All" Items="dropDirectionItems" DropDirection="BitDropDirection.All" />@code { private static List<BitMenuButtonItem> dropDirectionItems = Enumerable.Range(1, 8).Select(i => new BitMenuButtonItem { Text = $"Item {i}", Key = i.ToString() }).ToList(); }
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
<BitMenuButton Text="Primary" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Primary" /> <BitMenuButton Text="Primary" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Primary" /> <BitMenuButton Text="Primary" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Primary" /> <BitMenuButton Text="Primary" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Primary" Split /> <BitMenuButton Text="Primary" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Primary" Split /> <BitMenuButton Text="Primary" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Primary" Split /> <BitMenuButton Text="Secondary" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Secondary" /> <BitMenuButton Text="Secondary" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Secondary" /> <BitMenuButton Text="Secondary" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Secondary" /> <BitMenuButton Text="Secondary" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Secondary" Split /> <BitMenuButton Text="Secondary" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Secondary" Split /> <BitMenuButton Text="Secondary" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Secondary" Split /> <BitMenuButton Text="Tertiary" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Tertiary" /> <BitMenuButton Text="Tertiary" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Tertiary" /> <BitMenuButton Text="Tertiary" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Tertiary" /> <BitMenuButton Text="Tertiary" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Tertiary" Split /> <BitMenuButton Text="Tertiary" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Tertiary" Split /> <BitMenuButton Text="Tertiary" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Tertiary" Split /> <BitMenuButton Text="Info" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Info" /> <BitMenuButton Text="Info" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Info" /> <BitMenuButton Text="Info" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Info" /> <BitMenuButton Text="Info" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Info" Split /> <BitMenuButton Text="Info" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Info" Split /> <BitMenuButton Text="Info" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Info" Split /> <BitMenuButton Text="Success" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Success" /> <BitMenuButton Text="Success" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Success" /> <BitMenuButton Text="Success" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Success" /> <BitMenuButton Text="Success" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Success" Split /> <BitMenuButton Text="Success" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Success" Split /> <BitMenuButton Text="Success" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Success" Split /> <BitMenuButton Text="Warning" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Warning" /> <BitMenuButton Text="Warning" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Warning" /> <BitMenuButton Text="Warning" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Warning" /> <BitMenuButton Text="Warning" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Warning" Split /> <BitMenuButton Text="Warning" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Warning" Split /> <BitMenuButton Text="Warning" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Warning" Split /> <BitMenuButton Text="SevereWarning" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.SevereWarning" /> <BitMenuButton Text="SevereWarning" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.SevereWarning" /> <BitMenuButton Text="SevereWarning" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.SevereWarning" /> <BitMenuButton Text="SevereWarning" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.SevereWarning" Split /> <BitMenuButton Text="SevereWarning" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.SevereWarning" Split /> <BitMenuButton Text="SevereWarning" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.SevereWarning" Split /> <BitMenuButton Text="Error" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Error" /> <BitMenuButton Text="Error" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Error" /> <BitMenuButton Text="Error" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Error" /> <BitMenuButton Text="Error" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Error" Split /> <BitMenuButton Text="Error" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Error" Split /> <BitMenuButton Text="Error" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Error" Split /> <BitMenuButton Text="PrimaryBackground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.PrimaryBackground" /> <BitMenuButton Text="PrimaryBackground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.PrimaryBackground" /> <BitMenuButton Text="PrimaryBackground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.PrimaryBackground" /> <BitMenuButton Text="PrimaryBackground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.PrimaryBackground" Split /> <BitMenuButton Text="PrimaryBackground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.PrimaryBackground" Split /> <BitMenuButton Text="PrimaryBackground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.PrimaryBackground" Split /> <BitMenuButton Text="SecondaryBackground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.SecondaryBackground" /> <BitMenuButton Text="SecondaryBackground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.SecondaryBackground" /> <BitMenuButton Text="SecondaryBackground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.SecondaryBackground" /> <BitMenuButton Text="SecondaryBackground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.SecondaryBackground" Split /> <BitMenuButton Text="SecondaryBackground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.SecondaryBackground" Split /> <BitMenuButton Text="SecondaryBackground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.SecondaryBackground" Split /> <BitMenuButton Text="TertiaryBackground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.TertiaryBackground" /> <BitMenuButton Text="TertiaryBackground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.TertiaryBackground" /> <BitMenuButton Text="TertiaryBackground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.TertiaryBackground" /> <BitMenuButton Text="TertiaryBackground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.TertiaryBackground" Split /> <BitMenuButton Text="TertiaryBackground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.TertiaryBackground" Split /> <BitMenuButton Text="TertiaryBackground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.TertiaryBackground" Split /> <BitMenuButton Text="PrimaryForeground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.PrimaryForeground" /> <BitMenuButton Text="PrimaryForeground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.PrimaryForeground" /> <BitMenuButton Text="PrimaryForeground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.PrimaryForeground" /> <BitMenuButton Text="PrimaryForeground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.PrimaryForeground" Split /> <BitMenuButton Text="PrimaryForeground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.PrimaryForeground" Split /> <BitMenuButton Text="PrimaryForeground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.PrimaryForeground" Split /> <BitMenuButton Text="SecondaryForeground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.SecondaryForeground" /> <BitMenuButton Text="SecondaryForeground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.SecondaryForeground" /> <BitMenuButton Text="SecondaryForeground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.SecondaryForeground" /> <BitMenuButton Text="SecondaryForeground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.SecondaryForeground" Split /> <BitMenuButton Text="SecondaryForeground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.SecondaryForeground" Split /> <BitMenuButton Text="SecondaryForeground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.SecondaryForeground" Split /> <BitMenuButton Text="TertiaryForeground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.TertiaryForeground" /> <BitMenuButton Text="TertiaryForeground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.TertiaryForeground" /> <BitMenuButton Text="TertiaryForeground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.TertiaryForeground" /> <BitMenuButton Text="TertiaryForeground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.TertiaryForeground" Split /> <BitMenuButton Text="TertiaryForeground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.TertiaryForeground" Split /> <BitMenuButton Text="TertiaryForeground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.TertiaryForeground" Split /> <BitMenuButton Text="PrimaryBorder" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.PrimaryBorder" /> <BitMenuButton Text="PrimaryBorder" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.PrimaryBorder" /> <BitMenuButton Text="PrimaryBorder" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.PrimaryBorder" /> <BitMenuButton Text="PrimaryBorder" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.PrimaryBorder" Split /> <BitMenuButton Text="PrimaryBorder" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.PrimaryBorder" Split /> <BitMenuButton Text="PrimaryBorder" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.PrimaryBorder" Split /> <BitMenuButton Text="SecondaryBorder" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.SecondaryBorder" /> <BitMenuButton Text="SecondaryBorder" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.SecondaryBorder" /> <BitMenuButton Text="SecondaryBorder" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.SecondaryBorder" /> <BitMenuButton Text="SecondaryBorder" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.SecondaryBorder" Split /> <BitMenuButton Text="SecondaryBorder" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.SecondaryBorder" Split /> <BitMenuButton Text="SecondaryBorder" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.SecondaryBorder" Split /> <BitMenuButton Text="TertiaryBorder" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.TertiaryBorder" /> <BitMenuButton Text="TertiaryBorder" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.TertiaryBorder" /> <BitMenuButton Text="TertiaryBorder" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.TertiaryBorder" /> <BitMenuButton Text="TertiaryBorder" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.TertiaryBorder" Split /> <BitMenuButton Text="TertiaryBorder" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.TertiaryBorder" Split /> <BitMenuButton Text="TertiaryBorder" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.TertiaryBorder" Split /> <div><b>Disabled</b>:</div> <BitMenuButton Text="Primary" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Primary" IsEnabled="false" /> <BitMenuButton Text="Primary" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Primary" IsEnabled="false" /> <BitMenuButton Text="Primary" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Primary" IsEnabled="false" /> <BitMenuButton Text="Primary" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Primary" IsEnabled="false" Split /> <BitMenuButton Text="Primary" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Primary" IsEnabled="false" Split /> <BitMenuButton Text="Primary" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Primary" IsEnabled="false" Split /> <BitMenuButton Text="Secondary" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Secondary" IsEnabled="false" /> <BitMenuButton Text="Secondary" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Secondary" IsEnabled="false" /> <BitMenuButton Text="Secondary" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Secondary" IsEnabled="false" /> <BitMenuButton Text="Secondary" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Secondary" IsEnabled="false" Split /> <BitMenuButton Text="Secondary" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Secondary" IsEnabled="false" Split /> <BitMenuButton Text="Secondary" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Secondary" IsEnabled="false" Split /> <BitMenuButton Text="Tertiary" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Tertiary" IsEnabled="false" /> <BitMenuButton Text="Tertiary" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Tertiary" IsEnabled="false" /> <BitMenuButton Text="Tertiary" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Tertiary" IsEnabled="false" /> <BitMenuButton Text="Tertiary" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Tertiary" IsEnabled="false" Split /> <BitMenuButton Text="Tertiary" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Tertiary" IsEnabled="false" Split /> <BitMenuButton Text="Tertiary" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Tertiary" IsEnabled="false" Split /> <BitMenuButton Text="Info" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Info" IsEnabled="false" /> <BitMenuButton Text="Info" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Info" IsEnabled="false" /> <BitMenuButton Text="Info" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Info" IsEnabled="false" /> <BitMenuButton Text="Info" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Info" IsEnabled="false" Split /> <BitMenuButton Text="Info" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Info" IsEnabled="false" Split /> <BitMenuButton Text="Info" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Info" IsEnabled="false" Split /> <BitMenuButton Text="Success" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Success" IsEnabled="false" /> <BitMenuButton Text="Success" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Success" IsEnabled="false" /> <BitMenuButton Text="Success" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Success" IsEnabled="false" /> <BitMenuButton Text="Success" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Success" IsEnabled="false" Split /> <BitMenuButton Text="Success" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Success" IsEnabled="false" Split /> <BitMenuButton Text="Success" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Success" IsEnabled="false" Split /> <BitMenuButton Text="Warning" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Warning" IsEnabled="false" /> <BitMenuButton Text="Warning" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Warning" IsEnabled="false" /> <BitMenuButton Text="Warning" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Warning" IsEnabled="false" /> <BitMenuButton Text="Warning" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Warning" IsEnabled="false" Split /> <BitMenuButton Text="Warning" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Warning" IsEnabled="false" Split /> <BitMenuButton Text="Warning" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Warning" IsEnabled="false" Split /> <BitMenuButton Text="SevereWarning" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.SevereWarning" IsEnabled="false" /> <BitMenuButton Text="SevereWarning" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.SevereWarning" IsEnabled="false" /> <BitMenuButton Text="SevereWarning" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.SevereWarning" IsEnabled="false" /> <BitMenuButton Text="SevereWarning" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.SevereWarning" IsEnabled="false" Split /> <BitMenuButton Text="SevereWarning" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.SevereWarning" IsEnabled="false" Split /> <BitMenuButton Text="SevereWarning" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.SevereWarning" IsEnabled="false" Split /> <BitMenuButton Text="Error" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Error" IsEnabled="false" /> <BitMenuButton Text="Error" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Error" IsEnabled="false" /> <BitMenuButton Text="Error" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Error" IsEnabled="false" /> <BitMenuButton Text="Error" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.Error" IsEnabled="false" Split /> <BitMenuButton Text="Error" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.Error" IsEnabled="false" Split /> <BitMenuButton Text="Error" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.Error" IsEnabled="false" Split /> <div style="background:var(--bit-clr-fg-sec);padding:1rem"> <BitMenuButton Text="PrimaryBackground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.PrimaryBackground" IsEnabled="false" /> <BitMenuButton Text="PrimaryBackground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.PrimaryBackground" IsEnabled="false" /> <BitMenuButton Text="PrimaryBackground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.PrimaryBackground" IsEnabled="false" /> <BitMenuButton Text="PrimaryBackground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.PrimaryBackground" IsEnabled="false" Split /> <BitMenuButton Text="PrimaryBackground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.PrimaryBackground" IsEnabled="false" Split /> <BitMenuButton Text="PrimaryBackground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.PrimaryBackground" IsEnabled="false" Split /> <BitMenuButton Text="SecondaryBackground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.SecondaryBackground" IsEnabled="false" /> <BitMenuButton Text="SecondaryBackground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.SecondaryBackground" IsEnabled="false" /> <BitMenuButton Text="SecondaryBackground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.SecondaryBackground" IsEnabled="false" /> <BitMenuButton Text="SecondaryBackground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.SecondaryBackground" IsEnabled="false" Split /> <BitMenuButton Text="SecondaryBackground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.SecondaryBackground" IsEnabled="false" Split /> <BitMenuButton Text="SecondaryBackground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.SecondaryBackground" IsEnabled="false" Split /> <BitMenuButton Text="TertiaryBackground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.TertiaryBackground" IsEnabled="false" /> <BitMenuButton Text="TertiaryBackground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.TertiaryBackground" IsEnabled="false" /> <BitMenuButton Text="TertiaryBackground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.TertiaryBackground" IsEnabled="false" /> <BitMenuButton Text="TertiaryBackground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.TertiaryBackground" IsEnabled="false" Split /> <BitMenuButton Text="TertiaryBackground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.TertiaryBackground" IsEnabled="false" Split /> <BitMenuButton Text="TertiaryBackground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.TertiaryBackground" IsEnabled="false" Split /> </div> <BitMenuButton Text="PrimaryForeground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.PrimaryForeground" IsEnabled="false" /> <BitMenuButton Text="PrimaryForeground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.PrimaryForeground" IsEnabled="false" /> <BitMenuButton Text="PrimaryForeground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.PrimaryForeground" IsEnabled="false" /> <BitMenuButton Text="PrimaryForeground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.PrimaryForeground" IsEnabled="false" Split /> <BitMenuButton Text="PrimaryForeground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.PrimaryForeground" IsEnabled="false" Split /> <BitMenuButton Text="PrimaryForeground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.PrimaryForeground" IsEnabled="false" Split /> <BitMenuButton Text="SecondaryForeground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.SecondaryForeground" IsEnabled="false" /> <BitMenuButton Text="SecondaryForeground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.SecondaryForeground" IsEnabled="false" /> <BitMenuButton Text="SecondaryForeground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.SecondaryForeground" IsEnabled="false" /> <BitMenuButton Text="SecondaryForeground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.SecondaryForeground" IsEnabled="false" Split /> <BitMenuButton Text="SecondaryForeground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.SecondaryForeground" IsEnabled="false" Split /> <BitMenuButton Text="SecondaryForeground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.SecondaryForeground" IsEnabled="false" Split /> <BitMenuButton Text="TertiaryForeground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.TertiaryForeground" IsEnabled="false" /> <BitMenuButton Text="TertiaryForeground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.TertiaryForeground" IsEnabled="false" /> <BitMenuButton Text="TertiaryForeground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.TertiaryForeground" IsEnabled="false" /> <BitMenuButton Text="TertiaryForeground" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.TertiaryForeground" IsEnabled="false" Split /> <BitMenuButton Text="TertiaryForeground" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.TertiaryForeground" IsEnabled="false" Split /> <BitMenuButton Text="TertiaryForeground" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.TertiaryForeground" IsEnabled="false" Split /> <BitMenuButton Text="PrimaryBorder" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.PrimaryBorder" IsEnabled="false" /> <BitMenuButton Text="PrimaryBorder" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.PrimaryBorder" IsEnabled="false" /> <BitMenuButton Text="PrimaryBorder" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.PrimaryBorder" IsEnabled="false" /> <BitMenuButton Text="PrimaryBorder" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.PrimaryBorder" IsEnabled="false" Split /> <BitMenuButton Text="PrimaryBorder" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.PrimaryBorder" IsEnabled="false" Split /> <BitMenuButton Text="PrimaryBorder" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.PrimaryBorder" IsEnabled="false" Split /> <BitMenuButton Text="SecondaryBorder" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.SecondaryBorder" IsEnabled="false" /> <BitMenuButton Text="SecondaryBorder" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.SecondaryBorder" IsEnabled="false" /> <BitMenuButton Text="SecondaryBorder" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.SecondaryBorder" IsEnabled="false" /> <BitMenuButton Text="SecondaryBorder" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.SecondaryBorder" IsEnabled="false" Split /> <BitMenuButton Text="SecondaryBorder" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.SecondaryBorder" IsEnabled="false" Split /> <BitMenuButton Text="SecondaryBorder" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.SecondaryBorder" IsEnabled="false" Split /> <BitMenuButton Text="TertiaryBorder" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.TertiaryBorder" IsEnabled="false" /> <BitMenuButton Text="TertiaryBorder" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.TertiaryBorder" IsEnabled="false" /> <BitMenuButton Text="TertiaryBorder" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.TertiaryBorder" IsEnabled="false" /> <BitMenuButton Text="TertiaryBorder" Items="basicItems" Variant="BitVariant.Fill" Color="BitColor.TertiaryBorder" IsEnabled="false" Split /> <BitMenuButton Text="TertiaryBorder" Items="basicItems" Variant="BitVariant.Outline" Color="BitColor.TertiaryBorder" IsEnabled="false" Split /> <BitMenuButton Text="TertiaryBorder" Items="basicItems" Variant="BitVariant.Text" Color="BitColor.TertiaryBorder" IsEnabled="false" Split />@code { private List<BitMenuButtonItem> basicItems = [ new() { Text = "Item A", Key = "A" }, new() { Text = "Item B", Key = "B", IsEnabled = false }, new() { Text = "Item C", Key = "C" } ]; }
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
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" /> <BitMenuButton Text="Actions" Items="externalIconItems" Icon="@("fa-solid fa-house")" /> <BitMenuButton Split Text="Actions" Items="externalIconItems" Icon="@("fa-brands fa-github")" /> <BitMenuButton Text="Actions" Items="externalIconItems" Color="BitColor.Secondary" Variant="BitVariant.Outline" Icon="@BitIconInfo.Css("fa-solid fa-house")" /> <BitMenuButton Split Text="Actions" Items="externalIconItems" Color="BitColor.Secondary" Variant="BitVariant.Outline" Icon="@BitIconInfo.Css("fa-brands fa-github")" /> <BitMenuButton Text="Actions" Items="externalIconItems" Color="BitColor.Tertiary" Variant="BitVariant.Text" Icon="@BitIconInfo.Fa("solid house")" /> <BitMenuButton Split Text="Actions" Items="externalIconItems" Color="BitColor.Tertiary" Variant="BitVariant.Text" Icon="@BitIconInfo.Fa("brands github")" ChevronDownIcon="@BitIconInfo.Fa("solid angles-down")" />@code { private static List<BitMenuButtonItem> externalIconItems = [ new() { Text = "Add", Icon = "fa-solid fa-plus" }, new() { Text = "Edit", Icon = BitIconInfo.Css("fa-solid fa-pen") }, new() { Text = "Delete", Icon = BitIconInfo.Fa("solid trash") } ]; }
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
<BitMenuButton Text="Small" Items="basicItems" Variant="BitVariant.Fill" Size="BitSize.Small" /> <BitMenuButton Text="Small" Items="basicItems" Variant="BitVariant.Outline" Size="BitSize.Small" /> <BitMenuButton Text="Small" Items="basicItems" Variant="BitVariant.Text" Size="BitSize.Small" /> <BitMenuButton Text="Medium" Items="basicItems" Variant="BitVariant.Fill" Size="BitSize.Medium" /> <BitMenuButton Text="Medium" Items="basicItems" Variant="BitVariant.Outline" Size="BitSize.Medium" /> <BitMenuButton Text="Medium" Items="basicItems" Variant="BitVariant.Text" Size="BitSize.Medium" /> <BitMenuButton Text="Large" Items="basicItems" Variant="BitVariant.Fill" Size="BitSize.Large" /> <BitMenuButton Text="Large" Items="basicItems" Variant="BitVariant.Outline" Size="BitSize.Large" /> <BitMenuButton Text="Large" Items="basicItems" Variant="BitVariant.Text" Size="BitSize.Large" />@code { private List<BitMenuButtonItem> basicItems = [ new() { Text = "Item A", Key = "A" }, new() { Text = "Item B", Key = "B", IsEnabled = false }, new() { Text = "Item C", Key = "C" } ]; }
The Size parameter adjusts the size of the menu button among Small, Medium (default), and Large.
Style & Class
<style> .custom-class { margin-inline: 1rem; border-radius: 1rem; border-color: tomato; border-width: 0.25rem; } .custom-class > button { color: tomato; border-color: tomato; background: transparent; } .custom-class > button:hover { background-color: #ff63473b; } .custom-item { color: peachpuff; background-color: tomato; } .custom-button { color: deepskyblue; background: transparent; } .custom-opened .custom-button { color: cornflowerblue; } .custom-callout { border-radius: 1rem; border-color: lightgray; backdrop-filter: blur(20px); background-color: transparent; box-shadow: darkgray 0 0 0.5rem; } .custom-item-button { border-bottom: 1px solid gray; } .custom-item-button:hover { background-color: rgba(255, 255, 255, 0.2); } .custom-callout li:last-child .custom-item-button { border-bottom: none; } </style> <BitMenuButton Text="Styled Button" Items="basicItems" Style="border-radius: 1rem; margin: 1rem; box-shadow: aqua 0 0 1rem; overflow: hidden;" /> <BitMenuButton Text="Classed Button" Items="basicItems" Class="custom-class" Variant="BitVariant.Outline" /> <BitMenuButton Text="Non-Sticky" Items="itemStyleClassItems" Variant="BitVariant.Text" /> <BitMenuButton Text="Sticky" Sticky Items="itemStyleClassItems" Variant="BitVariant.Text" /> <BitMenuButton Text="Classes" Items="basicItems" IconName="@BitIconName.FormatPainter" Variant="BitVariant.Text" Classes="@(new() { OperatorButton = "custom-button", Opened = "custom-opened", Callout = "custom-callout", ItemButton = "custom-item-button" })" /> <BitMenuButton Text="Styles" Items="basicItems" IconName="@BitIconName.Brush" Styles="@(new() { Root = "--button-background: tomato; background: var(--button-background); border-color: var(--button-background); border-radius: 0.25rem;", Opened = "--button-background: orangered;", OperatorButton = "background: var(--button-background);", ItemButton = "background: lightcoral;", Callout = "border-radius: 0.25rem; box-shadow: lightgray 0 0 0.5rem;" })" />@code { private List<BitMenuButtonItem> basicItems = new() { new() { Text = "Item A", Key = "A" }, new() { Text = "Item B", Key = "B", IsEnabled = false }, new() { Text = "Item C", Key = "C" } }; private static List<BitMenuButtonItem> itemStyleClassItems = [ new() { Text = "Item A (Default)", Key = "A", IconName = BitIconName.Emoji, Style = "color: brown" }, new() { Text = "Item C (Styled)", Key = "B", IconName = BitIconName.Emoji, Style = "color: tomato; border-color: brown; background-color: peachpuff;" }, new() { Text = "Item B (Classed)", Key = "C", IconName = BitIconName.Emoji2, Class = "custom-item" } ]; }
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
<BitMenuButton Text="گزینه ها" Dir="BitDir.Rtl" Items="rtlItemsIcon" IconName="@BitIconName.Edit" /> <BitMenuButton Text="گزینه ها" Dir="BitDir.Rtl" Items="rtlItemsIcon" ChevronDownIconName="@BitIconName.DoubleChevronDown" Split />@code { private static List<BitMenuButtonItem> rtlItemsIcon = [ new() { Text = "گزینه الف", Key = "A", IconName = BitIconName.Emoji }, new() { Text = "گزینه ب", Key = "B", IconName = BitIconName.Emoji }, new() { Text = "گزینه ج", Key = "C", IconName = BitIconName.Emoji2 } ]; }
Use the Dir parameter to render the menu button in right-to-left (RTL) direction.
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. |
| 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. |
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
You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.
Or you can review / edit this page on GitHub.