NavigationPage in .NET MAUI

NavigationPage in .NET MAUI

In .NET MAUI, a NavigationPage is a special type of page that provides a stack-based navigation model — meaning you can push new pages onto the stack and pop them off, much like moving forward and backward through screens.

📌 What is a NavigationPage?

• A container page that manages navigation between multiple ContentPages.
• Displays a navigation bar at the top (with a title and optional back button).
• Allows hierarchical navigation (drill-down style).

🎯 Why Use NavigationPage?

• To create forward/backward navigation flows.
• To provide a consistent navigation bar across pages.
• To manage a stack of pages without manually handling transitions.

✅ When to Use

• Apps that need step-by-step navigation (e.g., list → detail → edit).
• When you want a back button automatically handled.
• For workflows where users move deeper into content and return.

🚫 When Not to Use

• If your app has global navigation needs — use Shell instead.
• For apps with tabbed or flyout menus — use TabbedPage or FlyoutPage.
• Avoid nesting multiple NavigationPages — it complicates navigation.

⚡ Best Practices

• Set the root page: Wrap your first ContentPage in a NavigationPage.
• Use async navigation: Always call await Navigation.PushAsync(...).
• Keep navigation logic in ViewModels: Use commands with INavigation.
• Customize the navigation bar: Use NavigationPage.BarBackgroundColor and BarTextColor.
• Avoid deep stacks: Too many pages pushed can confuse users.

🧩 Example: Using NavigationPage

App.xaml.cs

csharp
public App()
{
    InitializeComponent();

    MainPage = new NavigationPage(new MainPage());
}
    

MainPage.xaml (ContentPage)

xml
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.MainPage"
             Title="Home">

    <StackLayout Padding="20">
        <Label Text="Welcome to MAUI Navigation!" 
               FontSize="24" />
        <Button Text="Go to Details"
                Clicked="OnDetailsClicked" />
    </StackLayout>
</ContentPage>
    

MainPage.xaml.cs

csharp
private async void OnDetailsClicked(object sender, EventArgs e)
{
    await Navigation.PushAsync(new DetailsPage());
}
    

DetailsPage.xaml

xml
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.DetailsPage"
             Title="Details">

    <StackLayout Padding="20">
        <Label Text="This is the details page." />
    </StackLayout>
</ContentPage>
    

NavigationPage wraps MainPage.

Clicking the button pushes DetailsPage onto the stack.

The navigation bar automatically shows a back button to return.

🏆 Summary

• NavigationPage = stack-based navigation container.
• Best for hierarchical navigation flows.
• Provides a built-in navigation bar and back button.
• Keep navigation logic clean and avoid deep stacks.