From e3d379665a5561ba10235e55c56fc5486e761c78 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Mon, 11 May 2026 15:02:12 +0330
Subject: [PATCH 1/6] apply BitMenuButton improvements #11007

---
 .../Buttons/MenuButton/BitMenuButton.razor    |   9 +-
 .../Buttons/MenuButton/BitMenuButton.razor.cs |  54 ++++++
 .../Buttons/MenuButton/BitMenuButton.scss     |  36 +++-
 .../MenuButton/BitMenuButtonClassStyles.cs    |   5 +
 .../MenuButton/BitMenuButtonDemo.razor.cs     |  83 ++++++++++
 .../MenuButton/_BitMenuButtonCustomDemo.razor |  71 +++++++-
 .../_BitMenuButtonCustomDemo.razor.cs         |   3 +
 .../_BitMenuButtonCustomDemo.razor.samples.cs | 109 +++++++++++-
 .../MenuButton/_BitMenuButtonItemDemo.razor   |  71 +++++++-
 .../_BitMenuButtonItemDemo.razor.cs           |   3 +
 .../_BitMenuButtonItemDemo.razor.samples.cs   |  77 ++++++++-
 .../MenuButton/_BitMenuButtonOptionDemo.razor | 127 +++++++++++++-
 .../_BitMenuButtonOptionDemo.razor.cs         | 109 +++++++++++-
 .../Components/Buttons/BitMenuButtonTests.cs  | 156 ++++++++++++++++++
 14 files changed, 868 insertions(+), 45 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor
index 2501a04127..6854c47382 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor
@@ -36,7 +36,7 @@
             else
             {
                 var icon = GetIcon(_selectedItem);
-                @if (icon is not null)
+                @if (!NoIcon && icon is not null)
                 {
                     <i style="@Styles?.OperatorButtonIcon" class="@icon.GetCssClasses() @Classes?.OperatorButtonIcon" />
                 }
@@ -54,7 +54,7 @@
             }
             else
             {
-                @if (headerIcon is not null)
+                @if (!NoIcon && headerIcon is not null)
                 {
                     <i style="@Styles?.Icon" class="@headerIcon.GetCssClasses() @Classes?.Icon" />
                 }
@@ -99,10 +99,9 @@
         <ul role="presentation" style="@Styles?.CalloutContainer" class="bit-mnb-cul @Classes?.CalloutContainer">
             @foreach (var (item, idx) in _items.Select((item, idx) => (item, idx)))
             {
-                if (Sticky && item == SelectedItem) continue;
-
                 var template = GetTemplate(item);
                 var isEnabled = GetIsEnabled(item);
+                var isSelected = Sticky && item == SelectedItem;
                 <li role="presentation" @key="@GetItemKey(item, idx.ToString())" style="@Styles?.ItemWrapper" class="@Classes?.ItemWrapper">
                     <button @onclick="() => HandleOnItemClick(item)" @onclick:stopPropagation
                             role="menuitem"
@@ -111,7 +110,7 @@
                             disabled="@(isEnabled is false)"
                             aria-disabled="@(isEnabled is false)"
                             style="@GetStyle(item);@Styles?.ItemButton"
-                            class="bit-mnb-itm @GetClass(item) @Classes?.ItemButton">
+                            class="bit-mnb-itm @(isSelected ? "bit-mnb-sel" : "") @GetClass(item) @Classes?.ItemButton">
                         @if (template is not null)
                         {
                             @template(item)
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs
index 2fa2ffbaa2..d0f4850b39 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs
@@ -36,6 +36,12 @@ public partial class BitMenuButton<TItem> : BitComponentBase where TItem : class
     /// </summary>
     [Parameter] public bool AriaHidden { get; set; }
 
+    /// <summary>
+    /// The background color kind of the callout.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public BitColorKind? Background { get; set; }
+
     /// <summary>
     ///  The value of the type attribute of the menu button.
     /// </summary>
@@ -67,6 +73,11 @@ public partial class BitMenuButton<TItem> : BitComponentBase where TItem : class
     [Parameter, ResetClassBuilder]
     public BitColor? Color { get; set; }
 
+    /// <summary>
+    /// Default value of the IsToggled parameter in toggle mode.
+    /// </summary>
+    [Parameter] public bool? DefaultIsToggled { get; set; }
+
     /// <summary>
     /// Default value of the SelectedItem.
     /// </summary>
@@ -92,6 +103,11 @@ public partial class BitMenuButton<TItem> : BitComponentBase where TItem : class
     /// </summary>
     [Parameter] public string? IconName { get; set; }
 
+    /// <summary>
+    /// If true, removes the icon from the header button.
+    /// </summary>
+    [Parameter] public bool NoIcon { get; set; }
+
     /// <summary>
     /// Determines the opening state of the callout.
     /// </summary>
@@ -100,6 +116,12 @@ public partial class BitMenuButton<TItem> : BitComponentBase where TItem : class
     [ResetClassBuilder, ResetStyleBuilder, TwoWayBound]
     public bool IsOpen { get; set; }
 
+    /// <summary>
+    /// Determines whether the header button is in the checked/toggled state when Toggle is enabled.
+    /// </summary>
+    [Parameter, ResetClassBuilder, TwoWayBound]
+    public bool IsToggled { get; set; }
+
     /// <summary>
     ///  List of items to show in the menu button.
     /// </summary>
@@ -125,6 +147,11 @@ public partial class BitMenuButton<TItem> : BitComponentBase where TItem : class
     /// </summary>
     [Parameter] public EventCallback<TItem> OnChange { get; set; }
 
+    /// <summary>
+    /// The callback that is called when the IsToggled value changes in toggle mode.
+    /// </summary>
+    [Parameter] public EventCallback<bool> OnToggleChange { get; set; }
+
     /// <summary>
     /// Alias of the ChildContent.
     /// </summary>
@@ -148,6 +175,11 @@ public partial class BitMenuButton<TItem> : BitComponentBase where TItem : class
     [Parameter, ResetClassBuilder]
     public bool Split { get; set; }
 
+    /// <summary>
+    /// If true, enables the toggling behavior on the header button in split mode.
+    /// </summary>
+    [Parameter] public bool Toggle { get; set; }
+
     /// <summary>
     /// If true, the selected item is going to change the header item.
     /// </summary>
@@ -250,8 +282,19 @@ protected override void RegisterCssClasses()
             _ => "bit-mnb-md"
         });
 
+        ClassBuilder.Register(() => Background switch
+        {
+            BitColorKind.Primary => "bit-mnb-bpg",
+            BitColorKind.Secondary => "bit-mnb-bsg",
+            BitColorKind.Tertiary => "bit-mnb-btg",
+            BitColorKind.Transparent => "bit-mnb-brg",
+            _ => null
+        });
+
         ClassBuilder.Register(() => Split ? "bit-mnb-spl" : "bit-mnb-nsp");
 
+        ClassBuilder.Register(() => Toggle && IsToggled ? $"bit-mnb-tgl {Classes?.Toggled}" : string.Empty);
+
         ClassBuilder.Register(() => Variant switch
         {
             BitVariant.Fill => "bit-mnb-fil",
@@ -272,6 +315,11 @@ protected override async Task OnInitializedAsync()
     {
         _calloutId = $"BitMenuButton-{UniqueId}-callout";
 
+        if (Toggle && IsToggledHasBeenSet is false && DefaultIsToggled.HasValue)
+        {
+            await AssignIsToggled(DefaultIsToggled.Value);
+        }
+
         if (Sticky && SelectedItemHasBeenSet is false && DefaultSelectedItem is not null)
         {
             await AssignSelectedItem(DefaultSelectedItem);
@@ -534,6 +582,12 @@ private async Task HandleOnHeaderClick(TItem? item)
             await OpenCallout();
         }
 
+        if (Toggle && Split)
+        {
+            await AssignIsToggled(!IsToggled);
+            await OnToggleChange.InvokeAsync(IsToggled);
+        }
+
         if (item is not null)
         {
             if (GetIsEnabled(item) is false) return;
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scss b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scss
index ed6c18c215..20d7038626 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scss
@@ -79,6 +79,13 @@
     --bit-mnb-clr-chb-bg: var(--bit-mnb-clr-active);
 }
 
+.bit-mnb-tgl {
+    .bit-mnb-opb {
+        color: var(--bit-mnb-clr-txt);
+        background-color: var(--bit-mnb-clr-active);
+    }
+}
+
 .bit-mnb-nsp {
     --bit-mnb-clr-opb-txt-nsp: var(--bit-mnb-clr-txt);
     --bit-mnb-clr-opb-bg-nsp: var(--bit-mnb-clr-active);
@@ -110,7 +117,7 @@
     min-width: max-content;
     box-sizing: border-box;
     z-index: $zindex-callout;
-    background-color: $clr-bg-pri;
+    background-color: var(--bit-mnb-cal-bg, #{$clr-bg-pri});
     opacity: var(--bit-mnb-cal-opa);
     box-shadow: $box-shadow-callout;
     transform: var(--bit-mnb-cal-tra);
@@ -158,6 +165,16 @@
     }
 }
 
+.bit-mnb-sel {
+    background-color: $clr-bg-sec;
+
+    @media (hover: hover) {
+        &:hover {
+            background-color: $clr-bg-pri-hover;
+        }
+    }
+}
+
 .bit-mnb-iic {
     color: inherit;
 }
@@ -346,3 +363,20 @@
     font-size: spacing(2.0);
     --bit-mnb-padding: #{spacing(1.0)} #{spacing(2.0)};
 }
+
+
+.bit-mnb-bpg {
+    --bit-mnb-cal-bg: #{$clr-bg-pri};
+}
+
+.bit-mnb-bsg {
+    --bit-mnb-cal-bg: #{$clr-bg-sec};
+}
+
+.bit-mnb-btg {
+    --bit-mnb-cal-bg: #{$clr-bg-ter};
+}
+
+.bit-mnb-brg {
+    --bit-mnb-cal-bg: transparent;
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButtonClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButtonClassStyles.cs
index 800ae295e1..8aebd5c1a2 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButtonClassStyles.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButtonClassStyles.cs
@@ -7,6 +7,11 @@ public class BitMenuButtonClassStyles
     /// </summary>
     public string? Root { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the checked/toggled state of the BitMenuButton.
+    /// </summary>
+    public string? Toggled { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the opened callout state of the BitMenuButton.
     /// </summary>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/BitMenuButtonDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/BitMenuButtonDemo.razor.cs
index 88b94826ff..c80406d946 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/BitMenuButtonDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/BitMenuButtonDemo.razor.cs
@@ -19,6 +19,15 @@ public partial class BitMenuButtonDemo
             Description = "If true, add an aria-hidden attribute instructing screen readers to ignore the menu button."
         },
         new()
+        {
+            Name = "Background",
+            Type = "BitColorKind?",
+            DefaultValue = "null",
+            Description = "The background color kind of the callout.",
+            LinkType = LinkType.Link,
+            Href = "#color-kind-enum",
+        },
+        new()
         {
             Name = "ButtonType",
             Type = "BitButtonType?",
@@ -76,6 +85,13 @@ public partial class BitMenuButtonDemo
             Description = "Default value of the SelectedItem."
         },
         new()
+        {
+            Name = "DefaultIsToggled",
+            Type = "bool?",
+            DefaultValue = "null",
+            Description = "Default value of the IsToggled parameter in toggle mode.",
+        },
+        new()
         {
             Name = "HeaderTemplate",
             Type = "RenderFragment?",
@@ -106,6 +122,13 @@ public partial class BitMenuButtonDemo
             Description = "Determines the opening state of the callout.",
         },
         new()
+        {
+            Name = "IsToggled",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Determines whether the header button is in the toggled state when Toggle is enabled.",
+        },
+        new()
         {
             Name = "Items",
             Type = "IEnumerable<TItem>",
@@ -131,6 +154,13 @@ public partial class BitMenuButtonDemo
             Href = "#name-selectors",
         },
         new()
+        {
+            Name = "NoIcon",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "If true, the icon of the header button is hidden.",
+        },
+        new()
         {
             Name = "OnClick",
             Type = "EventCallback<MouseEventArgs>",
@@ -143,6 +173,12 @@ public partial class BitMenuButtonDemo
             Description = "The callback that is called when the selected item has changed."
         },
         new()
+        {
+            Name = "OnToggleChange",
+            Type = "EventCallback<bool>",
+            Description = "The callback that is called when the IsToggled value changes in toggle mode.",
+        },
+        new()
         {
             Name = "Options",
             Type = "RenderFragment?",
@@ -196,6 +232,13 @@ public partial class BitMenuButtonDemo
             Description = "The text to show inside the header of menu button."
         },
         new()
+        {
+            Name = "Toggle",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "If true, enables toggle behavior on the header button in Split mode.",
+        },
+        new()
         {
             Name = "Variant",
             Type = "BitVariant?",
@@ -493,6 +536,13 @@ public partial class BitMenuButtonDemo
                    DefaultValue = "null",
                    Description = "Custom CSS classes/styles for the text of the BitMenuButton."
                },
+               new()
+               {
+                   Name = "Toggled",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the toggled state of the BitMenuButton."
+               },
             ],
         },
         new()
@@ -637,6 +687,39 @@ public partial class BitMenuButtonDemo
 
     private readonly List<ComponentSubEnum> componentSubEnums =
     [
+        new()
+        {
+            Id = "color-kind-enum",
+            Name = "BitColorKind",
+            Description = "Defines the color kinds available in the bit BlazorUI.",
+            Items =
+            [
+                new()
+                {
+                    Name = "Primary",
+                    Description = "The primary color kind.",
+                    Value = "0",
+                },
+                new()
+                {
+                    Name = "Secondary",
+                    Description = "The secondary color kind.",
+                    Value = "1",
+                },
+                new()
+                {
+                    Name = "Tertiary",
+                    Description = "The tertiary color kind.",
+                    Value = "2",
+                },
+                new()
+                {
+                    Name = "Transparent",
+                    Description = "The transparent color kind.",
+                    Value = "3",
+                },
+            ]
+        },
         new()
         {
             Id = "button-type-enum",
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor
index d6b843a0a2..3ae9a085ed 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor
@@ -336,7 +336,68 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Templates" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
+<DemoExample Title="Background" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
+    <div>Use the Background parameter to control the background color of the callout using BitColorKind values.</div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="Primary" Items="basicCustoms" NameSelectors="nameSelectors" Background="BitColorKind.Primary" />
+        <BitMenuButton Text="Secondary" Items="basicCustoms" NameSelectors="nameSelectors" Background="BitColorKind.Secondary" />
+        <BitMenuButton Text="Tertiary" Items="basicCustoms" NameSelectors="nameSelectors" Background="BitColorKind.Tertiary" />
+        <BitMenuButton Text="Transparent" Items="basicCustoms" NameSelectors="nameSelectors" Background="BitColorKind.Transparent" />
+    </div>
+</DemoExample>
+
+<DemoExample Title="Toggle" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
+    <div>Enable toggle behavior on the header button in Split mode. Clicking the operator button will toggle the IsToggled state instead of opening the callout.</div>
+    <br />
+    <div>Toggle:</div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="Toggle" Items="basicCustoms" NameSelectors="nameSelectors" Split Toggle />
+    </div>
+    <br /><br />
+    <div>DefaultIsToggled:</div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="DefaultIsToggled" Items="basicCustoms" NameSelectors="nameSelectors" Split Toggle DefaultIsToggled="true" />
+    </div>
+    <br /><br />
+    <div>Two-way binding:</div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="Two-way" Items="basicCustoms" NameSelectors="nameSelectors" Split Toggle @bind-IsToggled="customIsToggled" />
+        <BitCheckbox Label="IsToggled" @bind-Value="customIsToggled" />
+    </div>
+    <br /><br />
+    <div>OnToggleChange: @customToggledValue</div>
+    <br />
+    <BitMenuButton Text="OnToggleChange" Items="basicCustoms" NameSelectors="nameSelectors" Split Toggle OnToggleChange="v => customToggledValue = v" />
+</DemoExample>
+
+<DemoExample Title="NoIcon" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
+    <div>Use the NoIcon parameter to hide the header icon of the menu button.</div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="With icon" Items="basicIconCustoms" NameSelectors="nameSelectors" IconName="@BitIconName.Edit" />
+        <BitMenuButton Text="No icon" Items="basicIconCustoms" NameSelectors="nameSelectors" IconName="@BitIconName.Edit" NoIcon />
+    </div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Sticky Items="basicIconCustoms" NameSelectors="nameSelectors" />
+        <BitMenuButton Sticky Items="basicIconCustoms" NameSelectors="nameSelectors" NoIcon />
+    </div>
+</DemoExample>
+
+<DemoExample Title="SelectedItem" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
+    <div>In Sticky mode, the currently selected item is visually highlighted in the callout with a distinct background color.</div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Sticky Items="isSelectedCustoms" NameSelectors="nameSelectors" />
+        <BitMenuButton Sticky Split Items="isSelectedCustoms" NameSelectors="nameSelectors" />
+    </div>
+</DemoExample>
+
+<DemoExample Title="Templates" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
     <div>Explore BitMenuButton's customization capabilities.</div>
     <div>Note that if <strong>Sticky</strong> set to true, HeaderTemplate and Text will be ignored.</div>
     <br />
@@ -362,7 +423,7 @@
     <BitMenuButton Text="Customs" Items="itemTemplateCustoms2" NameSelectors="nameSelectors" />
 </DemoExample>
 
-<DemoExample Title="Events" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
+<DemoExample Title="Events" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
     <div>Demonstrate BitMenuButton instances highlighting item click events, offering versatile interactions within the menu buttons.</div>
     <br />
     <div>
@@ -393,7 +454,7 @@
     <div>Clicked custom item: @eventsClickedCustom</div>
 </DemoExample>
 
-<DemoExample Title="Binding" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
+<DemoExample Title="Binding" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
     <div>This example demonstrates different ways to handle item selection and changes within the component.</div>
     <br /><br /><br /><br />
     <div>
@@ -430,7 +491,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="External Icons" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
+<DemoExample Title="External Icons" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16">
     <div>External icon libraries like FontAwesome can be used with the Icon parameter.</div>
     
     <br />
@@ -489,7 +550,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="RTL" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
+<DemoExample Title="RTL" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17">
     <div>Use BitMenuButton in right-to-left (RTL).</div>
     <br />
     <div class="example-content" dir="rtl">
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.cs
index ab0b805ed3..4335d7b18e 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.cs
@@ -5,6 +5,9 @@ public partial class _BitMenuButtonCustomDemo
     private string? eventsChangedCustom;
     private string? eventsClickedCustom;
 
+    private bool customIsToggled;
+    private bool customToggledValue;
+
     private Operation twoWaySelectedCustom = default!;
 
     private bool oneWayIsOpen;
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cs
index 62f08f2ef3..9f98188206 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cs
@@ -468,6 +468,97 @@ public class Operation
 };";
 
     private readonly string example9RazorCode = @"
+<BitMenuButton Text=""Primary"" Items=""basicCustoms"" NameSelectors=""nameSelectors"" Background=""BitColorKind.Primary"" />
+<BitMenuButton Text=""Secondary"" Items=""basicCustoms"" NameSelectors=""nameSelectors"" Background=""BitColorKind.Secondary"" />
+<BitMenuButton Text=""Tertiary"" Items=""basicCustoms"" NameSelectors=""nameSelectors"" Background=""BitColorKind.Tertiary"" />
+<BitMenuButton Text=""Transparent"" Items=""basicCustoms"" NameSelectors=""nameSelectors"" Background=""BitColorKind.Transparent"" />";
+    private readonly string example9CsharpCode = @"
+private List<Operation> basicCustoms =
+[
+    new() { Name = ""Custom A"", Id = ""A"" },
+    new() { Name = ""Custom B"", Id = ""B"", Disabled = true },
+    new() { Name = ""Custom C"", Id = ""C"" }
+];
+
+private BitMenuButtonNameSelectors<Operation> nameSelectors = new()
+{
+    Text = { Name = nameof(Operation.Name) },
+    Key = { Name = nameof(Operation.Id) },
+    IconName = { Name = nameof(Operation.Image) },
+    IsEnabled = { Selector = m => m.Disabled is false }
+};";
+
+    private readonly string example10RazorCode = @"
+<BitMenuButton Text=""Toggle"" Items=""basicCustoms"" NameSelectors=""nameSelectors"" Split Toggle />
+
+<BitMenuButton Text=""DefaultIsToggled"" Items=""basicCustoms"" NameSelectors=""nameSelectors"" Split Toggle DefaultIsToggled=""true"" />
+
+<BitMenuButton Text=""Two-way"" Items=""basicCustoms"" NameSelectors=""nameSelectors"" Split Toggle @bind-IsToggled=""customIsToggled"" />
+<BitCheckbox Label=""IsToggled"" @bind-Value=""customIsToggled"" />
+
+<div>OnToggleChange: @customToggledValue</div>
+<BitMenuButton Text=""OnToggleChange"" Items=""basicCustoms"" NameSelectors=""nameSelectors"" Split Toggle OnToggleChange=""v => customToggledValue = v"" />";
+    private readonly string example10CsharpCode = @"
+private bool customIsToggled;
+private bool customToggledValue;
+
+private List<Operation> basicCustoms =
+[
+    new() { Name = ""Custom A"", Id = ""A"" },
+    new() { Name = ""Custom B"", Id = ""B"", Disabled = true },
+    new() { Name = ""Custom C"", Id = ""C"" }
+];
+
+private BitMenuButtonNameSelectors<Operation> nameSelectors = new()
+{
+    Text = { Name = nameof(Operation.Name) },
+    Key = { Name = nameof(Operation.Id) },
+    IconName = { Name = nameof(Operation.Image) },
+    IsEnabled = { Selector = m => m.Disabled is false }
+};";
+
+    private readonly string example11RazorCode = @"
+<BitMenuButton Text=""With icon"" Items=""basicIconCustoms"" NameSelectors=""nameSelectors"" IconName=""@BitIconName.Edit"" />
+<BitMenuButton Text=""No icon"" Items=""basicIconCustoms"" NameSelectors=""nameSelectors"" IconName=""@BitIconName.Edit"" NoIcon />
+
+<BitMenuButton Sticky Items=""basicIconCustoms"" NameSelectors=""nameSelectors"" />
+<BitMenuButton Sticky Items=""basicIconCustoms"" NameSelectors=""nameSelectors"" NoIcon />";
+    private readonly string example11CsharpCode = @"
+private List<Operation> basicIconCustoms =
+[
+    new() { Name = ""Custom A"", Id = ""A"", Image = BitIconName.Emoji },
+    new() { Name = ""Custom B"", Id = ""B"", Image = BitIconName.Emoji, Disabled = true },
+    new() { Name = ""Custom C"", Id = ""C"", Image = BitIconName.Emoji2 }
+];
+
+private BitMenuButtonNameSelectors<Operation> nameSelectors = new()
+{
+    Text = { Name = nameof(Operation.Name) },
+    Key = { Name = nameof(Operation.Id) },
+    IconName = { Name = nameof(Operation.Image) },
+    IsEnabled = { Selector = m => m.Disabled is false }
+};";
+
+    private readonly string example12RazorCode = @"
+<BitMenuButton Sticky Items=""isSelectedCustoms"" NameSelectors=""nameSelectors"" />
+<BitMenuButton Sticky Split Items=""isSelectedCustoms"" NameSelectors=""nameSelectors"" />";
+    private readonly string example12CsharpCode = @"
+private static List<Operation> isSelectedCustoms =
+[
+    new() { Name = ""Custom A"", Id = ""A"", Image = BitIconName.Emoji },
+    new() { Name = ""Custom B"", Id = ""B"", Image = BitIconName.Emoji },
+    new() { Name = ""Custom C"", Id = ""C"", Image = BitIconName.Emoji2, IsSelected = true }
+];
+
+private BitMenuButtonNameSelectors<Operation> nameSelectors = new()
+{
+    Text = { Name = nameof(Operation.Name) },
+    Key = { Name = nameof(Operation.Id) },
+    IconName = { Name = nameof(Operation.Image) },
+    IsEnabled = { Selector = m => m.Disabled is false }
+};";
+
+    private readonly string example13RazorCode = @"
 <style>
     .item-template-box {
         display: flex;
@@ -493,7 +584,7 @@ Custom Header!
 </BitMenuButton>
 
 <BitMenuButton Text=""Customs"" Items=""itemTemplateCustoms2"" NameSelectors=""nameSelectors"" />";
-    private readonly string example9CsharpCode = @"
+    private readonly string example13CsharpCode = @"
 public class Operation
 {
     public string? Id { get; set; }
@@ -545,7 +636,7 @@ public class Operation
     Template = { Name = nameof(Operation.Fragment) }
 };";
 
-    private readonly string example10RazorCode = @"
+    private readonly string example14RazorCode = @"
 <BitMenuButton Text=""Customs"" Items=""basicCustoms"" NameSelectors=""nameSelectors""
                OnChange=""(Operation item) => eventsChangedCustom = item?.Id""
                OnClick=""(Operation item) => eventsClickedCustom = item?.Id"" />
@@ -564,7 +655,7 @@ public class Operation
 
 <div>Changed custom item: @eventsChangedCustom</div>
 <div>Clicked custom item: @eventsClickedCustom</div>";
-    private readonly string example10CsharpCode = @"
+    private readonly string example14CsharpCode = @"
 public class Operation
 {
     public string? Id { get; set; }
@@ -595,7 +686,7 @@ public class Operation
     IsEnabled = { Selector = m => m.Disabled is false }
 };";
 
-    private readonly string example11RazorCode = @"
+    private readonly string example15RazorCode = @"
 <BitMenuButton Split Sticky Items=""basicCustoms"" DefaultSelectedItem=""basicCustoms[1]"" NameSelectors=""nameSelectors"" />
 
 <BitMenuButton Sticky Items=""basicCustoms"" NameSelectors=""nameSelectors"" @bind-SelectedItem=""twoWaySelectedCustom"" />
@@ -608,7 +699,7 @@ public class Operation
 
 <BitMenuButton Sticky Items=""basicCustoms"" NameSelectors=""nameSelectors"" @bind-IsOpen=""twoWayIsOpen"" />
 <BitCheckbox Label=""Two-way IsOpen"" @bind-Value=""twoWayIsOpen"" />";
-    private readonly string example11CsharpCode = @"
+    private readonly string example15CsharpCode = @"
 private Operation twoWaySelectedCustom = default!;
 private bool oneWayIsOpen;
 private bool twoWayIsOpen;
@@ -643,7 +734,7 @@ public class Operation
     IsEnabled = { Selector = m => m.Disabled is false }
 };";
 
-    private readonly string example12RazorCode = @"
+    private readonly string example16RazorCode = @"
 <link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
 
 <BitMenuButton Text=""Actions""
@@ -690,7 +781,7 @@ public class Operation
                Items=""externalIconCustoms""
                NameSelectors=""nameSelectors2""
                Icon=""@BitIconInfo.Fa(""brands github"")"" />";
-    private readonly string example12CsharpCode = @"
+    private readonly string example16CsharpCode = @"
 public class Operation
 {
     public string? Id { get; set; }
@@ -715,10 +806,10 @@ public class Operation
     IsEnabled = { Selector = m => m.Disabled is false }
 };";
 
-    private readonly string example13RazorCode = @"
+    private readonly string example17RazorCode = @"
 <BitMenuButton Text=""گزینه ها"" Dir=""BitDir.Rtl"" Items=""rtlCustoms"" IconName=""@BitIconName.Edit"" NameSelectors=""nameSelectors"" />
 <BitMenuButton Text=""گرینه ها"" Dir=""BitDir.Rtl"" Items=""rtlCustoms"" ChevronDownIconName=""@BitIconName.DoubleChevronDown"" NameSelectors=""nameSelectors"" Split />";
-    private readonly string example13CsharpCode = @"
+    private readonly string example17CsharpCode = @"
 public class Operation
 {
     public string? Id { get; set; }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor
index 342c1fb086..fdc240b83f 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor
@@ -334,7 +334,68 @@
                                       Callout = "border-radius: 0.25rem; box-shadow: lightgray 0 0 0.5rem;" })" />
 </DemoExample>
 
-<DemoExample Title="Templates" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
+<DemoExample Title="Background" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
+    <div>Use the Background parameter to control the background color of the callout using BitColorKind values.</div>
+    <br />
+    <div class="example-content">
+        <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" />
+    </div>
+</DemoExample>
+
+<DemoExample Title="Toggle" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
+    <div>Enable toggle behavior on the header button in Split mode. Clicking the operator button will toggle the IsToggled state instead of opening the callout.</div>
+    <br />
+    <div>Toggle:</div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="Toggle" Items="basicItems" Split Toggle />
+    </div>
+    <br /><br />
+    <div>DefaultIsToggled:</div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="DefaultIsToggled" Items="basicItems" Split Toggle DefaultIsToggled="true" />
+    </div>
+    <br /><br />
+    <div>Two-way binding:</div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="Two-way" Items="basicItems" Split Toggle @bind-IsToggled="itemIsToggled" />
+        <BitCheckbox Label="IsToggled" @bind-Value="itemIsToggled" />
+    </div>
+    <br /><br />
+    <div>OnToggleChange: @itemToggledValue</div>
+    <br />
+    <BitMenuButton Text="OnToggleChange" Items="basicItems" Split Toggle OnToggleChange="v => itemToggledValue = v" />
+</DemoExample>
+
+<DemoExample Title="NoIcon" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
+    <div>Use the NoIcon parameter to hide the header icon of the menu button.</div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="With icon" Items="basicItemsIcon" IconName="@BitIconName.Edit" />
+        <BitMenuButton Text="No icon" Items="basicItemsIcon" IconName="@BitIconName.Edit" NoIcon />
+    </div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Sticky Items="basicItemsIcon" />
+        <BitMenuButton Sticky Items="basicItemsIcon" NoIcon />
+    </div>
+</DemoExample>
+
+<DemoExample Title="SelectedItem" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
+    <div>In Sticky mode, the currently selected item is visually highlighted in the callout with a distinct background color.</div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Sticky Items="isSelectedItems" />
+        <BitMenuButton Sticky Split Items="isSelectedItems" />
+    </div>
+</DemoExample>
+
+<DemoExample Title="Templates" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
     <div>Explore BitMenuButton's customization capabilities.</div>
     <div>Note that if <strong>Sticky</strong> set to true, HeaderTemplate and Text will be ignored.</div>
     <br />
@@ -360,7 +421,7 @@
     <BitMenuButton Text="Items" Items="itemTemplateItems2" />
 </DemoExample>
 
-<DemoExample Title="Events" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
+<DemoExample Title="Events" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
     <div>Demonstrate BitMenuButton instances highlighting item click events, offering versatile interactions within the menu buttons.</div>
     <br />
     <div>Non-Sticky</div>
@@ -389,7 +450,7 @@
     <div>Clicked item: @eventsClickedItem</div>
 </DemoExample>
 
-<DemoExample Title="Binding" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
+<DemoExample Title="Binding" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
     <div>This example demonstrates different ways to handle item selection and changes within the component.</div>
     <br /><br /><br /><br />
     <div>
@@ -426,7 +487,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="External Icons" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
+<DemoExample Title="External Icons" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16">
     <div>External icon libraries like FontAwesome can be used with the Icon parameter.</div>
     
     <br />
@@ -479,7 +540,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="RTL" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
+<DemoExample Title="RTL" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17">
     <div>Use BitMenuButton in right-to-left (RTL).</div>
     <br />
     <div class="example-content" dir="rtl">
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.cs
index f9f36ab3e5..cba6af7f12 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.cs
@@ -5,6 +5,9 @@ public partial class _BitMenuButtonItemDemo
     private string? eventsChangedItem;
     private string? eventsClickedItem;
 
+    private bool itemIsToggled;
+    private bool itemToggledValue;
+
     private BitMenuButtonItem twoWaySelectedItem = default!;
 
     private bool oneWayIsOpen;
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cs
index 3b12ba5081..36acb3ba6f 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cs
@@ -347,6 +347,65 @@ public partial class _BitMenuButtonItemDemo
 ];";
 
     private readonly string example9RazorCode = @"
+<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"" />";
+    private readonly string example9CsharpCode = @"
+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 readonly string example10RazorCode = @"
+<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"" />";
+    private readonly string example10CsharpCode = @"
+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"" }
+];";
+
+    private readonly string example11RazorCode = @"
+<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 />";
+    private readonly string example11CsharpCode = @"
+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 }
+];";
+
+    private readonly string example12RazorCode = @"
+<BitMenuButton Sticky Items=""isSelectedItems"" />
+<BitMenuButton Sticky Split Items=""isSelectedItems"" />";
+    private readonly string example12CsharpCode = @"
+private static 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 }
+];";
+
+    private readonly string example13RazorCode = @"
 <style>
     .item-template-box {
         display: flex;
@@ -372,7 +431,7 @@ Custom Header!
 </BitMenuButton>
 
 <BitMenuButton Text=""Items"" Items=""itemTemplateItems2"" />";
-    private readonly string example9CsharpCode = @"
+    private readonly string example13CsharpCode = @"
 private List<BitMenuButtonItem> basicItems =
 [
     new() { Text = ""Item A"", Key = ""A"" },
@@ -406,7 +465,7 @@ Custom Header!
     }
 ];";
 
