Guidelines for flyouts

A flyout is a lightweight contextual popup that displays UI related to what the user is doing. It includes placement and sizing logic, and can be used to show a menu, reveal a hidden control, show more detail about an item, or ask the user to confirm an action. Flyouts can be dismissed by tapping or clicking somewhere outside the flyout.

Is this the right control?

Flyouts can be used for:

  • Contextual, transient UI.
  • Warnings and confirmations, including ones related to potentially destructive actions.
  • Displaying more information, such as details about an item on the screen.
  • Second-level menus.
  • Custom commands.


The minimum-size flyout can contain just a very basic message and no button.

Example of a minimum size flyout

The example below shows the default flyout width. Text should wrap, and if the text amount exceeds its container, then a scrollbar should be present.

Example of a simple flyout

This example demonstrates both on-screen placement and button placement of flyouts.

Example of flyout placement


  • As with other contextual UI, place a flyout next to the point from which it's called.
    • Specify the object to which you want the flyout anchored, and the side of the object on which the flyout will appear.
    • Try to position the flyout so that it doesn’t block important UI.
  • The flyout should be dismissed as soon as something in it is selected.
  • Flyout menus work best with just one level. Multiple flyout menu levels are difficult to navigate and provide a poor user experience.

[This article contains information that is specific to Universal Windows Platform (UWP) apps and Windows 10. For Windows 8.1 guidance, please download the Windows 8.1 guidelines PDF .]

Related topics

For designers
Guidelines for context menus
Guidelines for dialog controls
For developers (XAML)
Flyout class
For developers (HTML)
WinJS.UI.Flyout object



© 2016 Microsoft