Menu

As defined by the W3C:

A menu is a widget that offers a list of choices to the user, such as a set of actions or functions. Menu widgets behave like native operating system menus, such as the menus that pull down from the menubars commonly found at the top of many desktop application windows. A menu is usually opened, or made visible, by activating a menu button, choosing an item in a menu that opens a sub menu, or by invoking a command, such as Shift + F10 in Windows, that opens a context specific menu. When a user activates a choice in a menu, the menu usually closes unless the choice opened a submenu.

While any DOM content is permissible as a child of the menu, only <FluentMenuItem>'s and slotted content with a role of menuitem, menuitemcheckbox, or menuitemradio will receive keyboard support.

<FluentMenu> applies <FluentMenuItem>'s startColumnCount property based on an evaluation of all of the <FluentMenuItem> so the content text vertically aligns across all <FluentMenuItem>. If any <FluentMenuItem> does not have a roll of checkbox or radio or the start slot is not passed, startColumnCount is set to 0 which applies a indent-0 class to all the <FluentMenuItem>s. If any <FluentMenuItem> has a roll of checkbox or radio or the start slot exists, startColumnCount is set to 1 which applies a indent-1 class to all the <FluentMenuItem>s. Or if any <FluentMenuItem> has a roll of checkbox or radio and the start slot exists, startColumnCount is set to 2 which applies a indent-2 class to all the <FluentMenuItem>s.

<FluentMenu> wraps the <fluent-menu> element, a web component implementation of a menu leveraging the Fluent UI design system.

FluentMenuProvider

With version 4.9.4 of the library, we introduced the FluentMenuProvider component. The Menu component has been updated to use this provider. The <FluentMenuProvider /> needs to be placed at the bottom of your HTML page (just like the other ...Providers components). It will render all menus (and menu items) at the provider location in the HTML structure. This allows for menus to appear above of other components.

You can disable this feature by adding the UseMenuService parameter (with a value of "false") to you FluentMenu component. In this case, the menu will be rendered at the location it is placed at in the page.

Example

Service provider

Example

The first example contains the UseMenuService="false" attribute. The menu is created where it is declared, which can pose encapsulation problems, depending on the container used (in this case, a FluentCard).

The second example uses the FluentMenuProvider to display the menu. In this case, the menu is generated at the end of the HTML page and attached to the button using the Anchor tag. It's mandatory to use a Id identifier on the clickable element and an identical Anchor value on the menu, to link the two elements.

Click this button to open a Menu.

Open menu

Click this button to open a Menu.

Open menu
Download: 

Default

Example

Click this button to open a Menu.

Open menu

Download: 

Simple context menu

Example
Right-click on this text
to open a Context Menu.

Download: 

Default menu

Example
Show

Download: 

With Separator

Example
Show
Download: 

With radio buttons and checkboxes

Example
Menu item 1 Menu item 2 Menu item 3 Checkbox 1 Checkbox 2 Radio 1.1 Radio 1.2
Download: 

Detect when checked and unchecked (2-way binding)

The CheckedChanged EventCallback is invoked when the FluentMenuItem Role is MenuItemCheckbox or MenuItemRadio.

Example
Role=MenuItemCheckbox
Checkbox MenuItem 1 is Unchecked Checkbox MenuItem 2 is Unchecked Toggle checkbox item 2
Role=MenuItemRadio
Radio 1 is Unchecked Radio 2 is Unchecked Radio 3 is Unchecked Radio 4 is Unchecked Radio 5 is Unchecked Radio 6 is Unchecked Radio 7 is Unchecked Radio 8 is Unchecked Toggle radio item 6
Download: 

Nested

Example
Show
Download: 

With icons

When using FluentIcons in a FluentMenuItem, you will run into issues with indentation when putting the icons in slots. This problem originates from the following: (from https://www.fast.design/docs/components/menu#setup):

fast-menu applies fast-menu-item's startColumnCount property based on an evaluation of all of the fast-menu-items so the content text vertically aligns across all fast-menu-items. If any fast-menu-item does not have a roll of checkbox or radio or the start slot is not passed, startColumnCount is set to 0 which applies a indent-0 class to all the fast-menu-items. If any fast-menu-item has a roll of checkbox or radio or the start slot exists, startColumnCount is set to 1 which applies a indent-1 class to all the fast-menu-items. Or if any fast-menu-item has a roll of checkbox or radio and the start slot exists, startColumnCount is set to 2 which applies a indent-2 class to all the fast-menu-items.

Because we are rendering the web components indirectly fast-menu doesn't know about the icons and their slots in the fast-menu-items when it renders (they don't exist in the DOM yet) so it can't determine the startColumnCount.