-    private readonly string example10RazorCode = @"
+    private readonly string example14RazorCode = @"
 <BitMenuButton Text=""Items"" Items=""basicItems""
                OnChange=""(BitMenuButtonItem item) => eventsChangedItem = item?.Key""
                OnClick=""(BitMenuButtonItem item) => eventsClickedItem = item?.Key"" />
@@ -427,7 +486,7 @@ Custom Header!
 
 <div>Clicked item: @eventsClickedItem</div>
 <div>Changed item: @eventsChangedItem</div>";
-    private readonly string example10CsharpCode = @"
+    private readonly string example14CsharpCode = @"
 private string? eventsClickedItem;
 private string? eventsChangedItem;
 
@@ -456,7 +515,7 @@ protected override void OnInitialized()
     basicItemsOnClick.ForEach(i => i.OnClick = onClick);
 }";
 
-    private readonly string example11RazorCode = @"
+    private readonly string example15RazorCode = @"
 <BitMenuButton Split Sticky Items=""basicItems"" DefaultSelectedItem=""basicItems[1]"" />
 
 <BitMenuButton Sticky Items=""basicItems"" @bind-SelectedItem=""twoWaySelectedItem"" />
@@ -469,7 +528,7 @@ protected override void OnInitialized()
 
 <BitMenuButton Sticky Items=""basicItems"" @bind-IsOpen=""twoWayIsOpen"" />
 <BitCheckbox Label=""Two-way IsOpen"" @bind-Value=""twoWayIsOpen"" />";
-    private readonly string example11CsharpCode = @"
+    private readonly string example15CsharpCode = @"
 private BitMenuButtonItem twoWaySelectedItem = default!;
 private bool oneWayIsOpen;
 private bool twoWayIsOpen;
@@ -496,7 +555,7 @@ protected override void OnInitialized()
     twoWaySelectedItem = basicItems[2];
 }";
 
-    private readonly string example12RazorCode = @"
+    private readonly string example16RazorCode = @"
 <link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
 
 <BitMenuButton Text=""Actions"" 
@@ -537,7 +596,7 @@ protected override void OnInitialized()
                Color=""BitColor.Tertiary""
                Variant=""BitVariant.Text"" 
                Icon=""@BitIconInfo.Fa(""brands github"")"" />";
-    private readonly string example12CsharpCode = @"
+    private readonly string example16CsharpCode = @"
 private static List<BitMenuButtonItem> externalIconItems =
 [
     new() { Text = ""Add"", Icon = ""fa-solid fa-plus"" },
@@ -545,10 +604,10 @@ protected override void OnInitialized()
     new() { Text = ""Delete"", Icon = BitIconInfo.Fa(""solid trash"") }
 ];";
 
-    private readonly string example13RazorCode = @"
+    private readonly string example17RazorCode = @"
 <BitMenuButton Text=""گزینه ها"" Dir=""BitDir.Rtl"" Items=""rtlItemsIcon"" IconName=""@BitIconName.Edit"" />
 <BitMenuButton Text=""گزینه ها"" Dir=""BitDir.Rtl"" Items=""rtlItemsIcon"" ChevronDownIconName=""@BitIconName.DoubleChevronDown"" Split />";
-    private readonly string example13CsharpCode = @"
+    private readonly string example17CsharpCode = @"
  private static List<BitMenuButtonItem> rtlItemsIcon =
 [
     new() { Text = ""گزینه الف"", Key = ""A"", IconName = BitIconName.Emoji },
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor
index ec51515222..f99e424bb1 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor
@@ -962,7 +962,124 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Templates" RazorCode="@example9RazorCode" Id="example9">
+<DemoExample Title="Background" RazorCode="@example9RazorCode" Id="example9">
+    <div>Use the Background parameter to control the background color of the callout using BitColorKind values.</div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="Primary" TItem="BitMenuButtonOption" Background="BitColorKind.Primary">
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
+        </BitMenuButton>
+        <BitMenuButton Text="Secondary" TItem="BitMenuButtonOption" Background="BitColorKind.Secondary">
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
+        </BitMenuButton>
+        <BitMenuButton Text="Tertiary" TItem="BitMenuButtonOption" Background="BitColorKind.Tertiary">
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
+        </BitMenuButton>
+        <BitMenuButton Text="Transparent" TItem="BitMenuButtonOption" Background="BitColorKind.Transparent">
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
+        </BitMenuButton>
+    </div>
+</DemoExample>
+
+<DemoExample Title="Toggle" RazorCode="@example10RazorCode" Id="example10">
+    <div>Enable toggle behavior on the header button in Split mode. Clicking the operator button will toggle the IsToggled state instead of opening the callout.</div>
+    <br />
+    <div>Toggle:</div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="Toggle" TItem="BitMenuButtonOption" Split Toggle>
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
+        </BitMenuButton>
+    </div>
+    <br /><br />
+    <div>DefaultIsToggled:</div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="DefaultIsToggled" TItem="BitMenuButtonOption" Split Toggle DefaultIsToggled="true">
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
+        </BitMenuButton>
+    </div>
+    <br /><br />
+    <div>Two-way binding:</div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="Two-way" TItem="BitMenuButtonOption" Split Toggle @bind-IsToggled="optionIsToggled">
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
+        </BitMenuButton>
+        <BitCheckbox Label="IsToggled" @bind-Value="optionIsToggled" />
+    </div>
+    <br /><br />
+    <div>OnToggleChange: @optionToggledValue</div>
+    <br />
+    <BitMenuButton Text="OnToggleChange" TItem="BitMenuButtonOption" Split Toggle OnToggleChange="v => optionToggledValue = v">
+        <BitMenuButtonOption Text="Option A" Key="A" />
+        <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+        <BitMenuButtonOption Text="Option C" Key="C" />
+    </BitMenuButton>
+</DemoExample>
+
+<DemoExample Title="NoIcon" RazorCode="@example11RazorCode" Id="example11">
+    <div>Use the NoIcon parameter to hide the header icon of the menu button.</div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="With icon" TItem="BitMenuButtonOption" IconName="@BitIconName.Edit">
+            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" />
+            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" />
+        </BitMenuButton>
+        <BitMenuButton Text="No icon" TItem="BitMenuButtonOption" IconName="@BitIconName.Edit" NoIcon>
+            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" />
+            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" />
+        </BitMenuButton>
+    </div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Sticky TItem="BitMenuButtonOption">
+            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" />
+            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" />
+        </BitMenuButton>
+        <BitMenuButton Sticky TItem="BitMenuButtonOption" NoIcon>
+            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" />
+            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" />
+        </BitMenuButton>
+    </div>
+</DemoExample>
+
+<DemoExample Title="SelectedItem" RazorCode="@example12RazorCode" Id="example12">
+    <div>In Sticky mode, the currently selected item is visually highlighted in the callout with a distinct background color.</div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Sticky TItem="BitMenuButtonOption">
+            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" />
+            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" />
+            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" IsSelected="true" />
+        </BitMenuButton>
+        <BitMenuButton Sticky Split TItem="BitMenuButtonOption">
+            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" />
+            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" />
+            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" IsSelected="true" />
+        </BitMenuButton>
+    </div>
+</DemoExample>
+
+<DemoExample Title="Templates" RazorCode="@example13RazorCode" Id="example13">
     <div>Explore BitMenuButton's customization capabilities.</div>
     <div>Note that if <strong>Sticky</strong> set to true, HeaderTemplate and Text will be ignored.</div>
     <br />
@@ -1008,7 +1125,7 @@
     </BitMenuButton>
 </DemoExample>
 
-<DemoExample Title="Events" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
+<DemoExample Title="Events" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
     <div>Demonstrate BitMenuButton instances highlighting item click events, offering versatile interactions within the menu buttons.</div>
     <br />
     <div>Non-Sticky</div>
@@ -1053,7 +1170,7 @@
     <div>Clicked option: @exampleClickedOption</div>
 </DemoExample>
 
-<DemoExample Title="Binding" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
+<DemoExample Title="Binding" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
     <div>This example demonstrates different ways to handle item selection and changes within the component.</div>
     <br /><br /><br /><br />
     <div>
@@ -1110,7 +1227,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="External Icons" RazorCode="@example12RazorCode" Id="example12">
+<DemoExample Title="External Icons" RazorCode="@example16RazorCode" Id="example16">
     <div>External icon libraries like FontAwesome can be used with the Icon parameter.</div>
     
     <br />
@@ -1190,7 +1307,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="RTL" RazorCode="@example13RazorCode" Id="example13">
+<DemoExample Title="RTL" RazorCode="@example17RazorCode" Id="example17">
     <div>Use BitMenuButton in right-to-left (RTL).</div>
     <br />
     <div class="example-content" dir="rtl">
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor.cs
index 3fcfeafb16..cc79605f6a 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor.cs
@@ -10,6 +10,9 @@ public partial class _BitMenuButtonOptionDemo
     private bool oneWayIsOpen;
     private bool twoWayIsOpen;
 
+    private bool optionIsToggled;
+    private bool optionToggledValue;
+
     private BitMenuButtonOption optionA = default!;
     private BitMenuButtonOption optionB = default!;
     private BitMenuButtonOption optionC = default!;
@@ -893,6 +896,100 @@ public partial class _BitMenuButtonOptionDemo
 </BitMenuButton>";
 
     private readonly string example9RazorCode = @"
+<BitMenuButton Text=""Primary"" TItem=""BitMenuButtonOption"" Background=""BitColorKind.Primary"">
+    <BitMenuButtonOption Text=""Option A"" Key=""A"" />
+    <BitMenuButtonOption Text=""Option B"" Key=""B"" IsEnabled=""false"" />
+    <BitMenuButtonOption Text=""Option C"" Key=""C"" />
+</BitMenuButton>
+
+<BitMenuButton Text=""Secondary"" TItem=""BitMenuButtonOption"" Background=""BitColorKind.Secondary"">
+    <BitMenuButtonOption Text=""Option A"" Key=""A"" />
+    <BitMenuButtonOption Text=""Option B"" Key=""B"" IsEnabled=""false"" />
+    <BitMenuButtonOption Text=""Option C"" Key=""C"" />
+</BitMenuButton>
+
+<BitMenuButton Text=""Tertiary"" TItem=""BitMenuButtonOption"" Background=""BitColorKind.Tertiary"">
+    <BitMenuButtonOption Text=""Option A"" Key=""A"" />
+    <BitMenuButtonOption Text=""Option B"" Key=""B"" IsEnabled=""false"" />
+    <BitMenuButtonOption Text=""Option C"" Key=""C"" />
+</BitMenuButton>
+
+<BitMenuButton Text=""Transparent"" TItem=""BitMenuButtonOption"" Background=""BitColorKind.Transparent"">
+    <BitMenuButtonOption Text=""Option A"" Key=""A"" />
+    <BitMenuButtonOption Text=""Option B"" Key=""B"" IsEnabled=""false"" />
+    <BitMenuButtonOption Text=""Option C"" Key=""C"" />
+</BitMenuButton>";
+
+    private readonly string example10RazorCode = @"
+<BitMenuButton Text=""Toggle"" TItem=""BitMenuButtonOption"" Split Toggle>
+    <BitMenuButtonOption Text=""Option A"" Key=""A"" />
+    <BitMenuButtonOption Text=""Option B"" Key=""B"" IsEnabled=""false"" />
+    <BitMenuButtonOption Text=""Option C"" Key=""C"" />
+</BitMenuButton>
+
+
+<BitMenuButton Text=""DefaultIsToggled"" TItem=""BitMenuButtonOption"" Split Toggle DefaultIsToggled=""true"">
+    <BitMenuButtonOption Text=""Option A"" Key=""A"" />
+    <BitMenuButtonOption Text=""Option B"" Key=""B"" IsEnabled=""false"" />
+    <BitMenuButtonOption Text=""Option C"" Key=""C"" />
+</BitMenuButton>
+
+
+<BitMenuButton Text=""Two-way"" TItem=""BitMenuButtonOption"" Split Toggle @bind-IsToggled=""optionIsToggled"">
+    <BitMenuButtonOption Text=""Option A"" Key=""A"" />
+    <BitMenuButtonOption Text=""Option B"" Key=""B"" IsEnabled=""false"" />
+    <BitMenuButtonOption Text=""Option C"" Key=""C"" />
+</BitMenuButton>
+<BitCheckbox Label=""IsToggled"" @bind-Value=""optionIsToggled"" />
+
+
+<BitMenuButton Text=""OnToggleChange"" TItem=""BitMenuButtonOption"" Split Toggle OnToggleChange=""v => optionToggledValue = v"">
+    <BitMenuButtonOption Text=""Option A"" Key=""A"" />
+    <BitMenuButtonOption Text=""Option B"" Key=""B"" IsEnabled=""false"" />
+    <BitMenuButtonOption Text=""Option C"" Key=""C"" />
+</BitMenuButton>
+<div>OnToggleChange: @optionToggledValue</div>";
+
+    private readonly string example11RazorCode = @"
+<BitMenuButton Text=""With icon"" TItem=""BitMenuButtonOption"" IconName=""@BitIconName.Edit"">
+    <BitMenuButtonOption Text=""Option A"" Key=""A"" IconName=""@BitIconName.Emoji"" />
+    <BitMenuButtonOption Text=""Option B"" Key=""B"" IconName=""@BitIconName.Emoji"" IsEnabled=""false"" />
+    <BitMenuButtonOption Text=""Option C"" Key=""C"" IconName=""@BitIconName.Emoji2"" />
+</BitMenuButton>
+
+<BitMenuButton Text=""No icon"" TItem=""BitMenuButtonOption"" IconName=""@BitIconName.Edit"" NoIcon>
+    <BitMenuButtonOption Text=""Option A"" Key=""A"" IconName=""@BitIconName.Emoji"" />
+    <BitMenuButtonOption Text=""Option B"" Key=""B"" IconName=""@BitIconName.Emoji"" IsEnabled=""false"" />
+    <BitMenuButtonOption Text=""Option C"" Key=""C"" IconName=""@BitIconName.Emoji2"" />
+</BitMenuButton>
+
+
+<BitMenuButton Sticky TItem=""BitMenuButtonOption"">
+    <BitMenuButtonOption Text=""Option A"" Key=""A"" IconName=""@BitIconName.Emoji"" />
+    <BitMenuButtonOption Text=""Option B"" Key=""B"" IconName=""@BitIconName.Emoji"" IsEnabled=""false"" />
+    <BitMenuButtonOption Text=""Option C"" Key=""C"" IconName=""@BitIconName.Emoji2"" />
+</BitMenuButton>
+
+<BitMenuButton Sticky TItem=""BitMenuButtonOption"" NoIcon>
+    <BitMenuButtonOption Text=""Option A"" Key=""A"" IconName=""@BitIconName.Emoji"" />
+    <BitMenuButtonOption Text=""Option B"" Key=""B"" IconName=""@BitIconName.Emoji"" IsEnabled=""false"" />
+    <BitMenuButtonOption Text=""Option C"" Key=""C"" IconName=""@BitIconName.Emoji2"" />
+</BitMenuButton>";
+
+    private readonly string example12RazorCode = @"
+<BitMenuButton Sticky TItem=""BitMenuButtonOption"">
+    <BitMenuButtonOption Text=""Option A"" Key=""A"" IconName=""@BitIconName.Emoji"" />
+    <BitMenuButtonOption Text=""Option B"" Key=""B"" IconName=""@BitIconName.Emoji"" />
+    <BitMenuButtonOption Text=""Option C"" Key=""C"" IconName=""@BitIconName.Emoji2"" IsSelected=""true"" />
+</BitMenuButton>
+
+<BitMenuButton Sticky Split TItem=""BitMenuButtonOption"">
+    <BitMenuButtonOption Text=""Option A"" Key=""A"" IconName=""@BitIconName.Emoji"" />
+    <BitMenuButtonOption Text=""Option B"" Key=""B"" IconName=""@BitIconName.Emoji"" />
+    <BitMenuButtonOption Text=""Option C"" Key=""C"" IconName=""@BitIconName.Emoji2"" IsSelected=""true"" />
+</BitMenuButton>";
+
+    private readonly string example13RazorCode = @"
 <style>
     .item-template-box {
         display: flex;
@@ -941,7 +1038,7 @@ Custom Header!
     </BitMenuButtonOption>
 </BitMenuButton>";
 
-    private readonly string example10RazorCode = @"
+    private readonly string example14RazorCode = @"
 <BitMenuButton Text=""Options""
                OnChange=""(BitMenuButtonOption item) => exampleChangedOption = item?.Key""
                OnClick=""(BitMenuButtonOption item) => exampleClickedOption = item?.Key"">
@@ -977,11 +1074,11 @@ Custom Header!
 
 <div>Changed option: @exampleChangedOption</div>
 <div>Clicked option: @exampleClickedOption</div>";
-    private readonly string example10CsharpCode = @"
+    private readonly string example14CsharpCode = @"
 private string? exampleChangedOption;
 private string? exampleClickedOption;";
 
-    private readonly string example11RazorCode = @"
+    private readonly string example15RazorCode = @"
 <BitMenuButton Text=""Coming soon..."" TItem=""BitMenuButtonOption"" IsEnabled=""false"" />
 
 
@@ -1018,12 +1115,12 @@ Custom Header!
     <BitMenuButtonOption Text=""Option C"" Key=""C"" @ref=""optionC"" />
 </BitMenuButton>
 <BitCheckbox Label=""Two-way IsOpen"" @bind-Value=""twoWayIsOpen"" />";
-    private readonly string example11CsharpCode = @"
+    private readonly string example15CsharpCode = @"
 private BitMenuButtonOption twoWaySelectedOption = default!;
 private bool oneWayIsOpen;
 private bool twoWayIsOpen;";
 
-    private readonly string example12RazorCode = @"
+    private readonly string example16RazorCode = @"
 <link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
 
 <BitMenuButton Text=""Actions"" 
@@ -1089,7 +1186,7 @@ Custom Header!
     <BitMenuButtonOption Text=""Delete"" Icon=""@BitIconInfo.Fa(""solid trash"")"" />
 </BitMenuButton>";
 
-    private readonly string example13RazorCode = @"
+    private readonly string example17RazorCode = @"
 <BitMenuButton Text=""گزینه ها"" Dir=""BitDir.Rtl"" TItem=""BitMenuButtonOption"" IconName=""@BitIconName.Edit"">
     <BitMenuButtonOption Text=""گزینه الف"" Key=""A"" IconName=""@BitIconName.Emoji"" />
     <BitMenuButtonOption Text=""گزینه ب"" Key=""B"" IconName=""@BitIconName.Emoji"" />
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/BitMenuButtonTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/BitMenuButtonTests.cs
index f1df38fa0e..533b55db69 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/BitMenuButtonTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/BitMenuButtonTests.cs
@@ -220,4 +220,160 @@ public void BitMenuButtonSplitTest(bool isSplit)
             Assert.IsNotNull(chevronDownButton);
         }
     }
+
+    [TestMethod,
+        DataRow(BitColorKind.Primary, "bit-mnb-bpg"),
+        DataRow(BitColorKind.Secondary, "bit-mnb-bsg"),
+        DataRow(BitColorKind.Tertiary, "bit-mnb-btg"),
+        DataRow(BitColorKind.Transparent, "bit-mnb-brg")
+    ]
+    public void BitMenuButtonShouldRespectBackground(BitColorKind background, string expectedClass)
+    {
+        var com = RenderComponent<BitMenuButton<BitMenuButtonItem>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+            parameters.Add(p => p.Background, background);
+        });
+
+        var bitMenuButton = com.Find(".bit-mnb");
+        Assert.IsTrue(bitMenuButton.ClassList.Contains(expectedClass));
+    }
+
+    [TestMethod]
+    public void BitMenuButtonNoIconShouldRemoveIcon()
+    {
+        var com = RenderComponent<BitMenuButton<BitMenuButtonItem>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+            parameters.Add(p => p.IconName, "Add");
+            parameters.Add(p => p.NoIcon, true);
+        });
+
+        var icons = com.FindAll(".bit-mnb-opb .bit-icon--Add");
+        Assert.AreEqual(0, icons.Count);
+    }
+
+    [TestMethod]
+    public void BitMenuButtonNoIconFalseShouldShowIcon()
+    {
+        var com = RenderComponent<BitMenuButton<BitMenuButtonItem>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+            parameters.Add(p => p.IconName, "Add");
+            parameters.Add(p => p.NoIcon, false);
+        });
+
+        var icon = com.Find(".bit-mnb-opb .bit-icon--Add");
+        Assert.IsNotNull(icon);
+    }
+
+    [TestMethod]
+    public void BitMenuButtonToggleShouldSetIsToggledOnClick()
+    {
+        var com = RenderComponent<BitMenuButton<BitMenuButtonItem>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+            parameters.Add(p => p.Split, true);
+            parameters.Add(p => p.Toggle, true);
+        });
+
+        var bitMenuButton = com.Find(".bit-mnb");
+        Assert.IsFalse(bitMenuButton.ClassList.Contains("bit-mnb-tgl"));
+
+        var operatorButton = com.Find(".bit-mnb-opb");
+        operatorButton.Click();
+
+        Assert.IsTrue(bitMenuButton.ClassList.Contains("bit-mnb-tgl"));
+
+        operatorButton.Click();
+        Assert.IsFalse(bitMenuButton.ClassList.Contains("bit-mnb-tgl"));
+    }
+
+    [TestMethod]
+    public void BitMenuButtonToggleShouldRespectDefaultIsToggled()
+    {
+        var com = RenderComponent<BitMenuButton<BitMenuButtonItem>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+            parameters.Add(p => p.Split, true);
+            parameters.Add(p => p.Toggle, true);
+            parameters.Add(p => p.DefaultIsToggled, true);
+        });
+
+        var bitMenuButton = com.Find(".bit-mnb");
+        Assert.IsTrue(bitMenuButton.ClassList.Contains("bit-mnb-tgl"));
+    }
+
+    [TestMethod]
+    public void BitMenuButtonToggleShouldFireOnToggleChange()
+    {
+        bool? toggledValue = null;
+
+        var com = RenderComponent<BitMenuButton<BitMenuButtonItem>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+            parameters.Add(p => p.Split, true);
+            parameters.Add(p => p.Toggle, true);
+            parameters.Add(p => p.OnToggleChange, (v) => toggledValue = v);
+        });
+
+        var operatorButton = com.Find(".bit-mnb-opb");
+        operatorButton.Click();
+
+        Assert.IsTrue(toggledValue == true);
+
+        operatorButton.Click();
+        Assert.IsTrue(toggledValue == false);
+    }
+
+    [TestMethod]
+    public void BitMenuButtonToggleShouldNotOpenCallout()
+    {
+        var com = RenderComponent<BitMenuButton<BitMenuButtonItem>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+            parameters.Add(p => p.Split, true);
+            parameters.Add(p => p.Toggle, true);
+        });
+
+        var bitMenuButton = com.Find(".bit-mnb");
+        var operatorButton = com.Find(".bit-mnb-opb");
+        operatorButton.Click();
+
+        Assert.IsFalse(bitMenuButton.ClassList.Contains("bit-mnb-omn"));
+    }
+
+    [TestMethod]
+    public void BitMenuButtonSelectedItemShouldHaveSelClassInStickyMode()
+    {
+        var stickyItems = new List<BitMenuButtonItem>
+        {
+            new() { Text = "Item A", Key = "A" },
+            new() { Text = "Item B", Key = "B", IsSelected = true }
+        };
+
+        var com = RenderComponent<BitMenuButton<BitMenuButtonItem>>(parameters =>
+        {
+            parameters.Add(p => p.Items, stickyItems);
+            parameters.Add(p => p.Sticky, true);
+        });
+
+        var itemButtons = com.FindAll(".bit-mnb-itm");
+        var selectedButtons = itemButtons.Where(b => b.ClassList.Contains("bit-mnb-sel")).ToList();
+
+        Assert.AreEqual(1, selectedButtons.Count);
+    }
+
+    [TestMethod]
+    public void BitMenuButtonSelectedItemShouldNotHaveSelClassInNonStickyMode()
+    {
+        var com = RenderComponent<BitMenuButton<BitMenuButtonItem>>(parameters =>
+        {
+            parameters.Add(p => p.Items, items);
+            parameters.Add(p => p.Sticky, false);
+        });
+
+        var selectedButtons = com.FindAll(".bit-mnb-sel");
+        Assert.AreEqual(0, selectedButtons.Count);
+    }
 }

