Skip to content

Commit

Permalink
New NavMenu, NavGroup and NavLink components (#819)
Browse files Browse the repository at this point in the history 
* new FluentNavMenu, FluentNavGroup and FluentNavLink component

* Rename earlier FluentNavMenu to FluentNavMenuTree

* Update documentation, copy examples and add upgrade guide

* Fix #816

* Fix #811

* Add NavMenu components tests
  • Loading branch information
@vnbaaij
vnbaaij authored Oct 7, 2023
1 parent ed3b530 commit fda8c2b
Show file tree
Hide file tree
Showing 77 changed files with 2,471 additions and 527 deletions.
4 changes: 2 additions & 2 deletions Directory.Build.props
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
7 changes: 3 additions & 4 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
5 changes: 4 additions & 1 deletion WHATSNEW.md
View file
Original file line number Diff line number Diff line change
@@ -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
Expand Down
4 changes: 2 additions & 2 deletions examples/Demo/Shared/Pages/Index/Index.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
18 changes: 8 additions & 10 deletions examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuCollapsible.razor
View file
Original file line number Diff line number Diff line change
@@ -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%;">
Expand Down
41 changes: 10 additions & 31 deletions examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuDataBound.razor
View file
Original file line number Diff line number Diff line change
@@ -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">

Expand All @@ -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>
Expand All @@ -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;
}


98 changes: 46 additions & 52 deletions examples/Demo/Shared/Pages/NavMenu/Examples/NavMenuDefault.razor
View file
Original file line number Diff line number Diff line change
@@ -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");
}
}

Expand Down
56 changes: 38 additions & 18 deletions examples/Demo/Shared/Pages/NavMenu/NavMenuPage.razor
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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)" />
Loading

0 comments on commit fda8c2b

Please sign in to comment.