uno-navigation-tabbar

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