From cda69759367a97236495c0ec65a7b4b47b921e92 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Tue, 12 May 2026 09:12:53 +0330
Subject: [PATCH 2/6] resolve review comments

---
 .../Buttons/MenuButton/BitMenuButton.razor    |  5 ++--
 .../Buttons/MenuButton/BitMenuButton.razor.cs |  7 +++---
 .../MenuButton/_BitMenuButtonCustomDemo.razor |  2 +-
 .../_BitMenuButtonCustomDemo.razor.samples.cs | 25 ++++++-------------
 4 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor
index 6854c47382..c031be5781 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor
@@ -20,6 +20,7 @@
             aria-label="@AriaLabel"
             aria-hidden="@AriaHidden"
             aria-describedby="@AriaDescription"
+            aria-pressed="@(Toggle && Split ? IsToggled.ToString().ToLower() : null)"
             style="@GetStyle(_selectedItem);@Styles?.OperatorButton"
             class="bit-mnb-opb @GetClass(_selectedItem) @Classes?.OperatorButton">
         @if (Sticky)
@@ -36,7 +37,7 @@
             else
             {
                 var icon = GetIcon(_selectedItem);
-                @if (!NoIcon && icon is not null)
+                @if (NoIcon is false && icon is not null)
                 {
                     <i style="@Styles?.OperatorButtonIcon" class="@icon.GetCssClasses() @Classes?.OperatorButtonIcon" />
                 }
@@ -54,7 +55,7 @@
             }
             else
             {
-                @if (!NoIcon && headerIcon is not null)
+                @if (NoIcon is false && headerIcon is not null)
                 {
                     <i style="@Styles?.Icon" class="@headerIcon.GetCssClasses() @Classes?.Icon" />
                 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs
index d0f4850b39..8636587e20 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs
@@ -178,7 +178,8 @@ public partial class BitMenuButton<TItem> : BitComponentBase where TItem : class
     /// <summary>
     /// If true, enables the toggling behavior on the header button in split mode.
     /// </summary>
-    [Parameter] public bool Toggle { get; set; }
+    [Parameter, ResetClassBuilder] 
+    public bool Toggle { get; set; }
 
     /// <summary>
     /// If true, the selected item is going to change the header item.
@@ -293,7 +294,7 @@ protected override void RegisterCssClasses()
 
         ClassBuilder.Register(() => Split ? "bit-mnb-spl" : "bit-mnb-nsp");
 
-        ClassBuilder.Register(() => Toggle && IsToggled ? $"bit-mnb-tgl {Classes?.Toggled}" : string.Empty);
+        ClassBuilder.Register(() => Toggle && Split && IsToggled ? $"bit-mnb-tgl {Classes?.Toggled}" : string.Empty);
 
         ClassBuilder.Register(() => Variant switch
         {
@@ -315,7 +316,7 @@ protected override async Task OnInitializedAsync()
     {
         _calloutId = $"BitMenuButton-{UniqueId}-callout";
 
-        if (Toggle && IsToggledHasBeenSet is false && DefaultIsToggled.HasValue)
+        if (Split && Toggle && IsToggledHasBeenSet is false && DefaultIsToggled.HasValue)
         {
             await AssignIsToggled(DefaultIsToggled.Value);
         }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor
index 3ae9a085ed..519bdcdad1 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor
@@ -555,7 +555,7 @@
     <br />
     <div class="example-content" dir="rtl">
         <BitMenuButton Text="گزینه ها" Dir="BitDir.Rtl" Items="rtlCustoms" IconName="@BitIconName.Edit" NameSelectors="nameSelectors" />
-        <BitMenuButton Text="گرینه ها" Dir="BitDir.Rtl" Items="rtlCustoms" ChevronDownIconName="@BitIconName.DoubleChevronDown" NameSelectors="nameSelectors" Split />
+        <BitMenuButton Text="گزینه ها" Dir="BitDir.Rtl" Items="rtlCustoms" ChevronDownIconName="@BitIconName.DoubleChevronDown" NameSelectors="nameSelectors" Split />
     </div>
 </DemoExample>
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cs
index 9f98188206..e4c894868e 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cs
@@ -1,4 +1,4 @@
-namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Buttons.MenuButton;
+namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Buttons.MenuButton;
 
 public partial class _BitMenuButtonCustomDemo
 {
@@ -807,8 +807,8 @@ public class Operation
 };";
 
     private readonly string example17RazorCode = @"
-<BitMenuButton Text=""گزینه ها"" Dir=""BitDir.Rtl"" Items=""rtlCustoms"" IconName=""@BitIconName.Edit"" NameSelectors=""nameSelectors"" />
-<BitMenuButton Text=""گرینه ها"" Dir=""BitDir.Rtl"" Items=""rtlCustoms"" ChevronDownIconName=""@BitIconName.DoubleChevronDown"" NameSelectors=""nameSelectors"" Split />";
+<BitMenuButton Text=""????? ??"" Dir=""BitDir.Rtl"" Items=""rtlCustoms"" IconName=""@BitIconName.Edit"" NameSelectors=""nameSelectors"" />
+<BitMenuButton Text=""????? ??"" Dir=""BitDir.Rtl"" Items=""rtlCustoms"" ChevronDownIconName=""@BitIconName.DoubleChevronDown"" NameSelectors=""nameSelectors"" Split />";
     private readonly string example17CsharpCode = @"
 public class Operation
 {
@@ -816,22 +816,13 @@ public class Operation
     public string? Name { get; set; }
     public string? Image { get; set; }
     public bool Disabled { get; set; }
-    public string? Class { get; set; }
-    public string? Style { get; set; }
 }
 
-private List<Operation> basicCustoms =
+private static List<Operation> rtlCustoms =
 [
-    new() { Name = ""Custom A"", Id = ""A"" },
-    new() { Name = ""Custom B"", Id = ""B"", Disabled = true },
-    new() { Name = ""Custom C"", Id = ""C"" }
-];
-
-private static List<Operation> itemStyleClassCustoms =
-[
-    new() { Name = ""Custom A"", Id = ""A"", Icon = BitIconName.Emoji, Style = ""color:red"" },
-    new() { Name = ""Custom B"", Id = ""B"", Icon = BitIconName.Emoji, Class = ""custom-item"" },
-    new() { Name = ""Custom C"", Id = ""C"", Icon = BitIconName.Emoji2, Style = ""background:blue"" }
+    new() { Name = ""????? ???"", Id = ""A"", Image = BitIconName.Emoji },
+    new() { Name = ""????? ?"", Id = ""B"", Image = BitIconName.Emoji },
+    new() { Name = ""????? ?"", Id = ""C"", Image = BitIconName.Emoji2 }
 ];
 
 private BitMenuButtonNameSelectors<Operation> nameSelectors = new()
@@ -841,4 +832,4 @@ public class Operation
     IconName = { Name = nameof(Operation.Image) },
     IsEnabled = { Selector = m => m.Disabled is false }
 };";
-}
+}
\ No newline at end of file

From 2c8984385c05f1863321a13641688605941b3c71 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Tue, 12 May 2026 10:39:19 +0330
Subject: [PATCH 3/6] fix tests

---
 .../Components/Buttons/BitMenuButtonTests.cs                | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/BitMenuButtonTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/BitMenuButtonTests.cs
index 533b55db69..4c398a7f1f 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/BitMenuButtonTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/BitMenuButtonTests.cs
@@ -344,7 +344,7 @@ public void BitMenuButtonToggleShouldNotOpenCallout()
     }
 
     [TestMethod]
-    public void BitMenuButtonSelectedItemShouldHaveSelClassInStickyMode()
+    public void BitMenuButtonSelectedItemShouldBeRemovedFromCalloutInStickyMode()
     {
         var stickyItems = new List<BitMenuButtonItem>
         {
@@ -359,9 +359,9 @@ public void BitMenuButtonSelectedItemShouldHaveSelClassInStickyMode()
         });
 
         var itemButtons = com.FindAll(".bit-mnb-itm");
-        var selectedButtons = itemButtons.Where(b => b.ClassList.Contains("bit-mnb-sel")).ToList();
 
-        Assert.AreEqual(1, selectedButtons.Count);
+        Assert.AreEqual(stickyItems.Count - 1, itemButtons.Count);
+        Assert.IsFalse(itemButtons.Any(b => b.TextContent.Contains("Item B")));
     }
 
     [TestMethod]

From 5f8ac734883711fa7fab5740aa880a4e4077457e Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Tue, 12 May 2026 11:00:14 +0330
Subject: [PATCH 4/6] resolve review comments II

---
 .../Buttons/MenuButton/BitMenuButton.razor    |    6 +-
 .../Buttons/MenuButton/BitMenuButton.razor.cs |   19 +-
 .../MenuButton/_BitMenuButtonCustomDemo.razor |  490 +++---
 .../_BitMenuButtonCustomDemo.razor.samples.cs |   66 +-
 .../MenuButton/_BitMenuButtonItemDemo.razor   |  490 +++---
 .../_BitMenuButtonItemDemo.razor.samples.cs   |   52 +-
 .../MenuButton/_BitMenuButtonOptionDemo.razor | 1416 +++++++++--------
 .../_BitMenuButtonOptionDemo.razor.cs         |   30 +-
 8 files changed, 1292 insertions(+), 1277 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor
index 04f16d18dd..84d05a1e9b 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor
@@ -21,7 +21,7 @@
             aria-hidden="@AriaHidden"
             aria-describedby="@AriaDescription"
             style="@GetStyle(_selectedItem);@Styles?.OperatorButton"
-            class="bit-mnb-opb @GetClass(_selectedItem) @Classes?.OperatorButton"
+            class="bit-mnb-opb @(Sticky ? "bit-mnb-sel" : "") @GetClass(_selectedItem) @Classes?.OperatorButton"
             aria-pressed="@(Toggle && Split ? IsToggled.ToString().ToLower() : null)">
         @if (Sticky)
         {
@@ -102,11 +102,11 @@
     <ul role="presentation" style="@Styles?.CalloutContainer" class="bit-mnb-cul @Classes?.CalloutContainer">
         @foreach (var (item, idx) in _items.Select((item, idx) => (item, idx)))
         {
-            if (Sticky && item == SelectedItem) continue;
+            var isSelected = item == SelectedItem;
+            if (Sticky && isSelected) continue;
 
             var template = GetTemplate(item);
             var isEnabled = GetIsEnabled(item);
-            var isSelected = Sticky && item == SelectedItem;
             <li role="presentation" @key="@GetItemKey(item, idx.ToString())" style="@Styles?.ItemWrapper" class="@Classes?.ItemWrapper">
                 <button @onclick="() => HandleOnItemClick(item)" @onclick:stopPropagation
                         role="menuitem"
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs
index 3c7bd20dbb..bf67a99972 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs
@@ -120,7 +120,7 @@ public partial class BitMenuButton<TItem> : BitComponentBase where TItem : class
     /// <summary>
     /// Determines whether the header button is in the checked/toggled state when Toggle is enabled.
     /// </summary>
-    [Parameter, ResetClassBuilder, TwoWayBound]
+    [Parameter, ResetClassBuilder, ResetStyleBuilder, TwoWayBound]
     public bool IsToggled { get; set; }
 
     /// <summary>
@@ -176,16 +176,11 @@ public partial class BitMenuButton<TItem> : BitComponentBase where TItem : class
     [Parameter, ResetClassBuilder]
     public bool Split { get; set; }
 
-    /// <summary>
-    /// If true, enables the toggling behavior on the header button in split mode.
-    /// </summary>
-    [Parameter, ResetClassBuilder] 
-    public bool Toggle { get; set; }
-
     /// <summary>
     /// If true, the selected item is going to change the header item.
     /// </summary>
-    [Parameter] public bool Sticky { get; set; }
+    [Parameter, ResetClassBuilder, ResetStyleBuilder]
+    public bool Sticky { get; set; }
 
     /// <summary>
     /// Custom CSS styles for different parts of the menu button.
@@ -197,6 +192,12 @@ public partial class BitMenuButton<TItem> : BitComponentBase where TItem : class
     /// </summary>
     [Parameter] public string? Text { get; set; }
 
+    /// <summary>
+    /// If true, enables the toggling behavior on the header button in split mode.
+    /// </summary>
+    [Parameter, ResetClassBuilder, ResetStyleBuilder] 
+    public bool Toggle { get; set; }
+
     /// <summary>
     /// The visual variant of the menu button.
     /// </summary>
@@ -311,6 +312,8 @@ protected override void RegisterCssStyles()
         StyleBuilder.Register(() => Styles?.Root);
 
         StyleBuilder.Register(() => IsOpen ? Styles?.Opened : string.Empty);
+
+        StyleBuilder.Register(() => Toggle && Split && IsToggled ? Styles?.Toggled : string.Empty);
     }
 
     protected override async Task OnInitializedAsync()
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor
index 519bdcdad1..bbb161f25c 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor
@@ -1,4 +1,4 @@
-<DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
+<DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
     <div class="example-content">
         <BitMenuButton Text="MenuButton" Items="basicCustoms" NameSelectors="nameSelectors" />
     </div>
@@ -40,239 +40,9 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Color" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
-    <div>Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.</div>
-    <br /><br />
-    <div class="example-content">
-        <BitMenuButton Text="Primary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.Primary" />
-        <BitMenuButton Text="Primary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.Primary" />
-        <BitMenuButton Text="Primary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.Primary" />
-    </div>
-    <br />
-    <div class="example-content">
-        <BitMenuButton Text="Primary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.Primary" Split />
-        <BitMenuButton Text="Primary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.Primary" Split />
-        <BitMenuButton Text="Primary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.Primary" Split />
-    </div>
-    <br /><br />
-    <div class="example-content">
-        <BitMenuButton Text="Secondary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.Secondary" />
-        <BitMenuButton Text="Secondary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.Secondary" />
-        <BitMenuButton Text="Secondary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.Secondary" />
-    </div>
-    <br />
-    <div class="example-content">
-        <BitMenuButton Text="Secondary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.Secondary" Split />
-        <BitMenuButton Text="Secondary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.Secondary" Split />
-        <BitMenuButton Text="Secondary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.Secondary" Split />
-    </div>
-    <br /><br />
-    <div class="example-content">
-        <BitMenuButton Text="Tertiary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.Tertiary" />
-        <BitMenuButton Text="Tertiary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.Tertiary" />
-        <BitMenuButton Text="Tertiary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.Tertiary" />
-    </div>
-    <br />
-    <div class="example-content">
-        <BitMenuButton Text="Tertiary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.Tertiary" Split />
-        <BitMenuButton Text="Tertiary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.Tertiary" Split />
-        <BitMenuButton Text="Tertiary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.Tertiary" Split />
-    </div>
-    <br /><br />
-    <div class="example-content">
-        <BitMenuButton Text="Info" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.Info" />
-        <BitMenuButton Text="Info" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.Info" />
-        <BitMenuButton Text="Info" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.Info" />
-    </div>
-    <br />
-    <div class="example-content">
-        <BitMenuButton Text="Info" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.Info" Split />
-        <BitMenuButton Text="Info" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.Info" Split />
-        <BitMenuButton Text="Info" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.Info" Split />
-    </div>
-    <br /><br />
-    <div class="example-content">
-        <BitMenuButton Text="Success" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.Success" />
-        <BitMenuButton Text="Success" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.Success" />
-        <BitMenuButton Text="Success" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.Success" />
-    </div>
-    <br />
-    <div class="example-content">
-        <BitMenuButton Text="Success" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.Success" Split />
-        <BitMenuButton Text="Success" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.Success" Split />
-        <BitMenuButton Text="Success" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.Success" Split />
-    </div>
-    <br /><br />
-    <div class="example-content">
-        <BitMenuButton Text="Warning" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.Warning" />
-        <BitMenuButton Text="Warning" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.Warning" />
-        <BitMenuButton Text="Warning" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.Warning" />
-    </div>
-    <br />
-    <div class="example-content">
-        <BitMenuButton Text="Warning" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.Warning" Split />
-        <BitMenuButton Text="Warning" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.Warning" Split />
-        <BitMenuButton Text="Warning" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.Warning" Split />
-    </div>
-    <br /><br />
-    <div class="example-content">
-        <BitMenuButton Text="SevereWarning" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.SevereWarning" />
-        <BitMenuButton Text="SevereWarning" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.SevereWarning" />
-        <BitMenuButton Text="SevereWarning" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.SevereWarning" />
-    </div>
-    <br />
-    <div class="example-content">
-        <BitMenuButton Text="SevereWarning" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.SevereWarning" Split />
-        <BitMenuButton Text="SevereWarning" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.SevereWarning" Split />
-        <BitMenuButton Text="SevereWarning" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.SevereWarning" Split />
-    </div>
-    <br /><br />
-    <div class="example-content">
-        <BitMenuButton Text="Error" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.Error" />
-        <BitMenuButton Text="Error" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.Error" />
-        <BitMenuButton Text="Error" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.Error" />
-    </div>
-    <br />
-    <div class="example-content">
-        <BitMenuButton Text="Error" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.Error" Split />
-        <BitMenuButton Text="Error" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.Error" Split />
-        <BitMenuButton Text="Error" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.Error" Split />
-    </div>
-    <br /><br />
-    <div style="background:var(--bit-clr-fg-sec);padding:1rem">
-        <div class="example-content">
-            <BitMenuButton Text="PrimaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.PrimaryBackground" />
-            <BitMenuButton Text="PrimaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.PrimaryBackground" />
-            <BitMenuButton Text="PrimaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.PrimaryBackground" />
-        </div>
-        <br />
-        <div class="example-content">
-            <BitMenuButton Text="PrimaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.PrimaryBackground" Split />
-            <BitMenuButton Text="PrimaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.PrimaryBackground" Split />
-            <BitMenuButton Text="PrimaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.PrimaryBackground" Split />
-        </div>
-        <br /><br />
-        <div class="example-content">
-            <BitMenuButton Text="SecondaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.SecondaryBackground" />
-            <BitMenuButton Text="SecondaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.SecondaryBackground" />
-            <BitMenuButton Text="SecondaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.SecondaryBackground" />
-        </div>
-        <br />
-        <div class="example-content">
-            <BitMenuButton Text="SecondaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.SecondaryBackground" Split />
-            <BitMenuButton Text="SecondaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.SecondaryBackground" Split />
-            <BitMenuButton Text="SecondaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.SecondaryBackground" Split />
-        </div>
-        <br /><br />
-        <div class="example-content">
-            <BitMenuButton Text="TertiaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.TertiaryBackground" />
-            <BitMenuButton Text="TertiaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.TertiaryBackground" />
-            <BitMenuButton Text="TertiaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.TertiaryBackground" />
-        </div>
-        <br />
-        <div class="example-content">
-            <BitMenuButton Text="TertiaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.TertiaryBackground" Split />
-            <BitMenuButton Text="TertiaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.TertiaryBackground" Split />
-            <BitMenuButton Text="TertiaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.TertiaryBackground" Split />
-        </div>
-    </div>
-    <br /><br />
-    <div class="example-content">
-        <BitMenuButton Text="PrimaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.PrimaryForeground" />
-        <BitMenuButton Text="PrimaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.PrimaryForeground" />
-        <BitMenuButton Text="PrimaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.PrimaryForeground" />
-    </div>
-    <br />
-    <div class="example-content">
-        <BitMenuButton Text="PrimaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.PrimaryForeground" Split />
-        <BitMenuButton Text="PrimaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.PrimaryForeground" Split />
-        <BitMenuButton Text="PrimaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.PrimaryForeground" Split />
-    </div>
-    <br /><br />
-    <div class="example-content">
-        <BitMenuButton Text="SecondaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.SecondaryForeground" />
-        <BitMenuButton Text="SecondaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.SecondaryForeground" />
-        <BitMenuButton Text="SecondaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.SecondaryForeground" />
-    </div>
-    <br />
-    <div class="example-content">
-        <BitMenuButton Text="SecondaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.SecondaryForeground" Split />
-        <BitMenuButton Text="SecondaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.SecondaryForeground" Split />
-        <BitMenuButton Text="SecondaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.SecondaryForeground" Split />
-    </div>
-    <br /><br />
-    <div class="example-content">
-        <BitMenuButton Text="TertiaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.TertiaryForeground" />
-        <BitMenuButton Text="TertiaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.TertiaryForeground" />
-        <BitMenuButton Text="TertiaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.TertiaryForeground" />
-    </div>
-    <br />
-    <div class="example-content">
-        <BitMenuButton Text="TertiaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.TertiaryForeground" Split />
-        <BitMenuButton Text="TertiaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.TertiaryForeground" Split />
-        <BitMenuButton Text="TertiaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.TertiaryForeground" Split />
-    </div>
-    <br /><br />
-    <div class="example-content">
-        <BitMenuButton Text="PrimaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.PrimaryBorder" />
-        <BitMenuButton Text="PrimaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.PrimaryBorder" />
-        <BitMenuButton Text="PrimaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.PrimaryBorder" />
-    </div>
-    <br />
-    <div class="example-content">
-        <BitMenuButton Text="PrimaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.PrimaryBorder" Split />
-        <BitMenuButton Text="PrimaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.PrimaryBorder" Split />
-        <BitMenuButton Text="PrimaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.PrimaryBorder" Split />
-    </div>
-    <br /><br />
-    <div class="example-content">
-        <BitMenuButton Text="SecondaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.SecondaryBorder" />
-        <BitMenuButton Text="SecondaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.SecondaryBorder" />
-        <BitMenuButton Text="SecondaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.SecondaryBorder" />
-    </div>
-    <br />
-    <div class="example-content">
-        <BitMenuButton Text="SecondaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.SecondaryBorder" Split />
-        <BitMenuButton Text="SecondaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.SecondaryBorder" Split />
-        <BitMenuButton Text="SecondaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.SecondaryBorder" Split />
-    </div>
-    <br /><br />
-    <div class="example-content">
-        <BitMenuButton Text="TertiaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.TertiaryBorder" />
-        <BitMenuButton Text="TertiaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.TertiaryBorder" />
-        <BitMenuButton Text="TertiaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.TertiaryBorder" />
-    </div>
-    <br />
-    <div class="example-content">
-        <BitMenuButton Text="TertiaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.TertiaryBorder" Split />
-        <BitMenuButton Text="TertiaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.TertiaryBorder" Split />
-        <BitMenuButton Text="TertiaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.TertiaryBorder" Split />
-    </div>
-</DemoExample>
 
-<DemoExample Title="Size" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
-    <div>Varying sizes for menu buttons tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.</div>
-    <br />
-    <div class="example-content">
-        <BitMenuButton Text="Small" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Size="BitSize.Small" />
-        <BitMenuButton Text="Small" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Size="BitSize.Small" />
-        <BitMenuButton Text="Small" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Size="BitSize.Small" />
-    </div>
-    <br />
-    <div class="example-content">
-        <BitMenuButton Text="Medium" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Size="BitSize.Medium" />
-        <BitMenuButton Text="Medium" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Size="BitSize.Medium" />
-        <BitMenuButton Text="Medium" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Size="BitSize.Medium" />
-    </div>
-    <br />
-    <div class="example-content">
-        <BitMenuButton Text="Large" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Size="BitSize.Large" />
-        <BitMenuButton Text="Large" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Size="BitSize.Large" />
-        <BitMenuButton Text="Large" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Size="BitSize.Large" />
-    </div>
-</DemoExample>
 
-<DemoExample Title="Sticky" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
+<DemoExample Title="Sticky" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
     <div>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.</div>
     <br />
     <div class="example-content">
@@ -291,7 +61,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Icons" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
+<DemoExample Title="Icons" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
     <div>Present BitMenuButton instances with customized icons, enriching the visual options for representing menu buttons.</div>
     <br />
     <div class="example-content">
@@ -300,7 +70,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Style & Class" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
+<DemoExample Title="Style & Class" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
     <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
     <br />
     <div><b>Component's Style & Class</b>:</div>
@@ -336,7 +106,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Background" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
+<DemoExample Title="Background" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
     <div>Use the Background parameter to control the background color of the callout using BitColorKind values.</div>
     <br />
     <div class="example-content">
@@ -347,8 +117,10 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Toggle" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
-    <div>Enable toggle behavior on the header button in Split mode. Clicking the operator button will toggle the IsToggled state instead of opening the callout.</div>
+<DemoExample Title="Toggle" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
+    <div>
+        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.
+    </div>
     <br />
     <div>Toggle:</div>
     <br />
@@ -374,7 +146,7 @@
     <BitMenuButton Text="OnToggleChange" Items="basicCustoms" NameSelectors="nameSelectors" Split Toggle OnToggleChange="v => customToggledValue = v" />
 </DemoExample>
 
-<DemoExample Title="NoIcon" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
+<DemoExample Title="NoIcon" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
     <div>Use the NoIcon parameter to hide the header icon of the menu button.</div>
     <br />
     <div class="example-content">
@@ -388,7 +160,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="SelectedItem" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
+<DemoExample Title="SelectedItem" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
     <div>In Sticky mode, the currently selected item is visually highlighted in the callout with a distinct background color.</div>
     <br />
     <div class="example-content">
@@ -397,7 +169,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Templates" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
+<DemoExample Title="Templates" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
     <div>Explore BitMenuButton's customization capabilities.</div>
     <div>Note that if <strong>Sticky</strong> set to true, HeaderTemplate and Text will be ignored.</div>
     <br />
@@ -423,7 +195,7 @@
     <BitMenuButton Text="Customs" Items="itemTemplateCustoms2" NameSelectors="nameSelectors" />
 </DemoExample>
 
-<DemoExample Title="Events" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
+<DemoExample Title="Events" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
     <div>Demonstrate BitMenuButton instances highlighting item click events, offering versatile interactions within the menu buttons.</div>
     <br />
     <div>
@@ -454,7 +226,7 @@
     <div>Clicked custom item: @eventsClickedCustom</div>
 </DemoExample>
 
-<DemoExample Title="Binding" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
+<DemoExample Title="Binding" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
     <div>This example demonstrates different ways to handle item selection and changes within the component.</div>
     <br /><br /><br /><br />
     <div>
@@ -491,7 +263,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="External Icons" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16">
+<DemoExample Title="External Icons" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
     <div>External icon libraries like FontAwesome can be used with the Icon parameter.</div>
     
     <br />
@@ -550,6 +322,238 @@
     </div>
 </DemoExample>
 
+<DemoExample Title="Color" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
+    <div>Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.</div>
+    <br /><br />
+    <div class="example-content">
+        <BitMenuButton Text="Primary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.Primary" />
+        <BitMenuButton Text="Primary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.Primary" />
+        <BitMenuButton Text="Primary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.Primary" />
+    </div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="Primary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.Primary" Split />
+        <BitMenuButton Text="Primary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.Primary" Split />
+        <BitMenuButton Text="Primary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.Primary" Split />
+    </div>
+    <br /><br />
+    <div class="example-content">
+        <BitMenuButton Text="Secondary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.Secondary" />
+        <BitMenuButton Text="Secondary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.Secondary" />
+        <BitMenuButton Text="Secondary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.Secondary" />
+    </div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="Secondary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.Secondary" Split />
+        <BitMenuButton Text="Secondary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.Secondary" Split />
+        <BitMenuButton Text="Secondary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.Secondary" Split />
+    </div>
+    <br /><br />
+    <div class="example-content">
+        <BitMenuButton Text="Tertiary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.Tertiary" />
+        <BitMenuButton Text="Tertiary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.Tertiary" />
+        <BitMenuButton Text="Tertiary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.Tertiary" />
+    </div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="Tertiary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.Tertiary" Split />
+        <BitMenuButton Text="Tertiary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.Tertiary" Split />
+        <BitMenuButton Text="Tertiary" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.Tertiary" Split />
+    </div>
+    <br /><br />
+    <div class="example-content">
+        <BitMenuButton Text="Info" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.Info" />
+        <BitMenuButton Text="Info" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.Info" />
+        <BitMenuButton Text="Info" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.Info" />
+    </div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="Info" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.Info" Split />
+        <BitMenuButton Text="Info" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.Info" Split />
+        <BitMenuButton Text="Info" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.Info" Split />
+    </div>
+    <br /><br />
+    <div class="example-content">
+        <BitMenuButton Text="Success" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.Success" />
+        <BitMenuButton Text="Success" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.Success" />
+        <BitMenuButton Text="Success" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.Success" />
+    </div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="Success" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.Success" Split />
+        <BitMenuButton Text="Success" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.Success" Split />
+        <BitMenuButton Text="Success" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.Success" Split />
+    </div>
+    <br /><br />
+    <div class="example-content">
+        <BitMenuButton Text="Warning" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.Warning" />
+        <BitMenuButton Text="Warning" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.Warning" />
+        <BitMenuButton Text="Warning" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.Warning" />
+    </div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="Warning" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.Warning" Split />
+        <BitMenuButton Text="Warning" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.Warning" Split />
+        <BitMenuButton Text="Warning" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.Warning" Split />
+    </div>
+    <br /><br />
+    <div class="example-content">
+        <BitMenuButton Text="SevereWarning" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.SevereWarning" />
+        <BitMenuButton Text="SevereWarning" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.SevereWarning" />
+        <BitMenuButton Text="SevereWarning" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.SevereWarning" />
+    </div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="SevereWarning" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.SevereWarning" Split />
+        <BitMenuButton Text="SevereWarning" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.SevereWarning" Split />
+        <BitMenuButton Text="SevereWarning" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.SevereWarning" Split />
+    </div>
+    <br /><br />
+    <div class="example-content">
+        <BitMenuButton Text="Error" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.Error" />
+        <BitMenuButton Text="Error" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.Error" />
+        <BitMenuButton Text="Error" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.Error" />
+    </div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="Error" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.Error" Split />
+        <BitMenuButton Text="Error" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.Error" Split />
+        <BitMenuButton Text="Error" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.Error" Split />
+    </div>
+    <br /><br />
+    <div style="background:var(--bit-clr-fg-sec);padding:1rem">
+        <div class="example-content">
+            <BitMenuButton Text="PrimaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.PrimaryBackground" />
+            <BitMenuButton Text="PrimaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.PrimaryBackground" />
+            <BitMenuButton Text="PrimaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.PrimaryBackground" />
+        </div>
+        <br />
+        <div class="example-content">
+            <BitMenuButton Text="PrimaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.PrimaryBackground" Split />
+            <BitMenuButton Text="PrimaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.PrimaryBackground" Split />
+            <BitMenuButton Text="PrimaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.PrimaryBackground" Split />
+        </div>
+        <br /><br />
+        <div class="example-content">
+            <BitMenuButton Text="SecondaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.SecondaryBackground" />
+            <BitMenuButton Text="SecondaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.SecondaryBackground" />
+            <BitMenuButton Text="SecondaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.SecondaryBackground" />
+        </div>
+        <br />
+        <div class="example-content">
+            <BitMenuButton Text="SecondaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.SecondaryBackground" Split />
+            <BitMenuButton Text="SecondaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.SecondaryBackground" Split />
+            <BitMenuButton Text="SecondaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.SecondaryBackground" Split />
+        </div>
+        <br /><br />
+        <div class="example-content">
+            <BitMenuButton Text="TertiaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.TertiaryBackground" />
+            <BitMenuButton Text="TertiaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.TertiaryBackground" />
+            <BitMenuButton Text="TertiaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.TertiaryBackground" />
+        </div>
+        <br />
+        <div class="example-content">
+            <BitMenuButton Text="TertiaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.TertiaryBackground" Split />
+            <BitMenuButton Text="TertiaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.TertiaryBackground" Split />
+            <BitMenuButton Text="TertiaryBackground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.TertiaryBackground" Split />
+        </div>
+    </div>
+    <br /><br />
+    <div class="example-content">
+        <BitMenuButton Text="PrimaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.PrimaryForeground" />
+        <BitMenuButton Text="PrimaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.PrimaryForeground" />
+        <BitMenuButton Text="PrimaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.PrimaryForeground" />
+    </div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="PrimaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.PrimaryForeground" Split />
+        <BitMenuButton Text="PrimaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.PrimaryForeground" Split />
+        <BitMenuButton Text="PrimaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.PrimaryForeground" Split />
+    </div>
+    <br /><br />
+    <div class="example-content">
+        <BitMenuButton Text="SecondaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.SecondaryForeground" />
+        <BitMenuButton Text="SecondaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.SecondaryForeground" />
+        <BitMenuButton Text="SecondaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.SecondaryForeground" />
+    </div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="SecondaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.SecondaryForeground" Split />
+        <BitMenuButton Text="SecondaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.SecondaryForeground" Split />
+        <BitMenuButton Text="SecondaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.SecondaryForeground" Split />
+    </div>
+    <br /><br />
+    <div class="example-content">
+        <BitMenuButton Text="TertiaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.TertiaryForeground" />
+        <BitMenuButton Text="TertiaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.TertiaryForeground" />
+        <BitMenuButton Text="TertiaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.TertiaryForeground" />
+    </div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="TertiaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.TertiaryForeground" Split />
+        <BitMenuButton Text="TertiaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.TertiaryForeground" Split />
+        <BitMenuButton Text="TertiaryForeground" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.TertiaryForeground" Split />
+    </div>
+    <br /><br />
+    <div class="example-content">
+        <BitMenuButton Text="PrimaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.PrimaryBorder" />
+        <BitMenuButton Text="PrimaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.PrimaryBorder" />
+        <BitMenuButton Text="PrimaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.PrimaryBorder" />
+    </div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="PrimaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.PrimaryBorder" Split />
+        <BitMenuButton Text="PrimaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.PrimaryBorder" Split />
+        <BitMenuButton Text="PrimaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.PrimaryBorder" Split />
+    </div>
+    <br /><br />
+    <div class="example-content">
+        <BitMenuButton Text="SecondaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.SecondaryBorder" />
+        <BitMenuButton Text="SecondaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.SecondaryBorder" />
+        <BitMenuButton Text="SecondaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.SecondaryBorder" />
+    </div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="SecondaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.SecondaryBorder" Split />
+        <BitMenuButton Text="SecondaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.SecondaryBorder" Split />
+        <BitMenuButton Text="SecondaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.SecondaryBorder" Split />
+    </div>
+    <br /><br />
+    <div class="example-content">
+        <BitMenuButton Text="TertiaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.TertiaryBorder" />
+        <BitMenuButton Text="TertiaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.TertiaryBorder" />
+        <BitMenuButton Text="TertiaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.TertiaryBorder" />
+    </div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="TertiaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Color="BitColor.TertiaryBorder" Split />
+        <BitMenuButton Text="TertiaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Color="BitColor.TertiaryBorder" Split />
+        <BitMenuButton Text="TertiaryBorder" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Color="BitColor.TertiaryBorder" Split />
+    </div>
+</DemoExample>
+
+<DemoExample Title="Size" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16">
+    <div>Varying sizes for menu buttons tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.</div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="Small" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Size="BitSize.Small" />
+        <BitMenuButton Text="Small" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Size="BitSize.Small" />
+        <BitMenuButton Text="Small" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Size="BitSize.Small" />
+    </div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="Medium" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Size="BitSize.Medium" />
+        <BitMenuButton Text="Medium" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Size="BitSize.Medium" />
+        <BitMenuButton Text="Medium" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Size="BitSize.Medium" />
+    </div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="Large" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Fill" Size="BitSize.Large" />
+        <BitMenuButton Text="Large" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Outline" Size="BitSize.Large" />
+        <BitMenuButton Text="Large" Items="basicCustoms" NameSelectors="nameSelectors" Variant="BitVariant.Text" Size="BitSize.Large" />
+    </div>
+</DemoExample>
+
 <DemoExample Title="RTL" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17">
     <div>Use BitMenuButton in right-to-left (RTL).</div>
     <br />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cs
index e4c894868e..971c388a41 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cs
@@ -1,4 +1,4 @@
-namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Buttons.MenuButton;
+namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Buttons.MenuButton;
 
 public partial class _BitMenuButtonCustomDemo
 {
@@ -94,7 +94,7 @@ public class Operation
     IsEnabled = { Selector = m => m.Disabled is false }
 };";
 
-    private readonly string example4RazorCode = @"
+    private readonly string example15RazorCode = @"
 <BitMenuButton Text=""Primary"" Items=""basicCustoms"" NameSelectors=""nameSelectors"" Variant=""BitVariant.Fill"" Color=""BitColor.Primary"" />
 <BitMenuButton Text=""Primary"" Items=""basicCustoms"" NameSelectors=""nameSelectors"" Variant=""BitVariant.Outline"" Color=""BitColor.Primary"" />
 <BitMenuButton Text=""Primary"" Items=""basicCustoms"" NameSelectors=""nameSelectors"" Variant=""BitVariant.Text"" Color=""BitColor.Primary"" />
@@ -246,7 +246,7 @@ public class Operation
 <BitMenuButton Text=""TertiaryBorder"" Items=""basicCustoms"" NameSelectors=""nameSelectors"" Variant=""BitVariant.Fill"" Color=""BitColor.TertiaryBorder"" Split />
 <BitMenuButton Text=""TertiaryBorder"" Items=""basicCustoms"" NameSelectors=""nameSelectors"" Variant=""BitVariant.Outline"" Color=""BitColor.TertiaryBorder"" Split />
 <BitMenuButton Text=""TertiaryBorder"" Items=""basicCustoms"" NameSelectors=""nameSelectors"" Variant=""BitVariant.Text"" Color=""BitColor.TertiaryBorder"" Split />";
-    private readonly string example4CsharpCode = @"
+    private readonly string example15CsharpCode = @"
 public class Operation
 {
     public string? Id { get; set; }
@@ -270,7 +270,7 @@ public class Operation
     IsEnabled = { Selector = m => m.Disabled is false }
 };";
 
-    private readonly string example5RazorCode = @"
+    private readonly string example16RazorCode = @"
 <BitMenuButton Text=""Small"" Items=""basicCustoms"" NameSelectors=""nameSelectors"" Variant=""BitVariant.Fill"" Size=""BitSize.Small"" />
 <BitMenuButton Text=""Small"" Items=""basicCustoms"" NameSelectors=""nameSelectors"" Variant=""BitVariant.Outline"" Size=""BitSize.Small"" />
 <BitMenuButton Text=""Small"" Items=""basicCustoms"" NameSelectors=""nameSelectors"" Variant=""BitVariant.Text"" Size=""BitSize.Small"" />
@@ -282,7 +282,7 @@ public class Operation
 <BitMenuButton Text=""Large"" Items=""basicCustoms"" NameSelectors=""nameSelectors"" Variant=""BitVariant.Fill"" Size=""BitSize.Large"" />
 <BitMenuButton Text=""Large"" Items=""basicCustoms"" NameSelectors=""nameSelectors"" Variant=""BitVariant.Outline"" Size=""BitSize.Large"" />
 <BitMenuButton Text=""Large"" Items=""basicCustoms"" NameSelectors=""nameSelectors"" Variant=""BitVariant.Text"" Size=""BitSize.Large"" />";
-    private readonly string example5CsharpCode = @"
+    private readonly string example16CsharpCode = @"
 public class Operation
 {
     public string? Id { get; set; }
@@ -306,7 +306,7 @@ public class Operation
     IsEnabled = { Selector = m => m.Disabled is false }
 };";
 
-    private readonly string example6RazorCode = @"
+    private readonly string example4RazorCode = @"
 <BitMenuButton Items=""basicCustoms"" NameSelectors=""nameSelectors"" Variant=""BitVariant.Fill"" Sticky />
 <BitMenuButton Items=""basicCustoms"" NameSelectors=""nameSelectors"" Variant=""BitVariant.Fill"" Split Sticky />
 
@@ -315,7 +315,7 @@ public class Operation
 
 <BitMenuButton Items=""basicCustoms"" NameSelectors=""nameSelectors"" Variant=""BitVariant.Text"" Sticky />
 <BitMenuButton Items=""basicCustoms"" NameSelectors=""nameSelectors"" Variant=""BitVariant.Text"" Split Sticky />";
-    private readonly string example6CsharpCode = @"
+    private readonly string example4CsharpCode = @"
 public class Operation
 {
     public string? Id { get; set; }
@@ -339,10 +339,10 @@ public class Operation
     IsEnabled = { Selector = m => m.Disabled is false }
 };";
 
-    private readonly string example7RazorCode = @"
+    private readonly string example5RazorCode = @"
 <BitMenuButton Text=""IconName"" Items=""basicCustoms"" NameSelectors=""nameSelectors"" IconName=""@BitIconName.Edit"" />
 <BitMenuButton Text=""ChevronDownIconName"" Items=""basicCustoms"" NameSelectors=""nameSelectors"" ChevronDownIconName=""@BitIconName.DoubleChevronDown"" Split />";
-    private readonly string example7CsharpCode = @"
+    private readonly string example5CsharpCode = @"
 public class Operation
 {
     public string? Id { get; set; }
@@ -366,7 +366,7 @@ public class Operation
     IsEnabled = { Selector = m => m.Disabled is false }
 };";
 
-    private readonly string example8RazorCode = @"
+    private readonly string example6RazorCode = @"
 <style>
     .custom-class {
         margin-inline: 1rem;
@@ -443,7 +443,7 @@ public class Operation
                                  OperatorButton = ""background: var(--button-background);"",
                                  ItemButton = ""background: lightcoral;"",
                                  Callout = ""border-radius: 0.25rem; box-shadow: lightgray 0 0 0.5rem;"" })"" />";
