One-click install
npx skills add https://github.com/1k-off/umbraco-observability-playground --skill maui-shell-navigation-1k-off
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: maui-shell-navigation
Source: https://github.com/1k-off/umbraco-observability-playground/tree/main/.agents/skills/maui-shell-navigation
Command: npx skills add https://github.com/1k-off/umbraco-observability-playground --skill maui-shell-navigation-1k-off

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves the challenge of implementing consistent, maintainable page navigation in .NET MAUI apps by using Shell’s declarative hierarchy and URI-based routes.

Core Features & Use Cases

  • Shell-based visual hierarchy: Use FlyoutItem, TabBar, Tab, and ShellContent to structure top-level navigation and tabs.
  • Route-driven navigation: Navigate between pages (including detail pages) with GoToAsync using absolute/relative routes and registered route names.
  • Parameter passing & navigation guards: Pass values via query parameters (or object parameters) and prevent unsafe back navigation using async confirmation with navigation events.
  • Common configuration outcomes: Ensure pages are created on demand via ContentTemplate, avoid duplicate route names, and inspect navigation state to debug route issues.

Use cases: setting up app navigation menus, adding top/bottom tabs, pushing detail pages, passing an ID into a details screen, and blocking “leave page” when unsaved changes exist.

Quick Start

Add an AppShell with a FlyoutItem/TabBar structure, register any detail routes in the AppShell constructor, then navigate between pages using Shell.Current.GoToAsync with awaited route strings and query parameters.

Frequently Asked Questions about maui-shell-navigation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement page navigation in .NET MAUI using Shell?

Page navigation in .NET MAUI Shell uses a declarative visual hierarchy with FlyoutItem, TabBar, and ShellContent, combined with URI-based routes. You navigate between pages by calling Shell.Current.GoToAsync with awaited route strings and registered route names.

How do I pass query parameters to a detail page in .NET MAUI Shell?

Query parameters are passed to .NET MAUI Shell target pages by appending them to the URI string in the GoToAsync call. The target page receives these values to display specific details, such as passing an ID into a details screen.

Can I block back navigation in .NET MAUI when unsaved changes exist?

Yes, .NET MAUI Shell navigation supports guarding back or pop transitions with async confirmation. By handling navigation events, you can prevent unsafe back navigation and prompt users when unsaved changes exist on the current page.

Why are my .NET MAUI Shell routes not working or creating duplicate pages?

Shell route issues in .NET MAUI often stem from failing to register detail routes with Routing.RegisterRoute or using duplicate route names. You should inspect the navigation state to debug route conflicts and ensure pages use ContentTemplate for on-demand creation.

What is the best way to structure top-level tabs and flyout menus in .NET MAUI?

The best way to structure top-level navigation in .NET MAUI is using Shell's visual hierarchy. Define an AppShell with FlyoutItem for flyout menus and TabBar with Tab elements to configure bottom or top tabs.

Does .NET MAUI Shell navigation support absolute and relative routing?

.NET MAUI Shell navigation supports both absolute and relative URI routing via GoToAsync. Using correct route prefixes with registered route names allows you to push detail pages or reset the navigation stack to a specific top-level destination.