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.
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.
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.
This example demonstrates both on-screen placement and button placement of flyouts.
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 .]
- For designers
- Guidelines for context menus
- Guidelines for dialog controls
- For developers (XAML)
- Flyout class
- For developers (HTML)
- WinJS.UI.Flyout object