-    private readonly string example8CsharpCode = @"
+    private readonly string example6CsharpCode = @"
 public class Operation
 {
     public string? Id { get; set; }
@@ -467,12 +467,12 @@ public class Operation
     IsEnabled = { Selector = m => m.Disabled is false }
 };";
 
-    private readonly string example9RazorCode = @"
+    private readonly string example7RazorCode = @"
 <BitMenuButton Text=""Primary"" Items=""basicCustoms"" NameSelectors=""nameSelectors"" Background=""BitColorKind.Primary"" />
 <BitMenuButton Text=""Secondary"" Items=""basicCustoms"" NameSelectors=""nameSelectors"" Background=""BitColorKind.Secondary"" />
 <BitMenuButton Text=""Tertiary"" Items=""basicCustoms"" NameSelectors=""nameSelectors"" Background=""BitColorKind.Tertiary"" />
 <BitMenuButton Text=""Transparent"" Items=""basicCustoms"" NameSelectors=""nameSelectors"" Background=""BitColorKind.Transparent"" />";
-    private readonly string example9CsharpCode = @"
+    private readonly string example7CsharpCode = @"
 private List<Operation> basicCustoms =
 [
     new() { Name = ""Custom A"", Id = ""A"" },
@@ -488,7 +488,7 @@ public class Operation
     IsEnabled = { Selector = m => m.Disabled is false }
 };";
 
-    private readonly string example10RazorCode = @"
+    private readonly string example8RazorCode = @"
 <BitMenuButton Text=""Toggle"" Items=""basicCustoms"" NameSelectors=""nameSelectors"" Split Toggle />
 
 <BitMenuButton Text=""DefaultIsToggled"" Items=""basicCustoms"" NameSelectors=""nameSelectors"" Split Toggle DefaultIsToggled=""true"" />
@@ -498,7 +498,7 @@ public class Operation
 
 <div>OnToggleChange: @customToggledValue</div>
 <BitMenuButton Text=""OnToggleChange"" Items=""basicCustoms"" NameSelectors=""nameSelectors"" Split Toggle OnToggleChange=""v => customToggledValue = v"" />";
-    private readonly string example10CsharpCode = @"
+    private readonly string example8CsharpCode = @"
 private bool customIsToggled;
 private bool customToggledValue;
 
@@ -517,13 +517,13 @@ public class Operation
     IsEnabled = { Selector = m => m.Disabled is false }
 };";
 
-    private readonly string example11RazorCode = @"
+    private readonly string example9RazorCode = @"
 <BitMenuButton Text=""With icon"" Items=""basicIconCustoms"" NameSelectors=""nameSelectors"" IconName=""@BitIconName.Edit"" />
 <BitMenuButton Text=""No icon"" Items=""basicIconCustoms"" NameSelectors=""nameSelectors"" IconName=""@BitIconName.Edit"" NoIcon />
 
 <BitMenuButton Sticky Items=""basicIconCustoms"" NameSelectors=""nameSelectors"" />
 <BitMenuButton Sticky Items=""basicIconCustoms"" NameSelectors=""nameSelectors"" NoIcon />";
-    private readonly string example11CsharpCode = @"
+    private readonly string example9CsharpCode = @"
 private List<Operation> basicIconCustoms =
 [
     new() { Name = ""Custom A"", Id = ""A"", Image = BitIconName.Emoji },
@@ -539,10 +539,10 @@ public class Operation
     IsEnabled = { Selector = m => m.Disabled is false }
 };";
 
-    private readonly string example12RazorCode = @"
+    private readonly string example10RazorCode = @"
 <BitMenuButton Sticky Items=""isSelectedCustoms"" NameSelectors=""nameSelectors"" />
 <BitMenuButton Sticky Split Items=""isSelectedCustoms"" NameSelectors=""nameSelectors"" />";
-    private readonly string example12CsharpCode = @"
+    private readonly string example10CsharpCode = @"
 private static List<Operation> isSelectedCustoms =
 [
     new() { Name = ""Custom A"", Id = ""A"", Image = BitIconName.Emoji },
@@ -558,7 +558,7 @@ public class Operation
     IsEnabled = { Selector = m => m.Disabled is false }
 };";
 
-    private readonly string example13RazorCode = @"
+    private readonly string example11RazorCode = @"
 <style>
     .item-template-box {
         display: flex;
@@ -584,7 +584,7 @@ Custom Header!
 </BitMenuButton>
 
 <BitMenuButton Text=""Customs"" Items=""itemTemplateCustoms2"" NameSelectors=""nameSelectors"" />";
-    private readonly string example13CsharpCode = @"
+    private readonly string example11CsharpCode = @"
 public class Operation
 {
     public string? Id { get; set; }
@@ -636,7 +636,7 @@ public class Operation
     Template = { Name = nameof(Operation.Fragment) }
 };";
 
-    private readonly string example14RazorCode = @"
+    private readonly string example12RazorCode = @"
 <BitMenuButton Text=""Customs"" Items=""basicCustoms"" NameSelectors=""nameSelectors""
                OnChange=""(Operation item) => eventsChangedCustom = item?.Id""
                OnClick=""(Operation item) => eventsClickedCustom = item?.Id"" />
@@ -655,7 +655,7 @@ public class Operation
 
 <div>Changed custom item: @eventsChangedCustom</div>
 <div>Clicked custom item: @eventsClickedCustom</div>";
-    private readonly string example14CsharpCode = @"
+    private readonly string example12CsharpCode = @"
 public class Operation
 {
     public string? Id { get; set; }
@@ -686,7 +686,7 @@ public class Operation
     IsEnabled = { Selector = m => m.Disabled is false }
 };";
 
-    private readonly string example15RazorCode = @"
+    private readonly string example13RazorCode = @"
 <BitMenuButton Split Sticky Items=""basicCustoms"" DefaultSelectedItem=""basicCustoms[1]"" NameSelectors=""nameSelectors"" />
 
 <BitMenuButton Sticky Items=""basicCustoms"" NameSelectors=""nameSelectors"" @bind-SelectedItem=""twoWaySelectedCustom"" />
@@ -699,7 +699,7 @@ public class Operation
 
 <BitMenuButton Sticky Items=""basicCustoms"" NameSelectors=""nameSelectors"" @bind-IsOpen=""twoWayIsOpen"" />
 <BitCheckbox Label=""Two-way IsOpen"" @bind-Value=""twoWayIsOpen"" />";
-    private readonly string example15CsharpCode = @"
+    private readonly string example13CsharpCode = @"
 private Operation twoWaySelectedCustom = default!;
 private bool oneWayIsOpen;
 private bool twoWayIsOpen;
@@ -734,7 +734,7 @@ public class Operation
     IsEnabled = { Selector = m => m.Disabled is false }
 };";
 
-    private readonly string example16RazorCode = @"
+    private readonly string example14RazorCode = @"
 <link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
 
 <BitMenuButton Text=""Actions""
@@ -781,7 +781,7 @@ public class Operation
                Items=""externalIconCustoms""
                NameSelectors=""nameSelectors2""
                Icon=""@BitIconInfo.Fa(""brands github"")"" />";
-    private readonly string example16CsharpCode = @"
+    private readonly string example14CsharpCode = @"
 public class Operation
 {
     public string? Id { get; set; }
@@ -807,8 +807,8 @@ public class Operation
 };";
 
     private readonly string example17RazorCode = @"
-<BitMenuButton Text=""????? ??"" Dir=""BitDir.Rtl"" Items=""rtlCustoms"" IconName=""@BitIconName.Edit"" NameSelectors=""nameSelectors"" />
-<BitMenuButton Text=""????? ??"" Dir=""BitDir.Rtl"" Items=""rtlCustoms"" ChevronDownIconName=""@BitIconName.DoubleChevronDown"" NameSelectors=""nameSelectors"" Split />";
+<BitMenuButton Text=""گزینه ها"" Dir=""BitDir.Rtl"" Items=""rtlCustoms"" IconName=""@BitIconName.Edit"" NameSelectors=""nameSelectors"" />
+<BitMenuButton Text=""گزینه ها"" Dir=""BitDir.Rtl"" Items=""rtlCustoms"" ChevronDownIconName=""@BitIconName.DoubleChevronDown"" NameSelectors=""nameSelectors"" Split />";
     private readonly string example17CsharpCode = @"
 public class Operation
 {
@@ -820,9 +820,9 @@ public class Operation
 
 private static List<Operation> rtlCustoms =
 [
-    new() { Name = ""????? ???"", Id = ""A"", Image = BitIconName.Emoji },
-    new() { Name = ""????? ?"", Id = ""B"", Image = BitIconName.Emoji },
-    new() { Name = ""????? ?"", Id = ""C"", Image = BitIconName.Emoji2 }
+    new() { Name = ""گزینه الف"", Id = ""A"", Image = BitIconName.Emoji },
+    new() { Name = ""گزینه ب"", Id = ""B"", Image = BitIconName.Emoji },
+    new() { Name = ""گزینه ج"", Id = ""C"", Image = BitIconName.Emoji2 }
 ];
 
 private BitMenuButtonNameSelectors<Operation> nameSelectors = new()
@@ -832,4 +832,4 @@ public class Operation
     IconName = { Name = nameof(Operation.Image) },
     IsEnabled = { Selector = m => m.Disabled is false }
 };";
-}
\ No newline at end of file
+}
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor
index fdc240b83f..98d55e70cf 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor
@@ -1,4 +1,4 @@
-<DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
+<DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
     <div class="example-content">
         <BitMenuButton Text="MenuButton" Items="basicItems" />
     </div>
@@ -40,239 +40,9 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Color" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
-    <div>Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.</div>
-    <br /><br />
-    <div class="example-content">
-        <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" />
-    </div>
-    <br />
-    <div class="example-content">
-        <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 />
-    </div>
-    <br /><br />
-    <div class="example-content">
-        <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" />
-    </div>
-    <br />
-    <div class="example-content">
-        <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 />
-    </div>
-    <br /><br />
-    <div class="example-content">
-        <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" />
-    </div>
-    <br />
-    <div class="example-content">
-        <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 />
-    </div>
-    <br /><br />
-    <div class="example-content">
-        <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" />
-    </div>
-    <br />
-    <div class="example-content">
-        <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 />
-    </div>
-    <br /><br />
-    <div class="example-content">
-        <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" />
-    </div>
-    <br />
-    <div class="example-content">
-        <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 />
-    </div>
-    <br /><br />
-    <div class="example-content">
-        <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" />
-    </div>
-    <br />
-    <div class="example-content">
-        <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 />
-    </div>
-    <br /><br />
-    <div class="example-content">
-        <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" />
-    </div>
-    <br />
-    <div class="example-content">
-        <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 />
-    </div>
-    <br /><br />
-    <div class="example-content">
-        <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" />
-    </div>
-    <br />
-    <div class="example-content">
-        <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 />
-    </div>
-    <br /><br />
-    <div style="background:var(--bit-clr-fg-sec);padding:1rem">
-        <div class="example-content">
-            <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" />
-        </div>
-        <br />
-        <div class="example-content">
-            <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 />
-        </div>
-        <br /><br />
-        <div class="example-content">
-            <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" />
-        </div>
-        <br />
-        <div class="example-content">
-            <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 />
-        </div>
-        <br /><br />
-        <div class="example-content">
-            <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" />
-        </div>
-        <br />
-        <div class="example-content">
-            <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 />
-        </div>
-    </div>
-    <br /><br />
-    <div class="example-content">
-        <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" />
-    </div>
-    <br />
-    <div class="example-content">
-        <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 />
-    </div>
-    <br /><br />
-    <div class="example-content">
-        <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" />
-    </div>
-    <br />
-    <div class="example-content">
-        <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 />
-    </div>
-    <br /><br />
-    <div class="example-content">
-        <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" />
-    </div>
-    <br />
-    <div class="example-content">
-        <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 />
-    </div>
-    <br /><br />
-    <div class="example-content">
-        <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" />
-    </div>
-    <br />
-    <div class="example-content">
-        <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 />
-    </div>
-    <br /><br />
-    <div class="example-content">
-        <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" />
-    </div>
-    <br />
-    <div class="example-content">
-        <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 />
-    </div>
-    <br /><br />
-    <div class="example-content">
-        <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" />
-    </div>
-    <br />
-    <div class="example-content">
-        <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>
-</DemoExample>
 
-<DemoExample Title="Size" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
-    <div>Varying sizes for menu buttons tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.</div>
-    <br />
-    <div class="example-content">
-        <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" />
-    </div>
-    <br />
-    <div class="example-content">
-        <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" />
-    </div>
-    <br />
-    <div class="example-content">
-        <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" />
-    </div>
-</DemoExample>
 
-<DemoExample Title="Sticky" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
+<DemoExample Title="Sticky" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
     <div>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.</div>
     <br />
     <div class="example-content">
@@ -291,7 +61,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Icons" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
+<DemoExample Title="Icons" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
     <div>Present BitMenuButton instances with customized icons, enriching the visual options for representing menu buttons.</div>
     <br />
     <div class="example-content">
@@ -300,7 +70,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Style & Class" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
+<DemoExample Title="Style & Class" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
     <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
     <br />
     <div><b>Component's Style & Class</b>:</div>
@@ -334,7 +104,7 @@
                                       Callout = "border-radius: 0.25rem; box-shadow: lightgray 0 0 0.5rem;" })" />
 </DemoExample>
 
-<DemoExample Title="Background" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
+<DemoExample Title="Background" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
     <div>Use the Background parameter to control the background color of the callout using BitColorKind values.</div>
     <br />
     <div class="example-content">
@@ -345,8 +115,10 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Toggle" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
-    <div>Enable toggle behavior on the header button in Split mode. Clicking the operator button will toggle the IsToggled state instead of opening the callout.</div>
+<DemoExample Title="Toggle" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
+    <div>
+        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.
+    </div>
     <br />
     <div>Toggle:</div>
     <br />
@@ -372,7 +144,7 @@
     <BitMenuButton Text="OnToggleChange" Items="basicItems" Split Toggle OnToggleChange="v => itemToggledValue = v" />
 </DemoExample>
 
-<DemoExample Title="NoIcon" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
+<DemoExample Title="NoIcon" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
     <div>Use the NoIcon parameter to hide the header icon of the menu button.</div>
     <br />
     <div class="example-content">
@@ -386,7 +158,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="SelectedItem" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
+<DemoExample Title="SelectedItem" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
     <div>In Sticky mode, the currently selected item is visually highlighted in the callout with a distinct background color.</div>
     <br />
     <div class="example-content">
@@ -395,7 +167,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Templates" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
+<DemoExample Title="Templates" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
     <div>Explore BitMenuButton's customization capabilities.</div>
     <div>Note that if <strong>Sticky</strong> set to true, HeaderTemplate and Text will be ignored.</div>
     <br />
@@ -421,7 +193,7 @@
     <BitMenuButton Text="Items" Items="itemTemplateItems2" />
 </DemoExample>
 
-<DemoExample Title="Events" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
+<DemoExample Title="Events" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
     <div>Demonstrate BitMenuButton instances highlighting item click events, offering versatile interactions within the menu buttons.</div>
     <br />
     <div>Non-Sticky</div>
@@ -450,7 +222,7 @@
     <div>Clicked item: @eventsClickedItem</div>
 </DemoExample>
 
