Shell Navigation in .NET MAUI

What is Shell?

Shell is a navigation container that provides a consistent way to implement navigation in .NET MAUI applications. It simplifies navigation patterns and provides a structured way to manage your app's pages.

Setting Up Shell

App.xaml Configuration

// App.xaml

    
        
            
        
    


// App.xaml.cs
public partial class App : Application
{
    public App()
    {
        InitializeComponent();
        MainPage = new AppShell();
    }
}

AppShell.xaml

// AppShell.xaml

    
    
    
        
    
    
    
        
    
    
    
    
        
            
        
        
        
            
        
    
    

Shell Navigation Methods

Navigating to Pages

// Navigation without Shell
await Navigation.PushAsync(new DetailsPage());

// Shell Navigation - Absolute
await Shell.Current.GoToAsync("//Home/Details");

// Shell Navigation - Relative
await Shell.Current.GoToAsync("Details");

// Shell Navigation with parameters
await Shell.Current.GoToAsync("Details?id=123&name=test");

Navigating Back

// Go back
await Shell.Current.GoToAsync("..");

// Go back with parameter
await Shell.Current.GoToAsync("../Details?id=123");

// Go back to root
await Shell.Current.GoToAsync("///");

// Pop modal
await Shell.Current.GoToAsync("..", true);

Query Parameters

// Receiving parameters in target page
[QueryProperty(nameof(Id), "id")]
[QueryProperty(nameof(Name), "name")]
public partial class DetailsPage : ContentPage
{
    public string Id { get; set; }
    public string Name { get; set; }
    
    public DetailsPage()
    {
        InitializeComponent();
        BindingContext = this;
    }
    
    protected override void OnAppearing()
    {
        base.OnAppearing();
        // Use Id and Name
    }
}

Custom Shell Structure

Flyout Menu

Custom Flyout Header

Tab Bar

Complete Example

// AppShell.xaml

    
    
        
            
        
    
    
    
        
    
    
    
        
            
                
            
            
                
            
        
    
    
    
        
    
    
    
    
    


// ProductDetailsPage.xaml.cs
[QueryProperty(nameof(ProductId), "id")]
public partial class ProductDetailsPage : ContentPage
{
    public string ProductId { get; set; }
    
    public ProductDetailsPage()
    {
        InitializeComponent();
    }
    
    protected override void OnAppearing()
    {
        base.OnAppearing();
        LoadProduct(ProductId);
    }
}