Flyout navigation places a menu beside the main content area. Opening the menu reveals pages or app-wide actions; choosing a page displays it in the main area and closes the menu. It suits multipage apps whose destinations need not remain visible all the time. section 7.4.4 section 7.4
In .NET MAUI, a FlyoutPage models this pattern with two Page properties: Flyout supplies the menu and Detail holds the selected page. A custom ContentPage can provide the flyout UI, while selectable FlyoutPageItem entries use TargetType to choose the page assigned to Detail. Custom menus are flexible, but unfamiliar navigation conventions can confuse users. section 7.4.4
Figure 7.11 In a FlyoutPage, a menu (or flyout) displays a list of pages, and the selected page is displayed on the screen.
Use the diagram to distinguish the flyout menu from the selected page shown in the detail area. section 7.4.4
For an app organized around flyouts, tabs, or both, Shell is often a simpler alternative. Shell describes the navigation hierarchy in XAML, automatically supports flyout-item and tab navigation, resolves constructor-injected page dependencies, and gives pages URL routes for deep linking and passing query data. section 7.5 section 7.6
Build a Shell flyout around three kinds of content:
- Add FlyoutItem entries to navigate to a page or a group of pages. A Shell section can contain pages or tab collections. section 7.5.1
- Add MenuItem entries for actions rather than navigation, such as logout. Invoke code through Clicked or Command. section 7.5.1
- Customize the header and footer with XAML, control templates, or imported views; customize the menu-item presentation with Shell.MenuItemTemplate. section 7.5.1 section 7.5.3
A stock-taking app flyout
A stock-taking app can combine tabs with a flyout: tabs switch between Input and Reports inside one section, while opening the flyout exposes other sections. Its flyout header uses an image and title, and a Logout MenuItem provides an app-wide action instead of navigating to a page. section 7.5.1 section 7.5.3
Choose Shell when flyout or tab navigation matches the app design. It is unnecessary for a single-page app or an app based on hierarchical navigation, and it may not fit a visual design that requires a fully custom tab bar. Flyout-style navigation is more typical of web or mobile apps than line-of-business desktop applications. section 7.5.3