-<DemoExample Title="Binding" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
+<DemoExample Title="Binding" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
     <div>This example demonstrates different ways to handle item selection and changes within the component.</div>
     <br /><br /><br /><br />
     <div>
@@ -487,7 +259,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="External Icons" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16">
+<DemoExample Title="External Icons" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
     <div>External icon libraries like FontAwesome can be used with the Icon parameter.</div>
     
     <br />
@@ -540,6 +312,238 @@
     </div>
 </DemoExample>
 
+<DemoExample Title="Color" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
+    <div>Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.</div>
+    <br /><br />
+    <div class="example-content">
+        <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" />
+    </div>
+    <br />
+    <div class="example-content">
+        <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 />
+    </div>
+    <br /><br />
+    <div class="example-content">
+        <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" />
+    </div>
+    <br />
+    <div class="example-content">
+        <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 />
+    </div>
+    <br /><br />
+    <div class="example-content">
+        <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" />
+    </div>
+    <br />
+    <div class="example-content">
+        <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 />
+    </div>
+    <br /><br />
+    <div class="example-content">
+        <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" />
+    </div>
+    <br />
+    <div class="example-content">
+        <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 />
+    </div>
+    <br /><br />
+    <div class="example-content">
+        <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" />
+    </div>
+    <br />
+    <div class="example-content">
+        <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 />
+    </div>
+    <br /><br />
+    <div class="example-content">
+        <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" />
+    </div>
+    <br />
+    <div class="example-content">
+        <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 />
+    </div>
+    <br /><br />
+    <div class="example-content">
+        <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" />
+    </div>
+    <br />
+    <div class="example-content">
+        <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 />
+    </div>
+    <br /><br />
+    <div class="example-content">
+        <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" />
+    </div>
+    <br />
+    <div class="example-content">
+        <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 />
+    </div>
+    <br /><br />
+    <div style="background:var(--bit-clr-fg-sec);padding:1rem">
+        <div class="example-content">
+            <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" />
+        </div>
+        <br />
+        <div class="example-content">
+            <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 />
+        </div>
+        <br /><br />
+        <div class="example-content">
+            <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" />
+        </div>
+        <br />
+        <div class="example-content">
+            <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 />
+        </div>
+        <br /><br />
+        <div class="example-content">
+            <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" />
+        </div>
+        <br />
+        <div class="example-content">
+            <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 />
+        </div>
+    </div>
+    <br /><br />
+    <div class="example-content">
+        <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" />
+    </div>
+    <br />
+    <div class="example-content">
+        <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 />
+    </div>
+    <br /><br />
+    <div class="example-content">
+        <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" />
+    </div>
+    <br />
+    <div class="example-content">
+        <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 />
+    </div>
+    <br /><br />
+    <div class="example-content">
+        <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" />
+    </div>
+    <br />
+    <div class="example-content">
+        <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 />
+    </div>
+    <br /><br />
+    <div class="example-content">
+        <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" />
+    </div>
+    <br />
+    <div class="example-content">
+        <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 />
+    </div>
+    <br /><br />
+    <div class="example-content">
+        <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" />
+    </div>
+    <br />
+    <div class="example-content">
+        <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 />
+    </div>
+    <br /><br />
+    <div class="example-content">
+        <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" />
+    </div>
+    <br />
+    <div class="example-content">
+        <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>
+</DemoExample>
+
+<DemoExample Title="Size" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16">
+    <div>Varying sizes for menu buttons tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.</div>
+    <br />
+    <div class="example-content">
+        <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" />
+    </div>
+    <br />
+    <div class="example-content">
+        <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" />
+    </div>
+    <br />
+    <div class="example-content">
+        <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" />
+    </div>
+</DemoExample>
+
 <DemoExample Title="RTL" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17">
     <div>Use BitMenuButton in right-to-left (RTL).</div>
     <br />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cs
index 36acb3ba6f..d8350950cf 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cs
@@ -46,7 +46,7 @@ public partial class _BitMenuButtonItemDemo
     new() { Text = ""Item C"", Key = ""C"" }
 ];;";
 
-    private readonly string example4RazorCode = @"
+    private readonly string example15RazorCode = @"
 <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"" />
@@ -198,7 +198,7 @@ public partial class _BitMenuButtonItemDemo
 <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 />";
-    private readonly string example4CsharpCode = @"
+    private readonly string example15CsharpCode = @"
 private List<BitMenuButtonItem> basicItems =
 [
     new() { Text = ""Item A"", Key = ""A"" },
@@ -206,7 +206,7 @@ public partial class _BitMenuButtonItemDemo
     new() { Text = ""Item C"", Key = ""C"" }
 ];";
 
-    private readonly string example5RazorCode = @"
+    private readonly string example16RazorCode = @"
 <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"" />
@@ -218,7 +218,7 @@ public partial class _BitMenuButtonItemDemo
 <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"" />";
-    private readonly string example5CsharpCode = @"
+    private readonly string example16CsharpCode = @"
 private List<BitMenuButtonItem> basicItems =
 [
     new() { Text = ""Item A"", Key = ""A"" },
@@ -226,7 +226,7 @@ public partial class _BitMenuButtonItemDemo
     new() { Text = ""Item C"", Key = ""C"" }
 ];";
 
-    private readonly string example6RazorCode = @"
+    private readonly string example4RazorCode = @"
 <BitMenuButton Items=""basicItems"" Variant=""BitVariant.Fill"" Sticky />
 <BitMenuButton Items=""basicItems"" Variant=""BitVariant.Fill"" Split Sticky />
 
@@ -235,7 +235,7 @@ public partial class _BitMenuButtonItemDemo
 
 <BitMenuButton Items=""basicItems"" Variant=""BitVariant.Text"" Sticky />
 <BitMenuButton Items=""basicItems"" Variant=""BitVariant.Text"" Split Sticky />";
-    private readonly string example6CsharpCode = @"
+    private readonly string example4CsharpCode = @"
 private List<BitMenuButtonItem> basicItems =
 [
     new() { Text = ""Item A"", Key = ""A"" },
@@ -243,10 +243,10 @@ public partial class _BitMenuButtonItemDemo
     new() { Text = ""Item C"", Key = ""C"" }
 ];";
 
-    private readonly string example7RazorCode = @"
+    private readonly string example5RazorCode = @"
 <BitMenuButton Text=""IconName"" Items=""basicItemsIcon"" IconName=""@BitIconName.Edit"" />
 <BitMenuButton Text=""ChevronDownIconName"" Items=""basicItemsIcon"" ChevronDownIconName=""@BitIconName.DoubleChevronDown"" Split />";
-    private readonly string example7CsharpCode = @"
+    private readonly string example5CsharpCode = @"
 private List<BitMenuButtonItem> basicItemsIcon =
 [
     new() { Text = ""Item A"", Key = ""A"", IconName = BitIconName.Emoji },
@@ -254,7 +254,7 @@ public partial class _BitMenuButtonItemDemo
     new() { Text = ""Item C"", Key = ""C"", IconName = BitIconName.Emoji2 }
 ];";
 
-    private readonly string example8RazorCode = @"
+    private readonly string example6RazorCode = @"
 <style>
     .custom-class {
         margin-inline: 1rem;
@@ -331,7 +331,7 @@ public partial class _BitMenuButtonItemDemo
                                    OperatorButton = ""background: var(--button-background);"",
                                    ItemButton = ""background: lightcoral;"",
                                    Callout = ""border-radius: 0.25rem; box-shadow: lightgray 0 0 0.5rem;"" })"" />";
-    private readonly string example8CsharpCode = @"
+    private readonly string example6CsharpCode = @"
 private List<BitMenuButtonItem> basicItems = new()
 {
     new() { Text = ""Item A"", Key = ""A"" },
@@ -346,12 +346,12 @@ public partial class _BitMenuButtonItemDemo
     new() { Text = ""Item B (Classed)"", Key = ""C"", IconName = BitIconName.Emoji2, Class = ""custom-item"" }
 ];";
 
-    private readonly string example9RazorCode = @"
+    private readonly string example7RazorCode = @"
 <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"" />";
-    private readonly string example9CsharpCode = @"
+    private readonly string example7CsharpCode = @"
 private List<BitMenuButtonItem> basicItems =
 [
     new() { Text = ""Item A"", Key = ""A"" },
@@ -359,7 +359,7 @@ public partial class _BitMenuButtonItemDemo
     new() { Text = ""Item C"", Key = ""C"" }
 ];";
 
-    private readonly string example10RazorCode = @"
+    private readonly string example8RazorCode = @"
 <BitMenuButton Text=""Toggle"" Items=""basicItems"" Split Toggle />
 
 <BitMenuButton Text=""DefaultIsToggled"" Items=""basicItems"" Split Toggle DefaultIsToggled=""true"" />
@@ -369,7 +369,7 @@ public partial class _BitMenuButtonItemDemo
 
 <div>OnToggleChange: @itemToggledValue</div>
 <BitMenuButton Text=""OnToggleChange"" Items=""basicItems"" Split Toggle OnToggleChange=""v => itemToggledValue = v"" />";
-    private readonly string example10CsharpCode = @"
+    private readonly string example8CsharpCode = @"
 private bool itemIsToggled;
 private bool itemToggledValue;
 
@@ -380,13 +380,13 @@ public partial class _BitMenuButtonItemDemo
     new() { Text = ""Item C"", Key = ""C"" }
 ];";
 
-    private readonly string example11RazorCode = @"
+    private readonly string example9RazorCode = @"
 <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 />";
-    private readonly string example11CsharpCode = @"
+    private readonly string example9CsharpCode = @"
 private List<BitMenuButtonItem> basicItemsIcon =
 [
     new() { Text = ""Item A"", Key = ""A"", IconName = BitIconName.Emoji },
@@ -394,10 +394,10 @@ public partial class _BitMenuButtonItemDemo
     new() { Text = ""Item C"", Key = ""C"", IconName = BitIconName.Emoji2 }
 ];";
 
-    private readonly string example12RazorCode = @"
+    private readonly string example10RazorCode = @"
 <BitMenuButton Sticky Items=""isSelectedItems"" />
 <BitMenuButton Sticky Split Items=""isSelectedItems"" />";
-    private readonly string example12CsharpCode = @"
+    private readonly string example10CsharpCode = @"
 private static List<BitMenuButtonItem> isSelectedItems =
 [
     new() { Text = ""Item A"", Key = ""A"", IconName = BitIconName.Emoji },
@@ -405,7 +405,7 @@ public partial class _BitMenuButtonItemDemo
     new() { Text = ""Item C"", Key = ""C"", IconName = BitIconName.Emoji2, IsSelected = true }
 ];";
 
-    private readonly string example13RazorCode = @"
+    private readonly string example11RazorCode = @"
 <style>
     .item-template-box {
         display: flex;
@@ -431,7 +431,7 @@ Custom Header!
 </BitMenuButton>
 
 <BitMenuButton Text=""Items"" Items=""itemTemplateItems2"" />";
-    private readonly string example13CsharpCode = @"
+    private readonly string example11CsharpCode = @"
 private List<BitMenuButtonItem> basicItems =
 [
     new() { Text = ""Item A"", Key = ""A"" },
@@ -465,7 +465,7 @@ Custom Header!
     }
 ];";
 
-    private readonly string example14RazorCode = @"
+    private readonly string example12RazorCode = @"
 <BitMenuButton Text=""Items"" Items=""basicItems""
                OnChange=""(BitMenuButtonItem item) => eventsChangedItem = item?.Key""
                OnClick=""(BitMenuButtonItem item) => eventsClickedItem = item?.Key"" />
@@ -486,7 +486,7 @@ Custom Header!
 
 <div>Clicked item: @eventsClickedItem</div>
 <div>Changed item: @eventsChangedItem</div>";
-    private readonly string example14CsharpCode = @"
+    private readonly string example12CsharpCode = @"
 private string? eventsClickedItem;
 private string? eventsChangedItem;
 
@@ -515,7 +515,7 @@ protected override void OnInitialized()
     basicItemsOnClick.ForEach(i => i.OnClick = onClick);
 }";
 
-    private readonly string example15RazorCode = @"
+    private readonly string example13RazorCode = @"
 <BitMenuButton Split Sticky Items=""basicItems"" DefaultSelectedItem=""basicItems[1]"" />
 
 <BitMenuButton Sticky Items=""basicItems"" @bind-SelectedItem=""twoWaySelectedItem"" />
@@ -528,7 +528,7 @@ protected override void OnInitialized()
 
 <BitMenuButton Sticky Items=""basicItems"" @bind-IsOpen=""twoWayIsOpen"" />
 <BitCheckbox Label=""Two-way IsOpen"" @bind-Value=""twoWayIsOpen"" />";
-    private readonly string example15CsharpCode = @"
+    private readonly string example13CsharpCode = @"
 private BitMenuButtonItem twoWaySelectedItem = default!;
 private bool oneWayIsOpen;
 private bool twoWayIsOpen;
@@ -555,7 +555,7 @@ protected override void OnInitialized()
     twoWaySelectedItem = basicItems[2];
 }";
 
-    private readonly string example16RazorCode = @"
+    private readonly string example14RazorCode = @"
 <link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
 
 <BitMenuButton Text=""Actions"" 
@@ -596,7 +596,7 @@ protected override void OnInitialized()
                Color=""BitColor.Tertiary""
                Variant=""BitVariant.Text"" 
                Icon=""@BitIconInfo.Fa(""brands github"")"" />";
-    private readonly string example16CsharpCode = @"
+    private readonly string example14CsharpCode = @"
 private static List<BitMenuButtonItem> externalIconItems =
 [
     new() { Text = ""Add"", Icon = ""fa-solid fa-plus"" },
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor
index f99e424bb1..e8da1ead68 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor
@@ -1,4 +1,4 @@
-<DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
+<DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
     <div class="example-content">
         <BitMenuButton Text="MenuButton" TItem="BitMenuButtonOption">
             <BitMenuButtonOption Text="Option A" Key="A" />
@@ -96,63 +96,31 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Color" RazorCode="@example4RazorCode" Id="example4">
-    <div>Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.</div>
-    <br /><br />
-    <div class="example-content">
-        <BitMenuButton Text="Primary" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.Primary">
-            <BitMenuButtonOption Text="Option A" Key="A" />
-            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
-        </BitMenuButton>
 
-        <BitMenuButton Text="Primary" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.Primary">
-            <BitMenuButtonOption Text="Option A" Key="A" />
-            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
-        </BitMenuButton>
 
-        <BitMenuButton Text="Primary" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.Primary">
-            <BitMenuButtonOption Text="Option A" Key="A" />
-            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
-        </BitMenuButton>
-    </div>
+<DemoExample Title="Sticky" RazorCode="@example4RazorCode" Id="example4">
+    <div>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.</div>
     <br />
     <div class="example-content">
-        <BitMenuButton Text="Primary" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.Primary" Split>
-            <BitMenuButtonOption Text="Option A" Key="A" />
-            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
-        </BitMenuButton>
-
-        <BitMenuButton Text="Primary" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.Primary" Split>
+        <BitMenuButton TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Sticky>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
-
-        <BitMenuButton Text="Primary" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.Primary" Split>
+        <BitMenuButton TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Split Sticky>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
     </div>
-    <br /><br />
+    <br />
     <div class="example-content">
-        <BitMenuButton Text="Secondary" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.Secondary">
-            <BitMenuButtonOption Text="Option A" Key="A" />
-            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
-        </BitMenuButton>
-
-        <BitMenuButton Text="Secondary" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.Secondary">
+        <BitMenuButton TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Sticky>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
-
-        <BitMenuButton Text="Secondary" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.Secondary">
+        <BitMenuButton TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Split Sticky>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
@@ -160,401 +128,502 @@
     </div>
     <br />
     <div class="example-content">
-        <BitMenuButton Text="Secondary" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.Secondary" Split>
-            <BitMenuButtonOption Text="Option A" Key="A" />
-            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
-        </BitMenuButton>
-
-        <BitMenuButton Text="Secondary" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.Secondary" Split>
+        <BitMenuButton TItem="BitMenuButtonOption" Variant="BitVariant.Text" Sticky>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
-
-        <BitMenuButton Text="Secondary" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.Secondary" Split>
+        <BitMenuButton TItem="BitMenuButtonOption" Variant="BitVariant.Text" Split Sticky>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
     </div>
-    <br /><br />
-    <div class="example-content">
-        <BitMenuButton Text="Tertiary" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.Tertiary">
-            <BitMenuButtonOption Text="Option A" Key="A" />
-            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
-        </BitMenuButton>
+</DemoExample>
 
-        <BitMenuButton Text="Tertiary" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.Tertiary">
-            <BitMenuButtonOption Text="Option A" Key="A" />
-            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
+<DemoExample Title="Icons" RazorCode="@example5RazorCode" Id="example5">
+    <div>Present BitMenuButton instances with customized icons, enriching the visual options for representing menu buttons.</div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="IconName" IconName="@BitIconName.Edit" TItem="BitMenuButtonOption">
+            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" />
+            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" />
         </BitMenuButton>
 
-        <BitMenuButton Text="Tertiary" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.Tertiary">
-            <BitMenuButtonOption Text="Option A" Key="A" />
-            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
+        <BitMenuButton Text="ChevronDownIconName" TItem="BitMenuButtonOption" ChevronDownIconName="@BitIconName.DoubleChevronDown" Split>
+            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" />
+            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" />
         </BitMenuButton>
     </div>
+</DemoExample>
+
+<DemoExample Title="Style & Class" RazorCode="@example6RazorCode" Id="example6">
+    <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
+    <br />
+    <div><b>Component's Style & Class</b>:</div>
     <br />
     <div class="example-content">
-        <BitMenuButton Text="Tertiary" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.Tertiary" Split>
-            <BitMenuButtonOption Text="Option A" Key="A" />
-            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
-        </BitMenuButton>
-
-        <BitMenuButton Text="Tertiary" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.Tertiary" Split>
+        <BitMenuButton Text="Styled Button" TItem="BitMenuButtonOption" Style="border-radius: 1rem; margin: 1rem; box-shadow: aqua 0 0 1rem; overflow: hidden;">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
 
-        <BitMenuButton Text="Tertiary" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.Tertiary" Split>
+        <BitMenuButton Text="Classed Button" TItem="BitMenuButtonOption" Class="custom-class" Variant="BitVariant.Outline">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
     </div>
-    <br /><br />
-    <div class="example-content">
-        <BitMenuButton Text="Info" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.Info">
-            <BitMenuButtonOption Text="Option A" Key="A" />
-            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
-        </BitMenuButton>
-
-        <BitMenuButton Text="Info" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.Info">
+    <br /><br /><br />
+    <div><b>Option's Style & Class</b>:</div>
+    <br />
+    <div>Non-Sticky:</div>
+    <BitMenuButton Text="Non-Sticky" TItem="BitMenuButtonOption" Variant="BitVariant.Text">
+        <BitMenuButtonOption Text="Option A (Default)" Key="A" IconName="@BitIconName.Emoji" Style="color:brown" />
+        <BitMenuButtonOption Text="Option B (Styled)" Key="B" IconName="@BitIconName.Emoji" Style="color: tomato; border-color: brown; background-color: peachpuff;" />
+        <BitMenuButtonOption Text="Option C (Classed)" Key="C" IconName="@BitIconName.Emoji2" Class="custom-item" />
+    </BitMenuButton>
+    <br />
+    <div>Sticky:</div>
+    <BitMenuButton Text="Sticky" Sticky TItem="BitMenuButtonOption" Variant="BitVariant.Text">
+        <BitMenuButtonOption Text="Option A (Default)" Key="A" IconName="@BitIconName.Emoji" Style="color:brown" />
+        <BitMenuButtonOption Text="Option B (Styled)" Key="B" IconName="@BitIconName.Emoji" Style="color: tomato; border-color: brown; background-color: peachpuff;" />
+        <BitMenuButtonOption Text="Option C (Classed)" Key="C" IconName="@BitIconName.Emoji2" Class="custom-item" />
+    </BitMenuButton>
+    <br /><br /><br />
+    <div><b>Styles</b> & <b>Classes</b>:</div>
+    <br />
+    <div>
+        <BitMenuButton Text="Classes" TItem="BitMenuButtonOption" IconName="@BitIconName.FormatPainter" Variant="BitVariant.Text"
+                       Classes="@(new() { OperatorButton = "custom-button",
+                                              Opened = "custom-opened",
+                                              Callout = "custom-callout",
+                                              ItemButton = "custom-item-button" })">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
-
-        <BitMenuButton Text="Info" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.Info">
+        <br />
+        <BitMenuButton Text="Styles" TItem="BitMenuButtonOption" 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;" })">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
     </div>
+</DemoExample>
+
+<DemoExample Title="Background" RazorCode="@example7RazorCode" Id="example7">
+    <div>Use the Background parameter to control the background color of the callout using BitColorKind values.</div>
     <br />
     <div class="example-content">
-        <BitMenuButton Text="Info" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.Info" Split>
-            <BitMenuButtonOption Text="Option A" Key="A" />
-            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
-        </BitMenuButton>
-
-        <BitMenuButton Text="Info" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.Info" Split>
+        <BitMenuButton Text="Primary" TItem="BitMenuButtonOption" Background="BitColorKind.Primary">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
-
-        <BitMenuButton Text="Info" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.Info" Split>
+        <BitMenuButton Text="Secondary" TItem="BitMenuButtonOption" Background="BitColorKind.Secondary">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
-    </div>
-    <br /><br />
-    <div class="example-content">
-        <BitMenuButton Text="Success" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.Success">
+        <BitMenuButton Text="Tertiary" TItem="BitMenuButtonOption" Background="BitColorKind.Tertiary">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
-
-        <BitMenuButton Text="Success" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.Success">
+        <BitMenuButton Text="Transparent" TItem="BitMenuButtonOption" Background="BitColorKind.Transparent">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
+    </div>
+</DemoExample>
 
-        <BitMenuButton Text="Success" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.Success">
-            <BitMenuButtonOption Text="Option A" Key="A" />
-            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
-        </BitMenuButton>
+<DemoExample Title="Toggle" RazorCode="@example8RazorCode" Id="example8">
+    <div>
+        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.
     </div>
     <br />
+    <div>Toggle:</div>
+    <br />
     <div class="example-content">
-        <BitMenuButton Text="Success" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.Success" Split>
-            <BitMenuButtonOption Text="Option A" Key="A" />
-            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
-        </BitMenuButton>
-
-        <BitMenuButton Text="Success" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.Success" Split>
-            <BitMenuButtonOption Text="Option A" Key="A" />
-            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
-        </BitMenuButton>
-
-        <BitMenuButton Text="Success" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.Success" Split>
+        <BitMenuButton Text="Toggle" TItem="BitMenuButtonOption" Split Toggle>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
     </div>
     <br /><br />
+    <div>DefaultIsToggled:</div>
+    <br />
     <div class="example-content">
-        <BitMenuButton Text="Warning" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.Warning">
-            <BitMenuButtonOption Text="Option A" Key="A" />
-            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
-        </BitMenuButton>
-
-        <BitMenuButton Text="Warning" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.Warning">
-            <BitMenuButtonOption Text="Option A" Key="A" />
-            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
-        </BitMenuButton>
-
-        <BitMenuButton Text="Warning" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.Warning">
+        <BitMenuButton Text="DefaultIsToggled" TItem="BitMenuButtonOption" Split Toggle DefaultIsToggled="true">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
     </div>
+    <br /><br />
+    <div>Two-way binding:</div>
     <br />
     <div class="example-content">
-        <BitMenuButton Text="Warning" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.Warning" Split>
-            <BitMenuButtonOption Text="Option A" Key="A" />
-            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
-        </BitMenuButton>
-
-        <BitMenuButton Text="Warning" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.Warning" Split>
-            <BitMenuButtonOption Text="Option A" Key="A" />
-            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
-        </BitMenuButton>
-
-        <BitMenuButton Text="Warning" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.Warning" Split>
+        <BitMenuButton Text="Two-way" TItem="BitMenuButtonOption" Split Toggle @bind-IsToggled="optionIsToggled">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
+        <BitCheckbox Label="IsToggled" @bind-Value="optionIsToggled" />
     </div>
     <br /><br />
-    <div class="example-content">
-        <BitMenuButton Text="SevereWarning" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.SevereWarning">
-            <BitMenuButtonOption Text="Option A" Key="A" />
-            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
-        </BitMenuButton>
+    <div>OnToggleChange: @optionToggledValue</div>
+    <br />
+    <BitMenuButton Text="OnToggleChange" TItem="BitMenuButtonOption" Split Toggle OnToggleChange="v => optionToggledValue = v">
+        <BitMenuButtonOption Text="Option A" Key="A" />
+        <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+        <BitMenuButtonOption Text="Option C" Key="C" />
+    </BitMenuButton>
+</DemoExample>
 
-        <BitMenuButton Text="SevereWarning" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.SevereWarning">
-            <BitMenuButtonOption Text="Option A" Key="A" />
-            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
+<DemoExample Title="NoIcon" RazorCode="@example9RazorCode" Id="example9">
+    <div>Use the NoIcon parameter to hide the header icon of the menu button.</div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="With icon" TItem="BitMenuButtonOption" IconName="@BitIconName.Edit">
+            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" />
+            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" />
         </BitMenuButton>
-
-        <BitMenuButton Text="SevereWarning" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.SevereWarning">
-            <BitMenuButtonOption Text="Option A" Key="A" />
-            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
+        <BitMenuButton Text="No icon" TItem="BitMenuButtonOption" IconName="@BitIconName.Edit" NoIcon>
+            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" />
+            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" />
         </BitMenuButton>
     </div>
     <br />
     <div class="example-content">
-        <BitMenuButton Text="SevereWarning" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.SevereWarning" Split>
-            <BitMenuButtonOption Text="Option A" Key="A" />
-            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
+        <BitMenuButton Sticky TItem="BitMenuButtonOption">
+            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" />
+            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" />
+        </BitMenuButton>
+        <BitMenuButton Sticky TItem="BitMenuButtonOption" NoIcon>
+            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" />
+            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" />
         </BitMenuButton>
+    </div>
+</DemoExample>
 
-        <BitMenuButton Text="SevereWarning" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.SevereWarning" Split>
-            <BitMenuButtonOption Text="Option A" Key="A" />
-            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
+<DemoExample Title="SelectedItem" RazorCode="@example10RazorCode" Id="example10">
+    <div>In Sticky mode, the currently selected item is visually highlighted in the callout with a distinct background color.</div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Sticky TItem="BitMenuButtonOption">
+            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" />
+            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" />
+            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" IsSelected="true" />
         </BitMenuButton>
+        <BitMenuButton Sticky Split TItem="BitMenuButtonOption">
+            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" />
+            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" />
+            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" IsSelected="true" />
+        </BitMenuButton>
+    </div>
+</DemoExample>
 
-        <BitMenuButton Text="SevereWarning" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.SevereWarning" Split>
+<DemoExample Title="Templates" RazorCode="@example11RazorCode" Id="example11">
+    <div>Explore BitMenuButton's customization capabilities.</div>
+    <div>Note that if <strong>Sticky</strong> set to true, HeaderTemplate and Text will be ignored.</div>
+    <br />
+    <div>HeaderTemplate</div>
+    <BitMenuButton TItem="BitMenuButtonOption">
+        <HeaderTemplate>
+            <div style="font-weight: bold; color: #d13438;">
+                Custom Header!
+            </div>
+        </HeaderTemplate>
+        <Options>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
+        </Options>
+    </BitMenuButton>
+    <br /><br />
+    <div>ItemTemplate</div>
+    <BitMenuButton Text="Options" TItem="BitMenuButtonOption" Split>
+        <ItemTemplate Context="item">
+            <div class="item-template-box">
+                <span style="color:brown">@item.Text (@item.Key)</span>
+            </div>
+        </ItemTemplate>
+        <Options>
+            <BitMenuButtonOption Text="Add" Key="add-key" IconName="@BitIconName.Add" />
+            <BitMenuButtonOption Text="Edit" Key="edit-key" IconName="@BitIconName.Edit" />
+            <BitMenuButtonOption Text="Delete" Key="delete-key" IconName="@BitIconName.Delete" />
+        </Options>
+    </BitMenuButton>
+    <br /><br />
+    <div>Item's template</div>
+    <BitMenuButton Text="Options" TItem="BitMenuButtonOption">
+        <BitMenuButtonOption Text="Add" Key="add-key" IconName="@BitIconName.Add">
+            <Template Context="item"><div class="item-template-box" style="color:green">@item.Text (@item.Key)</div></Template>
+        </BitMenuButtonOption>
+        <BitMenuButtonOption Text="Edit" Key="edit-key" IconName="@BitIconName.Edit">
+            <Template Context="item"><div class="item-template-box" style="color:yellow">@item.Text (@item.Key)</div></Template>
+        </BitMenuButtonOption>
+        <BitMenuButtonOption Text="Delete" Key="delete-key" IconName="@BitIconName.Delete">
+            <Template Context="item"><div class="item-template-box" style="color:red">@item.Text (@item.Key)</div></Template>
+        </BitMenuButtonOption>
+    </BitMenuButton>
+</DemoExample>
+
+<DemoExample Title="Events" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
+    <div>Demonstrate BitMenuButton instances highlighting item click events, offering versatile interactions within the menu buttons.</div>
+    <br />
+    <div>Non-Sticky</div>
+    <div class="example-content">
+        <BitMenuButton Text="Options"
+                       OnChange="(BitMenuButtonOption item) => exampleChangedOption = item?.Key"
+                       OnClick="(BitMenuButtonOption item) => exampleClickedOption = item?.Key">
+            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" />
+            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" />
+        </BitMenuButton>
+
+        <BitMenuButton Split Text="Options" TItem="BitMenuButtonOption"
+                       OnChange="(BitMenuButtonOption item) => exampleChangedOption = item?.Key"
+                       OnClick="@((BitMenuButtonOption item) => exampleClickedOption = "Main button clicked")">
+            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" OnClick="@(_ => exampleClickedOption = $"Option A")" />
+            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" OnClick="@(_ => exampleClickedOption = $"Option C")" />
         </BitMenuButton>
     </div>
     <br /><br />
