menu button

BlazorFluentUI/Components/Layout/NavMenu.razor

@@ -54,6 +54,7 @@
                 <FluentNavLink Href="compobreadcrumb" Icon="@(new Icons.Regular.Size20.FoodPizza())" IconColor="Color.Accent">Breadcrumb</FluentNavLink>
                 <FluentNavGroup Icon="@(new Icons.Regular.Size20.CursorHover())" Expanded="false" Title="Button">
                     <FluentNavLink Href="compobutton" Icon="@(new Icons.Regular.Size20.ControlButton())" IconColor="Color.Accent">Button</FluentNavLink>
+                    <FluentNavLink Href="compomenubutton" Icon="@(new Icons.Regular.Size20.ControlButton())" IconColor="Color.Accent">MenuButton</FluentNavLink>
                 </FluentNavGroup>
 
             </FluentNavGroup>

BlazorFluentUI/Components/Pages/Components/CompoMunuButton.razor

@@ -0,0 +1,54 @@
+@page "/compomenubutton"
+@using Microsoft.FluentUI.AspNetCore.Components.DesignTokens
+
+@inject AccentBaseColor AccentBaseColor
+
+@rendermode RenderMode.InteractiveServer
+
+<FluentLabel Typo="Typography.H3">MenuButton</FluentLabel>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+The <code>FluentMenuButton</code> component used to trigger a menu.
+Menu items can be supplied by both an <code>Items</code> parameter as well as manually as the <code>ChildContent</code>.
+
+<FluentLabel class="my-3" Typo="Typography.H4">Default</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentMenuButton Text="Select brand color" Items="@items" OnMenuChanged="@OnDMenuChanged"/>
+    <p><b>Message</b>: @dmessage?.ToString()</p>
+</FluentCard>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Appearances</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentStack Orientation="Orientation.Vertical">
+        <p>Neutral</p>
+        <FluentMenuButton Text="Select brand color" Items="@items" ButtonAppearance="@Appearance.Neutral" />
+        <p>Accent</p>
+        <FluentMenuButton Text="Select brand color" Items="@items" ButtonAppearance="@Appearance.Accent" />
+        <p>Lightweight</p>
+        <FluentMenuButton Text="Select brand color" Items="@items" ButtonAppearance="@Appearance.Lightweight" />
+        <p>Outline</p>
+        <FluentMenuButton Text="Select brand color" Items="@items" ButtonAppearance="@Appearance.Outline" />
+        <p>Stealth</p>
+        <FluentMenuButton Text="Select brand color" Items="@items" ButtonAppearance="@Appearance.Stealth" />
+    </FluentStack>
+</FluentCard>
+
+@code {
+    Dictionary<string, string> items = new Dictionary<string, string>()
+    {
+        {"0078D4","Windows"},
+        {"D83B01","Office"},
+        {"464EB8","Teams"},
+        {"107C10","Xbox"},
+        {"8661C5","Visual Studio"},
+        {"F2C811","Power BI"},
+        {"0066FF","Power Automate"},
+        {"742774","Power Apps"},
+        {"0B556A","Power Virtual Agents"}
+    };
+
+    string dmessage = string.Empty;
+    void OnDMenuChanged(MenuChangeEventArgs args)
+    {
+        dmessage = $"Id: #{args.Id}, Value: {args.Value}";
+    }
+}

BlazorFluentUI/Program.cs

@@ -1,6 +1,7 @@
 using Microsoft.FluentUI.AspNetCore.Components;
 using BlazorFluentUI.Components;
 using BlazorFluentUI.Services;
+using Microsoft.FluentUI.AspNetCore.Components.DesignTokens;
 
 var builder = WebApplication.CreateBuilder(args);
 
@@ -18,6 +19,7 @@ builder.Services.AddFluentUIComponents();
 builder.Services.AddSingleton<CountryService>();
 builder.Services.AddSingleton<TestDataService>();
 builder.Services.AddSingleton<EmployeeService>();
+builder.Services.AddTransient<AccentBaseColor>();
 
 var app = builder.Build();