As a workaround, place the FluentIcons inside a <span slot="start"></span> (or <span slot="end"></span> in the menu items. For example: 


            <FluentMenu>
            <FluentMenuItem>
            Menu item 1
            <span slot="start" >
            <FluentIcon Icon="Icons.Regular.Size16.Globe" Slot="start" Color="Color.Neutral" />
            </span>
            <span slot="end">
            <FluentIcon Icon="Icons.Regular.Size16.Globe" Slot="end" Color="Color.Neutral" />
            </span>
            </FluentMenuItem>
            :
            :

The script gets triggered then and the icons render in the right place. You can leave the Slot parameter in the FluentIcon but in this case it doesn't have to be there anymore.

Example
Show
Download: 

With standard elements

Example
Show
Download: 

Documentation

FluentMenuItem Class

Parameters

Name
Type
Default
Description
Checkedbool
False
Gets or sets a value indicating whether the element is checked.
ChildContentRenderFragment?
Gets or sets the content to be rendered inside the component.
Disabledbool
False
Gets or sets a value indicating whether the element is disabled.
Expandedbool
False
Gets or sets the expanded state of the element.
KeepOpenbool
False
Gets or sets a value indicates whether the FluentMenu should remain open after an action.
Labelstring?
Gets or sets the menu item label.
MenuItemsRenderFragment?
Gets or sets the list of sub-menu items.
OwnerFluentMenu
Gets or sets the owning FluentMenu.
RoleMenuItemRole?
Gets or sets the role of the element.

EventCallbacks

Name
Type
Description
CheckedChangedEventCallback<bool>
Event raised for checkbox and radio menuitems
OnClickEventCallback<MouseEventArgs>
Event raised when the user click on this item.

FluentMenu Class

Parameters

Name
Type
Default
Description
Anchorstring
Gets or sets the identifier of the source component clickable by the end user.
Anchoredbool
True
Draw the menu below the component clicked (true) or
using the mouse coordinates (false).
ChildContentRenderFragment?
Gets or sets the content to be rendered inside the component.
HorizontalInsetbool
True
Gets or sets a value indicating whether the region overlaps the anchor on the horizontal axis.
Default is false which places the region adjacent to the anchor element.
HorizontalPositionHorizontalPosition
Unset
Gets or sets the horizontal menu position.
HorizontalScalingAxisScalingMode?
Gets or sets the horizontal scaling mode.
HorizontalThresholdint
200
Gets or sets how narrow the space allocated to the default position has to be before the widest area is selected for layout.
HorizontalViewportLockbool
False
Gets or sets the Horizontal viewport lock.
Openbool
False
Gets or sets the Menu status.
ServiceProviderIServiceProvider?
TriggerMouseButton
None
Gets or sets the automatic trigger. See MouseButton
Possible values are None (default), Left, Middle, Right, Back, Forward
UseMenuServicebool
True
Use IMenuService to create the menu, if this service was injected.
This value must be defined before the component is rendered (you can't change it during the component lifecycle).
Default, true.
VerticalInsetbool
False
Gets or sets a value indicating whether the region overlaps the anchor on the vertical axis.
VerticalPositionVerticalPosition
Bottom
Gets or sets the vertical menu position.
VerticalThresholdint
200
Gets or sets how short the space allocated to the default position has to be before the tallest area is selected for layout.
Widthstring?
Gets or sets the width of this menu.

EventCallbacks

Name
Type
Description
OnCheckedChangedEventCallback<FluentMenuItem>
Raised when FluentMenuItem Checked changed.
OpenChangedEventCallback<bool>
Raised when the FluentMenu.Open property changed.

Methods

Name
Parameters
Type
Description
CloseAsyncTask
Close the menu.
OpenAsyncint screenWidth
int screenHeight
int x
int y
Task
Method called from JavaScript to get the current mouse coordinates.
MenuItem
MenuItemCheckbox
MenuItemRadio
Unset
Start
End
Left
Right
Center
Content
Fill
Anchor
Left
Middle
Right
Back
Forward
None
Unset
Top
Bottom
Center
An error has occurred. This application may no longer respond until reloaded. Reload 🗙