+    <div>Sticky</div>
     <div class="example-content">
-        <BitMenuButton Text="Error" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.Error">
-            <BitMenuButtonOption Text="Option A" Key="A" />
-            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
+        <BitMenuButton Sticky
+                       OnChange="(BitMenuButtonOption item) => exampleChangedOption = item?.Key"
+                       OnClick="(BitMenuButtonOption item) => exampleClickedOption = item?.Key">
+            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" />
+            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" />
         </BitMenuButton>
 
-        <BitMenuButton Text="Error" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.Error">
-            <BitMenuButtonOption Text="Option A" Key="A" />
-            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
+        <BitMenuButton Split Sticky TItem="BitMenuButtonOption"
+                       OnChange="(BitMenuButtonOption item) => exampleChangedOption = item?.Key"
+                       OnClick="(BitMenuButtonOption item) => exampleClickedOption = item?.Key">
+            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" OnClick="@(_ => exampleClickedOption = $"Option A")" />
+            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" OnClick="@(_ => exampleClickedOption = $"Option C")" />
         </BitMenuButton>
+    </div>
+    <br /><br />
+    <div>Changed option: @exampleChangedOption</div>
+    <div>Clicked option: @exampleClickedOption</div>
+</DemoExample>
 
-        <BitMenuButton Text="Error" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.Error">
-            <BitMenuButtonOption Text="Option A" Key="A" />
-            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
+<DemoExample Title="Binding" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
+    <div>This example demonstrates different ways to handle item selection and changes within the component.</div>
+    <br /><br /><br /><br />
+    <div>
+        <div>DefaultSelectedItem:</div>
+        <br />
+        <BitMenuButton Text="Coming soon..." TItem="BitMenuButtonOption" IsEnabled="false" />
+    </div>
+    <br /><br /><br /><br />
+    <div>
+        <div>Two-way SelectedItem:</div>
+        <br />
+        <BitMenuButton Sticky @bind-SelectedItem="twoWaySelectedOption" TItem="BitMenuButtonOption">
+            <BitMenuButtonOption Text="Option A" Key="A" @ref="optionA" />
+            <BitMenuButtonOption Text="Option B" Key="B" @ref="optionB" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" @ref="optionC" />
         </BitMenuButton>
+        <BitChoiceGroup Horizontal TItem="BitChoiceGroupOption<BitMenuButtonOption>" TValue="BitMenuButtonOption" @bind-Value="@twoWaySelectedOption">
+            <BitChoiceGroupOption Text="Option A" Id="A" Value="optionA" />
+            <BitChoiceGroupOption Text="Option B" Id="B" Value="optionB" IsEnabled="false" />
+            <BitChoiceGroupOption Text="Option C" Id="C" Value="optionC" />
+        </BitChoiceGroup>
     </div>
+    <br /><br /><br /><br />
+    <div>
+        <div>Item's IsSelected:</div>
+        <br />
+        <BitMenuButton Sticky TItem="BitMenuButtonOption">
+            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" />
+            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" />
+            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" IsSelected="true" />
+        </BitMenuButton>
+    </div>
+    <br /><br /><br /><br />
+    <div>One-way IsOpen (closes after 2 seconds):</div>
     <br />
     <div class="example-content">
-        <BitMenuButton Text="Error" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.Error" Split>
-            <BitMenuButtonOption Text="Option A" Key="A" />
-            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
+        <BitMenuButton Sticky IsOpen="oneWayIsOpen" TItem="BitMenuButtonOption">
+            <BitMenuButtonOption Text="Option A" Key="A" @ref="optionA" />
+            <BitMenuButtonOption Text="Option B" Key="B" @ref="optionB" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" @ref="optionC" />
+        </BitMenuButton>
+        <BitCheckbox Label="One-way IsOpen" @bind-Value="oneWayIsOpen" OnChange="async _ => { await Task.Delay(2000); oneWayIsOpen = false; }" />
+    </div>
+    <br /><br /><br /><br />
+    <div>Two-way IsOpen:</div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Sticky @bind-IsOpen="twoWayIsOpen" TItem="BitMenuButtonOption">
+            <BitMenuButtonOption Text="Option A" Key="A" @ref="optionA" />
+            <BitMenuButtonOption Text="Option B" Key="B" @ref="optionB" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" @ref="optionC" />
         </BitMenuButton>
+        <BitCheckbox Label="Two-way IsOpen" @bind-Value="twoWayIsOpen" />
+    </div>
+</DemoExample>
 
-        <BitMenuButton Text="Error" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.Error" Split>
-            <BitMenuButtonOption Text="Option A" Key="A" />
-            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
+<DemoExample Title="External Icons" RazorCode="@example14RazorCode" Id="example14">
+    <div>External icon libraries like FontAwesome can be used with the Icon parameter.</div>
+    
+    <br />
+    <br />
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
+
+    <div class="example-content">
+        <BitMenuButton Text="Actions" 
+                       TItem="BitMenuButtonOption"
+                       Icon="@("fa-solid fa-house")">
+            <BitMenuButtonOption Text="Add" Icon="@("fa-solid fa-plus")" />
+            <BitMenuButtonOption Text="Edit" Icon="@("fa-solid fa-pen")" />
+            <BitMenuButtonOption Text="Delete" Icon="@("fa-solid fa-trash")" />
         </BitMenuButton>
 
-        <BitMenuButton Text="Error" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.Error" Split>
-            <BitMenuButtonOption Text="Option A" Key="A" />
-            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
+        <BitMenuButton Split 
+                       Text="Actions" 
+                       TItem="BitMenuButtonOption"
+                       Icon="@("fa-brands fa-github")">
+            <BitMenuButtonOption Text="Add" Icon="@("fa-solid fa-plus")" />
+            <BitMenuButtonOption Text="Edit" Icon="@("fa-solid fa-pen")" />
+            <BitMenuButtonOption Text="Delete" Icon="@("fa-solid fa-trash")" />
         </BitMenuButton>
     </div>
-    <br /><br />
-    <div style="background:var(--bit-clr-fg-sec);padding:1rem">
-        <div class="example-content">
-            <BitMenuButton Text="PrimaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.PrimaryBackground">
-                <BitMenuButtonOption Text="Option A" Key="A" />
-                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-                <BitMenuButtonOption Text="Option C" Key="C" />
-            </BitMenuButton>
 
-            <BitMenuButton Text="PrimaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.PrimaryBackground">
-                <BitMenuButtonOption Text="Option A" Key="A" />
-                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-                <BitMenuButtonOption Text="Option C" Key="C" />
-            </BitMenuButton>
-
-            <BitMenuButton Text="PrimaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.PrimaryBackground">
-                <BitMenuButtonOption Text="Option A" Key="A" />
-                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-                <BitMenuButtonOption Text="Option C" Key="C" />
-            </BitMenuButton>
-        </div>
-        <br />
-        <div class="example-content">
-            <BitMenuButton Text="PrimaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.PrimaryBackground" Split>
-                <BitMenuButtonOption Text="Option A" Key="A" />
-                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-                <BitMenuButtonOption Text="Option C" Key="C" />
-            </BitMenuButton>
-
-            <BitMenuButton Text="PrimaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.PrimaryBackground" Split>
-                <BitMenuButtonOption Text="Option A" Key="A" />
-                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-                <BitMenuButtonOption Text="Option C" Key="C" />
-            </BitMenuButton>
+    <br />
+    <br />
 
-            <BitMenuButton Text="PrimaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.PrimaryBackground" Split>
-                <BitMenuButtonOption Text="Option A" Key="A" />
-                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-                <BitMenuButtonOption Text="Option C" Key="C" />
-            </BitMenuButton>
-        </div>
-        <br /><br />
-        <div class="example-content">
-            <BitMenuButton Text="SecondaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.SecondaryBackground">
-                <BitMenuButtonOption Text="Option A" Key="A" />
-                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-                <BitMenuButtonOption Text="Option C" Key="C" />
-            </BitMenuButton>
+    <div class="example-content">
+        <BitMenuButton Text="Actions" 
+                       Color="BitColor.Secondary"
+                       TItem="BitMenuButtonOption" 
+                       Variant="BitVariant.Outline"
+                       Icon="@BitIconInfo.Css("fa-solid fa-house")">
+            <BitMenuButtonOption Text="Add" Icon="@BitIconInfo.Css("fa-solid fa-plus")" />
+            <BitMenuButtonOption Text="Edit" Icon="@BitIconInfo.Css("fa-solid fa-pen")" />
+            <BitMenuButtonOption Text="Delete" Icon="@BitIconInfo.Css("fa-solid fa-trash")" />
+        </BitMenuButton>
 
-            <BitMenuButton Text="SecondaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.SecondaryBackground">
-                <BitMenuButtonOption Text="Option A" Key="A" />
-                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-                <BitMenuButtonOption Text="Option C" Key="C" />
-            </BitMenuButton>
+        <BitMenuButton Split 
+                       Text="Actions" 
+                       Color="BitColor.Secondary"
+                       TItem="BitMenuButtonOption" 
+                       Variant="BitVariant.Outline"
+                       Icon="@BitIconInfo.Css("fa-brands fa-github")">
+            <BitMenuButtonOption Text="Add" Icon="@BitIconInfo.Css("fa-solid fa-plus")" />
+            <BitMenuButtonOption Text="Edit" Icon="@BitIconInfo.Css("fa-solid fa-pen")" />
+            <BitMenuButtonOption Text="Delete" Icon="@BitIconInfo.Css("fa-solid fa-trash")" />
+        </BitMenuButton>
+    </div>
 
-            <BitMenuButton Text="SecondaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.SecondaryBackground">
-                <BitMenuButtonOption Text="Option A" Key="A" />
-                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-                <BitMenuButtonOption Text="Option C" Key="C" />
-            </BitMenuButton>
-        </div>
-        <br />
-        <div class="example-content">
-            <BitMenuButton Text="SecondaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.SecondaryBackground" Split>
-                <BitMenuButtonOption Text="Option A" Key="A" />
-                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-                <BitMenuButtonOption Text="Option C" Key="C" />
-            </BitMenuButton>
+    <br />
+    <br />
 
-            <BitMenuButton Text="SecondaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.SecondaryBackground" Split>
-                <BitMenuButtonOption Text="Option A" Key="A" />
-                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-                <BitMenuButtonOption Text="Option C" Key="C" />
-            </BitMenuButton>
+    <div class="example-content">
+        <BitMenuButton Text="Actions" 
+                       Variant="BitVariant.Text"
+                       Color="BitColor.Tertiary"
+                       TItem="BitMenuButtonOption" 
+                       Icon="@BitIconInfo.Fa("solid house")">
+            <BitMenuButtonOption Text="Add" Icon="@BitIconInfo.Fa("solid plus")" />
+            <BitMenuButtonOption Text="Edit" Icon="@BitIconInfo.Fa("solid pen")" />
+            <BitMenuButtonOption Text="Delete" Icon="@BitIconInfo.Fa("solid trash")" />
+        </BitMenuButton>
 
-            <BitMenuButton Text="SecondaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.SecondaryBackground" Split>
-                <BitMenuButtonOption Text="Option A" Key="A" />
-                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-                <BitMenuButtonOption Text="Option C" Key="C" />
-            </BitMenuButton>
-        </div>
-        <br /><br />
-        <div class="example-content">
-            <BitMenuButton Text="TertiaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.TertiaryBackground">
-                <BitMenuButtonOption Text="Option A" Key="A" />
-                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-                <BitMenuButtonOption Text="Option C" Key="C" />
-            </BitMenuButton>
+        <BitMenuButton Split 
+                       Text="Actions"
+                       Color="BitColor.Tertiary"
+                       Variant="BitVariant.Text"
+                       TItem="BitMenuButtonOption" 
+                       Icon="@BitIconInfo.Fa("brands github")">
+            <BitMenuButtonOption Text="Add" Icon="@BitIconInfo.Fa("solid plus")" />
+            <BitMenuButtonOption Text="Edit" Icon="@BitIconInfo.Fa("solid pen")" />
+            <BitMenuButtonOption Text="Delete" Icon="@BitIconInfo.Fa("solid trash")" />
+        </BitMenuButton>
+    </div>
+</DemoExample>
 
-            <BitMenuButton Text="TertiaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.TertiaryBackground">
-                <BitMenuButtonOption Text="Option A" Key="A" />
-                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-                <BitMenuButtonOption Text="Option C" Key="C" />
-            </BitMenuButton>
+<DemoExample Title="Color" RazorCode="@example15RazorCode" Id="example15">
+    <div>Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.</div>
+    <br /><br />
+    <div class="example-content">
+        <BitMenuButton Text="Primary" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.Primary">
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
+        </BitMenuButton>
 
-            <BitMenuButton Text="TertiaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.TertiaryBackground">
-                <BitMenuButtonOption Text="Option A" Key="A" />
-                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-                <BitMenuButtonOption Text="Option C" Key="C" />
-            </BitMenuButton>
-        </div>
-        <br />
-        <div class="example-content">
-            <BitMenuButton Text="TertiaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.TertiaryBackground" Split>
-                <BitMenuButtonOption Text="Option A" Key="A" />
-                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-                <BitMenuButtonOption Text="Option C" Key="C" />
-            </BitMenuButton>
+        <BitMenuButton Text="Primary" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.Primary">
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
+        </BitMenuButton>
 
-            <BitMenuButton Text="TertiaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.TertiaryBackground" Split>
-                <BitMenuButtonOption Text="Option A" Key="A" />
-                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-                <BitMenuButtonOption Text="Option C" Key="C" />
-            </BitMenuButton>
+        <BitMenuButton Text="Primary" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.Primary">
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
+        </BitMenuButton>
+    </div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="Primary" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.Primary" Split>
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
+        </BitMenuButton>
 
-            <BitMenuButton Text="TertiaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.TertiaryBackground" Split>
-                <BitMenuButtonOption Text="Option A" Key="A" />
-                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-                <BitMenuButtonOption Text="Option C" Key="C" />
-            </BitMenuButton>
-        </div>
+        <BitMenuButton Text="Primary" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.Primary" Split>
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
+        </BitMenuButton>
+
+        <BitMenuButton Text="Primary" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.Primary" Split>
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
+        </BitMenuButton>
     </div>
     <br /><br />
     <div class="example-content">
-        <BitMenuButton Text="PrimaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.PrimaryForeground">
+        <BitMenuButton Text="Secondary" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.Secondary">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
 
-        <BitMenuButton Text="PrimaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.PrimaryForeground">
+        <BitMenuButton Text="Secondary" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.Secondary">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
 
-        <BitMenuButton Text="PrimaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.PrimaryForeground">
+        <BitMenuButton Text="Secondary" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.Secondary">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
@@ -562,19 +631,19 @@
     </div>
     <br />
     <div class="example-content">
-        <BitMenuButton Text="PrimaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.PrimaryForeground" Split>
+        <BitMenuButton Text="Secondary" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.Secondary" Split>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
 
-        <BitMenuButton Text="PrimaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.PrimaryForeground" Split>
+        <BitMenuButton Text="Secondary" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.Secondary" Split>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
 
-        <BitMenuButton Text="PrimaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.PrimaryForeground" Split>
+        <BitMenuButton Text="Secondary" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.Secondary" Split>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
@@ -582,19 +651,19 @@
     </div>
     <br /><br />
     <div class="example-content">
-        <BitMenuButton Text="SecondaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.SecondaryForeground">
+        <BitMenuButton Text="Tertiary" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.Tertiary">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
 
-        <BitMenuButton Text="SecondaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.SecondaryForeground">
+        <BitMenuButton Text="Tertiary" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.Tertiary">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
 
-        <BitMenuButton Text="SecondaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.SecondaryForeground">
+        <BitMenuButton Text="Tertiary" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.Tertiary">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
@@ -602,19 +671,19 @@
     </div>
     <br />
     <div class="example-content">
-        <BitMenuButton Text="SecondaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.SecondaryForeground" Split>
+        <BitMenuButton Text="Tertiary" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.Tertiary" Split>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
 
-        <BitMenuButton Text="SecondaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.SecondaryForeground" Split>
+        <BitMenuButton Text="Tertiary" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.Tertiary" Split>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
 
-        <BitMenuButton Text="SecondaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.SecondaryForeground" Split>
+        <BitMenuButton Text="Tertiary" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.Tertiary" Split>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
@@ -622,19 +691,19 @@
     </div>
     <br /><br />
     <div class="example-content">
-        <BitMenuButton Text="TertiaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.TertiaryForeground">
+        <BitMenuButton Text="Info" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.Info">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
 
-        <BitMenuButton Text="TertiaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.TertiaryForeground">
+        <BitMenuButton Text="Info" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.Info">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
 
-        <BitMenuButton Text="TertiaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.TertiaryForeground">
+        <BitMenuButton Text="Info" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.Info">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
@@ -642,19 +711,19 @@
     </div>
     <br />
     <div class="example-content">
-        <BitMenuButton Text="TertiaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.TertiaryForeground" Split>
+        <BitMenuButton Text="Info" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.Info" Split>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
 
-        <BitMenuButton Text="TertiaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.TertiaryForeground" Split>
+        <BitMenuButton Text="Info" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.Info" Split>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
 
-        <BitMenuButton Text="TertiaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.TertiaryForeground" Split>
+        <BitMenuButton Text="Info" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.Info" Split>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
@@ -662,19 +731,19 @@
     </div>
     <br /><br />
     <div class="example-content">
-        <BitMenuButton Text="PrimaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.PrimaryBorder">
+        <BitMenuButton Text="Success" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.Success">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
 
-        <BitMenuButton Text="PrimaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.PrimaryBorder">
+        <BitMenuButton Text="Success" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.Success">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
 
-        <BitMenuButton Text="PrimaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.PrimaryBorder">
+        <BitMenuButton Text="Success" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.Success">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
@@ -682,19 +751,19 @@
     </div>
     <br />
     <div class="example-content">
-        <BitMenuButton Text="PrimaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.PrimaryBorder" Split>
+        <BitMenuButton Text="Success" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.Success" Split>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
 
-        <BitMenuButton Text="PrimaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.PrimaryBorder" Split>
+        <BitMenuButton Text="Success" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.Success" Split>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
 
-        <BitMenuButton Text="PrimaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.PrimaryBorder" Split>
+        <BitMenuButton Text="Success" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.Success" Split>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
@@ -702,19 +771,19 @@
     </div>
     <br /><br />
     <div class="example-content">
-        <BitMenuButton Text="SecondaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.SecondaryBorder">
+        <BitMenuButton Text="Warning" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.Warning">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
 
-        <BitMenuButton Text="SecondaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.SecondaryBorder">
+        <BitMenuButton Text="Warning" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.Warning">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
 
-        <BitMenuButton Text="SecondaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.SecondaryBorder">
+        <BitMenuButton Text="Warning" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.Warning">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
@@ -722,19 +791,19 @@
     </div>
     <br />
     <div class="example-content">
-        <BitMenuButton Text="SecondaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.SecondaryBorder" Split>
+        <BitMenuButton Text="Warning" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.Warning" Split>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
 
-        <BitMenuButton Text="SecondaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.SecondaryBorder" Split>
+        <BitMenuButton Text="Warning" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.Warning" Split>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
 
-        <BitMenuButton Text="SecondaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.SecondaryBorder" Split>
+        <BitMenuButton Text="Warning" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.Warning" Split>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
@@ -742,19 +811,19 @@
     </div>
     <br /><br />
     <div class="example-content">
-        <BitMenuButton Text="TertiaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.TertiaryBorder">
+        <BitMenuButton Text="SevereWarning" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.SevereWarning">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
 
-        <BitMenuButton Text="TertiaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.TertiaryBorder">
+        <BitMenuButton Text="SevereWarning" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.SevereWarning">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
 
-        <BitMenuButton Text="TertiaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.TertiaryBorder">
+        <BitMenuButton Text="SevereWarning" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.SevereWarning">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
@@ -762,59 +831,201 @@
     </div>
     <br />
     <div class="example-content">
-        <BitMenuButton Text="TertiaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.TertiaryBorder" Split>
+        <BitMenuButton Text="SevereWarning" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.SevereWarning" Split>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
 
-        <BitMenuButton Text="TertiaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.TertiaryBorder" Split>
+        <BitMenuButton Text="SevereWarning" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.SevereWarning" Split>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
 
-        <BitMenuButton Text="TertiaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.TertiaryBorder" Split>
+        <BitMenuButton Text="SevereWarning" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.SevereWarning" Split>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
     </div>
-</DemoExample>
+    <br /><br />
+    <div class="example-content">
+        <BitMenuButton Text="Error" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.Error">
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
+        </BitMenuButton>
 
-<DemoExample Title="Size" RazorCode="@example5RazorCode" Id="example5">
-    <div>Varying sizes for menu buttons tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.</div>
+        <BitMenuButton Text="Error" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.Error">
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
+        </BitMenuButton>
+
+        <BitMenuButton Text="Error" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.Error">
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
+        </BitMenuButton>
+    </div>
     <br />
     <div class="example-content">
-        <BitMenuButton Text="Small" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Size="BitSize.Small">
+        <BitMenuButton Text="Error" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.Error" Split>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
-        <BitMenuButton Text="Small" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Size="BitSize.Small">
+
+        <BitMenuButton Text="Error" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.Error" Split>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
-        <BitMenuButton Text="Small" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Size="BitSize.Small">
+
+        <BitMenuButton Text="Error" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.Error" Split>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
     </div>
-    <br />
+    <br /><br />
+    <div style="background:var(--bit-clr-fg-sec);padding:1rem">
+        <div class="example-content">
+            <BitMenuButton Text="PrimaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.PrimaryBackground">
+                <BitMenuButtonOption Text="Option A" Key="A" />
+                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+                <BitMenuButtonOption Text="Option C" Key="C" />
+            </BitMenuButton>
+
+            <BitMenuButton Text="PrimaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.PrimaryBackground">
+                <BitMenuButtonOption Text="Option A" Key="A" />
+                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+                <BitMenuButtonOption Text="Option C" Key="C" />
+            </BitMenuButton>
+
+            <BitMenuButton Text="PrimaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.PrimaryBackground">
+                <BitMenuButtonOption Text="Option A" Key="A" />
+                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+                <BitMenuButtonOption Text="Option C" Key="C" />
+            </BitMenuButton>
+        </div>
+        <br />
+        <div class="example-content">
+            <BitMenuButton Text="PrimaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.PrimaryBackground" Split>
+                <BitMenuButtonOption Text="Option A" Key="A" />
+                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+                <BitMenuButtonOption Text="Option C" Key="C" />
+            </BitMenuButton>
+
+            <BitMenuButton Text="PrimaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.PrimaryBackground" Split>
+                <BitMenuButtonOption Text="Option A" Key="A" />
+                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+                <BitMenuButtonOption Text="Option C" Key="C" />
+            </BitMenuButton>
+
+            <BitMenuButton Text="PrimaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.PrimaryBackground" Split>
+                <BitMenuButtonOption Text="Option A" Key="A" />
+                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+                <BitMenuButtonOption Text="Option C" Key="C" />
+            </BitMenuButton>
+        </div>
+        <br /><br />
+        <div class="example-content">
+            <BitMenuButton Text="SecondaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.SecondaryBackground">
+                <BitMenuButtonOption Text="Option A" Key="A" />
+                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+                <BitMenuButtonOption Text="Option C" Key="C" />
+            </BitMenuButton>
+
+            <BitMenuButton Text="SecondaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.SecondaryBackground">
+                <BitMenuButtonOption Text="Option A" Key="A" />
+                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+                <BitMenuButtonOption Text="Option C" Key="C" />
+            </BitMenuButton>
+
+            <BitMenuButton Text="SecondaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.SecondaryBackground">
+                <BitMenuButtonOption Text="Option A" Key="A" />
+                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+                <BitMenuButtonOption Text="Option C" Key="C" />
+            </BitMenuButton>
+        </div>
+        <br />
+        <div class="example-content">
+            <BitMenuButton Text="SecondaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.SecondaryBackground" Split>
+                <BitMenuButtonOption Text="Option A" Key="A" />
+                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+                <BitMenuButtonOption Text="Option C" Key="C" />
+            </BitMenuButton>
+
+            <BitMenuButton Text="SecondaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.SecondaryBackground" Split>
+                <BitMenuButtonOption Text="Option A" Key="A" />
+                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+                <BitMenuButtonOption Text="Option C" Key="C" />
+            </BitMenuButton>
+
+            <BitMenuButton Text="SecondaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.SecondaryBackground" Split>
+                <BitMenuButtonOption Text="Option A" Key="A" />
+                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+                <BitMenuButtonOption Text="Option C" Key="C" />
+            </BitMenuButton>
+        </div>
+        <br /><br />
+        <div class="example-content">
+            <BitMenuButton Text="TertiaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.TertiaryBackground">
+                <BitMenuButtonOption Text="Option A" Key="A" />
+                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+                <BitMenuButtonOption Text="Option C" Key="C" />
+            </BitMenuButton>
+
+            <BitMenuButton Text="TertiaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.TertiaryBackground">
+                <BitMenuButtonOption Text="Option A" Key="A" />
+                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+                <BitMenuButtonOption Text="Option C" Key="C" />
+            </BitMenuButton>
+
+            <BitMenuButton Text="TertiaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.TertiaryBackground">
+                <BitMenuButtonOption Text="Option A" Key="A" />
+                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+                <BitMenuButtonOption Text="Option C" Key="C" />
+            </BitMenuButton>
+        </div>
+        <br />
+        <div class="example-content">
+            <BitMenuButton Text="TertiaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.TertiaryBackground" Split>
+                <BitMenuButtonOption Text="Option A" Key="A" />
+                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+                <BitMenuButtonOption Text="Option C" Key="C" />
+            </BitMenuButton>
+
+            <BitMenuButton Text="TertiaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.TertiaryBackground" Split>
+                <BitMenuButtonOption Text="Option A" Key="A" />
+                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+                <BitMenuButtonOption Text="Option C" Key="C" />
+            </BitMenuButton>
+
+            <BitMenuButton Text="TertiaryBackground" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.TertiaryBackground" Split>
+                <BitMenuButtonOption Text="Option A" Key="A" />
+                <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+                <BitMenuButtonOption Text="Option C" Key="C" />
+            </BitMenuButton>
+        </div>
+    </div>
+    <br /><br />
     <div class="example-content">
-        <BitMenuButton Text="Medium" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Size="BitSize.Medium">
+        <BitMenuButton Text="PrimaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.PrimaryForeground">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
-        <BitMenuButton Text="Medium" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Size="BitSize.Medium">
+
+        <BitMenuButton Text="PrimaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.PrimaryForeground">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
-        <BitMenuButton Text="Medium" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Size="BitSize.Medium">
+
+        <BitMenuButton Text="PrimaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.PrimaryForeground">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
@@ -822,47 +1033,39 @@
     </div>
     <br />
     <div class="example-content">
-        <BitMenuButton Text="Large" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Size="BitSize.Large">
+        <BitMenuButton Text="PrimaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.PrimaryForeground" Split>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
-        <BitMenuButton Text="Large" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Size="BitSize.Large">
+
+        <BitMenuButton Text="PrimaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.PrimaryForeground" Split>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
-        <BitMenuButton Text="Large" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Size="BitSize.Large">
+
+        <BitMenuButton Text="PrimaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.PrimaryForeground" Split>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
     </div>
