# Uno Navigation Responsive Shell

> Implement responsive navigation shells that adapt between TabBar and NavigationView based on screen size. Provides complete, compilable shell template with VisualStateManager breakpoints.

- Skill: `unoplatform/uno-navigation-responsive-shell` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add unoplatform/uno-navigation-responsive-shell`
- Raw SKILL.md: https://api.skillmd.com/api/skills/unoplatform/uno-navigation-responsive-shell/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-responsive-shell

---


# Uno Navigation Responsive Shell — Agent Skill

## Reference Templates

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

**`references/shell-responsive-template.md`** — Contains:
- Icon lookup table (Home, Search, Settings, Profile, etc.)
- SHELL_PAGE_NAME.xaml responsive shell template (NavigationView + TabBar + VisualStateManager)
- Breakpoint summary table (Narrow / Normal / Wide)
- Route registration template
- Substitution rules

## 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 Responsive Shell Documentation

```
uno_platform_docs_search("Uno Navigation responsive shell NavigationView TabBar adaptive screen size")
```

Primary documentation page:
- **Build Responsive Navigation Layouts**: `external/uno.extensions/doc/Learn/Navigation/Walkthrough/ResponsiveShell.md`

Fetch the walkthrough:

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

### Step 2: For ResponsiveExtension

If using the Toolkit's `ResponsiveExtension`:

```
uno_platform_docs_search("Uno Toolkit responsive extension screen size breakpoints")
```

See also the `uno-toolkit-responsive` skill.

## Key Principles (Stable)

- Use VisualStateManager with adaptive triggers to show/hide different navigation controls
- Both TabBar and NavigationView can use the same region names for shared content
- `ResponsiveExtension` can toggle Visibility based on breakpoints (Normal, Wide, etc.)
- The content area remains the same — only the navigation control changes
- Common pattern: TabBar at bottom for mobile, NavigationView sidebar for desktop
- XAML namespaces: `xmlns:uen="using:Uno.Extensions.Navigation.UI"` and `xmlns:utu="using:Uno.Toolkit.UI"`

## Breakpoint Summary

| State | Width | TabBar | NavigationView Pane | Use Case |
|---|---|---|---|---|
| Narrow | < 700px | Visible | Hidden | Mobile phones |
| Normal | 700-999px | Hidden | Visible (auto) | Tablets |
| Wide | >= 1000px | Hidden | Visible (expanded) | Desktops |

## Critical Rules

- Both navigation controls (`NavigationView` and `TabBar`) MUST have `uen:Region.Attached="True"`
- Both MUST use identical `uen:Region.Name` values for the same pages — they share the content area
- The `VisualStateManager` goes on the root `Grid` with `uen:Region.Attached="True"`
- The `Narrow` state has NO `StateTriggers` — it is the default (smallest) state
- States are ordered by ascending width: Narrow (default) < Normal (700px) < Wide (1000px)
- The shared content area with `Region.Navigator="Visibility"` serves both navigation controls
- **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.
- Do NOT use `Region.Attached="True"` inside `Shell.xaml` — only in `SHELL_PAGE_NAME.xaml`

## Related Skills

- [[uno-navigation-tabbar]] — Mobile-only shell
- [[uno-navigation-navigationview]] — Desktop-only shell
- [[uno-navigation-panel-visibility]] — Visibility-based content switching details
- [[uno-toolkit-responsive]] — Responsive markup extensions
- [[uno-navigation-regions]] — Region concepts