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

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).

Configuration

You can apply navigation bar defaults when the native plugin loads:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  plugins: {
    NavigationBar: {
      color: '#ffffff',
      dividerColor: '#d9d9d9',
      style: 'LIGHT',
    },
  },
};

export default config;

style accepts LIGHT, DARK, or DEFAULT. Use LIGHT for dark buttons, DARK for light buttons, and DEFAULT to follow the current device appearance.

API

hide() => Promise<void>

show() => Promise<void>

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

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

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