Game Navigation Bar – Bottom Tabs for UGUI

Requirements

• Built-in UGUI. Place the prefab under a Canvas as usual.
• Only scene requirement: an EventSystem (Create → UI → Event System).
• No extra packages (TMP optional if you use a TMP text prefab).

Inspector parameters

• Items (Tabs) — list of NavigationItem:
  ButtonName — label text shown when the tab is active (string).
  Icon — tab icon (Sprite).
  TargetCanvas — Canvas activated on select; null = locked (non-interactable, event not fired).
  ActiveBackground — per-item background when active (Sprite, optional).
  IconSize — icon size (Vector2, px). If ≤0 in any axis → defaults to 100×100.
  IconOffset — local (x,y) offset of the icon inside the button (Vector2).
  TextOffset — vertical distance below the icon bottom (float; can be negative to overlap).
• Layout & Stretch:
  StretchBackgroundToWidth — use sliced/simple fill to cover the button rect; width is always weight-based.
  StretchBackgroundToHeight — fill panel height (disables height animation). Off → height animates.
• Common Visuals:
  GlobalInactiveBackground — default background for inactive tabs (Sprite, optional).
  GlobalSeparatorSprite — optional separator between buttons (fixed width; non-animated).
  SeparatorWidth — separator width in px (float).
• Text Prefab:Prefab with Text or TMP_Text. The component sets only the string; styling (font/size/color/auto-size) is your prefab.
• Animation (width/height):
  activeWidth / inactiveWidth — width weights (drive LayoutElement.flexibleWidth).
  activeHeight / inactiveHeight — heights when height is not stretched.
  animationTime — tween duration for width/height/icon/text.
• Icon Animation:
  iconScaleMultiplier — icon upscale on select (e.g., 1.2).
  iconOffsetY — extra vertical offset on select (can slide above panel edge a bit).
• Selection & Events:
  DefaultActiveIndex — initial tab; out-of-range → logs and falls back to 0.
  OnButtonPressed(int index) — fired on click for unlocked tabs only.

Behavior / Implementation notes

• Width is distributed by weights across buttons; separators are layout siblings with fixed width and never tween.
• If a button has no background sprite, its root Image remains enabled with alpha=0 so the whole button stays clickable.
• Button transition = None — visuals are handled by the component (no tinting).
• Text is top-center anchored and positioned under the icon (uses TextOffset).

Used source file(s) sizes

• Sample sprites: PNG, typically 256–1024 px; separators are thin PNGs. All visuals are optional.

File count (approx.)

• ~2 scripts, 2 prefabs, 1 example scene, 1 PDF guide (+ sprites if included).

Animated

• Yes — width weight tween, height tween (if not stretched), icon scale + Y offset, delayed text reveal.

Animation type list

• LayoutElement.flexibleWidth tween (active vs inactive weights)
• LayoutElement.preferredHeight tween (if height animation enabled)
• Icon scale/position tween
• Text show with position update under icon

Additional: Vector or pixel based?

• Pixel-based by default; works fine with vector/TMP content if you supply it via your prefab.