➡️ Get Instant updates for your App with Capgo

Missing a feature? We’ll build the plugin for you 💪

capacitor-navigation-bar

Set navigation bar color for android lollipop and higher

Documentation

The most complete doc is available here: https://capgo.app/docs/plugins/navigation-bar/

Compatibility

Plugin version	Capacitor compatibility	Maintained
v8.*.*	v8.*.*	✅
v7.*.*	v7.*.*	On demand
v6.*.*	v6.*.*	❌
v5.*.*	v5.*.*	❌

Note: The major version of this plugin follows the major version of Capacitor. Use the version that matches your Capacitor installation (e.g., plugin v8 for Capacitor 8). Only the latest major version is actively maintained.

Install

npm install @capgo/capacitor-navigation-bar
npx cap sync

Example Apps

• example-app: Interactive showcase that exercises all plugin options (color presets, custom hex, dark buttons, state reading).

API

• setNavigationBarColor(...)
• getNavigationBarColor()
• getPluginVersion()
• Enums

Capacitor Navigation Bar Plugin for customizing the Android navigation bar.

setNavigationBarColor(...)

setNavigationBarColor(options: { color: NavigationBarColor | string; darkButtons?: boolean; }) => Promise<void>

Set the navigation bar color and button theme.

Param	Type	Description
options	{ color: string; darkButtons?: boolean; }	- Configuration for navigation bar appearance

Since: 1.0.0

---

getNavigationBarColor()

getNavigationBarColor() => Promise<{ color: string; darkButtons: boolean; }>

Get the current navigation bar color and button theme.

Returns: Promise<{ color: string; darkButtons: boolean; }>

Since: 1.0.0

---

getPluginVersion()

getPluginVersion() => Promise<{ version: string; }>

Get the native Capacitor plugin version.

Returns: Promise<{ version: string; }>

Since: 1.0.0

---

Enums

NavigationBarColor

Members	Value	Description
WHITE	'#FFFFFF'	White color
BLACK	'#000000'	Black color
TRANSPARENT	'transparent'	Transparent color