# Uno Navigation Navigationview

> Implement NavigationView navigation in Uno Platform using region-based navigation. Provides complete, compilable shell template for sidebar/hamburger navigation. Use for >5 pages, hierarchical content, or desktop/enterprise apps.

- Skill: `unoplatform/uno-navigation-navigationview` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add unoplatform/uno-navigation-navigationview`
- Raw SKILL.md: https://api.skillmd.com/api/skills/unoplatform/uno-navigation-navigationview/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: unoplatform (https://skillmd.com/u/unoplatform)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/unoplatform/uno-navigation-navigationview

---


# Uno Navigation with NavigationView — Agent Skill

## Reference Templates

For complete, compilable shell XAML with parameterized placeholders, see:

**`references/shell-navigationview-template.md`** — Contains:
- Icon lookup table (Home, Search, Settings, Profile, etc.)
- SHELL_PAGE_NAME.xaml — Without Settings variant
- SHELL_PAGE_NAME.xaml — With Settings variant
- SHELL_PAGE_NAME.xaml.cs — Settings code-behind (`Region.SetName` for built-in Settings item)
- Page template (XAML + code-behind)
- Route registration template
- Substitution rules
- Localization template (Resources.resw)

## Workflow

> **Docs lookup:** call `uno_platform_docs_search(...)` first, then `uno_platform_docs_fetch(sourcePath="…")` using the `sourcePath` field from a result (a relative `.md` path; add the result's `anchor` for a section). Never pass a URL, a `.html` link, or a hand-built path.

### Step 1: Fetch the NavigationView Navigation Documentation

```
uno_platform_docs_search("Uno Navigation NavigationView sidebar hamburger region")
```

Primary documentation pages:
- **Define Regions (NavigationView section)**: `external/uno.extensions/doc/Learn/Navigation/Walkthrough/DefineRegions.md`
- **Responsive Shell**: `external/uno.extensions/doc/Learn/Navigation/Walkthrough/ResponsiveShell.md`

Fetch the define regions page:

```
uno_platform_docs_fetch(sourcePath="external/uno.extensions/doc/Learn/Navigation/Walkthrough/DefineRegions.md")
```

Focus on the "Using Regions with NavigationView" section.

### Step 2: For Responsive Navigation

If the user needs adaptive navigation (NavigationView on desktop, TabBar on mobile):

See the `uno-navigation-responsive-shell` skill.

## Key Principles (Stable)

- NavigationView uses region-based navigation to link menu items to content
- Parent container needs `uen:Region.Attached="True"`
- NavigationView needs `uen:Region.Attached="True"`
- Each `NavigationViewItem` uses `uen:Region.Name="RouteName"` to map to content
- Content area uses a Grid with `uen:Region.Attached="True"` and `uen:Region.Navigator="Visibility"`
- XAML namespace: `xmlns:uen="using:Uno.Extensions.Navigation.UI"`

## Critical Rules

- The root `Grid` with `uen:Region.Attached="True"` enables region navigation for the entire shell
- `uen:Region.Attached="True"` MUST also be on the `NavigationView` itself
- The content area `Grid` inside `NavigationView` needs BOTH `uen:Region.Attached="True"` AND `uen:Region.Navigator="Visibility"`
- **The content area Grid with `Region.Navigator="Visibility"` must be empty in XAML.** Do not add `Collapsed` child elements for each route. The navigation framework resolves registered routes and injects the corresponding views at runtime.
- The Settings item is NOT a `NavigationViewItem` in `MenuItems` — use `Loaded` event + `Region.SetName` in code-behind
- Route names in `RouteMap` MUST match the `uen:Region.Name` values in `SHELL_PAGE_NAME.xaml`
- Page routes are nested under the `"Main"` route so only the content area updates, not the entire page
- Do NOT use `Region.Attached="True"` inside `Shell.xaml` — only in `SHELL_PAGE_NAME.xaml`

## Related Skills

- [[uno-navigation-regions]] — Region concepts
- [[uno-navigation-responsive-shell]] — Adaptive NavigationView + TabBar
- [[uno-navigation-panel-visibility]] — Visibility-based content switching details
- [[uno-navigation-tabbar]] — TabBar alternative
- [[uno-navigation-routes]] — Route registration details