Page Navigation in .NET MAUI: An Overview
Tags: csharp, dotnet, maui, mobile
Published: 2022-05-27 11:16:06

---
title: Page Navigation in .NET MAUI: An Overview
published: true
date: 2022-05-27 10:52:55 UTC
tags: csharp, dotnet, maui, mobile
canonical_url: https://www.syncfusion.com/blogs/post/page-navigation-in-net-maui-an-overview.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gprz5bnnwk2zh4fytpy4.png
---

A typical application needs a hierarchical navigation experience where the user can navigate through pages forward and backward as required.

The [.NET MAUI](https://docs.microsoft.com/en-us/dotnet/maui/what-is-maui ".NET MAUI documentation") platform provides two primary forms of page navigation to an app:

- Shell.
- Base navigation pages, such as FlyoutPage, TabbedPage, and NavigationPage.

In this blog, let’s see how we can integrate page navigation in your .NET MAUI application with code examples.

## **Page** navigation through **Shell**

Shell page navigation is recommended to provide a page navigation experience in a .NET MAUI mobile app.

Shell is a UI control that hosts your pages and provides **flyout** and **tab** menus for navigation. Shell page navigation can also be done based on URLs. You can use content templates with it to make the code efficient.

A Shell template is available in any new .NET MAUI project as an **AppShell.Xaml** file with a single page that is added as the primary page. To use this template:

1. [Create a simple .NET MAUI app](https://docs.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-android "Build your first .NET MAUI app documentation"). By default, it will be generated with a shell template.
2. Then, create the required pages. Here, I will create two additional pages, namely **Add.Xaml** and **Edit.Xaml**.
3. Open the **AppShell.**** Xaml **file where the** MainPage** has already been added as Shell content. Add the required pages as content to it.  
Refer to the following code example.
```html
<Shell
    x:Class="ShellPageNavigation.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:ShellPageNavigation"
    Shell.FlyoutBehavior="Diabled">
 
  <ShellContent
      Title="Home"
      ContentTemplate="{DataTemplate local:MainPage}"
      Route="MainPage" />
 
  <ShellContent
      Title="Add"
      ContentTemplate="{DataTemplate local:AddPage}"
      Route="AddPage" />
 
  <ShellContent
      Title="Edit"
      ContentTemplate="{DataTemplate local:EditPage}"
      Route="EditPage" />
  
</Shell>
```
4. By default, the **FlyoutBehavior** is disabled. You can enable it with the value **Flyout**.  
Refer to the following code.
```html
<Shell
   x:Class="ShellPageNavigation.AppShell"
   xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
   xmlns:local="clr-namespace:ShellPageNavigation"
   Shell.FlyoutBehavior="Flyout">
 
  <ShellContent
     Title="Home"
     ContentTemplate="{DataTemplate local:MainPage}"
     Route="MainPage" />
 
  <ShellContent
     Title="Add"
     ContentTemplate="{DataTemplate local:AddPage}"
     Route="AddPage" />
 
  <ShellContent
     Title="Edit"
     ContentTemplate="{DataTemplate local:EditPage}"
     Route="EditPage" />
  
</Shell>

```

![Page Navigation in a .NET MAUI App Using Shell](https://www.syncfusion.com/blogs/wp-content/uploads/2022/05/Page-Navigation-in-a-.NET-MAUI-App-Using-Shell.png)
<figcaption>Page Navigation in a .NET MAUI App Using Shell</figcaption>

**Note** : Check out the [.NET MAUI Shell flyout](https://docs.microsoft.com/en-us/dotnet/maui/fundamentals/shell/flyout ".NET MAUI Shell flyout documentation") and [Shell tabs](https://docs.microsoft.com/en-us/dotnet/maui/fundamentals/shell/tabs ".NET MAUI Shell tabs documentation") documentation for more details.

## Page navigation through base navigation pages

Base navigation pages are another way to achieve page navigation in your .NET MAUI app. They support pages such as **FlyoutPage** , **TabbedPage** , and **NavigationPage**. We can perform navigation through **Push** and **Pop** actions.

Let’s take a quick look at these pages!

### TabbedPage

The .NET MAUI TabbedPage contains tabs, and each tab will load content in the detail area.

Refer to the following code example.

```html
<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:ShellPageNavigation"
            x:Class="ShellPageNavigation.TabbedPageNavigation">
  <local:MainPage Title="Home"/>
  <local:AddPage Title="Add"/>
  <local:EditPage Title="Edit"/>
</TabbedPage>
```

![Page Navigation in .NET MAUI App Using TabbedPage](https://www.syncfusion.com/blogs/wp-content/uploads/2022/05/Page-Navigation-in-.NET-MAUI-App-Using-TabbedPage-1.png)
<figcaption>Page Navigation in .NET MAUI App Using TabbedPage</figcaption>

### FlyoutPage

The .NET MAUI FlyoutPage contains a detail page with an overlay page called a flyout to present items. The detail page will load the content of the page selected on the flyout.

Refer to the following code example.

```html
<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:ShellPageNavigation"
            x:Class="ShellPageNavigation.FlyoutPageNavigation">
 <FlyoutPage.Flyout>
  <local:FlyMenuPage x:Name="flyoutMenu"/>
 </FlyoutPage.Flyout>
 <FlyoutPage.Detail>
  <NavigationPage>
   <x:Arguments>
    <local:MainPage/>
   </x:Arguments>
  </NavigationPage>
 </FlyoutPage.Detail>
</FlyoutPage>
```

### NavigationPage

The .NET MAUI NavigationPage is used to stack pages, and we can easily navigate to the required page with the push and pop actions.

#### Push pages

The **PushAsync** method of the NavigationPage will push a page in the navigation stack.

Refer to the following code.

```csharp
await Navigation.PushAsync(new DetailsPage());
```

#### Pop pages

The **PopAsync** method of the NavigationPage will pop a page in the navigation stack. Also, we can pop the current page by pressing the **Back** button on our device.

To programmatically pop a page, refer to the following code.

```csharp
await Navigation.PopAsync();
```

## GitHub reference

Check out a complete example of [page navigation in the .NET MAUI application on GitHub](https://github.com/SyncfusionExamples/maui-general-samples/tree/main/ShellPageNavigation "Page navigation in .NET MAUI app GitHub demo").

## Conclusion

Thanks for reading. I hope you have a basic idea about page navigation in the .NET MAUI application. Syncfusion [.NET MAUI](https://www.syncfusion.com/maui-controls "Syncfusion .NET MAUI Controls") controls are also compatible with these navigation pages. Please give them a try and leave your feedback in the comments section below!

Also, you can contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion support forum"), [support portal](https://support.syncfusion.com/ "Syncfusion support portal"), or [feedback portal](https://www.syncfusion.com/feedback/xamarin-forms "Syncfusion Feedback Portal"). We are always happy to assist you!

## **Related** blogs

- [Design Different Styles of Radial Sliders Using the .NET MAUI Radial Gauge](https://dev.to/syncfusion/design-different-styles-of-radial-sliders-using-the-net-maui-radial-gauge-5da3 "Blog: Design Different Styles of Radial Sliders Using the .NET MAUI Radial Gauge")
- [Syncfusion .NET MAUI 2022 Roadmap](https://dev.to/sureshmohan/syncfusion-net-maui-2022-roadmap-3do6-temp-slug-7710169 "Blog: Syncfusion .NET MAUI 2022 Roadmap")