Skip to main content
@capgo/capacitor-navigation-bar UI & System Open source

Navigation Bar Capacitor plugin

Customize Android navigation bar color and visibility for immersive UI experiences

Install

bun add @capgo/capacitor-navigation-bar bunx cap sync
npm, pnpm or yarn
  • npm install @capgo/capacitor-navigation-bar
  • pnpm add @capgo/capacitor-navigation-bar
  • yarn add @capgo/capacitor-navigation-bar

Guide

How to use Navigation Bar in Capacitor

Test on device

Download the Capgo app, then scan the QR code.

App Store Google Play
Navigation Bar plugin preview QR code

Using @capgo/capacitor-navigation-bar

Capacitor Navigation Bar Plugin for customizing the Android navigation bar.

Install

bun add @capgo/capacitor-navigation-bar
bunx cap sync

What This Plugin Exposes

  • setNavigationBarColor - Set the navigation bar color and button theme.
  • getNavigationBarColor - Get the current navigation bar color and button theme.

Example Usage

setNavigationBarColor

Set the navigation bar color and button theme.

import { NavigationBar, NavigationBarColor } from '@capgo/capacitor-navigation-bar';

// Set to white with dark buttons
await NavigationBar.setNavigationBarColor({
  color: NavigationBarColor.WHITE,
  darkButtons: true
});

// Set to custom color
await NavigationBar.setNavigationBarColor({
  color: '#FF5733',
  darkButtons: false
});

// Set a custom divider color on Android 9+
await NavigationBar.setNavigationBarColor({
  color: NavigationBarColor.WHITE,
  darkButtons: true,
  dividerColor: '#D9D9D9'
});

getNavigationBarColor

Get the current navigation bar color and button theme.

import { NavigationBar } from '@capgo/capacitor-navigation-bar';

const { color, darkButtons } = await NavigationBar.getNavigationBarColor();
console.log('Current color:', color);
console.log('Using dark buttons:', darkButtons);

Full Reference

Keep going from Using @capgo/capacitor-navigation-bar

If you are using Using @capgo/capacitor-navigation-bar to plan native media and interface behavior, connect it with @capgo/capacitor-navigation-bar for the implementation detail in @capgo/capacitor-navigation-bar, Getting Started for the implementation detail in Getting Started, Using @capgo/capacitor-live-activities for the native capability in Using @capgo/capacitor-live-activities, @capgo/capacitor-live-activities for the implementation detail in @capgo/capacitor-live-activities, and Using @capgo/capacitor-video-player for the native capability in Using @capgo/capacitor-video-player.

FAQ

Navigation Bar plugin FAQ

How do I install the Navigation Bar plugin in a Capacitor app?

Run "bun add @capgo/capacitor-navigation-bar" (or "npm install @capgo/capacitor-navigation-bar"), then run "bunx cap sync" so the iOS and Android projects pick up the native code. Import it from "@capgo/capacitor-navigation-bar" in your app code.

Does @capgo/capacitor-navigation-bar work with React, Vue and Angular?

Yes. Navigation Bar is a Capacitor package, so it works with any web framework that runs inside Capacitor, including Ionic, React, Vue, Angular, Svelte and plain JavaScript.

Which Capacitor version does @capgo/capacitor-navigation-bar support?

Capgo plugins follow Capacitor's major version: use the plugin major version that matches your Capacitor major version (for example plugin v8 with Capacitor 8). The compatibility table in the GitHub README lists the maintained versions.

Is @capgo/capacitor-navigation-bar free and open source?

Yes. The source code is public on GitHub at https://github.com/Cap-go/capacitor-navigation-bar/ and the package is free to install from npm. Bug reports and pull requests are welcome.

Can I update code that uses Navigation Bar without an App Store review?

Installing or upgrading the plugin changes native code, so it needs a new store build. After that, JavaScript, HTML and CSS changes that call the plugin can ship instantly with Capgo live updates.

UI & System

Related plugins

Browse all plugins →

Ship Navigation Bar changes without waiting for app review

Once the plugin is in your store build, Capgo live updates push your JavaScript, HTML and CSS changes to users in minutes.

Start with Capgo