.NET MAUI Shell Overview

In .NET MAUI, the Shell is the modern, high-level container that simplifies app structure and navigation. It’s designed to replace older navigation patterns like NavigationPage, TabbedPage, and FlyoutPage by unifying them into a single, declarative model.

In .NET MAUI, Shell is a powerful navigation container introduced to simplify building complex, multi-page applications. It provides a declarative way to define app structure and navigation using a single hierarchy, reducing boilerplate code compared to traditional navigation patterns like FlyoutPage or TabbedPage.

✅ What is Shell?

Shell acts as the application’s navigation framework, offering:

• Flyout menus (side navigation)
• Bottom tabs
• Top tabs
• URI-based navigation (deep linking)
• Global styling and theming

Key Benefits

Simplified Navigation

No need to manually manage NavigationPage stacks. Navigate using routes like:

//C#
await Shell.Current.GoToAsync("//home/details");
    

Built-in Features

• Flyout menu
• Tabs
• Search handler
• URI-based routing
• Global styles

Better Performance

Optimized for cross-platform navigation.

Shell Structure

Shell uses three main elements:

• Shell: The root container.
• FlyoutItem: Represents a menu item in the flyout.
• Tab: Represents a tabbed section.
• Content: The actual page.

Basic XAML Example

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       Title="My App"
       FlyoutBehavior="Flyout">
    <!-- Flyout Menu -->
    <FlyoutItem Title="Home" Icon="home.png">
        <ShellContent ContentTemplate="{DataTemplate local:HomePage}" />
    </FlyoutItem>
    <FlyoutItem Title="Settings" Icon="settings.png">
        <ShellContent ContentTemplate="{DataTemplate local:SettingsPage}" />
    </FlyoutItem>
</Shell>
    

Navigation with Shell

Register routes:

//C#
Routing.RegisterRoute("details", typeof(DetailsPage));
    

Navigate:

//C#
await Shell.Current.GoToAsync("details");
    

✅ Best Practices for Shell

• Use Shell for apps with multiple sections and complex navigation.
• Keep Flyout menus simple and avoid deep nesting.
• Use URI-based navigation for consistency.
• Apply global styles in AppShell.xaml for a unified look.
• Prefer Shell over FlyoutPage for new projects unless you need full custom control.
• Define routes clearly: Use Routing.RegisterRoute for custom pages.
• Keep Shell clean: Organize flyouts and tabs logically.
• Use MVVM: Bind commands to navigation actions.
• Leverage global resources: Apply styles and themes in Shell for consistency.
• Avoid mixing paradigms: Don’t nest NavigationPages inside Shell unless necessary.

📌 What is Shell?

• A navigation framework for MAUI apps.
• Provides flyouts, tabs, and routes in one place.
• Uses URI-based navigation (GoToAsync) instead of manual push/pop stacks.
• Reduces boilerplate code and makes navigation consistent across platforms.

🎯 Why Use Shell?

• Simplifies navigation: No need to manually manage stacks.
• Supports deep linking: Navigate directly to routes via URIs.
• Scales easily: Great for apps with multiple sections.
• Built-in UI patterns: Flyout menus, tab bars, and navigation bars are ready to use.
• Global styling: Apply styles and resources across the app.

✅ When to Use

• Larger apps with multiple navigation patterns.
• Apps that need deep linking or global navigation consistency.
• When you want to reduce boilerplate navigation code.

🚫 When Not to Use

• Very small apps with only one or two screens — a simple ContentPage or NavigationPage may be enough.
• If you need highly customized navigation flows that don’t fit Shell’s model.

Example: Shell in .NET MAUI

This example demonstrates how to use Shell in a .NET MAUI application to create a simple navigation structure with a Flyout menu and two pages.

AppShell.xaml

Define the Shell structure with two Flyout items: Home and Settings.

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:MyApp"
       x:Class="MyApp.AppShell"
       FlyoutBehavior="Flyout">

    <FlyoutItem Title="Home" Icon="home.png">
        <ShellContent ContentTemplate="{DataTemplate local:HomePage}" />
    </FlyoutItem>

    <FlyoutItem Title="Settings" Icon="settings.png">
        <ShellContent ContentTemplate="{DataTemplate local:SettingsPage}" />
    </FlyoutItem>
</Shell>
    

Register Routes in AppShell.xaml.cs

//C#
public partial class AppShell : Shell
{
    public AppShell()
    {
        InitializeComponent();
        Routing.RegisterRoute("details", typeof(DetailsPage));
    }
}
    

Navigate Between Pages

Use Shell navigation to move to the Details page:

//C#
await Shell.Current.GoToAsync("details");
    

Result

When you run the app, you will see a Flyout menu with two options: Home and Settings. Selecting an option displays the corresponding page. You can also navigate programmatically to the Details page using Shell routing.

🧩 Example: Shell with Flyout + Tabs

xml
<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:MyApp"
       x:Class="MyApp.AppShell">

    <!-- Flyout Menu -->
    <FlyoutItem Title="Home" Icon="home.png">
        <ShellContent ContentTemplate="{DataTemplate local:MainPage}" />
    </FlyoutItem>

    <!-- Tabbed Navigation -->
    <TabBar>
        <ShellContent Title="Dashboard"
                      ContentTemplate="{DataTemplate local:DashboardPage}" />
        <ShellContent Title="Settings"
                      ContentTemplate="{DataTemplate local:SettingsPage}" />
    </TabBar>

</Shell>
    

Navigation in Code

csharp
await Shell.Current.GoToAsync("//DashboardPage");
    

🏆 Summary

• Shell = unified navigation + app structure.
• Best for scalable apps with multiple sections.
• Provides flyouts, tabs, and routes in one place.
• Recommended approach for modern MAUI apps.