capacitor-navigation-bar

Control the Android navigation bar from your Capacitor app: set its color and button style, make it transparent, or hide it for immersive screens.

🤖 Building with an AI coding agent? Install Capgo skills so Claude Code, Codex, Cursor, Copilot, or Gemini CLI know how to install and use @capgo/capacitor-navigation-bar in your Capacitor app: npx skills add Cap-go/capgo-skills. Then ask your agent: "Add @capgo/capacitor-navigation-bar to my Capacitor app and wire it up." Agent setup guides · Hosted MCP

Key features

• Color: setNavigationBarColor() sets the bar color, including transparent, and light or dark buttons.
• Read state: getNavigationBarColor() returns the current color and button theme.
• Hide and show: hide() and show() for fullscreen content.
• Config defaults: set color, dividerColor and style in capacitor.config to apply them at launch.
• Platforms: Android. Android only. iOS rejects the calls, and web only logs them.

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

You can use our AI-Assisted Setup to install the plugin. Add the Capgo skills to your AI tool using the following command:

npx skills add https://github.com/cap-go/capacitor-skills --skill capacitor-plugins

Then use the following prompt:

Use the `capacitor-plugins` skill from `cap-go/capacitor-skills` to install the `@capgo/capacitor-navigation-bar` plugin in my project.

If you prefer Manual Setup, install the plugin by running the following commands and follow the platform-specific instructions below:

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()
• show()
• setNavigationBarColor(...)
• getNavigationBarColor()
• getPluginVersion()
• Enums

Capacitor Navigation Bar Plugin for customizing the Android navigation bar.

hide()

hide() => Promise<void>

Hide the navigation bar.

Only available on Android.

Since: 8.2.0

show()

show() => Promise<void>

Show the navigation bar.

Only available on Android.

Since: 8.2.0

setNavigationBarColor(...)

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

Set the navigation bar color and button theme.

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