Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All
Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

Guidelines for flyouts

[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 .]

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.

Examples

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

Recommendations

  • 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.

Related topics

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

 

 

Show:
© 2015 Microsoft