Skip to content
Capgo - Live Updates for Capacitor Apps Capgo

@capgo/native-navigation

Render iOS and Android navigation chrome natively while JavaScript keeps owning routes, content, icons, labels, and bar state.
Get started GitHub

Native chrome

Draw the top navigation bar and bottom tab bar with platform UI instead of web components.

Web-owned routes

Native emits user intent events, then your existing router changes the WebView content.

Serialized icons

Configure tabs and buttons with SVG, SF Symbol, bundled image, or Android drawable descriptors.

Native transition shell

Capture the current WebView, update content in JavaScript, then finish with a native snapshot-to-WebView animation.

Core API

Section titled “Core API”
  • configure(options?) enables the native chrome host and controls content insets.
  • setNavbar(options) updates native title, subtitle, back button, buttons, colors, transparency, and visibility.
  • setTabbar(options) updates tabs, selected tab, badges, labels, icons, colors, and visibility.
  • beginTransition(options?) captures the outgoing WebView before the JavaScript route change.
  • finishTransition(options?) animates from the captured snapshot to the live WebView after route content is ready.
  • getPluginVersion() returns the native implementation version marker.

Events

Section titled “Events”
  • navbarBack fires when the native back affordance is tapped.
  • navbarItemTap fires when a native navbar action button is tapped.
  • tabSelect fires when a native tab is selected.
  • safeAreaChanged reports native bar and safe-area inset changes.
  • transitionStart and transitionEnd report native transition boundaries.

Platform Model

Section titled “Platform Model”

iOS uses UINavigationBar and UITabBar. On iOS 26 and newer, the plugin lets the system render Liquid Glass behavior; older versions use native translucent/material fallbacks.

Android uses an AppCompat toolbar and Material bottom navigation with edge-to-edge placement.

The plugin does not create one native WebView per route. Version 1 keeps a single Capacitor WebView for bridge stability and lets native own only the frame, bar visuals, tab selection chrome, safe-area reporting, and transition shell.