MenuButton
A menu button is a button with a chevron icon after the text used to trigger a menu. Menu items can be supplied by both
an Items parameter as well as manually as the ChildContent (at the same time).
FluentMenuProvider
With version 4.9.4 of the library, we introduced the FluentMenuProvider component. The MenuButton 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 renders all menus (and menu items) at the provider location in the HTML structure. This allows for menus to appear on top other components.
Example
MenuButton to select accent color
Download:
MenuButton with manually supplied items
Besides using the
Items parameter, you can also directly enter FluentMenuItems manually. This way you can
use all that component's parameters and, for example, disable certain items.
Download:
Different button appearances
Neutral:
Lightweight:
Outline:
Stealth:
With Icon:
Download:
Documentation
FluentMenuButton Class
Parameters
Name | Type | Default | Description |
|---|---|---|---|
Button | FluentButton? | Gets or sets a reference to the button. | |
ButtonAppearance | Appearance | Accent | Gets or sets the button appearance. |
ButtonStyle | string? | Gets or sets the button style. | |
ChildContent | RenderFragment? | Gets or sets the content to be shown in the menu. Should consist of FluentMenuItem components. | |
IconStart | Icon? | Gets or sets the Icon displayed at the start of button content. | |
Items | Dictionary<string, string> | Gets or sets the items to show in the menu. | |
Menu | FluentMenu? | Gets or sets a reference to the menu. | |
MenuStyle | string? | Gets or sets the menu style. | |
Text | string? | Gets or sets the texts shown on th button. |
EventCallbacks
Name | Type | Description |
|---|---|---|
OnMenuChanged | EventCallback<MenuChangeEventArgs> | The callback to invoke when a menu item is chosen. Using this event prevents the execution of any OnClick event on an included FluentMenuItem. |