+
+
+
+
+
+ What's new
+ Upgrade guide
+ @* Project setup *@
+ Code setup
+ Design tokens
+ Reboot
+ Icons and Emoji
+ DialogService
+ MessageService
+ ToastService
+ Project templates
+ Fluent UI Form
+ Blazor Form
+
+
+
+ FluentComponentBase
+ FluentInputBase
+ Clear cache
+
+
+
+ Header
+ Footer
+ BodyContent
+ Grid
+ Layout
+ MainLayout
+ Spacer
+ Splitter
+ Stack
+
+
+
+ Accordion
+ Anchor
+ Anchored Region
+
+ Badge
+ CounterBadge
+ PresenceBadge
+
+ Autocomplete
+ Breadcrumb
+ Button
+ Card
+ Checkbox
+ CodeEditor
+ Combobox
+ Data grid
+ Date & Time
+ Dialog
+ Divider
+ Drag and Drop
+ Emoji
+ Flipper
+ Highlighter
+ Horizontal Scroll
+ Icon
+ InputFile
+ Label
+ Listbox
+ Menu
+ MenuButton
+ MessageBar
+ MessageBox
+ NavMenu
+ NavMenuTree
+ Number Field
+ Option
+ Overflow
+ Overlay
+ Panel
+ Popover
+ Progress
+ Progress Ring
+ Radio
+ Radio Group
+ Search
+ Select
+ Skeleton
+ Slider
+ SplashScreen
+ Switch
+ Tabs
+ TextArea
+ Text Field
+ Toast
+ Toolbar
+ Tooltip
+ Tree View
+
+
+
+ MarkdownSection
+ TableOfContents
+
+
+
\ No newline at end of file
diff --git a/examples/Demo/Shared/Shared/DemoNavMenu.razor.css b/examples/Demo/Shared/Shared/DemoNavMenu.razor.css
new file mode 100644
index 0000000000..7348dbe7be
--- /dev/null
+++ b/examples/Demo/Shared/Shared/DemoNavMenu.razor.css
@@ -0,0 +1,3 @@
+::deep fluent-tree-item {
+ margin: 5px 0;
+}
diff --git a/examples/Demo/Shared/Shared/DemoNavMenuList.razor b/examples/Demo/Shared/Shared/DemoNavMenuList.razor
index eef71058e5..3bc9f8b523 100644
--- a/examples/Demo/Shared/Shared/DemoNavMenuList.razor
+++ b/examples/Demo/Shared/Shared/DemoNavMenuList.razor
@@ -8,9 +8,9 @@
Home
+
-
+
@@ -8,7 +8,7 @@
+
\ No newline at end of file
diff --git a/examples/Demo/Shared/wwwroot/docs/IconsAndEmoji.md b/examples/Demo/Shared/wwwroot/docs/IconsAndEmoji.md
index 30a35b068c..7a4251fe5e 100644
--- a/examples/Demo/Shared/wwwroot/docs/IconsAndEmoji.md
+++ b/examples/Demo/Shared/wwwroot/docs/IconsAndEmoji.md
@@ -1,3 +1,5 @@
+>**If you are upgrading from a previous version of the library and you were alreasy using icons and/or emoji, please see the [Upgrade Guide](https://www.fluentui-blazor.net/UpgradeGuide) for more information.**
+
Starting with v3, the assets for the icons and emoji are removed from the library package and are provided through additional (separate) packages for
both the icon and emoji resources. The components, and icons that are used by the library itself, are still part of the package.
Adding the [Microsoft.Fast.Components.FluentUI.Icons package](https://www.nuget.org/packages/Microsoft.Fast.Components.FluentUI.Icons) and/or [Microsoft.Fast.Components.FluentUI.Emojis package](https://www.nuget.org/packages/Microsoft.Fast.Components.FluentUI.Emojis)
@@ -5,16 +7,24 @@ is enough to make the resources available to your code.
We use the [.NET trimming capabilities](https://learn.microsoft.com/aspnet/core/blazor/host-and-deploy/configure-trimmer) to publish only those assests that are actually being used in your program. Usually this results in some very small DLL's that only contain the resources that are actually being used in your application.
-We still have support for both the **complete** [Fluent UI System Icons](https://github.com/microsoft/fluentui-system-icons) and the [Fluent Emoji](https://github.com/microsoft/fluentui-emoji) libraries.
+We support the **complete** [Fluent UI System Icons](https://github.com/microsoft/fluentui-system-icons) and [Fluent Emoji](https://github.com/microsoft/fluentui-emoji) collections.
## Getting Started
-To use the **Fluent UI System Icons** in your application, you will need to install the [Microsoft.Fast.Components.FluentUI.Icons](https://www.nuget.org/packages/Microsoft.Fast.Components.FluentUI.Icons/) NuGet package in the project are using the main library.
+To use the **Fluent UI System Icons** in your application, you will need to install the [Microsoft.Fast.Components.FluentUI.Icons](https://www.nuget.org/packages/Microsoft.Fast.Components.FluentUI.Icons/) NuGet package in the project which is using the main library.
+
+```shell
+dotnet add package Microsoft.Fast.Components.FluentUI.Icons
+```
+To use the **Fluent UI Emoji** in your application, you need to install the [Microsoft.Fast.Components.FluentUI.Emojis](https://www.nuget.org/packages/Microsoft.Fast.Components.FluentUI.Emojis/) NuGet package in the project which is using the main library.
+
+```shell
+dotnet add package Microsoft.Fast.Components.FluentUI.Emojis
+```
-To use the **Fluent UI Emoji** in your application, you need to install the [Microsoft.Fast.Components.FluentUI.Emojis](https://www.nuget.org/packages/Microsoft.Fast.Components.FluentUI.Emojis/) NuGet package in the project are using the main library.
-#### `FluentIcon` component
+#### Using the `FluentIcon` component
To use the icons, you add a `FluentIcon` component in your code like this:
@@ -58,7 +68,7 @@ After adding the class, you can start using this custom icon like a "normal" Flu
Home
More information
+ @ChildContent
+
\ No newline at end of file
diff --git a/src/Core/Components/CollapsibleRegion/FluentCollapsibleRegion.razor.cs b/src/Core/Components/CollapsibleRegion/FluentCollapsibleRegion.razor.cs
new file mode 100644
index 0000000000..96c3d9faf5
--- /dev/null
+++ b/src/Core/Components/CollapsibleRegion/FluentCollapsibleRegion.razor.cs
@@ -0,0 +1,62 @@
+using System;
+using System.Globalization;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Components;
+using Microsoft.Fast.Components.FluentUI.Utilities;
+using Microsoft.JSInterop;
+
+
+namespace Microsoft.Fast.Components.FluentUI;
+public partial class FluentCollapsibleRegion : FluentComponentBase
+{
+ private bool _expanded;
+
+ protected string? StyleValue =>
+ new StyleBuilder(Style)
+ .AddStyle("max-height", MaxHeight, !string.IsNullOrEmpty(MaxHeight))
+ .AddStyle("height", "auto", Expanded)
+ .AddStyle("height", "0", !Expanded)
+ .Build();
+
+ protected string? ClassValue =>
+ new CssBuilder(Class)
+ .AddClass("fluent-collapsible-region-container")
+ .Build();
+
+ ///
+
+
+ @ChildContent
+
+
+
+}
+@code {
+ private void RenderContent(RenderTreeBuilder __builder)
+ {
+ @if (Icon is not null)
+ {
+
+
+
+ @if (!string.IsNullOrEmpty(Href))
+ {
+
+ @_renderContent
+
+ @_renderButton
+ }
+ else
+ {
+
+
+ @_renderContent
+ @_renderButton
+
+ }
+
+ @Title
+ @TitleTemplate
+
+ }
+
+ private void RenderButton(RenderTreeBuilder __builder)
+ {
+ @if (!HideExpander)
+ {
+
+
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/Core/Components/NavMenu/FluentNavGroup.razor.cs b/src/Core/Components/NavMenu/FluentNavGroup.razor.cs
new file mode 100644
index 0000000000..8a5b7a3af6
--- /dev/null
+++ b/src/Core/Components/NavMenu/FluentNavGroup.razor.cs
@@ -0,0 +1,132 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.Fast.Components.FluentUI.Utilities;
+
+namespace Microsoft.Fast.Components.FluentUI;
+
+public partial class FluentNavGroup : FluentNavBase
+{
+ private readonly RenderFragment _renderContent;
+ private readonly RenderFragment _renderButton;
+
+ protected string? ClassValue =>
+ new CssBuilder("fluent-nav-group")
+ .AddClass("fluent-nav-item")
+ .AddClass("expanded", Expanded)
+ .AddClass("disabled", Disabled)
+ .AddClass(Class)
+ .Build();
+
+ internal string? StyleValue => new StyleBuilder(Style)
+ .AddStyle("margin", $"{Gap} 0" , !string.IsNullOrEmpty(Gap))
+ .Build();
+
+
+ protected string? ButtonClassValue =>
+ new CssBuilder("expand-collapse-button")
+ .AddClass("rotate", Expanded)
+ .Build();
+
+ protected string? ExpandIconClassValue =>
+ new CssBuilder("fluent-nav-expand-icon")
+ .Build();
+
+ internal Dictionary
+
+
+@code {
+ private void RenderContent(RenderTreeBuilder __builder)
+ {
+ @if (Icon is not null)
+ {
+
+
+
+ @if (!OnClick.HasDelegate && !string.IsNullOrEmpty(Href))
+ {
+
+ @_renderContent
+
+ }
+ else
+ {
+
+
+ @_renderContent
+
+ }
+
+ @ChildContent
+
+
+
+ }
+}
\ No newline at end of file
diff --git a/src/Core/Components/NavMenu/FluentNavLink.razor.cs b/src/Core/Components/NavMenu/FluentNavLink.razor.cs
new file mode 100644
index 0000000000..812a4963d3
--- /dev/null
+++ b/src/Core/Components/NavMenu/FluentNavLink.razor.cs
@@ -0,0 +1,33 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.Fast.Components.FluentUI.Utilities;
+
+namespace Microsoft.Fast.Components.FluentUI;
+
+public partial class FluentNavLink : FluentNavBase
+{
+ private readonly RenderFragment _renderContent;
+
+ internal string? ClassValue => new CssBuilder(Class)
+ .AddClass("fluent-nav-item")
+ .Build();
+
+ internal string? LinkClassValue => new CssBuilder("fluent-nav-link")
+ .AddClass($"disabled", Disabled)
+ .Build();
+
+ internal Dictionary
-
-
-
-
-
- @if (Collapsible)
+ _allItems = new();
- private readonly List _childItems = new();
- private readonly string _expandCollapseTreeItemId = Identifier.NewId();
- private FluentTreeItem? _currentlySelectedTreeItem;
- private FluentTreeItem? _previousSuccessfullySelectedTreeItem;
- protected string? ClassValue => new CssBuilder(Class)
- .AddClass("navmenu")
- .AddClass("collapsed", Collapsed)
- .AddClass("navmenu-parent-element")
+ internal string? ClassValue => new CssBuilder("fluent-nav-menu")
+ .AddClass(Class)
+ .AddClass("collapsed", () => !Expanded)
.Build();
- protected string? StyleValue => new StyleBuilder(Style)
+ internal string? StyleValue => new StyleBuilder(Style)
+ .AddStyle("margin", Margin, !string.IsNullOrEmpty(Margin))
.AddStyle("width", $"{Width}px", () => Expanded && Width.HasValue)
+ .AddStyle("width", "100%", () => Expanded && !Width.HasValue)
.AddStyle("width", WIDTH_COLLAPSED_MENU, () => !Expanded)
.AddStyle("min-width", WIDTH_COLLAPSED_MENU, () => !Expanded)
.Build();
-
- ///
- /// Gets or sets the content to be rendered inside the component.
- ///
- [Parameter]
- public RenderFragment? ChildContent { get; set; }
-
+
///
- /// Gets or sets the content to be rendered for the expander icon
- /// when the menu is collapsible. The default icon will be used if
+ /// Gets or sets the content to be rendered for the collapse icon
+ /// when the menu is collapsible. The default icon will be used if
/// this is not specified.
///
[Parameter]
public RenderFragment? ExpanderContent { get; set; }
///
- /// Gets or sets the title of the navigation menu
- /// Default to "Navigation menu"
+ /// Gets or sets the title of the navigation menu using the aria-label attribute.
+ /// Defaults to "Navigation menu"
///
[Parameter]
public string? Title { get; set; } = "Navigation menu";
@@ -72,27 +59,16 @@ public partial class FluentNavMenu : FluentComponentBase, INavMenuItemsOwner, ID
public EventCallback ExpandedChanged { get; set; }
///
- /// Called when the user attempts to execute the default action of a menu item.
+ /// Adjust the vertical spacing between navlinks.
///
[Parameter]
- public EventCallback OnAction { get; set; }
+ public string? Margin { get; set; }
- ///
- /// If set to
- [Parameter]
- public bool InitiallyExpanded { get; set; }
- ///
- /// If true, the menu will re-navigate to the current page when the user clicks on the currently selected menu item.
- ///
[Parameter]
- public bool ReNavigate { get; set; } = false;
-
- ///
/// Navigation manager
///
@@ -104,139 +80,16 @@ public FluentNavMenu()
Id = Identifier.NewId();
}
- /// INavMenuItemsOwner.GetChildItems() => _childItems;
-
- /// TryActivateMenuItemAsync(FluentTreeItem? treeItem, bool renavigate = false)
- {
- if (treeItem is null)
- {
- return false;
- }
-
- if (!_allItems.TryGetValue(treeItem.Id!, out FluentNavMenuItemBase? menuItem))
- {
- return false;
- }
-
- NavMenuActionArgs? actionArgs = new NavMenuActionArgs(target: menuItem, renavigate: renavigate);
- if (OnAction.HasDelegate)
- {
- await OnAction.InvokeAsync(actionArgs);
- }
-
- if (!actionArgs.Handled)
- {
- await menuItem.ExecuteAsync(actionArgs);
- }
-
- if (actionArgs.Handled)
- {
- await menuItem.SetSelectedAsync(true);
- }
-
- return actionArgs.Handled;
}
-
-}
+}
\ No newline at end of file
diff --git a/src/Core/Components/NavMenu/FluentNavMenu.razor.css b/src/Core/Components/NavMenu/FluentNavMenu.razor.css
index ca6e73f0da..32525ff060 100644
--- a/src/Core/Components/NavMenu/FluentNavMenu.razor.css
+++ b/src/Core/Components/NavMenu/FluentNavMenu.razor.css
@@ -1,95 +1,107 @@
-/*
- NavMenu
-*/
-.navmenu {
- background-color: var(--neutral-layer-1);
+/* NavMenu */
+.fluent-nav-menu {
+ flex-direction: column;
+ align-items: stretch;
}
-
-/*
- NavMenu expander
-*/
-::deep .navmenu-expander::part(positioning-region) {
- background-color: var(--neutral-fill-stealth-rest);
-}
-
-::deep .navmenu-expander::part(content-region) {
- margin-inline-start: calc(var(--design-unit) * 2px);
+::deep .fluent-nav-item {
+ margin: calc(var(--design-unit) * 1px + 1px) 0;
-webkit-user-select: none;
user-select: none;
}
-::deep .navmenu-expander::part(positioning-region):hover {
- background-color: var(--neutral-fill-secondary-rest);
-}
-
-::deep .navmenu-expander.selected::after {
- display: none;
+ /* Hover and active highlighting */
+ ::deep .fluent-nav-item .positioning-region:hover:not(:has(.disabled)) {
+ cursor: pointer;
+ background: var(--neutral-fill-secondary-rest);
+ }
+
+ ::deep .fluent-nav-item .positioning-region:has(a.active) {
+ background: var(--neutral-fill-secondary-rest);
+ }
+
+ /* Active item indicator */
+ ::deep .fluent-nav-item .positioning-region:has(a.active)::before {
+ content: "";
+ display: block;
+ position: absolute;
+ left: 0px;
+ right: unset;
+ width: 3px;
+ height: calc(((var(--base-height-multiplier) + var(--density)) * var(--design-unit) / 2) * 1px);
+ background: var(--accent-fill-rest);
+ border-radius: calc(var(--control-corner-radius) * 1px);
+ margin: calc(var(--design-unit) * 2px) 2px;
+ z-index: 5;
+ }
+
+[dir='rtl'] * ::deep .fluent-nav-item .positioning-region:has(a.active)::before {
+ left: unset;
+ right: 0px;
}
-
-
-/*
- Child Elements (Groups and Items)
-*/
-::deep .navmenu-child-element::part(content-region) {
- -webkit-user-select: none;
- user-select: none;
+::deep .content-region {
+ display: flex;
+ align-items: center;
+ white-space: nowrap;
+ width: 100%;
margin-inline-start: calc(var(--design-unit) * 2px);
- margin-inline-end: calc(var(--design-unit) * 2px);
}
-::deep .navmenu .treeitem-text, ::deep .navmenu fluent-tree-item.navmenu-child-element::part(start) {
- pointer-events: none;
+/* Nav items */
+::deep .fluent-nav-item .positioning-region {
+ display: flex;
+ position: relative;
+ box-sizing: border-box;
+ background: var(--neutral-fill-stealth-rest);
+ border: calc(var(--stroke-width) * 1px) solid transparent;
+ border-radius: calc(var(--control-corner-radius) * 1px);
+ min-height: calc(((var(--base-height-multiplier) + var(--density)) * var(--design-unit) + 1) * 1px);
}
-::deep .navmenu.collapsed .treeitem-text, ::deep .navmenu.collapsed fluent-tree-item.navmenu-child-element::part(expand-collapse-button) {
- display: none;
+::deep .fluent-nav-group .fluent-nav-item:last-of-type, .fluent-nav-menu .fluent-nav-item:last-of-type {
+ margin-bottom: 0;
}
-
-
-/*
- Groups
-*/
-::deep .navmenu-group::part(content-region) {
- margin-inline-end: var(--expand-collapse-button-size);
+/* level indenting */
+::deep .fluent-nav-group * .fluent-nav-menu > .fluent-nav-item > .positioning-region {
+ padding-inline-start: 24px;
}
+::deep .fluent-nav-group * .fluent-nav-menu > .fluent-nav-item * .fluent-nav-menu > .fluent-nav-item > .positioning-region {
+ padding-inline-start: 48px;
+}
+::deep .fluent-nav-group * .fluent-nav-menu > .fluent-nav-item * .fluent-nav-menu > .fluent-nav-item * .fluent-nav-menu > .fluent-nav-item > .positioning-region {
+ padding-inline-start: 72px;
+}
-/*
- Group expander
-*/
-::deep .navmenu .navmenu-group::part(expand-collapse-button) {
- right: calc(var(--design-unit) * 2px);
- left: unset;
- margin-inline-end: calc(var(--expand-collapse-button-size) * -1);
+::deep .fluent-nav-group * .fluent-nav-menu > .fluent-nav-item * .fluent-nav-menu > .fluent-nav-item * .fluent-nav-menu > .fluent-nav-item * .fluent-nav-menu > .fluent-nav-item > .positioning-region {
+ padding-inline-start: 96px;
}
-[dir="rtl"] * ::deep .navmenu-group::part(expand-collapse-button) {
- left: calc(var(--design-unit) * 2px);
- right: unset;
- margin-inline-start: calc(var(--expand-collapse-button-size) - (var(--design-unit) * 2px));
+::deep .fluent-nav-text {
+ overflow: hidden;
+ text-overflow: ellipsis;
}
+/* collapsed */
+::deep.collapsed .fluent-nav-text {
+ display: none;
+}
-/*
- Group items
-*/
-::deep .navmenu-group .navmenu-child-element::part(content-region) {
- padding-inline-start: calc(var(--design-unit) * 2px);
+::deep.collapsed .expand-collapse-button {
+ display: none;
}
-/* Hide any items inside groups of a collapsed nav menu*/
-::deep .navmenu.collapsed > .navmenu-parent-element::part(items) {
+::deep.collapsed .fluent-nav-group * .fluent-nav-menu > .fluent-nav-item {
display: none;
}
+ ::deep.collapsed .fluent-nav-group * .fluent-nav-menu > .fluent-nav-item * .fluent-nav-menu > .fluent-nav-item {
+ display: none;
+ }
-/*
- Nav links
-*/
-::deep .navmenu .navmenu-link::part(content-region) {
- margin-inline-start: calc(var(--design-unit) * 2px);
-}
\ No newline at end of file
+ ::deep.collapsed .fluent-nav-group * .fluent-nav-menu > .fluent-nav-item * .fluent-nav-menu > .fluent-nav-item * .fluent-nav-menu > .fluent-nav-item {
+ display: none;
+ }
diff --git a/src/Core/Components/NavMenu/FluentNavMenuGroup.razor b/src/Core/Components/NavMenuTree/FluentNavMenuGroup.razor
similarity index 86%
rename from src/Core/Components/NavMenu/FluentNavMenuGroup.razor
rename to src/Core/Components/NavMenuTree/FluentNavMenuGroup.razor
index 188d0806a2..613effa0ab 100644
--- a/src/Core/Components/NavMenu/FluentNavMenuGroup.razor
+++ b/src/Core/Components/NavMenuTree/FluentNavMenuGroup.razor
@@ -17,11 +17,11 @@
Text="@Text">
@if (HasIcon)
{
- _childItems = new();
private bool HasChildIcons => ((INavMenuItemsOwner)this).HasChildIcons;
private bool Visible => NavMenu.Expanded || HasIcon;
diff --git a/src/Core/Components/NavMenu/FluentNavMenuItemBase.cs b/src/Core/Components/NavMenuTree/FluentNavMenuItemBase.cs
similarity index 96%
rename from src/Core/Components/NavMenu/FluentNavMenuItemBase.cs
rename to src/Core/Components/NavMenuTree/FluentNavMenuItemBase.cs
index 480fc803fa..fd91201cbc 100644
--- a/src/Core/Components/NavMenu/FluentNavMenuItemBase.cs
+++ b/src/Core/Components/NavMenuTree/FluentNavMenuItemBase.cs
@@ -67,7 +67,9 @@ public abstract class FluentNavMenuItemBase : FluentComponentBase, IDisposable
public int? Width { get; set; }
[CascadingParameter]
- protected FluentNavMenu NavMenu { get; private set; } = default!;
+#pragma warning disable CS0618 // Type or member is obsolete
+ protected FluentNavMenuTree NavMenu { get; private set; } = default!;
+#pragma warning restore CS0618 // Type or member is obsolete
[CascadingParameter(Name = "NavMenuExpanded")]
protected bool NavMenuExpanded { get; private set; }
diff --git a/src/Core/Components/NavMenu/FluentNavMenuLink.razor b/src/Core/Components/NavMenuTree/FluentNavMenuLink.razor
similarity index 100%
rename from src/Core/Components/NavMenu/FluentNavMenuLink.razor
rename to src/Core/Components/NavMenuTree/FluentNavMenuLink.razor
diff --git a/src/Core/Components/NavMenu/FluentNavMenuLink.razor.cs b/src/Core/Components/NavMenuTree/FluentNavMenuLink.razor.cs
similarity index 88%
rename from src/Core/Components/NavMenu/FluentNavMenuLink.razor.cs
rename to src/Core/Components/NavMenuTree/FluentNavMenuLink.razor.cs
index 91873e6bf7..dee03a617d 100644
--- a/src/Core/Components/NavMenu/FluentNavMenuLink.razor.cs
+++ b/src/Core/Components/NavMenuTree/FluentNavMenuLink.razor.cs
@@ -2,6 +2,7 @@
namespace Microsoft.Fast.Components.FluentUI;
+//[Obsolete("This component has been replaced with the FluentNavLink and will be removed in a future version.")]
public partial class FluentNavMenuLink : FluentNavMenuItemBase, IDisposable
{
protected string? ClassValue => new CssBuilder(Class)
diff --git a/src/Core/Components/NavMenuTree/FluentNavMenuTree.razor b/src/Core/Components/NavMenuTree/FluentNavMenuTree.razor
new file mode 100644
index 0000000000..2055c23304
--- /dev/null
+++ b/src/Core/Components/NavMenuTree/FluentNavMenuTree.razor
@@ -0,0 +1,39 @@
+@namespace Microsoft.Fast.Components.FluentUI
+@inherits FluentComponentBase
+
+ _allItems = new();
+ private readonly List _childItems = new();
+ private readonly string _expandCollapseTreeItemId = Identifier.NewId();
+ private FluentTreeItem? _currentlySelectedTreeItem;
+ private FluentTreeItem? _previousSuccessfullySelectedTreeItem;
+
+ protected string? ClassValue => new CssBuilder(Class)
+ .AddClass("navmenu")
+ .AddClass("collapsed", Collapsed)
+ .AddClass("navmenu-parent-element")
+ .Build();
+
+ protected string? StyleValue => new StyleBuilder(Style)
+ .AddStyle("width", $"{Width}px", () => Expanded && Width.HasValue)
+ .AddStyle("width", WIDTH_COLLAPSED_MENU, () => !Expanded)
+ .AddStyle("min-width", WIDTH_COLLAPSED_MENU, () => !Expanded)
+ .Build();
+
+ ///
+ /// Gets or sets the content to be rendered inside the component.
+ ///
+ [Parameter]
+ public RenderFragment? ChildContent { get; set; }
+
+ ///
+ /// Gets or sets the content to be rendered for the expander icon
+ /// when the menu is collapsible. The default icon will be used if
+ /// this is not specified.
+ ///
+ [Parameter]
+ public RenderFragment? ExpanderContent { get; set; }
+
+ ///
+ /// Gets or sets the title of the navigation menu
+ /// Default to "Navigation menu"
+ ///
+ [Parameter]
+ public string? Title { get; set; } = "Navigation menu";
+
+ ///
+ /// Gets or sets the width of the menu (in pixels).
+ ///
+ [Parameter]
+ public int? Width { get; set; }
+
+ ///
+ /// Gets or sets whether or not the menu can be collapsed.
+ ///
+ [Parameter]
+ public bool Collapsible { get; set; }
+
+ ///
+ /// Event callback for when the
+ [Parameter]
+ public EventCallback ExpandedChanged { get; set; }
+
+ ///
+ /// Called when the user attempts to execute the default action of a menu item.
+ ///
+ [Parameter]
+ public EventCallback OnAction { get; set; }
+
+ ///
+ /// If set to
+ [Parameter]
+ public bool InitiallyExpanded { get; set; }
+
+ ///
+ /// If true, the menu will re-navigate to the current page when the user clicks on the currently selected menu item.
+ ///
+ [Parameter]
+ public bool ReNavigate { get; set; } = false;
+
+ ///
+ /// Navigation manager
+ ///
+ [Inject]
+ protected NavigationManager NavigationManager { get; private set; } = null!;
+
+ public FluentNavMenuTree()
+ {
+ Id = Identifier.NewId();
+ }
+
+ /// INavMenuItemsOwner.GetChildItems() => _childItems;
+
+ /// TryActivateMenuItemAsync(FluentTreeItem? treeItem, bool renavigate = false)
+ {
+ if (treeItem is null)
+ {
+ return false;
+ }
+
+ if (!_allItems.TryGetValue(treeItem.Id!, out FluentNavMenuItemBase? menuItem))
+ {
+ return false;
+ }
+
+ NavMenuActionArgs? actionArgs = new NavMenuActionArgs(target: menuItem, renavigate: renavigate);
+ if (OnAction.HasDelegate)
+ {
+ await OnAction.InvokeAsync(actionArgs);
+ }
+
+ if (!actionArgs.Handled)
+ {
+ await menuItem.ExecuteAsync(actionArgs);
+ }
+
+ if (actionArgs.Handled)
+ {
+ await menuItem.SetSelectedAsync(true);
+ }
+
+ return actionArgs.Handled;
+ }
+
+}
diff --git a/src/Core/Components/NavMenuTree/FluentNavMenuTree.razor.css b/src/Core/Components/NavMenuTree/FluentNavMenuTree.razor.css
new file mode 100644
index 0000000000..23b0d4d066
--- /dev/null
+++ b/src/Core/Components/NavMenuTree/FluentNavMenuTree.razor.css
@@ -0,0 +1,94 @@
+/*
+ NavMenu
+*/
+.navmenu {
+ background-color: var(--neutral-layer-1);
+}
+
+/*
+ NavMenu expander
+*/
+::deep .navmenu-expander::part(positioning-region) {
+ background-color: var(--neutral-fill-stealth-rest);
+}
+
+::deep .navmenu-expander::part(content-region) {
+ margin-inline-start: calc(var(--design-unit) * 2px);
+ -webkit-user-select: none;
+ user-select: none;
+}
+
+::deep .navmenu-expander::part(positioning-region):hover {
+ background-color: var(--neutral-fill-secondary-rest);
+}
+
+::deep .navmenu-expander.selected::after {
+ display: none;
+}
+
+
+
+/*
+ Child Elements (Groups and Items)
+*/
+::deep .navmenu-child-element::part(content-region) {
+ -webkit-user-select: none;
+ user-select: none;
+ margin-inline-start: calc(var(--design-unit) * 2px);
+ margin-inline-end: calc(var(--design-unit) * 2px);
+}
+
+::deep .navmenu .treeitem-text, ::deep .navmenu fluent-tree-item.navmenu-child-element::part(start) {
+ pointer-events: none;
+}
+
+::deep .navmenu.collapsed .treeitem-text, ::deep .navmenu.collapsed fluent-tree-item.navmenu-child-element::part(expand-collapse-button) {
+ display: none;
+}
+
+
+
+/*
+ Groups
+*/
+::deep .navmenu-group::part(content-region) {
+ margin-inline-end: var(--expand-collapse-button-size);
+}
+
+
+
+/*
+ Group expander
+*/
+::deep .navmenu .navmenu-group::part(expand-collapse-button) {
+ right: calc(var(--design-unit) * 2px);
+ left: unset;
+ margin-inline-end: calc(var(--expand-collapse-button-size) * -1);
+}
+
+[dir="rtl"] * ::deep .navmenu-group::part(expand-collapse-button) {
+ left: calc(var(--design-unit) * 2px);
+ right: unset;
+ margin-inline-start: calc(var(--expand-collapse-button-size) - (var(--design-unit) * 2px));
+}
+
+
+/*
+ Group items
+*/
+::deep .navmenu-group .navmenu-child-element::part(content-region) {
+ padding-inline-start: calc(var(--design-unit) * 2px);
+}
+
+/* Hide any items inside groups of a collapsed nav menu*/
+::deep .navmenu.collapsed > .navmenu-parent-element::part(items) {
+ display: none;
+}
+
+
+/*
+ Nav links
+*/
+::deep .navmenu .navmenu-link::part(content-region) {
+ margin-inline-start: calc(var(--design-unit) * 2px);
+}
\ No newline at end of file
diff --git a/src/Core/Components/NavMenu/INavMenuItemsOwner.cs b/src/Core/Components/NavMenuTree/INavMenuItemsOwner.cs
similarity index 100%
rename from src/Core/Components/NavMenu/INavMenuItemsOwner.cs
rename to src/Core/Components/NavMenuTree/INavMenuItemsOwner.cs
diff --git a/src/Core/Enums/Color.cs b/src/Core/Enums/Color.cs
index b347790366..31b848bcfd 100644
--- a/src/Core/Enums/Color.cs
+++ b/src/Core/Enums/Color.cs
@@ -71,6 +71,12 @@ public enum Color
[Description("var(--neutral-layer-1)")]
Lightweight,
+ ///
+ /// Use the --neutral-stroke-rest CSS variable color, adapts to light/dark mode.
+ ///
+ [Description("var(--neutral-stroke-rest)")]
+ Disabled,
+
///
/// Supply an HTML hex color string value (#rrggbb or #rgb) for the CustomColor parameter.
///
diff --git a/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Default.verified.html b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Default.verified.html
new file mode 100644
index 0000000000..91478a34cb
--- /dev/null
+++ b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Default.verified.html
@@ -0,0 +1,21 @@
+
+(parameters =>
+ {
+ parameters.Add(p => p.NavMenuExpanded, true);
+ parameters.Add(p => p.Title, "Group title");
+ parameters.AddChildContent("NavGroups and NavLinks here");
+ });
+
+ // Assert
+ cut.Verify();
+ }
+
+ [Fact]
+ public void FluentNavGroup_Empty()
+ {
+ // Arrange & Act
+ var cut = TestContext.RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.NavMenuExpanded, true);
+ });
+
+ // Assert
+ cut.Verify();
+ }
+
+ [Fact]
+ public void FluentNavGroup_HideExpander()
+ {
+ // Arrange & Act
+ var cut = TestContext.RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.NavMenuExpanded, true);
+ parameters.Add(p => p.HideExpander, true);
+ parameters.AddChildContent("NavGroups and NavLinks here");
+ });
+
+ // Assert
+ cut.Verify();
+ }
+
+ [Fact]
+ public void FluentNavGroup_Disabled()
+ {
+ // Arrange & Act
+ var cut = TestContext.RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.NavMenuExpanded, true);
+ parameters.Add(p => p.Disabled, true);
+ parameters.Add(p => p.Title, "Group title");
+ parameters.AddChildContent("NavGroups and NavLinks here");
+ });
+
+ // Assert
+ cut.Verify();
+ }
+
+ [Fact]
+ public void FluentNavGroup_TitleTemplate()
+ {
+ // Arrange & Act
+ var cut = TestContext.RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.NavMenuExpanded, true);
+ parameters.Add(p => p.TitleTemplate, "(parameters =>
+ {
+ parameters.Add(p => p.NavMenuExpanded, true);
+ parameters.Add(p => p.Title, "Group title");
+ parameters.Add(p => p.Gap, "20px");
+ parameters.AddChildContent("NavGroups and NavLinks here");
+ });
+
+ // Assert
+ cut.Verify();
+ }
+
+ [Fact]
+ public void FluentNavGroup_Href()
+ {
+ // Arrange & Act
+ var cut = TestContext.RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.NavMenuExpanded, true);
+ parameters.Add(p => p.Title, "Group title");
+ parameters.Add(p => p.Href, "/NavMenu");
+ parameters.AddChildContent("NavGroups and NavLinks here");
+ });
+
+ // Assert
+ cut.Verify();
+ }
+
+ [Fact]
+ public void FluentNavGroup_Icon()
+ {
+ // Arrange & Act
+ var cut = TestContext.RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.NavMenuExpanded, true);
+ parameters.Add(p => p.Title, "Group title");
+ parameters.Add(p => p.Icon, SampleIcons.Info);
+ parameters.AddChildContent("NavGroups and NavLinks here");
+ });
+
+ // Assert
+ cut.Verify();
+ }
+
+ [Fact]
+ public void FluentNavGroup_IconAndIconColor()
+ {
+ // Arrange & Act
+ var cut = TestContext.RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.NavMenuExpanded, true);
+ parameters.Add(p => p.Title, "Group title");
+ parameters.Add(p => p.Icon, SampleIcons.Info);
+ parameters.Add(p => p.IconColor, Color.Neutral);
+ parameters.AddChildContent("NavGroups and NavLinks here");
+ });
+
+ // Assert
+ cut.Verify();
+ }
+
+}
diff --git a/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_Default.verified.html b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_Default.verified.html
new file mode 100644
index 0000000000..17d77eeee3
--- /dev/null
+++ b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_Default.verified.html
@@ -0,0 +1,11 @@
+
+(parameters =>
+ {
+ parameters.AddChildContent("NavLink text");
+ });
+
+ // Assert
+ cut.Verify();
+ }
+
+ [Fact]
+ public void FluentNavLink_ExtendedTtitle()
+ {
+ // Arrange & Act
+ var cut = TestContext.RenderComponent(parameters =>
+ {
+ parameters.AddChildContent("(parameters =>
+ {
+ parameters.Add(p => p.Href, "/NavMenu");
+ parameters.AddChildContent("NavLink text");
+ });
+
+ // Assert
+ cut.Verify();
+ }
+
+ [Fact]
+ public void FluentNavLink_Target()
+ {
+ // Arrange & Act
+ var cut = TestContext.RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Href, "/NavMenu");
+ parameters.Add(p => p.Target, "_blank");
+ parameters.AddChildContent("NavLink text");
+ });
+
+ // Assert
+ cut.Verify();
+ }
+
+ [Fact]
+ public void FluentNavLink_Match()
+ {
+ // Arrange & Act
+ var cut = TestContext.RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Href, "/NavMenu");
+ parameters.Add(p => p.Match, NavLinkMatch.All);
+ parameters.AddChildContent("NavLink text");
+ });
+
+ // Assert
+ cut.Verify();
+ }
+
+ [Fact]
+ public void FluentNavLink_ForceLoad()
+ {
+ // Arrange & Act
+ var cut = TestContext.RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Href, "/NavMenu");
+ parameters.Add(p => p.ForceLoad, true);
+ parameters.AddChildContent("NavLink text");
+ });
+
+ // Assert
+ cut.Verify();
+ }
+
+ [Fact]
+ public void FluentNavLink_Icon()
+ {
+ // Arrange & Act
+ var cut = TestContext.RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Icon, SampleIcons.Info);
+ parameters.AddChildContent("NavLink text");
+ });
+
+ // Assert
+ cut.Verify();
+ }
+
+ [Fact]
+ public void FluentNavLink_IconAndIconColor()
+ {
+ // Arrange & Act
+ var cut = TestContext.RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.NavMenuExpanded, true);
+ parameters.Add(p => p.Icon, SampleIcons.Info);
+ parameters.Add(p => p.IconColor, Color.Neutral);
+ parameters.AddChildContent("NavLink text");
+ });
+
+ // Assert
+ cut.Verify();
+ }
+
+ [Fact]
+ public void FluentNavLink_OnClick()
+ {
+ Action onClickHandler = _ => { };
+
+ // Arrange & Act
+ var cut = TestContext.RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.OnClick, onClickHandler);
+ parameters.AddChildContent("NavLink text");
+ });
+
+ // Assert
+ cut.Verify();
+ }
+
+ //ActiveClass
+ //Match
+ //Target
+}
diff --git a/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_Collapsible.verified.html b/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_Collapsible.verified.html
new file mode 100644
index 0000000000..c4a556086e
--- /dev/null
+++ b/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_Collapsible.verified.html
@@ -0,0 +1,11 @@
+
+
\ No newline at end of file
diff --git a/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_CollapsibleCustomTitle.verified.html b/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_CollapsibleCustomTitle.verified.html
new file mode 100644
index 0000000000..d6b657561e
--- /dev/null
+++ b/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_CollapsibleCustomTitle.verified.html
@@ -0,0 +1,11 @@
+
+
\ No newline at end of file
diff --git a/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_CustomTitle.verified.html b/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_CustomTitle.verified.html
new file mode 100644
index 0000000000..39ec9a18d1
--- /dev/null
+++ b/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_CustomTitle.verified.html
@@ -0,0 +1,2 @@
+
+
\ No newline at end of file
diff --git a/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_Default.verified.html b/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_Default.verified.html
new file mode 100644
index 0000000000..bbf9fd18df
--- /dev/null
+++ b/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_Default.verified.html
@@ -0,0 +1,2 @@
+
+
\ No newline at end of file
diff --git a/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_ExpanderContent.verified.html b/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_ExpanderContent.verified.html
new file mode 100644
index 0000000000..ab9e5b4c22
--- /dev/null
+++ b/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_ExpanderContent.verified.html
@@ -0,0 +1,10 @@
+
+
\ No newline at end of file
diff --git a/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_Margin.verified.html b/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_Margin.verified.html
new file mode 100644
index 0000000000..a3874c3e52
--- /dev/null
+++ b/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_Margin.verified.html
@@ -0,0 +1,2 @@
+
+
\ No newline at end of file
diff --git a/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_NotExpanded.verified.html b/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_NotExpanded.verified.html
new file mode 100644
index 0000000000..40aabf93c6
--- /dev/null
+++ b/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_NotExpanded.verified.html
@@ -0,0 +1,2 @@
+
+
\ No newline at end of file
diff --git a/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_Width.verified.html b/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_Width.verified.html
new file mode 100644
index 0000000000..f1c083ae5b
--- /dev/null
+++ b/tests/Core/NavMenu/FluentNavMenuTests.FluentNavMenu_Width.verified.html
@@ -0,0 +1,2 @@
+
+
\ No newline at end of file
diff --git a/tests/Core/NavMenu/FluentNavMenuTests.cs b/tests/Core/NavMenu/FluentNavMenuTests.cs
new file mode 100644
index 0000000000..c587c458c2
--- /dev/null
+++ b/tests/Core/NavMenu/FluentNavMenuTests.cs
@@ -0,0 +1,119 @@
+using Xunit;
+
+namespace Microsoft.Fast.Components.FluentUI.Tests.NavMenu;
+
+public class FluentNavMenuTests : TestBase
+{
+ [Fact]
+ public void FluentNavMenu_Default()
+ {
+ // Arrange & Act
+ var cut = TestContext.RenderComponent(parameters =>
+ {
+ parameters.AddChildContent("NavGroups and NavLinks here");
+ });
+
+ // Assert
+ cut.Verify();
+ }
+
+ [Fact]
+ public void FluentNavMenu_Collapsible()
+ {
+ // Arrange & Act
+ var cut = TestContext.RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Collapsible, true);
+ parameters.AddChildContent("NavGroups and NavLinks here");
+ });
+
+ // Assert
+ cut.Verify();
+ }
+
+ [Fact]
+ public void FluentNavMenu_NotExpanded()
+ {
+ // Arrange & Act
+ var cut = TestContext.RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Expanded, false);
+ parameters.AddChildContent("NavGroups and NavLinks here");
+ });
+
+ // Assert
+ cut.Verify();
+ }
+
+ [Fact]
+ public void FluentNavMenu_CustomTitle()
+ {
+ // Arrange & Act
+ var cut = TestContext.RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Title, "Custom title");
+ parameters.AddChildContent("NavGroups and NavLinks here");
+ });
+
+ // Assert
+ cut.Verify();
+ }
+
+
+ [Fact]
+ public void FluentNavMenu_CollapsibleCustomTitle()
+ {
+ // Arrange & Act
+ var cut = TestContext.RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Collapsible, true);
+ parameters.Add(p => p.Title, "Custom title");
+ parameters.AddChildContent("NavGroups and NavLinks here");
+ });
+
+ // Assert
+ cut.Verify();
+ }
+
+ [Fact]
+ public void FluentNavMenu_Width()
+ {
+ // Arrange & Act
+ var cut = TestContext.RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Width, 300);
+ parameters.AddChildContent("NavGroups and NavLinks here");
+ });
+
+ // Assert
+ cut.Verify();
+ }
+
+ [Fact]
+ public void FluentNavMenu_Margin()
+ {
+ // Arrange & Act
+ var cut = TestContext.RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Margin, "5px 15px");
+ parameters.AddChildContent("NavGroups and NavLinks here");
+ });
+
+ // Assert
+ cut.Verify();
+ }
+
+ [Fact]
+ public void FluentNavMenu_ExpanderContent()
+ {
+ // Arrange & Act
+ var cut = TestContext.RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Collapsible, true);
+ parameters.Add(p => p.ExpanderContent, "
+
+ @if (Collapsible)
+ {
+
\ No newline at end of file
diff --git a/src/Core/Components/NavMenu/FluentNavMenu.razor.cs b/src/Core/Components/NavMenu/FluentNavMenu.razor.cs
index 40f39e5786..b013ee5a76 100644
--- a/src/Core/Components/NavMenu/FluentNavMenu.razor.cs
+++ b/src/Core/Components/NavMenu/FluentNavMenu.razor.cs
@@ -1,50 +1,37 @@
using Microsoft.AspNetCore.Components;
-using Microsoft.AspNetCore.Components.Routing;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.Fast.Components.FluentUI.Utilities;
namespace Microsoft.Fast.Components.FluentUI;
-public partial class FluentNavMenu : FluentComponentBase, INavMenuItemsOwner, IDisposable
+public partial class FluentNavMenu : FluentComponentBase
{
private const string WIDTH_COLLAPSED_MENU = "40px";
- private bool _disposed;
- private bool _hasChildIcons => ((INavMenuItemsOwner)this).HasChildIcons;
- private readonly Dictionary
+
+ }
+ @ChildContent
+
+
+ @if (ExpanderContent is not null)
{
-
- @if (ExpanderContent is not null)
- {
-
+
+ @ExpanderContent
+
+ }
+ else
+ {
+
+
- @ExpanderContent
-
- }
- else
- {
-
+
+
+
+
+
+ @if (Collapsible)
+ {
+
+ @if (ExpanderContent is not null)
+ {
+
+ }
+ @ChildContent
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/Core/Components/NavMenuTree/FluentNavMenuTree.razor.cs b/src/Core/Components/NavMenuTree/FluentNavMenuTree.razor.cs
new file mode 100644
index 0000000000..764229bfc6
--- /dev/null
+++ b/src/Core/Components/NavMenuTree/FluentNavMenuTree.razor.cs
@@ -0,0 +1,373 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Routing;
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.Fast.Components.FluentUI.Utilities;
+
+namespace Microsoft.Fast.Components.FluentUI;
+
+//[Obsolete("This component has been replaced with the FluentNavMenu and will be removed in a future version.")]
+public partial class FluentNavMenuTree : FluentComponentBase, INavMenuItemsOwner, IDisposable
+{
+ private const string WIDTH_COLLAPSED_MENU = "40px";
+ private bool _disposed;
+ private bool _hasChildIcons => ((INavMenuItemsOwner)this).HasChildIcons;
+ private readonly Dictionary
+ @ExpanderContent
+
+ }
+ else
+ {
+
+
\ No newline at end of file
diff --git a/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Disabled.verified (2).html b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Disabled.verified (2).html
new file mode 100644
index 0000000000..6d41c49e26
--- /dev/null
+++ b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Disabled.verified (2).html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+ Group title
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Disabled.verified.html b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Disabled.verified.html
new file mode 100644
index 0000000000..39c558143d
--- /dev/null
+++ b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Disabled.verified.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+ Group title
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Empty.verified.html b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Empty.verified.html
new file mode 100644
index 0000000000..469d4b508d
--- /dev/null
+++ b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Empty.verified.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+ Group title
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Gap.verified.html b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Gap.verified.html
new file mode 100644
index 0000000000..3e6730937b
--- /dev/null
+++ b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Gap.verified.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_HideExpander.verified.html b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_HideExpander.verified.html
new file mode 100644
index 0000000000..705d4cd30e
--- /dev/null
+++ b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_HideExpander.verified.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+ Group title
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Href.verified.html b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Href.verified.html
new file mode 100644
index 0000000000..52b6fd2bdd
--- /dev/null
+++ b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Href.verified.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Icon.verified.html b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Icon.verified.html
new file mode 100644
index 0000000000..0ff11a7609
--- /dev/null
+++ b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_Icon.verified.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+ Group title
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_IconAndIconColor.verified.html b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_IconAndIconColor.verified.html
new file mode 100644
index 0000000000..1e7bc5b5ae
--- /dev/null
+++ b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_IconAndIconColor.verified.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
+ Group title
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_TitleTemplate.verified.html b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_TitleTemplate.verified.html
new file mode 100644
index 0000000000..91d63a0657
--- /dev/null
+++ b/tests/Core/NavMenu/FluentNavGroupTests.FluentNavGroup_TitleTemplate.verified.html
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+ Group title
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/tests/Core/NavMenu/FluentNavGroupTests.cs b/tests/Core/NavMenu/FluentNavGroupTests.cs
new file mode 100644
index 0000000000..4cf8245a4a
--- /dev/null
+++ b/tests/Core/NavMenu/FluentNavGroupTests.cs
@@ -0,0 +1,147 @@
+using Microsoft.Fast.Components.FluentUI.Tests.Extensions;
+using Xunit;
+
+namespace Microsoft.Fast.Components.FluentUI.Tests.NavMenu;
+
+public class FluentNavGroupTests : TestBase
+{
+ [Fact]
+ public void FluentNavGroup_Default()
+ {
+ // Arrange & Act
+ var cut = TestContext.RenderComponent
+
+
+
+
+
+
+
+
+
+ Group title
+
+
+
+Group title
"); + parameters.AddChildContent("NavGroups and NavLinks here"); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentNavGroup_Gap() + { + // Arrange & Act + var cut = TestContext.RenderComponent
+
\ No newline at end of file
diff --git a/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_ExtendedTtitle.verified.html b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_ExtendedTtitle.verified.html
new file mode 100644
index 0000000000..3b7ccb8f99
--- /dev/null
+++ b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_ExtendedTtitle.verified.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+ NavLink text
+
+
\ No newline at end of file
diff --git a/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_ForceLoad.verified.html b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_ForceLoad.verified.html
new file mode 100644
index 0000000000..08d6cf5258
--- /dev/null
+++ b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_ForceLoad.verified.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+ NavLink text
+
+
\ No newline at end of file
diff --git a/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_Href.verified.html b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_Href.verified.html
new file mode 100644
index 0000000000..08d6cf5258
--- /dev/null
+++ b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_Href.verified.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_Icon.verified.html b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_Icon.verified.html
new file mode 100644
index 0000000000..61c7275191
--- /dev/null
+++ b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_Icon.verified.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_IconAndIconColor.verified.html b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_IconAndIconColor.verified.html
new file mode 100644
index 0000000000..d891dbbbb2
--- /dev/null
+++ b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_IconAndIconColor.verified.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+ NavLink text
+
+
\ No newline at end of file
diff --git a/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_Match.verified.html b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_Match.verified.html
new file mode 100644
index 0000000000..08d6cf5258
--- /dev/null
+++ b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_Match.verified.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+ NavLink text
+
+
\ No newline at end of file
diff --git a/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_OnClick.verified.html b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_OnClick.verified.html
new file mode 100644
index 0000000000..17d77eeee3
--- /dev/null
+++ b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_OnClick.verified.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_Target.verified.html b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_Target.verified.html
new file mode 100644
index 0000000000..2d91ef5729
--- /dev/null
+++ b/tests/Core/NavMenu/FluentNavLinkTests.FluentNavLink_Target.verified.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+ NavLink text
+
+
\ No newline at end of file
diff --git a/tests/Core/NavMenu/FluentNavLinkTests.cs b/tests/Core/NavMenu/FluentNavLinkTests.cs
new file mode 100644
index 0000000000..b0c3822111
--- /dev/null
+++ b/tests/Core/NavMenu/FluentNavLinkTests.cs
@@ -0,0 +1,144 @@
+using Microsoft.AspNetCore.Components.Routing;
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.Fast.Components.FluentUI.Tests.Extensions;
+using Xunit;
+
+namespace Microsoft.Fast.Components.FluentUI.Tests.NavMenu;
+
+public class FluentNavLinkTests : TestBase
+{
+ [Fact]
+ public void FluentNavLink_Default()
+ {
+ // Arrange & Act
+ var cut = TestContext.RenderComponent
+
+
+NavLink text
"); + }); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentNavLink_Href() + { + // Arrange & Act + var cut = TestContext.RenderComponentcustom expander
");
+ });
+
+ // Assert
+ cut.Verify();
+ }
+}