-</DemoExample>
-
-<DemoExample Title="Sticky" RazorCode="@example6RazorCode" Id="example6">
-    <div>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.</div>
-    <br />
+    <br /><br />
     <div class="example-content">
-        <BitMenuButton TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Sticky>
-            <BitMenuButtonOption Text="Option A" Key="A" />
-            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
-        </BitMenuButton>
-        <BitMenuButton TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Split Sticky>
+        <BitMenuButton Text="SecondaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.SecondaryForeground">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
-    </div>
-    <br />
-    <div class="example-content">
-        <BitMenuButton TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Sticky>
+
+        <BitMenuButton Text="SecondaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.SecondaryForeground">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
-        <BitMenuButton TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Split Sticky>
+
+        <BitMenuButton Text="SecondaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.SecondaryForeground">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
@@ -870,439 +1073,240 @@
     </div>
     <br />
     <div class="example-content">
-        <BitMenuButton TItem="BitMenuButtonOption" Variant="BitVariant.Text" Sticky>
-            <BitMenuButtonOption Text="Option A" Key="A" />
-            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
-        </BitMenuButton>
-        <BitMenuButton TItem="BitMenuButtonOption" Variant="BitVariant.Text" Split Sticky>
+        <BitMenuButton Text="SecondaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.SecondaryForeground" Split>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
-    </div>
-</DemoExample>
-
-<DemoExample Title="Icons" RazorCode="@example7RazorCode" Id="example7">
-    <div>Present BitMenuButton instances with customized icons, enriching the visual options for representing menu buttons.</div>
-    <br />
-    <div class="example-content">
-        <BitMenuButton Text="IconName" IconName="@BitIconName.Edit" TItem="BitMenuButtonOption">
-            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" />
-            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" />
-        </BitMenuButton>
-
-        <BitMenuButton Text="ChevronDownIconName" TItem="BitMenuButtonOption" ChevronDownIconName="@BitIconName.DoubleChevronDown" Split>
-            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" />
-            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" />
-        </BitMenuButton>
-    </div>
-</DemoExample>
 
-<DemoExample Title="Style & Class" RazorCode="@example8RazorCode" Id="example8">
-    <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
-    <br />
-    <div><b>Component's Style & Class</b>:</div>
-    <br />
-    <div class="example-content">
-        <BitMenuButton Text="Styled Button" TItem="BitMenuButtonOption" Style="border-radius: 1rem; margin: 1rem; box-shadow: aqua 0 0 1rem; overflow: hidden;">
+        <BitMenuButton Text="SecondaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.SecondaryForeground" Split>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
 
-        <BitMenuButton Text="Classed Button" TItem="BitMenuButtonOption" Class="custom-class" Variant="BitVariant.Outline">
+        <BitMenuButton Text="SecondaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.SecondaryForeground" Split>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
     </div>
-    <br /><br /><br />
-    <div><b>Option's Style & Class</b>:</div>
-    <br />
-    <div>Non-Sticky:</div>
-    <BitMenuButton Text="Non-Sticky" TItem="BitMenuButtonOption" Variant="BitVariant.Text">
-        <BitMenuButtonOption Text="Option A (Default)" Key="A" IconName="@BitIconName.Emoji" Style="color:brown" />
-        <BitMenuButtonOption Text="Option B (Styled)" Key="B" IconName="@BitIconName.Emoji" Style="color: tomato; border-color: brown; background-color: peachpuff;" />
-        <BitMenuButtonOption Text="Option C (Classed)" Key="C" IconName="@BitIconName.Emoji2" Class="custom-item" />
-    </BitMenuButton>
-    <br />
-    <div>Sticky:</div>
-    <BitMenuButton Text="Sticky" Sticky TItem="BitMenuButtonOption" Variant="BitVariant.Text">
-        <BitMenuButtonOption Text="Option A (Default)" Key="A" IconName="@BitIconName.Emoji" Style="color:brown" />
-        <BitMenuButtonOption Text="Option B (Styled)" Key="B" IconName="@BitIconName.Emoji" Style="color: tomato; border-color: brown; background-color: peachpuff;" />
-        <BitMenuButtonOption Text="Option C (Classed)" Key="C" IconName="@BitIconName.Emoji2" Class="custom-item" />
-    </BitMenuButton>
-    <br /><br /><br />
-    <div><b>Styles</b> & <b>Classes</b>:</div>
-    <br />
-    <div>
-        <BitMenuButton Text="Classes" TItem="BitMenuButtonOption" IconName="@BitIconName.FormatPainter" Variant="BitVariant.Text"
-                       Classes="@(new() { OperatorButton = "custom-button",
-                                              Opened = "custom-opened",
-                                              Callout = "custom-callout",
-                                              ItemButton = "custom-item-button" })">
-            <BitMenuButtonOption Text="Option A" Key="A" />
-            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
-        </BitMenuButton>
-        <br />
-        <BitMenuButton Text="Styles" TItem="BitMenuButtonOption" 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;" })">
+    <br /><br />
+    <div class="example-content">
+        <BitMenuButton Text="TertiaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.TertiaryForeground">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
-    </div>
-</DemoExample>
 
-<DemoExample Title="Background" RazorCode="@example9RazorCode" Id="example9">
-    <div>Use the Background parameter to control the background color of the callout using BitColorKind values.</div>
-    <br />
-    <div class="example-content">
-        <BitMenuButton Text="Primary" TItem="BitMenuButtonOption" Background="BitColorKind.Primary">
+        <BitMenuButton Text="TertiaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.TertiaryForeground">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
-        <BitMenuButton Text="Secondary" TItem="BitMenuButtonOption" Background="BitColorKind.Secondary">
+
+        <BitMenuButton Text="TertiaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.TertiaryForeground">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
-        <BitMenuButton Text="Tertiary" TItem="BitMenuButtonOption" Background="BitColorKind.Tertiary">
+    </div>
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="TertiaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.TertiaryForeground" Split>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
-        <BitMenuButton Text="Transparent" TItem="BitMenuButtonOption" Background="BitColorKind.Transparent">
+
+        <BitMenuButton Text="TertiaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.TertiaryForeground" Split>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
-    </div>
-</DemoExample>
 
-<DemoExample Title="Toggle" RazorCode="@example10RazorCode" Id="example10">
-    <div>Enable toggle behavior on the header button in Split mode. Clicking the operator button will toggle the IsToggled state instead of opening the callout.</div>
-    <br />
-    <div>Toggle:</div>
-    <br />
-    <div class="example-content">
-        <BitMenuButton Text="Toggle" TItem="BitMenuButtonOption" Split Toggle>
+        <BitMenuButton Text="TertiaryForeground" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.TertiaryForeground" Split>
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
     </div>
     <br /><br />
-    <div>DefaultIsToggled:</div>
-    <br />
     <div class="example-content">
-        <BitMenuButton Text="DefaultIsToggled" TItem="BitMenuButtonOption" Split Toggle DefaultIsToggled="true">
+        <BitMenuButton Text="PrimaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.PrimaryBorder">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
-    </div>
-    <br /><br />
-    <div>Two-way binding:</div>
-    <br />
-    <div class="example-content">
-        <BitMenuButton Text="Two-way" TItem="BitMenuButtonOption" Split Toggle @bind-IsToggled="optionIsToggled">
+
+        <BitMenuButton Text="PrimaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.PrimaryBorder">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
             <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
-        <BitCheckbox Label="IsToggled" @bind-Value="optionIsToggled" />
-    </div>
-    <br /><br />
-    <div>OnToggleChange: @optionToggledValue</div>
-    <br />
-    <BitMenuButton Text="OnToggleChange" TItem="BitMenuButtonOption" Split Toggle OnToggleChange="v => optionToggledValue = v">
-        <BitMenuButtonOption Text="Option A" Key="A" />
-        <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-        <BitMenuButtonOption Text="Option C" Key="C" />
-    </BitMenuButton>
-</DemoExample>
-
-<DemoExample Title="NoIcon" RazorCode="@example11RazorCode" Id="example11">
-    <div>Use the NoIcon parameter to hide the header icon of the menu button.</div>
-    <br />
-    <div class="example-content">
-        <BitMenuButton Text="With icon" TItem="BitMenuButtonOption" IconName="@BitIconName.Edit">
-            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" />
-            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" />
-        </BitMenuButton>
-        <BitMenuButton Text="No icon" TItem="BitMenuButtonOption" IconName="@BitIconName.Edit" NoIcon>
-            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" />
-            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" />
-        </BitMenuButton>
-    </div>
-    <br />
-    <div class="example-content">
-        <BitMenuButton Sticky TItem="BitMenuButtonOption">
-            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" />
-            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" />
-        </BitMenuButton>
-        <BitMenuButton Sticky TItem="BitMenuButtonOption" NoIcon>
-            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" />
-            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" />
-        </BitMenuButton>
-    </div>
-</DemoExample>
-
-<DemoExample Title="SelectedItem" RazorCode="@example12RazorCode" Id="example12">
-    <div>In Sticky mode, the currently selected item is visually highlighted in the callout with a distinct background color.</div>
-    <br />
-    <div class="example-content">
-        <BitMenuButton Sticky TItem="BitMenuButtonOption">
-            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" />
-            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" />
-            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" IsSelected="true" />
-        </BitMenuButton>
-        <BitMenuButton Sticky Split TItem="BitMenuButtonOption">
-            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" />
-            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" />
-            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" IsSelected="true" />
-        </BitMenuButton>
-    </div>
-</DemoExample>
 
-<DemoExample Title="Templates" RazorCode="@example13RazorCode" Id="example13">
-    <div>Explore BitMenuButton's customization capabilities.</div>
-    <div>Note that if <strong>Sticky</strong> set to true, HeaderTemplate and Text will be ignored.</div>
-    <br />
-    <div>HeaderTemplate</div>
-    <BitMenuButton TItem="BitMenuButtonOption">
-        <HeaderTemplate>
-            <div style="font-weight: bold; color: #d13438;">
-                Custom Header!
-            </div>
-        </HeaderTemplate>
-        <Options>
+        <BitMenuButton Text="PrimaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.PrimaryBorder">
             <BitMenuButtonOption Text="Option A" Key="A" />
             <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" />
-        </Options>
-    </BitMenuButton>
-    <br /><br />
-    <div>ItemTemplate</div>
-    <BitMenuButton Text="Options" TItem="BitMenuButtonOption" Split>
-        <ItemTemplate Context="item">
-            <div class="item-template-box">
-                <span style="color:brown">@item.Text (@item.Key)</span>
-            </div>
-        </ItemTemplate>
-        <Options>
-            <BitMenuButtonOption Text="Add" Key="add-key" IconName="@BitIconName.Add" />
-            <BitMenuButtonOption Text="Edit" Key="edit-key" IconName="@BitIconName.Edit" />
-            <BitMenuButtonOption Text="Delete" Key="delete-key" IconName="@BitIconName.Delete" />
-        </Options>
-    </BitMenuButton>
-    <br /><br />
-    <div>Item's template</div>
-    <BitMenuButton Text="Options" TItem="BitMenuButtonOption">
-        <BitMenuButtonOption Text="Add" Key="add-key" IconName="@BitIconName.Add">
-            <Template Context="item"><div class="item-template-box" style="color:green">@item.Text (@item.Key)</div></Template>
-        </BitMenuButtonOption>
-        <BitMenuButtonOption Text="Edit" Key="edit-key" IconName="@BitIconName.Edit">
-            <Template Context="item"><div class="item-template-box" style="color:yellow">@item.Text (@item.Key)</div></Template>
-        </BitMenuButtonOption>
-        <BitMenuButtonOption Text="Delete" Key="delete-key" IconName="@BitIconName.Delete">
-            <Template Context="item"><div class="item-template-box" style="color:red">@item.Text (@item.Key)</div></Template>
-        </BitMenuButtonOption>
-    </BitMenuButton>
-</DemoExample>
-
-<DemoExample Title="Events" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
-    <div>Demonstrate BitMenuButton instances highlighting item click events, offering versatile interactions within the menu buttons.</div>
+            <BitMenuButtonOption Text="Option C" Key="C" />
+        </BitMenuButton>
+    </div>
     <br />
-    <div>Non-Sticky</div>
     <div class="example-content">
-        <BitMenuButton Text="Options"
-                       OnChange="(BitMenuButtonOption item) => exampleChangedOption = item?.Key"
-                       OnClick="(BitMenuButtonOption item) => exampleClickedOption = item?.Key">
-            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" />
-            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" />
+        <BitMenuButton Text="PrimaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.PrimaryBorder" Split>
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
 
-        <BitMenuButton Split Text="Options" TItem="BitMenuButtonOption"
-                       OnChange="(BitMenuButtonOption item) => exampleChangedOption = item?.Key"
-                       OnClick="@((BitMenuButtonOption item) => exampleClickedOption = "Main button clicked")">
-            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" OnClick="@(_ => exampleClickedOption = $"Option A")" />
-            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" OnClick="@(_ => exampleClickedOption = $"Option C")" />
+        <BitMenuButton Text="PrimaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.PrimaryBorder" Split>
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
+        </BitMenuButton>
+
+        <BitMenuButton Text="PrimaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.PrimaryBorder" Split>
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
     </div>
     <br /><br />
-    <div>Sticky</div>
     <div class="example-content">
-        <BitMenuButton Sticky
-                       OnChange="(BitMenuButtonOption item) => exampleChangedOption = item?.Key"
-                       OnClick="(BitMenuButtonOption item) => exampleClickedOption = item?.Key">
-            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" />
-            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" />
+        <BitMenuButton Text="SecondaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.SecondaryBorder">
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
 
-        <BitMenuButton Split Sticky TItem="BitMenuButtonOption"
-                       OnChange="(BitMenuButtonOption item) => exampleChangedOption = item?.Key"
-                       OnClick="(BitMenuButtonOption item) => exampleClickedOption = item?.Key">
-            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" OnClick="@(_ => exampleClickedOption = $"Option A")" />
-            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" OnClick="@(_ => exampleClickedOption = $"Option C")" />
+        <BitMenuButton Text="SecondaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.SecondaryBorder">
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
-    </div>
-    <br /><br />
-    <div>Changed option: @exampleChangedOption</div>
-    <div>Clicked option: @exampleClickedOption</div>
-</DemoExample>
 
-<DemoExample Title="Binding" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
-    <div>This example demonstrates different ways to handle item selection and changes within the component.</div>
-    <br /><br /><br /><br />
-    <div>
-        <div>DefaultSelectedItem:</div>
-        <br />
-        <BitMenuButton Text="Coming soon..." TItem="BitMenuButtonOption" IsEnabled="false" />
-    </div>
-    <br /><br /><br /><br />
-    <div>
-        <div>Two-way SelectedItem:</div>
-        <br />
-        <BitMenuButton Sticky @bind-SelectedItem="twoWaySelectedOption" TItem="BitMenuButtonOption">
-            <BitMenuButtonOption Text="Option A" Key="A" @ref="optionA" />
-            <BitMenuButtonOption Text="Option B" Key="B" @ref="optionB" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" @ref="optionC" />
+        <BitMenuButton Text="SecondaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.SecondaryBorder">
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
-        <BitChoiceGroup Horizontal TItem="BitChoiceGroupOption<BitMenuButtonOption>" TValue="BitMenuButtonOption" @bind-Value="@twoWaySelectedOption">
-            <BitChoiceGroupOption Text="Option A" Id="A" Value="optionA" />
-            <BitChoiceGroupOption Text="Option B" Id="B" Value="optionB" IsEnabled="false" />
-            <BitChoiceGroupOption Text="Option C" Id="C" Value="optionC" />
-        </BitChoiceGroup>
     </div>
-    <br /><br /><br /><br />
-    <div>
-        <div>Item's IsSelected:</div>
-        <br />
-        <BitMenuButton Sticky TItem="BitMenuButtonOption">
-            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" />
-            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" />
-            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" IsSelected="true" />
+    <br />
+    <div class="example-content">
+        <BitMenuButton Text="SecondaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.SecondaryBorder" Split>
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
+        </BitMenuButton>
+
+        <BitMenuButton Text="SecondaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.SecondaryBorder" Split>
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
+        </BitMenuButton>
+
+        <BitMenuButton Text="SecondaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.SecondaryBorder" Split>
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
     </div>
-    <br /><br /><br /><br />
-    <div>One-way IsOpen (closes after 2 seconds):</div>
-    <br />
+    <br /><br />
     <div class="example-content">
-        <BitMenuButton Sticky IsOpen="oneWayIsOpen" TItem="BitMenuButtonOption">
-            <BitMenuButtonOption Text="Option A" Key="A" @ref="optionA" />
-            <BitMenuButtonOption Text="Option B" Key="B" @ref="optionB" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" @ref="optionC" />
+        <BitMenuButton Text="TertiaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.TertiaryBorder">
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
+        </BitMenuButton>
+
+        <BitMenuButton Text="TertiaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.TertiaryBorder">
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
+        </BitMenuButton>
+
+        <BitMenuButton Text="TertiaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.TertiaryBorder">
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
-        <BitCheckbox Label="One-way IsOpen" @bind-Value="oneWayIsOpen" OnChange="async _ => { await Task.Delay(2000); oneWayIsOpen = false; }" />
     </div>
-    <br /><br /><br /><br />
-    <div>Two-way IsOpen:</div>
     <br />
     <div class="example-content">
-        <BitMenuButton Sticky @bind-IsOpen="twoWayIsOpen" TItem="BitMenuButtonOption">
-            <BitMenuButtonOption Text="Option A" Key="A" @ref="optionA" />
-            <BitMenuButtonOption Text="Option B" Key="B" @ref="optionB" IsEnabled="false" />
-            <BitMenuButtonOption Text="Option C" Key="C" @ref="optionC" />
+        <BitMenuButton Text="TertiaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Color="BitColor.TertiaryBorder" Split>
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
+        </BitMenuButton>
+
+        <BitMenuButton Text="TertiaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Color="BitColor.TertiaryBorder" Split>
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
+        </BitMenuButton>
+
+        <BitMenuButton Text="TertiaryBorder" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Color="BitColor.TertiaryBorder" Split>
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
-        <BitCheckbox Label="Two-way IsOpen" @bind-Value="twoWayIsOpen" />
     </div>
 </DemoExample>
 
-<DemoExample Title="External Icons" RazorCode="@example16RazorCode" Id="example16">
-    <div>External icon libraries like FontAwesome can be used with the Icon parameter.</div>
-    
-    <br />
+<DemoExample Title="Size" RazorCode="@example16RazorCode" Id="example16">
+    <div>Varying sizes for menu buttons tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.</div>
     <br />
-
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
-
     <div class="example-content">
-        <BitMenuButton Text="Actions" 
-                       TItem="BitMenuButtonOption"
-                       Icon="@("fa-solid fa-house")">
-            <BitMenuButtonOption Text="Add" Icon="@("fa-solid fa-plus")" />
-            <BitMenuButtonOption Text="Edit" Icon="@("fa-solid fa-pen")" />
-            <BitMenuButtonOption Text="Delete" Icon="@("fa-solid fa-trash")" />
+        <BitMenuButton Text="Small" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Size="BitSize.Small">
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
-
-        <BitMenuButton Split 
-                       Text="Actions" 
-                       TItem="BitMenuButtonOption"
-                       Icon="@("fa-brands fa-github")">
-            <BitMenuButtonOption Text="Add" Icon="@("fa-solid fa-plus")" />
-            <BitMenuButtonOption Text="Edit" Icon="@("fa-solid fa-pen")" />
-            <BitMenuButtonOption Text="Delete" Icon="@("fa-solid fa-trash")" />
+        <BitMenuButton Text="Small" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Size="BitSize.Small">
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
+        </BitMenuButton>
+        <BitMenuButton Text="Small" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Size="BitSize.Small">
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
     </div>
-
-    <br />
     <br />
-
     <div class="example-content">
-        <BitMenuButton Text="Actions" 
-                       Color="BitColor.Secondary"
-                       TItem="BitMenuButtonOption" 
-                       Variant="BitVariant.Outline"
-                       Icon="@BitIconInfo.Css("fa-solid fa-house")">
-            <BitMenuButtonOption Text="Add" Icon="@BitIconInfo.Css("fa-solid fa-plus")" />
-            <BitMenuButtonOption Text="Edit" Icon="@BitIconInfo.Css("fa-solid fa-pen")" />
-            <BitMenuButtonOption Text="Delete" Icon="@BitIconInfo.Css("fa-solid fa-trash")" />
+        <BitMenuButton Text="Medium" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Size="BitSize.Medium">
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
-
-        <BitMenuButton Split 
-                       Text="Actions" 
-                       Color="BitColor.Secondary"
-                       TItem="BitMenuButtonOption" 
-                       Variant="BitVariant.Outline"
-                       Icon="@BitIconInfo.Css("fa-brands fa-github")">
-            <BitMenuButtonOption Text="Add" Icon="@BitIconInfo.Css("fa-solid fa-plus")" />
-            <BitMenuButtonOption Text="Edit" Icon="@BitIconInfo.Css("fa-solid fa-pen")" />
-            <BitMenuButtonOption Text="Delete" Icon="@BitIconInfo.Css("fa-solid fa-trash")" />
+        <BitMenuButton Text="Medium" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Size="BitSize.Medium">
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
+        </BitMenuButton>
+        <BitMenuButton Text="Medium" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Size="BitSize.Medium">
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
     </div>
-
-    <br />
     <br />
-
     <div class="example-content">
-        <BitMenuButton Text="Actions" 
-                       Variant="BitVariant.Text"
-                       Color="BitColor.Tertiary"
-                       TItem="BitMenuButtonOption" 
-                       Icon="@BitIconInfo.Fa("solid house")">
-            <BitMenuButtonOption Text="Add" Icon="@BitIconInfo.Fa("solid plus")" />
-            <BitMenuButtonOption Text="Edit" Icon="@BitIconInfo.Fa("solid pen")" />
-            <BitMenuButtonOption Text="Delete" Icon="@BitIconInfo.Fa("solid trash")" />
+        <BitMenuButton Text="Large" TItem="BitMenuButtonOption" Variant="BitVariant.Fill" Size="BitSize.Large">
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
-
-        <BitMenuButton Split 
-                       Text="Actions"
-                       Color="BitColor.Tertiary"
-                       Variant="BitVariant.Text"
-                       TItem="BitMenuButtonOption" 
-                       Icon="@BitIconInfo.Fa("brands github")">
-            <BitMenuButtonOption Text="Add" Icon="@BitIconInfo.Fa("solid plus")" />
-            <BitMenuButtonOption Text="Edit" Icon="@BitIconInfo.Fa("solid pen")" />
-            <BitMenuButtonOption Text="Delete" Icon="@BitIconInfo.Fa("solid trash")" />
+        <BitMenuButton Text="Large" TItem="BitMenuButtonOption" Variant="BitVariant.Outline" Size="BitSize.Large">
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
+        </BitMenuButton>
+        <BitMenuButton Text="Large" TItem="BitMenuButtonOption" Variant="BitVariant.Text" Size="BitSize.Large">
+            <BitMenuButtonOption Text="Option A" Key="A" />
+            <BitMenuButtonOption Text="Option B" Key="B" IsEnabled="false" />
+            <BitMenuButtonOption Text="Option C" Key="C" />
         </BitMenuButton>
     </div>
 </DemoExample>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor.cs
index cc79605f6a..a8efd9033c 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor.cs
@@ -99,7 +99,7 @@ public partial class _BitMenuButtonOptionDemo
     <BitMenuButtonOption Text=""Option C"" Key=""C"" />
 </BitMenuButton>";
 
-    private readonly string example4RazorCode = @"
+    private readonly string example15RazorCode = @"
 <BitMenuButton Text=""Primary"" TItem=""BitMenuButtonOption"" Variant=""BitVariant.Fill"" Color=""BitColor.Primary"">
     <BitMenuButtonOption Text=""Option A"" Key=""A"" />
     <BitMenuButtonOption Text=""Option B"" Key=""B"" IsEnabled=""false"" />
@@ -696,7 +696,7 @@ public partial class _BitMenuButtonOptionDemo
     <BitMenuButtonOption Text=""Option C"" Key=""C"" />
 </BitMenuButton>";
 
-    private readonly string example5RazorCode = @"
+    private readonly string example16RazorCode = @"
 <BitMenuButton Text=""Small"" TItem=""BitMenuButtonOption"" Variant=""BitVariant.Fill"" Size=""BitSize.Small"">
     <BitMenuButtonOption Text=""Option A"" Key=""A"" />
     <BitMenuButtonOption Text=""Option B"" Key=""B"" IsEnabled=""false"" />
@@ -745,7 +745,7 @@ public partial class _BitMenuButtonOptionDemo
     <BitMenuButtonOption Text=""Option C"" Key=""C"" />
 </BitMenuButton>";
 
-    private readonly string example6RazorCode = @"
+    private readonly string example4RazorCode = @"
 <BitMenuButton TItem=""BitMenuButtonOption"" Variant=""BitVariant.Fill"" Sticky>
     <BitMenuButtonOption Text=""Option A"" Key=""A"" />
     <BitMenuButtonOption Text=""Option B"" Key=""B"" IsEnabled=""false"" />
@@ -779,7 +779,7 @@ public partial class _BitMenuButtonOptionDemo
     <BitMenuButtonOption Text=""Option C"" Key=""C"" />
 </BitMenuButton>";
 
-    private readonly string example7RazorCode = @"
+    private readonly string example5RazorCode = @"
 <BitMenuButton Text=""IconName"" IconName=""@BitIconName.Edit"" TItem=""BitMenuButtonOption"">
     <BitMenuButtonOption Text=""Option A"" Key=""A"" IconName=""@BitIconName.Emoji"" />
     <BitMenuButtonOption Text=""Option B"" Key=""B"" IconName=""@BitIconName.Emoji"" IsEnabled=""false"" />
@@ -792,7 +792,7 @@ public partial class _BitMenuButtonOptionDemo
     <BitMenuButtonOption Text=""Option C"" Key=""C"" IconName=""@BitIconName.Emoji2"" />
 </BitMenuButton>";
 
