Capacitor plugin Set navigation bar color for android lollipop and higher
npm install @capgo/capacitor-navigation-barSet navigation bar color for android lollipop and higher
The most complete doc is available here: https://capgo.app/docs/plugins/navigation-bar/
| 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.
``bash`
npm install @capgo/capacitor-navigation-bar
npx cap sync
- example-app: Interactive showcase that exercises all plugin options (color presets, custom hex, dark buttons, state reading).
* setNavigationBarColor(...)
* getNavigationBarColor()
* getPluginVersion()
* Enums
Capacitor Navigation Bar Plugin for customizing the Android navigation bar.
`typescript`
setNavigationBarColor(options: { color: NavigationBarColor | string; darkButtons?: boolean; }) => Promise
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
--------------------
`typescript`
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
--------------------
`typescript`
getPluginVersion() => Promise<{ version: string; }>
Get the native Capacitor plugin version.
Returns: Promise<{ version: string; }>
Since: 1.0.0
--------------------
#### NavigationBarColor
| Members | Value | Description |
| ----------------- | -------------------------- | ----------------- |
| WHITE | '#FFFFFF' | White color |
| BLACK | '#000000' | Black color |
| TRANSPARENT` | 'transparent' | Transparent color |