DropMenu

The Text parameter labels the button and the content of the component becomes the body of the callout. IsEnabled turns the whole drop menu off, down to the Open and Toggle methods, and closes a callout that was already open. Transparent drops the background of the button, NoShadow drops the box-shadow of the callout, and FullWidth stretches the button to the available width.

Use the Background parameter to set the background color kind of the callout body. Transparent leaves the callout without a surface of its own, which is what you want when the content already paints one.

Use the Border parameter to draw a border around the callout in the given color kind. It pairs well with NoShadow when a flat, outlined callout fits the design better than an elevated one, which is how the example below is set up so the border stands out.

IconName puts a leading icon in the button and ChevronDownIconName replaces the trailing chevron, which flips over while the callout is open. Set NoChevron to drop the chevron entirely, for example when the button is icon-only.

With Responsive, the callout becomes a panel on small screens (under 600px) that slides in from the edge given by PanelPosition and is swiped away along the same axis it slid in on: sideways for Start and End, up or down for Top and Bottom. Point ScrollContainerId at the scrollable element inside the content so the swipe gesture does not fight its scrolling. Resize the window to see it.

Template replaces everything inside the button, including the icon, the text and the chevron, so the trigger can be anything. The callout content then goes into Body, which is an alias of ChildContent.

IsLoading swaps the icon of the button for a spinner, marks the button busy for the screen readers and blocks the callout from opening, which is what you want while the content of the menu is still being fetched. A callout that is already open is closed, so the content on the screen never outlives the data behind it, and the button wears the look of a disabled one for as long as it lasts rather than repainting under a pointer whose clicks it no longer answers.

By default the callout is exactly as large as its content needs. Width, MinWidth and MaxWidth size it with any CSS length: a minimum keeps a short menu from ending up cramped and a maximum makes a long text wrap instead of stretching across the screen. MatchWidth grows the callout to at least the width of the button, so a wide trigger never sits above a narrow menu, and it is applied after the callout is measured, which is why it wins over Width. MaxHeight caps the height and scrolls the content past that point, which keeps a long list usable. Without one, the callout is capped to the room the viewport leaves and scrolls on its own, so content taller than the screen never ends up out of reach below it; a MaxHeight takes that automatic cap over and is itself kept within the height of the screen, so a cap set taller than the shortest screen you target still leaves the callout scrolling inside the viewport rather than running off it.

The callout picks its side from the room left around the button. TopAndBottom (the default) only ever drops it above or below, while All also allows the sides when neither fits vertically. The menu below is deliberately long, so scroll the page until the button sits around the middle of the window, where neither the space above it nor the one below it can take the whole callout: All then moves the menu to the side of the button, while TopAndBottom keeps it above or below and scrolls its content.

OpenOnHover opens the callout as soon as the pointer reaches the drop menu and closes it once the pointer leaves both the button and the callout, which is what a navigation menu is usually expected to do. HoverOpenDelay keeps a pointer that is only passing by from opening it, and HoverCloseDelay (150ms by default) bridges the gap between the button and the callout so that moving from one to the other does not close what the pointer is on its way to. The mode turns itself off on touch screens, where there is no pointer to hover with, and the button keeps toggling the callout on a click either way, so the keyboard is never left without a way in.

IsOpen is two-way bindable, so the open state can be driven from outside the component and read back from it. DefaultIsOpen covers the uncontrolled case, where the callout only needs to start out open. The Open, Close and Toggle methods do the same through a component reference.

The button carries the full menu-button semantics (aria-haspopup, aria-controls and aria-expanded), opens on Enter, Space, ArrowDown or ArrowUp, and closes on Escape. Every one of those keys hands the focus straight to the content, unlike a click, which leaves it on the button, and the arrow keys reach the content of an already open callout too. Tab off the button closes the callout and carries on through the page, and whenever the callout is closed while the focus is inside it the focus goes back to the button, so the keyboard never ends up at the top of the page. A click puts the focus on the button whichever browser dispatched it, so Escape reaches a menu opened with the pointer as well.

AutoFocus moves the focus into the callout as soon as it opens, to its first focusable element, so a pointer user reaches the content without an extra Tab too. TrapFocus goes further and keeps the keyboard inside: Tab and Shift+Tab cycle within the callout instead of running on into the page behind it, and the callout reports itself as a modal dialog to the screen readers. It is what a callout hosting a form or a filter panel needs, and it implies AutoFocus.

AriaLabel names the button for the screen readers where the visible text does not, which is the case of an icon-only drop menu, AriaDescription points at the id of an element describing it further, and AriaHidden takes the button out of the accessibility tree entirely, for the cases where something else already conveys it.

OnClick fires on every activation of the button, OnOpen when the callout opens and OnDismiss when it closes, no matter how: an outside click, the Escape key, a swipe on a responsive panel, or another callout taking over.

Clicked: 0, Opened: 0, Dismissed: 0

AutoClose closes the callout as soon as a click lands anywhere inside it, which is what an action list is expected to do: picking an item completes the interaction. It is off by default, so that a callout hosting a form, a filter panel or anything else that is used before it is dismissed stays open while the user works in it. The focus follows the callout back to the button, so a keyboard user carries on from the trigger they left.

Variant decides how the Color is painted onto the button: Fill is the default look, a solid surface in that color; Outline keeps the surface clear and draws the color as a border and as the label; Text drops the border too and leaves only the label. Outline and Text write the accent colors onto the page in their own color rather than in the contrast color a filled button needs, so a colored drop menu stays readable without a surface behind it. Transparent is the shorthand for a button with no surface at all, in any variant, and it keeps that background on hover as well.

Color paints the button with one of the general colors of the library. The accent colors give a filled button with a matching text color, and the background, foreground and border colors give the neutral surfaces. Pair it with Variant to get the outlined and text-only looks of the same color.

Use icons from external libraries like FontAwesome, Material Icons, and Bootstrap Icons with the Icon and ChevronDownIcon parameters.

For details on BitIconInfo and its factory methods (BitIconInfo.Css, BitIconInfo.Fa, BitIconInfo.Bi), see the BitIconInfo section in the parameters table. Built-in Fluent UI icons are documented at Iconography.

FontAwesome:

Bootstrap Icons:

Size scales the font and the padding of the button together, from Small through Medium (the default) to Large. The callout is not scaled, since its size comes from its content.

Style and Class land on the root element, while Styles and Classes reach every part of the component on their own: the root, the button, the spinner, the icon, the text, the chevron, the overlay, the callout, and the Opened slot that only applies while the callout is open. The root carries the border of the drop menu, so a border color set here paints one in any variant.

Component's Style & Class:

Styles & Classes:

Use Dir to render the drop menu right-to-left. The button mirrors its icon and chevron, the callout is anchored from the right edge of the button, and a responsive panel slides in from the mirrored side and is swiped away in the mirrored direction.