microsoft · vnbaaij · Oct 7, 2023 · Oct 2, 2023 · Oct 3, 2023 · Oct 4, 2023
@@ -12,8 +12,8 @@
 
 	 <SolutionDir>$(MSBuildThisFileDirectory)</SolutionDir>	 
 
-	 <VersionFile>3.1.2</VersionFile>
-	 <VersionPrefix>3.1.2</VersionPrefix>
+	 <VersionFile>3.2.0</VersionFile>
+	 <VersionPrefix>3.2.0</VersionPrefix>
 	 <VersionSuffix></VersionSuffix> 
 
 	 <AssemblyVersion>$(VersionFile)</AssemblyVersion>

@@ -73,14 +73,13 @@ to your `index.html` or `_Layout.cshtml` file in the `<head>` section like this:
 
 The file contains a number of CSS variables that are required to be defined for the components to work correctly. 
 
-### Project file
-if you want to use icons and/or emoji, starting with version 2.1 you need add a `<PropertyGroup>` to your project file. Within this group you can specify which icons and emoji are made available for usage and publication. Please refer to the [project setup](https://www.fluentui-blazor.net/ProjectSetup) document for more information.
-
-
 ### Code
 Please refer to the [code setup](https://www.fluentui-blazor.net/CodeSetup) document to learn what needs to be included in your `Program.cs` file 
 so that all necessary services are available and setup in the correct way.
 
+## Working with Icons and Emoji
+We have additional packages available that include the complete Fluent UI System icons and Fluent UI Emoji collections. 
+Please refer to the [Icons and Emoji](https://www.fluentui-blazor.net/IconsAndEmoji) page for more information.
 
 ## Getting started by using project templates
 To make it easier to start a project that uses the Fluent UI Blazor components out of the box, we have created the

@@ -1,4 +1,7 @@
-## V3.1.1
+## V3.2.0
+- New NavMenu, NavGroup and NavLink components. **Breaking change** - See the [Upgrade guide](https://www.fluentui-blazor.net/UpgradeGuide) for details. See [NavMenu](https://www.fluentui-blazor.net/NavMenu) page for examples.
+
+## V3.1.1
 - Fix [#776](https://github.com/microsoft/fluentui-blazor/issues/776): Icon throws exception when deployed to Azure
 - Fix [#755](https://github.com/microsoft/fluentui-blazor/issues/755): Icon throws exception when deployed to Azure
 - Fix [#789](https://github.com/microsoft/fluentui-blazor/issues/789): Navigation to "/" crashes with FluentNavMenu

@@ -6,10 +6,10 @@
 
 <h1>Welcome to the Fluent UI Blazor components library</h1>
 <div class="demopanel" style="margin: 1rem 0; padding: 2.5rem; text-align: center">
-	<p>This is the demo and documentation site for the <strong>next</strong> version (<strong>3.1.1</strong>) of the library</p>
+	<p>This is the demo and documentation site for the <strong>next</strong> version (<strong>3.2.0</strong>) of the library</p>
 	<br />
 	<p>
-		The <a href="https://calm-sea-053fa6a03-archivesv2.westeurope.3.azurestaticapps.net/">previous demos and documentation site</a> (<strong>2.4.3</strong>) is also still available.
+		The <a href="https://calm-sea-053fa6a03-archivesv2.westeurope.3.azurestaticapps.net/"> version 2 demos and documentation</a> site is also still available.
 
 	</p>
 </div>

@@ -1,17 +1,15 @@
-@namespace FluentUI.Demo.Shared
-
-<h2>Collapsible Navigation Example</h2>
+<h2>Collapsible Navigation Example</h2>
 
 <FluentStack Orientation="Orientation.Horizontal" Width="100%">
     <div>
         <FluentNavMenu @bind-Expanded="@Expanded" Width="150" Collapsible="true" Title="Collapsible demo">
-            <FluentNavMenuLink Icon="@(new Icons.Regular.Size24.Home())" Text="Item 1" Href="/NavMenu" />
-            <FluentNavMenuLink Icon="@(new Icons.Regular.Size24.Cloud())" Text="Item 2" Href="/NavMenu" />
-            <FluentNavMenuGroup Text="Item 3" Icon="@(new Icons.Regular.Size24.EarthLeaf())" Href="/NavMenu">
-                <FluentNavMenuLink Icon="@(new Icons.Regular.Size24.LeafOne())" Text="Item 3.1" Href="/NavMenu" />
-                <FluentNavMenuLink Icon="@(new Icons.Regular.Size24.LeafTwo())" Text="Item 3.2" Href="/NavMenu" />
-            </FluentNavMenuGroup> 
-            <FluentNavMenuLink Icon="@(new Icons.Regular.Size24.CalendarAgenda())" Text="Item 4" Disabled="true" Href="https://microsoft.com" />
+            <FluentNavLink Icon="@(new Icons.Regular.Size24.Home())">Item 1</FluentNavLink>
+            <FluentNavLink Icon="@(new Icons.Regular.Size24.Cloud())">Item 2</FluentNavLink>
+            <FluentNavGroup Title="Item 3" Icon="@(new Icons.Regular.Size24.EarthLeaf())" >
+                <FluentNavLink Icon="@(new Icons.Regular.Size24.LeafOne())" >Item 3.1</FluentNavLink>
+                <FluentNavLink Icon="@(new Icons.Regular.Size24.LeafTwo())" >Item 3.2</FluentNavLink>
+            </FluentNavGroup> 
+            <FluentNavLink Icon="@(new Icons.Regular.Size24.CalendarAgenda())" Disabled="true" Href="https://microsoft.com">Item 4</FluentNavLink>
         </FluentNavMenu>
     </div>
     <div style="width: 100%;">

@@ -1,20 +1,16 @@
-@namespace FluentUI.Demo.Shared
-
-@inject ILogger<NavMenuDefault> logger;
-
-<h2>Navigation Examples</h2>
+<h2>Navigation Examples</h2>
 
 <FluentStack Orientation="Orientation.Horizontal">
     <!-- Menu with sub-items and icons -->
     <FluentNavMenu @bind-Expanded=MenuExpanded Title="Databound demo">
-        <FluentNavMenuGroup Id="Group1" Text="Item 1" @bind-Expanded=Item1Expanded Icon="@(new Icons.Regular.Size24.LeafOne())" Href="/NavMenu">
-            <FluentNavMenuLink Text="Item 1.1" Icon="@(new Icons.Regular.Size24.LeafOne())" @bind-Selected=Item1Point1Selected Href="/NavMenu" />
-            <FluentNavMenuLink Text="Item 1.2" Icon="@(new Icons.Regular.Size24.LeafTwo())" @bind-Selected=Item1Point2Selected Href="/NavMenu" />
-        </FluentNavMenuGroup>
-        <FluentNavMenuGroup Id="Group2" Text="Item 2" @bind-Expanded=Item2Expanded Icon="@(new Icons.Regular.Size24.LeafTwo())" Href="/NavMenu">
-            <FluentNavMenuLink Text="Item 2.1" Icon="@(new Icons.Regular.Size24.LeafOne())" @bind-Selected=Item2Point1Selected Href="/NavMenu" />
-            <FluentNavMenuLink Text="Item 2.2" Icon="@(new Icons.Regular.Size24.LeafTwo())" @bind-Selected=Item2Point2Selected Href="/NavMenu" />
-        </FluentNavMenuGroup>
+        <FluentNavGroup Id="Group1" Title="Item 1" @bind-Expanded=Item1Expanded Icon="@(new Icons.Regular.Size24.LeafOne())">
+            <FluentNavLink Icon="@(new Icons.Regular.Size24.LeafOne())">Item 1.1</FluentNavLink>
+            <FluentNavLink Icon="@(new Icons.Regular.Size24.LeafTwo())">Item 1.2</FluentNavLink>
+        </FluentNavGroup>
+        <FluentNavGroup Id="Group2" Title="Item 2" @bind-Expanded=Item2Expanded Icon="@(new Icons.Regular.Size24.LeafTwo())">
+            <FluentNavLink Icon="@(new Icons.Regular.Size24.LeafOne())">Item 2.1</FluentNavLink>
+            <FluentNavLink Icon="@(new Icons.Regular.Size24.LeafTwo())">Item 2.2</FluentNavLink>
+        </FluentNavGroup>
     </FluentNavMenu>
     <FluentStack Orientation="Orientation.Vertical">
 
@@ -29,19 +25,7 @@
             <span aria-label="Item 2 expanded">Item 2</span>
         </FluentCheckbox>
 
-        <h2>Selected elements</h2>
-        <FluentCheckbox @bind-Value=Item1Point1Selected>
-            <span aria-label="Item 1.1 selected">Item 1.1</span>
-        </FluentCheckbox>
-        <FluentCheckbox @bind-Value=Item1Point2Selected>
-            <span aria-label="Item 1.2 selected">Item 1.2</span>
-        </FluentCheckbox>
-        <FluentCheckbox @bind-Value=Item2Point1Selected>
-            <span aria-label="Item 2.1 selected">Item 2.1</span>
-        </FluentCheckbox>
-        <FluentCheckbox @bind-Value=Item2Point2Selected>
-            <span aria-label="Item 2.2 selected">Item 2.2</span>
-        </FluentCheckbox>
+
 
     </FluentStack>
 </FluentStack>
@@ -50,11 +34,6 @@
     bool MenuExpanded = true;
     bool Item1Expanded = true;
     bool Item2Expanded = true;
-
-    bool Item1Point1Selected = false;
-    bool Item1Point2Selected = false;
-    bool Item2Point1Selected = false;
-    bool Item2Point2Selected = false;
 }
 
 
@@ -1,71 +1,65 @@
-@namespace FluentUI.Demo.Shared
-
-@inject ILogger<NavMenuDefault> logger;
-
-<h2>Navigation Examples</h2>
+<h2>Navigation Examples</h2>
 
 <FluentStack Orientation="Orientation.Horizontal" >
-    <!-- Menu with sub-items and icons -->
-    <FluentNavMenu Collapsible="false" Title="Default demo">
-        <FluentNavMenuLink Text="Item 1" Icon="@(new Icons.Regular.Size24.Home())" Href="/NavMenu" />
-        <FluentNavMenuLink Text="Item 2" Href="/NavMenu" />
-        <FluentNavMenuGroup Text="Item 3" Href="/NavMenu">
-            <FluentNavMenuLink Text="Item 3.1" Icon="@(new Icons.Regular.Size24.LeafOne())" Href="/NavMenu" />
-            <FluentNavMenuLink Text="Item 3.2" Icon="@(new Icons.Regular.Size24.LeafTwo())" Href="/NavMenu" />
-        </FluentNavMenuGroup>
-        <FluentNavMenuGroup Text="Item 4" @onclick="OnClick" Href="/NavMenu">
-            <FluentNavMenuLink Text="Item 4.1" @onclick="OnClick" Href="/NavMenu" />
-            <FluentNavMenuLink Text="Item 4.2" @onclick="OnClick" Icon="@(new Icons.Regular.Size24.LeafOne())" Href="/NavMenu" />
-        </FluentNavMenuGroup>
-        <FluentNavMenuGroup Text="Item 5" @onclick="OnClick" Href="/NavMenu">
-            <FluentNavMenuLink Text="Item 5.1" @onclick="OnClick" Icon="@(new Icons.Regular.Size24.LeafTwo())" Href="/NavMenu" />
-            <FluentNavMenuGroup @onclick="OnClick" Text="Item 5.2" Href="/NavMenu">
-                <FluentNavMenuLink Text="Item 5.2.1" @onclick="OnClick" Href="/NavMenu" />
-                <FluentNavMenuLink Text="Item 5.2.2" @onclick="OnClick" Href="/NavMenu" />
-            </FluentNavMenuGroup>
-            <FluentNavMenuGroup @onclick="OnClick" Text="Item 5.3" Href="/NavMenu">
-                <FluentNavMenuLink Text="Item 5.3.1" @onclick="OnClick" Icon="@(new Icons.Regular.Size24.LeafOne())" Href="/NavMenu" />
-                <FluentNavMenuLink Text="Item 5.3.2" @onclick="OnClick" Href="/NavMenu" />
-            </FluentNavMenuGroup>
-        </FluentNavMenuGroup>
-        <FluentNavMenuGroup @onclick="OnClick" Text="Items with Href">
-            <FluentNavMenuLink Text="Go to Bing" @onclick="OnClick" Icon="@(new Icons.Regular.Size24.LeafOne())" Href="https://bing.com" />
-            <FluentNavMenuLink Text="Go to home page" @onclick="OnClick" Icon="@(new Icons.Regular.Size24.Home())" Href="/" />
-        </FluentNavMenuGroup>
-        <FluentNavMenuLink Text="Last item" @onclick="OnClick" Icon="@(new Icons.Regular.Size24.LeafThree())" Disabled="true" />
-    </FluentNavMenu>
+    <div style="background: var(--neutral-layer-3); display: flex; padding: 10px;">
+        <FluentNavMenu @bind-Expanded="@expanded" Width="250" Title="Custom navigation menu">
+            <FluentNavLink Icon="@(new Icons.Regular.Size20.Home())" Href="/" Match="NavLinkMatch.All">Home</FluentNavLink>
+            <FluentNavLink Href="/NavMenu">Item 2</FluentNavLink>
+            <FluentNavGroup OnClick="OnClick" Title="Item 3" Icon="@(new Icons.Regular.Size20.EarthLeaf())">
+                <TitleTemplate><h3>Item 3</h3></TitleTemplate>
+                <ChildContent>
+                    <FluentNavLink OnClick="OnClick" Icon="@(new Icons.Regular.Size20.LeafOne())">Item 3.1</FluentNavLink>
+                    <FluentNavLink OnClick="OnClick" Icon="@(new Icons.Regular.Size20.LeafTwo())">Item 3.2</FluentNavLink>
+                </ChildContent>
+            </FluentNavGroup>
+            <FluentNavLink Icon="@(new Icons.Regular.Size20.CalendarAgenda())" Disabled="true" Href="https://microsoft.com">Item 4</FluentNavLink>
+            <FluentNavLink Icon="@(new Icons.Regular.Size20.Home())" Disabled="true">Item 5</FluentNavLink>
+            <FluentNavGroup Expanded="true" Title="Item 6 Item 6 Item 6 Item 6 Item 6" Icon="@(new Icons.Regular.Size20.EarthLeaf())">
+                <FluentNavLink Icon="@(new Icons.Regular.Size20.LeafOne())">Item 6.1</FluentNavLink>
+                <FluentNavLink Icon="@(new Icons.Regular.Size20.LeafTwo())">Item 6.2</FluentNavLink>
+                <FluentNavGroup Expanded="true" Title="Item 6.3" Icon="@(new Icons.Regular.Size20.EarthLeaf())">
+                    <FluentNavLink Icon="@(new Icons.Regular.Size20.LeafOne())">Item 6.3.1 Item 6.3.1 Item 6.3.1</FluentNavLink>
+                    <FluentNavLink Icon="@(new Icons.Regular.Size20.LeafTwo())">Item 6.3.2</FluentNavLink>
+                    <FluentNavGroup Expanded="true" Title="Item 6.3.3 Item 6.3.3 Item 6.3.3" Icon="@(new Icons.Regular.Size20.EarthLeaf())">
+                        <FluentNavLink Icon="@(new Icons.Regular.Size20.LeafOne())">Item 6.3.3.1</FluentNavLink>
+                        <FluentNavLink Disabled="true" Icon="@(new Icons.Regular.Size20.LeafTwo())">Item 6.3.3.2</FluentNavLink>
+                        <FluentNavGroup Disabled="true" Expanded="true" Title="Item 6.3.3.3" Icon="@(new Icons.Regular.Size20.EarthLeaf())">
+                            <FluentNavLink Icon="@(new Icons.Regular.Size20.LeafOne())">Item 6.3.3.3.1</FluentNavLink>
+                            <FluentNavLink Icon="@(new Icons.Regular.Size20.LeafTwo())">Item 6.3.3.3.2</FluentNavLink>
+                        </FluentNavGroup>
+                    </FluentNavGroup>
+                </FluentNavGroup>
+            </FluentNavGroup>
+        </FluentNavMenu>
+    </div>
+
+    @code
+    {
+        bool expanded = true;
+    }
 
     <!-- Menu with icons -->
     <FluentNavMenu>
-        <FluentNavMenuLink Text="Item 1" @onclick="OnClick" Icon="@(new Icons.Regular.Size24.Home())" Href="/NavMenu" />
-        <FluentNavMenuLink Text="Item 2" @onclick="OnClick" Href="/NavMenu" />
-        <FluentNavMenuLink Text="Item 3" @onclick="OnClick" Icon="@(new Icons.Regular.Size24.LeafOne())" Href="/NavMenu" />
-        <FluentNavMenuLink Text="Item 4" @onclick="OnClick" Href="/NavMenu" />
+        <FluentNavLink OnClick="OnClick" Icon="@(new Icons.Regular.Size24.Home())" >Item 1</FluentNavLink>
+        <FluentNavLink OnClick="OnClick" >Item 2</FluentNavLink>
+        <FluentNavLink OnClick="OnClick" Icon="@(new Icons.Regular.Size24.LeafOne())" >Item 3</FluentNavLink>
+        <FluentNavLink OnClick="OnClick" >Item 4</FluentNavLink>
     </FluentNavMenu>
 
     <!-- Menu simple -->
     <FluentNavMenu>
-        <FluentNavMenuLink Text="Item 1" @onclick="OnClick" Href="/NavMenu" />
-        <FluentNavMenuLink Text="Item 2" @onclick="OnClick" Href="/NavMenu" />
-        <FluentNavMenuLink Text="Item 3" @onclick="OnClick" Href="/NavMenu" />
-        <FluentNavMenuLink Text="Item 4" @onclick="OnClick" Href="/NavMenu" />
+        <FluentNavLink OnClick="OnClick" >Item 1</FluentNavLink>
+        <FluentNavLink OnClick="OnClick" >Item 2</FluentNavLink>
+        <FluentNavLink OnClick="OnClick" >Item 3</FluentNavLink>
+        <FluentNavLink OnClick="OnClick" >Item 4</FluentNavLink> 
     </FluentNavMenu>
 
 </FluentStack>
 @code
 {
-
     void OnClick(MouseEventArgs e)
     {
-        logger.LogInformation("Item Clicked");
-    }
-
-    protected override void OnAfterRender(bool firstRender) {
-        if (firstRender) 
-        {
-
-        }
-        base.OnAfterRender(firstRender);
+        DemoLogger.WriteLine("NavMenu item clicked");
     }
 }
 

@@ -1,29 +1,48 @@
 @page "/NavMenu"
+@using FluentUI.Demo.Shared.Pages.NavMenu.Examples
+
+<h1>NavMenu, NavGroup and NavLink</h1>
+
+<div class="demopanel" style="text-align:center; margin-bottom: 10px">
+    <b>IMPORTANT</b>
+    <p>
+        With version 3.2 a new, much improved, set of components to build side-bar menus has been added.
+    </p>
+    <p>
+        <b>
+            If you DO NOT want to upgrade to these new menu components, you can continue to use the pre-version 3.2 components. The only thing
+            you need to do is to change the name of the <code>FluentNavMenu</code> component in your application to <code>FluentNavMenuTree</code>.
+        </b>
+    </p>
+    <p>
+        Everything works exactely as before by changing the name of this <code>FluentNavMenu</code> component in your application. (This probably needs to be done
+        in one place only). The <code>FluentNavMenuGroup</code> and <code>FluentNavMenuLink</code> components have not been changed and do not need to be altered.
+    </p>
+    <p>
+        We consider the <code>FluentNavMenuTree</code>, <code>FluentNavMenuGroup</code> and <code>FluentNavMenuLink</code> components as deprecated and will remove them in a future version.
+    </p>
+    <p>
+        If you wish to upgrade to the new menu components, please refer to the <a href="/UpgradeGuide">Upgrade guide</a> for more information.
+    </p>
+</div>
 
-<h1>NavMenu, NavMenuGroup and NavMenuLink</h1>
 <p>
-    The <code>FluentNavMenuGroup</code>, <code>FluentNavMenuLink</code> and <code>FluentNavMenu</code> components can be used to build
-    hierarchical, collapsible and expandable menus. They can range from simple 1-level deep lists to complex multi-level menu 
-    structures. 
+    The <code>FluentNavMenu</code>, <code>FluentNavGroup</code> and <code>FluentNavLink</code> components can be used to build
+    hierarchical, collapsible and expandable side-bar menus. They can range from simple 1-level deep lists to complex multi-level menu 
+    structures (with a max of 5 levels). 
 </p> 
 <p>
     None of these components are particulary useful when used stand-alone.
 </p>
 
-<ApiDocumentation Component="typeof(FluentNavMenu)" />
-
-<ApiDocumentation Component="typeof(FluentNavMenuGroup)" />
-
-<ApiDocumentation Component="typeof(FluentNavMenuLink)" />
-
 <h2>Examples</h2>
 
 <DemoSection Component="typeof(NavMenuDefault)" Title="Submenus, icons and plain">
     <Description>
-        This demo shows 3 different versions of a <code>NavMenu</code> (with <code>FluentNavMenuGoups</code> and <code>FluentNavMenuLinks</code>).
+        This demo shows 3 different versions of a <code>NavMenu</code> (with <code>FluentNavGroup</code>s and <code>FluentNavLink</code>)s.
         From left to right:
         <ul>
-            <li>Menu with several sub-menus, icons, etc</li>
+            <li>Menu with several sub-menus, icons, etc. The first group (Item 3) uses both the <code>Title</code> as the <code>TitleTemplate</code> parameters</li>
             <li>Menu without sub-menus but with icons</li>
             <li>Menu with just text links</li>
         </ul>
@@ -38,12 +57,13 @@
 
 <DemoSection Component="typeof(NavMenuDataBound)" Title="Data bound">
     <Description>
-        An example data binding the Expanded parameter.
+        An example of binding to the <code>Expanded</code> parameter.
     </Description>
 </DemoSection>
 
-<DemoSection Component="typeof(NavMenuCustomActions)" Title="Custom actions">
-    <Description>
-        An example of intercepting menu actions to provide custom behavior.
-    </Description>
-</DemoSection>
+<h2>API Documentation</h2>
+<ApiDocumentation Component="typeof(FluentNavMenu)" />
+
+<ApiDocumentation Component="typeof(FluentNavGroup)" />
+
+<ApiDocumentation Component="typeof(FluentNavLink)" />