Skip to main content
Capgo logo
Back to plugins
@capgo/capacitor-navigation-bar
Tutorial
by github.com/Cap-go

Navigation Bar

Customize Android navigation bar color and visibility for immersive UI experiences

Downloads/week

163.1k

GitHub Stars

24

Guide

Tutorial on Navigation Bar

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