NavMenuTree, NavMenuGroup and NavMenuLink
With version 3.2 a new, much improved, set of components to build side-bar menus has been added. The demos shown here are using components which are marked obsolete and will be removed in a future version.
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 FluentNavMenu component in your application to FluentNavMenuTree.
Everything works exactely as before by changing the name of this FluentNavMenu component in your application. (This probably needs to be done
in one place only). The FluentNavMenuGroup and FluentNavMenuLink components have not been changed and do not need to be altered.
We consider the FluentNavMenuTree, FluentNavMenuGroup and FluentNavMenuLink components as deprecated and will remove them in a future version.
If you wish to upgrade to the new menu components, please refer to the Upgrade guide for more information.
The FluentNavMenuGroup, FluentNavMenuLink and FluentNavMenu 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.
None of these components are particulary useful when used stand-alone.
Examples
Submenus, icons and plain
NavMenu (with FluentNavMenuGoups and FluentNavMenuLinks).
From left to right:
- Menu with several sub-menus, icons, etc
- Menu without sub-menus but with icons
- Menu with just text links
Navigation Examples
Collapsible navigation
Collapsible Navigation Example
Data bound
Navigation Examples
Expanded elements
Selected elements
Custom actions
Custom Actions Example
Log
Just a simple dialog
The 'Close dialog' button is automatically focused.
Documentation
FluentNavMenuTree Class
Parameters
Name | Type | Default | Description |
|---|---|---|---|
ChildContent | RenderFragment? | Gets or sets the content to be rendered inside the component. | |
Collapsed | bool | False | |
Collapsible | bool | False | Gets or sets whether or not the menu can be collapsed. |
Expanded | bool | True | |
ExpanderContent | RenderFragment? | 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. | |
InitiallyExpanded | bool | False | If set to true then the tree will expand when it is created. |
ReNavigate | bool | False | If true, the menu will re-navigate to the current page when the user clicks on the currently selected menu item. |
Title | string? | Navigation menu | Gets or sets the title of the navigation menu. Default to 'Navigation menu'. |
Width | int? | Gets or sets the width of the menu (in pixels). |
EventCallbacks
Name | Type | Description |
|---|---|---|
ExpandedChanged | EventCallback<bool> | Event callback for when the FluentNavMenuTree.Expanded property changes. |
OnAction | EventCallback<NavMenuActionArgs> | Called when the user attempts to execute the default action of a menu item. |
FluentNavMenuGroup Class
Inherits from FluentNavMenuItemBase.
There might be parameters and/or methods shown here that are inherited from the component's base type but are not applicable to this component.
Parameters
Name | Type | Default | Description |
|---|---|---|---|
ChildContent | RenderFragment? | Gets or sets the content to be rendered inside the component. | |
Collapsed | bool | True | Returns true if the group is collapsed,and false if expanded. |
Disabled | bool | False | Gets or sets whether the link is disabled. |
Expanded | bool | False | Returns true if the group is expanded,and false if collapsed. |
HasIcon | bool | False | Returns true if the item has an FluentNavMenuItemBase.Icon set. |
Href | string? | Gets or sets the destination of the link. | |
Icon | Icon? | Gets or sets the icon to display with the link Use a constant value from the FluentIcon class | |
InitiallyExpanded | bool | False | If set to true then the tree willexpand when it is created. |
Selected | bool | False | Gets or sets a value indicating whether the item is selected. |
Text | string | Gets or sets the text of the link. | |
Width | int? | Gets or sets the width of the link (in pixels). |
EventCallbacks
Name | Type | Description |
|---|---|---|
ExpandedChanged | EventCallback<bool> | Gets or sets a callback that is triggered whenever FluentNavMenuGroup.Expanded changes. |
OnAction | EventCallback<NavMenuActionArgs> | Called when the user attempts to execute the default action of a menu item. |
SelectedChanged | EventCallback<bool> | Event callback for when FluentNavMenuItemBase.Selected changes. |
FluentNavMenuLink Class
Inherits from FluentNavMenuItemBase.
There might be parameters and/or methods shown here that are inherited from the component's base type but are not applicable to this component.
Parameters
Name | Type | Default | Description |
|---|---|---|---|
ChildContent | RenderFragment? | Gets or sets the content to be rendered inside the component. | |
Disabled | bool | False | Gets or sets whether the link is disabled. |
HasIcon | bool | False | Returns true if the item has an FluentNavMenuItemBase.Icon set. |
Href | string? | Gets or sets the destination of the link. | |
Icon | Icon? | Gets or sets the icon to display with the link Use a constant value from the FluentIcon class | |
Selected | bool | False | Gets or sets a value indicating whether the item is selected. |
Text | string | Gets or sets the text of the link. | |
Width | int? | Gets or sets the width of the link (in pixels). |
EventCallbacks
Name | Type | Description |
|---|---|---|
OnAction | EventCallback<NavMenuActionArgs> | Called when the user attempts to execute the default action of a menu item. |
SelectedChanged | EventCallback<bool> | Event callback for when FluentNavMenuItemBase.Selected changes. |