NavMenu, NavGroup and NavLink
With version 3.2 a new, much improved, set of components to build side-bar menus has been added.
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 exactly 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 FluentNavMenu, FluentNavGroup and FluentNavLink components can be used to build
hierarchical, collapsible and expandable side-bar menus. They can range from simple 1-level deep list to complex multi-level menu
structures (with a max of 5 levels).
These components are designed to work together and are not to be used stand-alone.
Examples
Submenus, icons and plain
NavMenu (with FluentNavGroups and FluentNavLink)s.
From left to right:
- Menu with several sub-menus, icons, etc. The first group (Item 3) uses both the
Titleas theTitleTemplateparameters - Menu without sub-menus but with icons
- Menu with just text links
Navigation Examples
Collapsible navigation
More complete example which shows how the menu works together with a text section when it collapses.
When CollapsedChildNavigation is set to true, clicking on a FluentNavGroup opens a menu containing all links included in that group.
Note that menu items without an icon are not visible when the menu is collapsed.
Collapsible Navigation Example
Data bound
Expanded parameter.
Navigation Examples
Expanded elements
Documentation
FluentNavMenu Class
Parameters
Name | Type | Default | Description |
|---|---|---|---|
ChildContent | RenderFragment? | ||
CollapsedChildNavigation | bool | False | Gets or sets whether a menu with all child links is shown for FluentNavGroups when the navigation menu is collapsed. |
Collapsible | bool | False | Gets or sets whether or not the menu can be collapsed. |
CustomToggle | bool | False | Gets or sets if a custom toggle for showing/hiding the menu is used. This is primarily intended to be used in a mobile view |
Expanded | bool | True | |
ExpanderContent | RenderFragment? | 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. | |
Margin | string? | Adjust the vertical spacing between navlinks. | |
Title | string? | Navigation menu | Gets or sets the title of the navigation menu using the aria-label attribute. Defaults 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 FluentNavMenu.Expanded property changes. |
FluentNavGroup Class
Inherits from FluentNavBase.
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 |
|---|---|---|---|
ActiveClass | string | active | Gets or sets the class names to use to indicate the item is active, separated by space. |
ChildContent | RenderFragment? | Gets or sets the content to be shown. | |
CustomColor | string? | Gets or sets the icon drawing and fill color to a custom value. Needs to be formatted as an HTML hex color string (#rrggbb or #rgb) or CSS variable. ⚠️ Only available when Color is set to Color.Custom. | |
CustomToggleId | string | navmenu-toggle | Gets or sets the id of the custom toggle element Defaults to navmenu-toggle |
Disabled | bool | False | If true, the button will be disabled. |
Expanded | bool | False | If true, expands the nav group, otherwise collapse it. Two-way bindable |
ExpandIcon | Icon | Preview:
| If set, overrides the default expand icon. |
ForceLoad | bool | False | If true, force browser to redirect outside component router-space. |
Gap | string? | Defines the vertical spacing between the NavGroup and adjacent items. Needs to be a valid CSS value. | |
HideExpander | bool | False | If true, hides expand button at the end of the NavGroup. |
Href | string? | Gets or sets the URL for the group. | |
Icon | Icon? | Gets or sets the Icon to use if set. | |
IconColor | Color | Accent | Gets or sets the color of the icon. It supports the theme colors, default value uses the themes drawer icon color. |
Match | NavLinkMatch | Prefix | Gets or sets how the link should be matched. Defaults to Microsoft.AspNetCore.Components.Routing.NavLinkMatch.Prefix. |
MaxHeight | string? | Explicitly sets the height for the Collapse element to override the css default. | |
Owner | FluentNavMenu | ||
SubMenu | FluentMenu? | ||
Target | string? | Gets or sets the target attribute that specifies where to open the group, if Href is specified. Possible values: _blank | _self | _parent | _top. | |
Title | string? | Gets or sets the text to display for the group. | |
TitleTemplate | RenderFragment? | Allows for specific markup and styling to be applied for the group title When using this, the contained FluentNavLinks and FluentNavGroups need to be placed in a ChildContent tag.When specifying both Title and TitleTemplate, both will be rendered. | |
Tooltip | string? | Gets or sets the tooltip to display when the mouse is placed over the item. For FluentNavGroup the |
EventCallbacks
Name | Type | Description |
|---|---|---|
ExpandedChanged | EventCallback<bool> | Gets or sets a callback that is triggered whenever FluentNavGroup.Expanded changes. |
OnClick | EventCallback<MouseEventArgs> | The callback to invoke when the item is clicked. |
FluentNavLink Class
Inherits from FluentNavBase.
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 |
|---|---|---|---|
ActiveClass | string | active | Gets or sets the class names to use to indicate the item is active, separated by space. |
ChildContent | RenderFragment? | Gets or sets the content to be shown. | |
CustomColor | string? | Gets or sets the icon drawing and fill color to a custom value. Needs to be formatted as an HTML hex color string (#rrggbb or #rgb) or CSS variable. ⚠️ Only available when Color is set to Color.Custom. | |
CustomToggleId | string | navmenu-toggle | Gets or sets the id of the custom toggle element Defaults to navmenu-toggle |
Disabled | bool | False | If true, the button will be disabled. |
ForceLoad | bool | False | If true, force browser to redirect outside component router-space. |
Href | string? | Gets or sets the URL for the group. | |
Icon | Icon? | Gets or sets the Icon to use if set. | |
IconColor | Color | Accent | Gets or sets the color of the icon. It supports the theme colors, default value uses the themes drawer icon color. |
Match | NavLinkMatch | Prefix | Gets or sets how the link should be matched. Defaults to Microsoft.AspNetCore.Components.Routing.NavLinkMatch.Prefix. |
Owner | FluentNavMenu | ||
SubMenu | FluentMenu? | ||
Target | string? | Gets or sets the target attribute that specifies where to open the group, if Href is specified. Possible values: _blank | _self | _parent | _top. | |
Tooltip | string? | Gets or sets the tooltip to display when the mouse is placed over the item. For FluentNavGroup the |
EventCallbacks
Name | Type | Description |
|---|---|---|
OnClick | EventCallback<MouseEventArgs> | The callback to invoke when the item is clicked. |