| name | uno-navigation-tabbar |
| description | Implement TabBar navigation in Uno Platform using region-based navigation. Provides complete, compilable shell template for bottom tab navigation. Use for 3-5 top-level pages in mobile-first apps. |
| when_to_use | Use when 3-5 top-level pages, mobile-first / consumer apps, default choice when prompt does not indicate desktop or enterprise, building bottom navigation (mobile), linking TabBar items to content pages via regions, or using TabBar with Navigation Extensions. |
| metadata | {"author":"uno-platform","version":"3.5","category":"navigation"} |
Uno Navigation with TabBar — Agent Skill
Reference Templates
For complete, compilable shell XAML with parameterized placeholders, see:
references/shell-tabbar-template.md — Contains:
- Icon lookup table (Home, Search, Settings, Profile, etc.)
- SHELL_PAGE_NAME.xaml shell template with TabBar
- 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 TabBar Navigation Documentation
uno_platform_docs_search("Uno Navigation TabBar bottom tab region navigation")
Primary documentation pages:
- TabBar Navigation (Chefs):
external/uno.chefs/doc/toolkit/NavigateTabBar.md
- Define Regions:
external/uno.extensions/doc/Learn/Navigation/Walkthrough/DefineRegions.md
Fetch the Chefs TabBar page:
uno_platform_docs_fetch(sourcePath="external/uno.chefs/doc/toolkit/NavigateTabBar.md")
Step 2: For TabBar Control Reference
For TabBar control properties and styling:
uno_platform_docs_search("Uno Toolkit TabBar TabBarItem styles badges")
See also the uno-toolkit-tabbar skill for the control itself.
Step 3: For Responsive Navigation
If combining TabBar (mobile) with NavigationView (desktop):
See the uno-navigation-responsive-shell skill.
Key Principles (Stable)
- TabBar uses region-based navigation similarly to NavigationView
- Each
TabBarItem gets uen:Region.Name="RouteName"
- Parent container and content area need
Region.Attached="True"
- Apply
BottomTabBarStyle to the TabBar; per-TabBarItem styling comes from the active design-theme (e.g., MaterialBottomTabBarItemStyle from [[uno-toolkit-material-theme]])
- Requires
Toolkit in <UnoFeatures> along with Navigation
- XAML namespaces:
xmlns:uen="using:Uno.Extensions.Navigation.UI" and xmlns:utu="using:Uno.Toolkit.UI"
Critical Rules
- The root
Grid with uen:Region.Attached="True" MUST be a direct child of the Page content — it enables region navigation
uen:Region.Navigator="Visibility" MUST be on the content area Grid — this tells the framework to toggle child 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.
uen:Region.Attached="True" MUST also be on the TabBar itself- Route names in
RouteMap MUST match the uen:Region.Name values in SHELL_PAGE_NAME.xaml
- Tab 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 navigation
- [[uno-navigation-panel-visibility]] — Visibility-based content switching details
- [[uno-toolkit-tabbar]] — TabBar control reference
- [[uno-navigation-navigationview]] — Sidebar navigation alternative
- [[uno-navigation-routes]] — Route registration details