-    private readonly string example8RazorCode = @"
+    private readonly string example6RazorCode = @"
 <style>
     .custom-class {
         margin-inline: 1rem;
@@ -895,7 +895,7 @@ public partial class _BitMenuButtonOptionDemo
     <BitMenuButtonOption Text=""Option C"" Key=""C"" />
 </BitMenuButton>";
 
-    private readonly string example9RazorCode = @"
+    private readonly string example7RazorCode = @"
 <BitMenuButton Text=""Primary"" TItem=""BitMenuButtonOption"" Background=""BitColorKind.Primary"">
     <BitMenuButtonOption Text=""Option A"" Key=""A"" />
     <BitMenuButtonOption Text=""Option B"" Key=""B"" IsEnabled=""false"" />
@@ -920,7 +920,7 @@ public partial class _BitMenuButtonOptionDemo
     <BitMenuButtonOption Text=""Option C"" Key=""C"" />
 </BitMenuButton>";
 
-    private readonly string example10RazorCode = @"
+    private readonly string example8RazorCode = @"
 <BitMenuButton Text=""Toggle"" TItem=""BitMenuButtonOption"" Split Toggle>
     <BitMenuButtonOption Text=""Option A"" Key=""A"" />
     <BitMenuButtonOption Text=""Option B"" Key=""B"" IsEnabled=""false"" />
@@ -950,7 +950,7 @@ public partial class _BitMenuButtonOptionDemo
 </BitMenuButton>
 <div>OnToggleChange: @optionToggledValue</div>";
 
-    private readonly string example11RazorCode = @"
+    private readonly string example9RazorCode = @"
 <BitMenuButton Text=""With icon"" TItem=""BitMenuButtonOption"" IconName=""@BitIconName.Edit"">
     <BitMenuButtonOption Text=""Option A"" Key=""A"" IconName=""@BitIconName.Emoji"" />
     <BitMenuButtonOption Text=""Option B"" Key=""B"" IconName=""@BitIconName.Emoji"" IsEnabled=""false"" />
@@ -976,7 +976,7 @@ public partial class _BitMenuButtonOptionDemo
     <BitMenuButtonOption Text=""Option C"" Key=""C"" IconName=""@BitIconName.Emoji2"" />
 </BitMenuButton>";
 
-    private readonly string example12RazorCode = @"
+    private readonly string example10RazorCode = @"
 <BitMenuButton Sticky TItem=""BitMenuButtonOption"">
     <BitMenuButtonOption Text=""Option A"" Key=""A"" IconName=""@BitIconName.Emoji"" />
     <BitMenuButtonOption Text=""Option B"" Key=""B"" IconName=""@BitIconName.Emoji"" />
@@ -989,7 +989,7 @@ public partial class _BitMenuButtonOptionDemo
     <BitMenuButtonOption Text=""Option C"" Key=""C"" IconName=""@BitIconName.Emoji2"" IsSelected=""true"" />
 </BitMenuButton>";
 
-    private readonly string example13RazorCode = @"
+    private readonly string example11RazorCode = @"
 <style>
     .item-template-box {
         display: flex;
@@ -1038,7 +1038,7 @@ Custom Header!
     </BitMenuButtonOption>
 </BitMenuButton>";
 
-    private readonly string example14RazorCode = @"
+    private readonly string example12RazorCode = @"
 <BitMenuButton Text=""Options""
                OnChange=""(BitMenuButtonOption item) => exampleChangedOption = item?.Key""
                OnClick=""(BitMenuButtonOption item) => exampleClickedOption = item?.Key"">
@@ -1074,11 +1074,11 @@ Custom Header!
 
 <div>Changed option: @exampleChangedOption</div>
 <div>Clicked option: @exampleClickedOption</div>";
-    private readonly string example14CsharpCode = @"
+    private readonly string example12CsharpCode = @"
 private string? exampleChangedOption;
 private string? exampleClickedOption;";
 
-    private readonly string example15RazorCode = @"
+    private readonly string example13RazorCode = @"
 <BitMenuButton Text=""Coming soon..."" TItem=""BitMenuButtonOption"" IsEnabled=""false"" />
 
 
@@ -1115,12 +1115,12 @@ Custom Header!
     <BitMenuButtonOption Text=""Option C"" Key=""C"" @ref=""optionC"" />
 </BitMenuButton>
 <BitCheckbox Label=""Two-way IsOpen"" @bind-Value=""twoWayIsOpen"" />";
-    private readonly string example15CsharpCode = @"
+    private readonly string example13CsharpCode = @"
 private BitMenuButtonOption twoWaySelectedOption = default!;
 private bool oneWayIsOpen;
 private bool twoWayIsOpen;";
 
-    private readonly string example16RazorCode = @"
+    private readonly string example14RazorCode = @"
 <link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
 
 <BitMenuButton Text=""Actions"" 

From 867920106c6414ff747bd8393a2348b45f950ee0 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Tue, 12 May 2026 14:36:26 +0330
Subject: [PATCH 5/6] resolve review comments III

---
 .../Buttons/MenuButton/BitMenuButton.razor    |  5 +--
 .../Buttons/MenuButton/BitMenuButton.razor.cs |  3 +-
 .../Buttons/MenuButton/BitMenuButton.scss     | 12 +------
 .../MenuButton/_BitMenuButtonCustomDemo.razor | 17 +++-------
 .../_BitMenuButtonCustomDemo.razor.samples.cs | 33 ++++---------------
 .../MenuButton/_BitMenuButtonItemDemo.razor   | 19 +++--------
 .../_BitMenuButtonItemDemo.razor.samples.cs   | 25 ++++----------
 .../MenuButton/_BitMenuButtonOptionDemo.razor | 25 +++-----------
 .../_BitMenuButtonOptionDemo.razor.cs         | 23 +++----------
 9 files changed, 38 insertions(+), 124 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor
index 84d05a1e9b..b485eda76e 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor
@@ -21,7 +21,7 @@
             aria-hidden="@AriaHidden"
             aria-describedby="@AriaDescription"
             style="@GetStyle(_selectedItem);@Styles?.OperatorButton"
-            class="bit-mnb-opb @(Sticky ? "bit-mnb-sel" : "") @GetClass(_selectedItem) @Classes?.OperatorButton"
+            class="bit-mnb-opb @GetClass(_selectedItem) @Classes?.OperatorButton"
             aria-pressed="@(Toggle && Split ? IsToggled.ToString().ToLower() : null)">
         @if (Sticky)
         {
@@ -107,6 +107,7 @@
 
             var template = GetTemplate(item);
             var isEnabled = GetIsEnabled(item);
+
             <li role="presentation" @key="@GetItemKey(item, idx.ToString())" style="@Styles?.ItemWrapper" class="@Classes?.ItemWrapper">
                 <button @onclick="() => HandleOnItemClick(item)" @onclick:stopPropagation
                         role="menuitem"
@@ -115,7 +116,7 @@
                         disabled="@(isEnabled is false)"
                         aria-disabled="@(isEnabled is false)"
                         style="@GetStyle(item);@Styles?.ItemButton"
-                        class="bit-mnb-itm @(isSelected ? "bit-mnb-sel" : "") @GetClass(item) @Classes?.ItemButton">
+                        class="bit-mnb-itm @GetClass(item) @Classes?.ItemButton">
                     @if (template is not null)
                     {
                         @template(item)
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs
index bf67a99972..f18746f389 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs
@@ -590,7 +590,8 @@ private async Task HandleOnHeaderClick(TItem? item)
 
         if (Toggle && Split)
         {
-            await AssignIsToggled(!IsToggled);
+            if (await AssignIsToggled(!IsToggled) is false) return;
+
             await OnToggleChange.InvokeAsync(IsToggled);
         }
 
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scss b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scss
index 20d7038626..3a4400f481 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scss
@@ -1,4 +1,4 @@
-@import "../../../Styles/functions.scss";
+@import "../../../Styles/functions.scss";
 
 .bit-mnb {
     display: flex;
@@ -165,16 +165,6 @@
     }
 }
 
-.bit-mnb-sel {
-    background-color: $clr-bg-sec;
-
-    @media (hover: hover) {
-        &:hover {
-            background-color: $clr-bg-pri-hover;
-        }
-    }
-}
-
 .bit-mnb-iic {
     color: inherit;
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor
index bbb161f25c..357aae21ba 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor
@@ -160,16 +160,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="SelectedItem" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
-    <div>In Sticky mode, the currently selected item is visually highlighted in the callout with a distinct background color.</div>
-    <br />
-    <div class="example-content">
-        <BitMenuButton Sticky Items="isSelectedCustoms" NameSelectors="nameSelectors" />
-        <BitMenuButton Sticky Split Items="isSelectedCustoms" NameSelectors="nameSelectors" />
-    </div>
-</DemoExample>
-
-<DemoExample Title="Templates" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
+<DemoExample Title="Templates" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
     <div>Explore BitMenuButton's customization capabilities.</div>
     <div>Note that if <strong>Sticky</strong> set to true, HeaderTemplate and Text will be ignored.</div>
     <br />
@@ -195,7 +186,7 @@
     <BitMenuButton Text="Customs" Items="itemTemplateCustoms2" NameSelectors="nameSelectors" />
 </DemoExample>
 
-<DemoExample Title="Events" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
+<DemoExample Title="Events" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
     <div>Demonstrate BitMenuButton instances highlighting item click events, offering versatile interactions within the menu buttons.</div>
     <br />
     <div>
@@ -226,7 +217,7 @@
     <div>Clicked custom item: @eventsClickedCustom</div>
 </DemoExample>
 
-<DemoExample Title="Binding" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
+<DemoExample Title="Binding" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
     <div>This example demonstrates different ways to handle item selection and changes within the component.</div>
     <br /><br /><br /><br />
     <div>
@@ -263,7 +254,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="External Icons" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
+<DemoExample Title="External Icons" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
     <div>External icon libraries like FontAwesome can be used with the Icon parameter.</div>
     
     <br />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cs
index 971c388a41..f9c1c90504 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cs
@@ -540,25 +540,6 @@ public class Operation
 };";
 
     private readonly string example10RazorCode = @"
-<BitMenuButton Sticky Items=""isSelectedCustoms"" NameSelectors=""nameSelectors"" />
-<BitMenuButton Sticky Split Items=""isSelectedCustoms"" NameSelectors=""nameSelectors"" />";
-    private readonly string example10CsharpCode = @"
-private static List<Operation> isSelectedCustoms =
-[
-    new() { Name = ""Custom A"", Id = ""A"", Image = BitIconName.Emoji },
-    new() { Name = ""Custom B"", Id = ""B"", Image = BitIconName.Emoji },
-    new() { Name = ""Custom C"", Id = ""C"", Image = BitIconName.Emoji2, IsSelected = true }
-];
-
-private BitMenuButtonNameSelectors<Operation> nameSelectors = new()
-{
-    Text = { Name = nameof(Operation.Name) },
-    Key = { Name = nameof(Operation.Id) },
-    IconName = { Name = nameof(Operation.Image) },
-    IsEnabled = { Selector = m => m.Disabled is false }
-};";
-
-    private readonly string example11RazorCode = @"
 <style>
     .item-template-box {
         display: flex;
@@ -584,7 +565,7 @@ Custom Header!
 </BitMenuButton>
 
 <BitMenuButton Text=""Customs"" Items=""itemTemplateCustoms2"" NameSelectors=""nameSelectors"" />";
-    private readonly string example11CsharpCode = @"
+    private readonly string example10CsharpCode = @"
 public class Operation
 {
     public string? Id { get; set; }
@@ -636,7 +617,7 @@ public class Operation
     Template = { Name = nameof(Operation.Fragment) }
 };";
 
-    private readonly string example12RazorCode = @"
+    private readonly string example11RazorCode = @"
 <BitMenuButton Text=""Customs"" Items=""basicCustoms"" NameSelectors=""nameSelectors""
                OnChange=""(Operation item) => eventsChangedCustom = item?.Id""
                OnClick=""(Operation item) => eventsClickedCustom = item?.Id"" />
@@ -655,7 +636,7 @@ public class Operation
 
 <div>Changed custom item: @eventsChangedCustom</div>
 <div>Clicked custom item: @eventsClickedCustom</div>";
-    private readonly string example12CsharpCode = @"
+    private readonly string example11CsharpCode = @"
 public class Operation
 {
     public string? Id { get; set; }
@@ -686,7 +667,7 @@ public class Operation
     IsEnabled = { Selector = m => m.Disabled is false }
 };";
 
-    private readonly string example13RazorCode = @"
+    private readonly string example12RazorCode = @"
 <BitMenuButton Split Sticky Items=""basicCustoms"" DefaultSelectedItem=""basicCustoms[1]"" NameSelectors=""nameSelectors"" />
 
 <BitMenuButton Sticky Items=""basicCustoms"" NameSelectors=""nameSelectors"" @bind-SelectedItem=""twoWaySelectedCustom"" />
@@ -699,7 +680,7 @@ public class Operation
 
 <BitMenuButton Sticky Items=""basicCustoms"" NameSelectors=""nameSelectors"" @bind-IsOpen=""twoWayIsOpen"" />
 <BitCheckbox Label=""Two-way IsOpen"" @bind-Value=""twoWayIsOpen"" />";
-    private readonly string example13CsharpCode = @"
+    private readonly string example12CsharpCode = @"
 private Operation twoWaySelectedCustom = default!;
 private bool oneWayIsOpen;
 private bool twoWayIsOpen;
@@ -734,7 +715,7 @@ public class Operation
     IsEnabled = { Selector = m => m.Disabled is false }
 };";
 
-    private readonly string example14RazorCode = @"
+    private readonly string example13RazorCode = @"
 <link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
 
 <BitMenuButton Text=""Actions""
@@ -781,7 +762,7 @@ public class Operation
                Items=""externalIconCustoms""
                NameSelectors=""nameSelectors2""
                Icon=""@BitIconInfo.Fa(""brands github"")"" />";
-    private readonly string example14CsharpCode = @"
+    private readonly string example13CsharpCode = @"
 public class Operation
 {
     public string? Id { get; set; }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor
index 98d55e70cf..44eec99e16 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor
@@ -1,4 +1,4 @@
-<DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
+<DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
     <div class="example-content">
         <BitMenuButton Text="MenuButton" Items="basicItems" />
     </div>
@@ -158,16 +158,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="SelectedItem" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
-    <div>In Sticky mode, the currently selected item is visually highlighted in the callout with a distinct background color.</div>
-    <br />
-    <div class="example-content">
-        <BitMenuButton Sticky Items="isSelectedItems" />
-        <BitMenuButton Sticky Split Items="isSelectedItems" />
-    </div>
-</DemoExample>
-
-<DemoExample Title="Templates" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
+<DemoExample Title="Templates" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
     <div>Explore BitMenuButton's customization capabilities.</div>
     <div>Note that if <strong>Sticky</strong> set to true, HeaderTemplate and Text will be ignored.</div>
     <br />
@@ -193,7 +184,7 @@
     <BitMenuButton Text="Items" Items="itemTemplateItems2" />
 </DemoExample>
 
-<DemoExample Title="Events" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
+<DemoExample Title="Events" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
     <div>Demonstrate BitMenuButton instances highlighting item click events, offering versatile interactions within the menu buttons.</div>
     <br />
     <div>Non-Sticky</div>
@@ -222,7 +213,7 @@
     <div>Clicked item: @eventsClickedItem</div>
 </DemoExample>
 
-<DemoExample Title="Binding" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
+<DemoExample Title="Binding" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
     <div>This example demonstrates different ways to handle item selection and changes within the component.</div>
     <br /><br /><br /><br />
     <div>
@@ -259,7 +250,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="External Icons" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
+<DemoExample Title="External Icons" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
     <div>External icon libraries like FontAwesome can be used with the Icon parameter.</div>
     
     <br />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cs
index d8350950cf..5ea34ca6ac 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cs
@@ -395,17 +395,6 @@ public partial class _BitMenuButtonItemDemo
 ];";
 
     private readonly string example10RazorCode = @"
-<BitMenuButton Sticky Items=""isSelectedItems"" />
-<BitMenuButton Sticky Split Items=""isSelectedItems"" />";
-    private readonly string example10CsharpCode = @"
-private static 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 }
-];";
-
-    private readonly string example11RazorCode = @"
 <style>
     .item-template-box {
         display: flex;
@@ -431,7 +420,7 @@ Custom Header!
 </BitMenuButton>
 
 <BitMenuButton Text=""Items"" Items=""itemTemplateItems2"" />";
-    private readonly string example11CsharpCode = @"
+    private readonly string example10CsharpCode = @"
 private List<BitMenuButtonItem> basicItems =
 [
     new() { Text = ""Item A"", Key = ""A"" },
@@ -465,7 +454,7 @@ Custom Header!
     }
 ];";
 
-    private readonly string example12RazorCode = @"
+    private readonly string example11RazorCode = @"
 <BitMenuButton Text=""Items"" Items=""basicItems""
                OnChange=""(BitMenuButtonItem item) => eventsChangedItem = item?.Key""
                OnClick=""(BitMenuButtonItem item) => eventsClickedItem = item?.Key"" />
@@ -486,7 +475,7 @@ Custom Header!
 
 <div>Clicked item: @eventsClickedItem</div>
 <div>Changed item: @eventsChangedItem</div>";
-    private readonly string example12CsharpCode = @"
+    private readonly string example11CsharpCode = @"
 private string? eventsClickedItem;
 private string? eventsChangedItem;
 
@@ -515,7 +504,7 @@ protected override void OnInitialized()
     basicItemsOnClick.ForEach(i => i.OnClick = onClick);
 }";
 
-    private readonly string example13RazorCode = @"
+    private readonly string example12RazorCode = @"
 <BitMenuButton Split Sticky Items=""basicItems"" DefaultSelectedItem=""basicItems[1]"" />
 
 <BitMenuButton Sticky Items=""basicItems"" @bind-SelectedItem=""twoWaySelectedItem"" />
@@ -528,7 +517,7 @@ protected override void OnInitialized()
 
 <BitMenuButton Sticky Items=""basicItems"" @bind-IsOpen=""twoWayIsOpen"" />
 <BitCheckbox Label=""Two-way IsOpen"" @bind-Value=""twoWayIsOpen"" />";
-    private readonly string example13CsharpCode = @"
+    private readonly string example12CsharpCode = @"
 private BitMenuButtonItem twoWaySelectedItem = default!;
 private bool oneWayIsOpen;
 private bool twoWayIsOpen;
@@ -555,7 +544,7 @@ protected override void OnInitialized()
     twoWaySelectedItem = basicItems[2];
 }";
 
-    private readonly string example14RazorCode = @"
+    private readonly string example13RazorCode = @"
 <link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
 
 <BitMenuButton Text=""Actions"" 
@@ -596,7 +585,7 @@ protected override void OnInitialized()
                Color=""BitColor.Tertiary""
                Variant=""BitVariant.Text"" 
                Icon=""@BitIconInfo.Fa(""brands github"")"" />";
-    private readonly string example14CsharpCode = @"
+    private readonly string example13CsharpCode = @"
 private static List<BitMenuButtonItem> externalIconItems =
 [
     new() { Text = ""Add"", Icon = ""fa-solid fa-plus"" },
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor
index e8da1ead68..4481373333 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor
@@ -322,24 +322,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="SelectedItem" RazorCode="@example10RazorCode" Id="example10">
-    <div>In Sticky mode, the currently selected item is visually highlighted in the callout with a distinct background color.</div>
-    <br />
-    <div class="example-content">
-        <BitMenuButton Sticky TItem="BitMenuButtonOption">
-            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" />
-            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" />
-            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" IsSelected="true" />
-        </BitMenuButton>
-        <BitMenuButton Sticky Split TItem="BitMenuButtonOption">
-            <BitMenuButtonOption Text="Option A" Key="A" IconName="@BitIconName.Emoji" />
-            <BitMenuButtonOption Text="Option B" Key="B" IconName="@BitIconName.Emoji" />
-            <BitMenuButtonOption Text="Option C" Key="C" IconName="@BitIconName.Emoji2" IsSelected="true" />
-        </BitMenuButton>
-    </div>
-</DemoExample>
-
-<DemoExample Title="Templates" RazorCode="@example11RazorCode" Id="example11">
+<DemoExample Title="Templates" RazorCode="@example10RazorCode" Id="example10">
     <div>Explore BitMenuButton's customization capabilities.</div>
     <div>Note that if <strong>Sticky</strong> set to true, HeaderTemplate and Text will be ignored.</div>
     <br />
@@ -385,7 +368,7 @@
     </BitMenuButton>
 </DemoExample>
 
-<DemoExample Title="Events" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
+<DemoExample Title="Events" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
     <div>Demonstrate BitMenuButton instances highlighting item click events, offering versatile interactions within the menu buttons.</div>
     <br />
     <div>Non-Sticky</div>
@@ -430,7 +413,7 @@
     <div>Clicked option: @exampleClickedOption</div>
 </DemoExample>
 
-<DemoExample Title="Binding" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
+<DemoExample Title="Binding" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
     <div>This example demonstrates different ways to handle item selection and changes within the component.</div>
     <br /><br /><br /><br />
     <div>
@@ -487,7 +470,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="External Icons" RazorCode="@example14RazorCode" Id="example14">
+<DemoExample Title="External Icons" RazorCode="@example13RazorCode" Id="example13">
     <div>External icon libraries like FontAwesome can be used with the Icon parameter.</div>
     
     <br />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor.cs
index a8efd9033c..98cc2a61c7 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor.cs
@@ -977,19 +977,6 @@ public partial class _BitMenuButtonOptionDemo
 </BitMenuButton>";
 
     private readonly string example10RazorCode = @"
-<BitMenuButton Sticky TItem=""BitMenuButtonOption"">
-    <BitMenuButtonOption Text=""Option A"" Key=""A"" IconName=""@BitIconName.Emoji"" />
-    <BitMenuButtonOption Text=""Option B"" Key=""B"" IconName=""@BitIconName.Emoji"" />
-    <BitMenuButtonOption Text=""Option C"" Key=""C"" IconName=""@BitIconName.Emoji2"" IsSelected=""true"" />
-</BitMenuButton>
-
-<BitMenuButton Sticky Split TItem=""BitMenuButtonOption"">
-    <BitMenuButtonOption Text=""Option A"" Key=""A"" IconName=""@BitIconName.Emoji"" />
-    <BitMenuButtonOption Text=""Option B"" Key=""B"" IconName=""@BitIconName.Emoji"" />
-    <BitMenuButtonOption Text=""Option C"" Key=""C"" IconName=""@BitIconName.Emoji2"" IsSelected=""true"" />
-</BitMenuButton>";
-
-    private readonly string example11RazorCode = @"
 <style>
     .item-template-box {
         display: flex;
@@ -1038,7 +1025,7 @@ Custom Header!
     </BitMenuButtonOption>
 </BitMenuButton>";
 
-    private readonly string example12RazorCode = @"
+    private readonly string example11RazorCode = @"
 <BitMenuButton Text=""Options""
                OnChange=""(BitMenuButtonOption item) => exampleChangedOption = item?.Key""
                OnClick=""(BitMenuButtonOption item) => exampleClickedOption = item?.Key"">
@@ -1074,11 +1061,11 @@ Custom Header!
 
 <div>Changed option: @exampleChangedOption</div>
 <div>Clicked option: @exampleClickedOption</div>";
-    private readonly string example12CsharpCode = @"
+    private readonly string example11CsharpCode = @"
 private string? exampleChangedOption;
 private string? exampleClickedOption;";
 
-    private readonly string example13RazorCode = @"
+    private readonly string example12RazorCode = @"
 <BitMenuButton Text=""Coming soon..."" TItem=""BitMenuButtonOption"" IsEnabled=""false"" />
 
 
@@ -1115,12 +1102,12 @@ Custom Header!
     <BitMenuButtonOption Text=""Option C"" Key=""C"" @ref=""optionC"" />
 </BitMenuButton>
 <BitCheckbox Label=""Two-way IsOpen"" @bind-Value=""twoWayIsOpen"" />";
-    private readonly string example13CsharpCode = @"
+    private readonly string example12CsharpCode = @"
 private BitMenuButtonOption twoWaySelectedOption = default!;
 private bool oneWayIsOpen;
 private bool twoWayIsOpen;";
 
-    private readonly string example14RazorCode = @"
+    private readonly string example13RazorCode = @"
 <link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
 
 <BitMenuButton Text=""Actions"" 

From be074631afc44891560260c3ebc07fad322cf6b4 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Tue, 12 May 2026 15:37:46 +0330
Subject: [PATCH 6/6] resolve review comments IV

---
 .../Buttons/MenuButton/BitMenuButton.razor    |  4 ++--
 .../Buttons/MenuButton/BitMenuButton.razor.cs | 24 +++++++++++--------
 .../Buttons/MenuButton/BitMenuButton.scss     | 15 +++++++-----
 .../_BitMenuButtonCustomDemo.razor.samples.cs |  4 ++--
 .../Components/Buttons/BitMenuButtonTests.cs  |  4 ++--
 5 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor
index b485eda76e..75dc2e7f8e 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor
@@ -95,10 +95,10 @@
      style="display:@(IsOpen ? "block" : "none");@Styles?.Overlay"
      id="@_overlayId"
      class="bit-mnb-ovl @Classes?.Overlay"></div>
-
+     
 <div id="@_calloutId"
      style="@Styles?.Callout"
-     class="bit-mnb-cal @Classes?.Callout">
+     class="bit-mnb-cal @GetCalloutCss() @Classes?.Callout">
     <ul role="presentation" style="@Styles?.CalloutContainer" class="bit-mnb-cul @Classes?.CalloutContainer">
         @foreach (var (item, idx) in _items.Select((item, idx) => (item, idx)))
         {
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs
index f18746f389..1f51715736 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.razor.cs
@@ -285,15 +285,6 @@ protected override void RegisterCssClasses()
             _ => "bit-mnb-md"
         });
 
-        ClassBuilder.Register(() => Background switch
-        {
-            BitColorKind.Primary => "bit-mnb-bpg",
-            BitColorKind.Secondary => "bit-mnb-bsg",
-            BitColorKind.Tertiary => "bit-mnb-btg",
-            BitColorKind.Transparent => "bit-mnb-brg",
-            _ => null
-        });
-
         ClassBuilder.Register(() => Split ? "bit-mnb-spl" : "bit-mnb-nsp");
 
         ClassBuilder.Register(() => Toggle && Split && IsToggled ? $"bit-mnb-tgl {Classes?.Toggled}" : string.Empty);
@@ -702,7 +693,20 @@ private string GetItemKey(TItem item, string defaultKey)
         return GetKey(item) ?? $"{UniqueId}-{defaultKey}";
     }
 
-
+    private string? GetCalloutCss()
+    {
+        var openClass = IsOpen ? "bit-mnb-ocl" : null;
+        var bgClass = Background switch
+        {
+            BitColorKind.Primary => "bit-mnb-bpg",
+            BitColorKind.Secondary => "bit-mnb-bsg",
+            BitColorKind.Tertiary => "bit-mnb-btg",
+            BitColorKind.Transparent => "bit-mnb-brg",
+            _ => null
+        };
+        var result = $"{openClass} {bgClass}".Trim();
+        return result.HasValue() ? result : null;
+    }
 
     protected override async ValueTask DisposeAsync(bool disposing)
     {
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scss b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scss
index 3a4400f481..70180bd280 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scss
@@ -12,8 +12,6 @@
     border-width: $shp-border-width;
     border-style: $shp-border-style;
     border-radius: $shp-border-radius;
-    --bit-mnb-cal-opa: 0;
-    --bit-mnb-cal-tra: translateY(#{spacing(-1.25)});
 
     &.bit-dis {
         cursor: default;
@@ -71,8 +69,6 @@
 }
 
 .bit-mnb-omn {
-    --bit-mnb-cal-opa: 1;
-    --bit-mnb-cal-tra: translateY(0);
     --bit-mnb-clr-opb-txt: var(--bit-mnb-clr-opb-txt-nsp);
     --bit-mnb-clr-opb-bg: var(--bit-mnb-clr-opb-bg-nsp);
     --bit-mnb-clr-chb-txt: var(--bit-mnb-clr-txt);
@@ -111,18 +107,25 @@
 }
 
 .bit-mnb-cal {
+    --bit-mnb-cal-opa: 0;
+    --bit-mnb-cal-tra: translateY(#{spacing(-1.25)});
     display: none;
     position: fixed;
     overflow: hidden auto;
     min-width: max-content;
     box-sizing: border-box;
     z-index: $zindex-callout;
-    background-color: var(--bit-mnb-cal-bg, #{$clr-bg-pri});
     opacity: var(--bit-mnb-cal-opa);
     box-shadow: $box-shadow-callout;
     transform: var(--bit-mnb-cal-tra);
     transition: opacity 100ms, transform 300ms;
     border-radius: 0 0 spacing(0.25) spacing(0.25);
+    background-color: var(--bit-mnb-cal-bg, #{$clr-bg-pri});
+
+    &.bit-mnb-ocl {
+        --bit-mnb-cal-opa: 1;
+        --bit-mnb-cal-tra: translateY(0);
+    }
 }
 
 .bit-mnb-cul {
@@ -369,4 +372,4 @@
 
 .bit-mnb-brg {
     --bit-mnb-cal-bg: transparent;
-}
+}
\ No newline at end of file
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cs
index f9c1c90504..76fe5c59dc 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cs
@@ -340,8 +340,8 @@ public class Operation
 };";
 
     private readonly string example5RazorCode = @"
-<BitMenuButton Text=""IconName"" Items=""basicCustoms"" NameSelectors=""nameSelectors"" IconName=""@BitIconName.Edit"" />
-<BitMenuButton Text=""ChevronDownIconName"" Items=""basicCustoms"" NameSelectors=""nameSelectors"" ChevronDownIconName=""@BitIconName.DoubleChevronDown"" Split />";
+<BitMenuButton Text=""IconName"" Items=""basicIconCustoms"" NameSelectors=""nameSelectors"" IconName=""@BitIconName.Edit"" />
+<BitMenuButton Text=""ChevronDownIconName"" Items=""basicIconCustoms"" NameSelectors=""nameSelectors"" ChevronDownIconName=""@BitIconName.DoubleChevronDown"" Split />";
     private readonly string example5CsharpCode = @"
 public class Operation
 {
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/BitMenuButtonTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/BitMenuButtonTests.cs
index 4c398a7f1f..570c6d158b 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/BitMenuButtonTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/BitMenuButtonTests.cs
@@ -235,8 +235,8 @@ public void BitMenuButtonShouldRespectBackground(BitColorKind background, string
             parameters.Add(p => p.Background, background);
         });
 
-        var bitMenuButton = com.Find(".bit-mnb");
-        Assert.IsTrue(bitMenuButton.ClassList.Contains(expectedClass));
+        var callout = com.Find(".bit-mnb-cal");
+        Assert.IsTrue(callout.ClassList.Contains(expectedClass));
     }
 
     [TestMethod]