How MAUI Organizes Our Navigation in an App

Navigation on a phone is always a bit tricky. There are fewer ways to interact compared to, say, a laptop. UI elements need to be larger because a finger on a small phone screen is much bigger than a mouse cursor on a monitor.

.NET MAUI offers two main navigation options.

Simple Solution: NavigationPage

This is the standard approach, similar to old Windows dialog applications. You press a button — a new page appears on top of the current one. You press the “back” element — the current page closes, and the previous one reappears. In other words, a page stack is implemented.

Simple Navigation Example:

// MainPage.xaml.cs
private async void GoToDetails_Clicked(object sender, EventArgs e)
{
    await Navigation.PushAsync(new DetailsPage());
}

// DetailsPage.xaml.cs
private async void GoBack_Clicked(object sender, EventArgs e)
{
    await Navigation.PopAsync();
}

Pros:

• Simple stack-based navigation implementation.
• Full control over the navigation stack.
• Works well for small applications.

Cons:

• Lots of boilerplate code.
• Harder to scale to large apps.
• No built-in support for tabs, flyout menus, or URI navigation.

Shell: A “modern” and more advanced approach

Think of web sites or complex desktop applications. You might have a menu with tabs or panels where the user can quickly switch between major sections without losing context. Shell brings similar patterns into MAUI navigation. Baravla

Example Shell (AppShell.xaml)

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

    <TabBar>
        <ShellContent Title="Home" ContentTemplate="{DataTemplate pages:MainPage}" />
        <ShellContent Title="Settings" ContentTemplate="{DataTemplate pages:SettingsPage}" />
    </TabBar>

    <FlyoutItem Title="Menu">
        <ShellContent Title="Profile" ContentTemplate="{DataTemplate pages:ProfilePage}" />
        <ShellContent Title="About" ContentTemplate="{DataTemplate pages:AboutPage}" />
    </FlyoutItem>

</Shell>

This structure gives you multiple navigation patterns at once.

TabBar

A TabBar provides bottom tabs for quick switching between major sections of the app.

Tip: Each tab can contain its own NavigationPage to preserve a navigation stack inside that tab.

Flyout

Flyout is a side menu that opens when the user swipes from the edge of the screen or taps the “hamburger” icon. It’s great for global navigation between sections.

Deep Linking

Deep Linking lets you open specific pages through a URI, much like a web link.

Example:

// Navigate to DetailsPage with a parameter
await Shell.Current.GoToAsync("details?itemId=42");

This simplifies passing parameters and integrating with external systems.

Practical Tips

• NavigationPage: Best for small apps or internal modules. Easy to set up and understand.
• Shell: Ideal for medium and large apps where you need tabs, flyouts, or deep linking.
• You can combine both: Shell can contain NavigationPages inside tabs to get the best of both approaches.

Summary

• Shell is a powerful modern navigation tool in .NET MAUI.
• NavigationPage is still relevant for simple scenarios.
• Choose the right tool for your needs without overcomplicating your architecture.