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.

fluent-menu

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

fluent-menu applies fluent-menu-item's startColumnCount property based on an evaluation of all of the fluent-menu-items so the content text vertically aligns across all fluent-menu-items. If any fluent-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 fluent-menu-items. If any fluent-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 fluent-menu-items. Or if any fluent-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 fluent-menu-items.

Setup

import {
    provideFluentDesignSystem,
    fluentMenu,
    fluentMenuItem
} from "@fluentui/web-components";

provideFluentDesignSystem()
    .register(
        fluentMenu(),
        fluentMenuItem()
    );

Customizing Indicators and Glyphs

import {
    provideFluentDesignSystem,
    fluentMenu,
    fluentMenuItem
} from "@fluentui/web-components";

provideFluentDesignSystem()
    .register(
        fluentMenu(),
        fluentMenuItem({
            expandCollapseGlyph: `...your expand/collapse glyph...`,
            checkboxIndicator: `...your checkbox indicator...`,
            radioIndicator: `...your radio indicator...`,
        })
    );

Example

FluentMenu

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.

Usage

@using Microsoft.Fast.Components.FluentUI
<h4>Default</h4>
<FluentMenu>
    <FluentMenuItem>Menu item 1</FluentMenuItem>
    <FluentMenuItem>Menu item 2</FluentMenuItem>
    <FluentMenuItem Disabled="true">Menu item 3 Disabled</FluentMenuItem>
    <FluentMenuItem>Menu item 4</FluentMenuItem>
</FluentMenu>

Example

See the component in action with implementation examples at the Blazor demo site.

Additional Resources

Code in GitHub W3C Component Aria Practices