---
description: Capacitor plugin for Android to customize the navigation bar — set background color, button style, divider color, and toggle visibility.
title: Capacitor Navigation Bar Plugin - Capawesome
image: https://capawesome.io/docs/assets/images/social/sdks/capacitor/navigation-bar.png
---
[Skip to content ](#capacitor-navigation-bar-plugin)
[🖥️ Introducing the **Capacitor Electron Platform** — build desktop apps for macOS, Windows, and Linux. Free & open source. ](/blog/announcing-the-capacitor-electron-platform/)
* [ SDKs ](/docs/sdks/)
* [ Formbricks ](/docs/sdks/capacitor/formbricks/)
* [ Geocoder ](/docs/sdks/capacitor/geocoder/)
* [ Google Sign-In ](/docs/sdks/capacitor/google-sign-in/)
* [ Grafana Faro ](/docs/sdks/capacitor/grafana-faro/)
* [ Gyroscope ](/docs/sdks/capacitor/gyroscope/)
* [ Haptics ](/docs/sdks/capacitor/haptics/)
* [ Home Indicator ](/docs/sdks/capacitor/home-indicator/)
* [ In-App Browser ](/docs/sdks/capacitor/in-app-browser/)
* [ Install Referrer ](/docs/sdks/capacitor/install-referrer/)
* [ Intercom ](/docs/sdks/capacitor/intercom/)
* [ Intune ](/docs/sdks/capacitor/intune/)
* [ Keep Awake ](/docs/sdks/capacitor/keep-awake/)
* [ libSQL ](/docs/sdks/capacitor/libsql/)
* [ Light Sensor ](/docs/sdks/capacitor/light-sensor/)
* [ Live Update ](/docs/sdks/capacitor/live-update/)
* [ Localization ](/docs/sdks/capacitor/localization/)
* [ Mail Composer ](/docs/sdks/capacitor/mail-composer/)
* [ Managed Configurations ](/docs/sdks/capacitor/managed-configurations/)
* [ Maps Launcher ](/docs/sdks/capacitor/maps-launcher/)
* [ Media Session ](/docs/sdks/capacitor/media-session/)
* [ ML Kit ](/docs/sdks/capacitor/mlkit/)
* Navigation Bar [ Navigation Bar ](/docs/sdks/capacitor/navigation-bar/)
* [ Usage ](#usage)
* [ API ](#api)
* [ Enums ](#enums)
* [ FAQ ](#faq)
* [ Related Plugins ](#related-plugins)
* [ Newsletter ](#newsletter)
* [ Changelog ](#changelog)
* [ License ](#license)
* [ Network ](/docs/sdks/capacitor/network/)
* [ NFC ](/docs/sdks/capacitor/nfc/)
* [ Node.js ](/docs/sdks/capacitor/nodejs/)
* [ OAuth ](/docs/sdks/capacitor/oauth/)
* [ Passkeys ](/docs/sdks/capacitor/passkeys/)
* [ Password Autofill ](/docs/sdks/capacitor/password-autofill/)
* [ PDF Generator ](/docs/sdks/capacitor/pdf-generator/)
* [ PDF Viewer ](/docs/sdks/capacitor/pdf-viewer/)
* [ Pedometer ](/docs/sdks/capacitor/pedometer/)
* [ Permissions ](/docs/sdks/capacitor/permissions/)
* [ Phone Dialer ](/docs/sdks/capacitor/phone-dialer/)
* [ Photo Editor ](/docs/sdks/capacitor/photo-editor/)
* [ Photo Manipulator ](/docs/sdks/capacitor/photo-manipulator/)
* [ PixLive ](/docs/sdks/capacitor/pixlive/)
* [ PostHog ](/docs/sdks/capacitor/posthog/)
* [ Printer ](/docs/sdks/capacitor/printer/)
* [ Privacy Screen ](/docs/sdks/capacitor/privacy-screen/)
* [ Proximity Sensor ](/docs/sdks/capacitor/proximity-sensor/)
* [ Purchases ](/docs/sdks/capacitor/purchases/)
* [ RealtimeKit ](/docs/sdks/capacitor/realtimekit/)
* [ Root Detection ](/docs/sdks/capacitor/root-detection/)
* [ Screen Brightness ](/docs/sdks/capacitor/screen-brightness/)
* [ Screen Orientation ](/docs/sdks/capacitor/screen-orientation/)
* [ Screen Reader ](/docs/sdks/capacitor/screen-reader/)
* [ Screenshot ](/docs/sdks/capacitor/screenshot/)
* [ Secure Preferences ](/docs/sdks/capacitor/secure-preferences/)
* [ Settings Launcher ](/docs/sdks/capacitor/settings-launcher/)
* [ Shake ](/docs/sdks/capacitor/shake/)
* [ Silent Mode ](/docs/sdks/capacitor/silent-mode/)
* [ SIM ](/docs/sdks/capacitor/sim/)
* [ SMS Composer ](/docs/sdks/capacitor/sms-composer/)
* [ Speech Recognition ](/docs/sdks/capacitor/speech-recognition/)
* [ Speech Synthesis ](/docs/sdks/capacitor/speech-synthesis/)
* [ Share Target ](/docs/sdks/capacitor/share-target/)
* [ Square Mobile Payments ](/docs/sdks/capacitor/square-mobile-payments/)
* [ SQLite ](/docs/sdks/capacitor/sqlite/)
* [ Superwall ](/docs/sdks/capacitor/superwall/)
* [ System WebView ](/docs/sdks/capacitor/system-webview/)
* [ Tauri ](/docs/sdks/capacitor/tauri/)
* [ Text Interaction ](/docs/sdks/capacitor/text-interaction/)
* [ Text Zoom ](/docs/sdks/capacitor/text-zoom/)
* [ Thermal State ](/docs/sdks/capacitor/thermal-state/)
* [ Toast ](/docs/sdks/capacitor/toast/)
* [ Torch ](/docs/sdks/capacitor/torch/)
* [ Vault ](/docs/sdks/capacitor/vault/)
* [ Volume ](/docs/sdks/capacitor/volume/)
* [ Wallet ](/docs/sdks/capacitor/wallet/)
* [ Wifi ](/docs/sdks/capacitor/wifi/)
* [ YouTube Player ](/docs/sdks/capacitor/youtube-player/)
* [ Zip ](/docs/sdks/capacitor/zip/)
* [ Cordova ](/docs/sdks/cordova/)
* [ Cloud ](/docs/cloud/)
* [ Integrations ](/docs/cloud/live-updates/integrations/)
* Concepts
* Reference
* [ Troubleshooting ](/docs/cloud/live-updates/troubleshooting/)
* [ FAQ ](/docs/cloud/live-updates/faq/)
* [ Native Builds ](/docs/cloud/native-builds/)
* [ Set Up Environments ](/docs/cloud/native-builds/environments/)
* [ Overwrite Native Configurations ](/docs/cloud/native-builds/native-configurations/)
* [ Auto-Increment Build Numbers ](/docs/cloud/native-builds/auto-incrementing-build-numbers/)
* [ Configure the Web Build Script ](/docs/cloud/native-builds/web-build-script/)
* [ Build from a Monorepo ](/docs/cloud/native-builds/monorepo/)
* [ Use pnpm, Yarn, or bun ](/docs/cloud/native-builds/package-managers/)
* [ Install Private npm Packages ](/docs/cloud/native-builds/npm-private-registry/)
* [ Override the Java Version ](/docs/cloud/native-builds/override-java-version/)
* [ Custom iOS Provisioning Profiles ](/docs/cloud/native-builds/custom-ios-provisioning-profiles/)
* [ Build without Git ](/docs/cloud/native-builds/build-without-git/)
* [ Access Git Behind a Firewall ](/docs/cloud/native-builds/firewall-access/)
* [ Integrations ](/docs/cloud/native-builds/integrations/)
* Reference
* [ Troubleshooting ](/docs/cloud/native-builds/troubleshooting/)
* [ FAQ ](/docs/cloud/native-builds/faq/)
* [ App Store Publishing ](/docs/cloud/app-store-publishing/)
* [ Submit a Build ](/docs/cloud/app-store-publishing/submit-a-build/)
* [ Submit Automatically After a Build ](/docs/cloud/app-store-publishing/submit-automatically/)
* [ Troubleshooting ](/docs/cloud/app-store-publishing/troubleshooting/)
* [ FAQ ](/docs/cloud/app-store-publishing/faq/)
* [ Automations ](/docs/cloud/automations/)
* [ Reference ](/docs/cloud/automations/reference/)
* [ Troubleshooting ](/docs/cloud/automations/troubleshooting/)
* [ FAQ ](/docs/cloud/automations/faq/)
* [ Assist ](/docs/cloud/assist/)
* [ CLI ](/docs/cloud/cli/)
* APIs and SDKs
* [ Webhooks ](/docs/cloud/webhooks/)
* [ Integrations ](/docs/cloud/integrations/)
* Account
* [ Organization ](/docs/cloud/organizations/)
* [ Two-Factor Enforcement ](/docs/cloud/organizations/two-factor-authentication/)
* [ Audit Logs ](/docs/cloud/organizations/audit-logs/)
* [ Billing ](/docs/cloud/organizations/billing/)
* [ License Keys ](/docs/cloud/license-keys/)
* [ AI ](/docs/ai/)
* [ Insiders ](/docs/insiders/)
* [ Billing & Plans ](/docs/insiders/billing-and-plans/)
* [ FAQ ](/docs/insiders/faq/)
* [ License ](https://capawesome.io/legal/eula/)
* [ Support ](/docs/support/)
* [ Contributing ](/docs/contributing/)
* Contributing code
* [ Code of Conduct ](/docs/contributing/code-of-conduct/)
* [ Questions ](https://docs.github.com/en/discussions/collaborating-with-your-community-using-discussions/participating-in-a-discussion#creating-a-discussion)
* [ Blog ](/blog/)
* Categories
* [ Usage ](#usage)
* [ API ](#api)
* [ Enums ](#enums)
* [ FAQ ](#faq)
* [ Related Plugins ](#related-plugins)
* [ Newsletter ](#newsletter)
* [ Changelog ](#changelog)
* [ License ](#license)
# Capacitor Navigation Bar Plugin[¶](#capacitor-navigation-bar-plugin "Permanent link")
Capacitor plugin to set the background color and button style of the navigation bar.
[  ](https://cloud.capawesome.io/)
## Features[¶](#features "Permanent link")
The Capacitor Navigation Bar plugin offers one of the most complete solutions for customizing the Android navigation bar in Capacitor apps. Here are some of the key features:
* 🎨 **Background color**: Set the navigation bar background to any hex color or fully transparent.
* 🔘 **Button style**: Choose dark or light navigation bar buttons, or follow the system appearance.
* ➖ **Divider color**: Customize the navigation bar divider color on Android 9+.
* 👁️ **Visibility**: Hide or show the navigation bar on demand.
* ⚙️ **Configuration**: Apply defaults at app launch via the Capacitor configuration.
* 🤝 **Compatibility**: Works alongside the [Android Dark Mode Support](https://capawesome.io/docs/sdks/capacitor/android-dark-mode-support/), [Android Edge-to-Edge Support](https://capawesome.io/docs/sdks/capacitor/android-edge-to-edge-support/) and [Home Indicator](https://capawesome.io/docs/sdks/capacitor/home-indicator/) plugins.
* 🔁 **Up-to-date**: Always supports the latest Capacitor version.
* ⭐️ **Support**: Priority support from the Capawesome Team.
* ✨ **Handcrafted**: Built from the ground up with care and expertise, not forked or AI-generated.
Missing a feature? Just [open an issue](https://github.com/capawesome-team/capacitor-plugins/issues) and we'll take a look!
## Use Cases[¶](#use-cases "Permanent link")
The Navigation Bar plugin is typically used to make the Android system navigation bar blend in with the app's design, for example:
* **Brand theming**: Set the navigation bar background to your brand color so it matches the rest of your app.
* **Dark mode support**: Switch the navigation bar color and button style when the user toggles between light and dark themes.
* **Immersive experiences**: Hide the navigation bar for fullscreen content such as videos or games and show it again afterwards.
* **Consistent app launch**: Apply a default color, divider color, and button style at app launch via the Capacitor configuration.
## Compatibility[¶](#compatibility "Permanent link")
| Plugin Version | Capacitor Version | Status |
| -------------- | ----------------- | -------------- |
| 8.x.x | \>=8.x.x | Active support |
## Installation[¶](#installation "Permanent link")
You can use our **AI-Assisted Setup** to install the plugin. Add the [Capawesome Skills](https://github.com/capawesome-team/skills) to your AI tool using the following command:
`[](#%5F%5Fcodelineno-0-1)npx skills add capawesome-team/skills --skill capacitor-plugins
`
Then use the following prompt:
`` [](#%5F%5Fcodelineno-1-1) Use the `capacitor-plugins` skill from `capawesome-team/skills` to install the `@capawesome/capacitor-navigation-bar` plugin in my project.
``
If you prefer **Manual Setup**, install the plugin by running the following commands:
`[](#%5F%5Fcodelineno-2-1)npm install @capawesome/capacitor-navigation-bar
[](#%5F%5Fcodelineno-2-2)npx cap sync
`
## Configuration[¶](#configuration "Permanent link")
| Prop | Type | Description | Since | |
| ---------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | ----- |
| **color** | string | The hexadecimal color to set as the background color of the navigation bar. Use 'transparent' to make the navigation bar transparent. Only available on Android. | 8.0.0 | |
| **dividerColor** | string | The hexadecimal color to set as the color of the navigation bar divider. Use 'transparent' to hide the divider. Only available on Android (API level 28+). | 8.0.0 | |
| **style** | 'DARK' \| 'LIGHT' | 'DEFAULT' | The style of the navigation bar buttons. Only available on Android. | 8.0.0 |
### Examples[¶](#examples "Permanent link")
In `capacitor.config.json`:
`[](#%5F%5Fcodelineno-3-1){
[](#%5F%5Fcodelineno-3-2) "plugins": {
[](#%5F%5Fcodelineno-3-3) "NavigationBar": {
[](#%5F%5Fcodelineno-3-4) "color": "#ffffff",
[](#%5F%5Fcodelineno-3-5) "dividerColor": "#d9d9d9",
[](#%5F%5Fcodelineno-3-6) "style": "LIGHT"
[](#%5F%5Fcodelineno-3-7) }
[](#%5F%5Fcodelineno-3-8) }
[](#%5F%5Fcodelineno-3-9)}
`
In `capacitor.config.ts`:
`[](#%5F%5Fcodelineno-4-1)///
[](#%5F%5Fcodelineno-4-2)
[](#%5F%5Fcodelineno-4-3)import { CapacitorConfig } from '@capacitor/cli';
[](#%5F%5Fcodelineno-4-4)
[](#%5F%5Fcodelineno-4-5)const config: CapacitorConfig = {
[](#%5F%5Fcodelineno-4-6) plugins: {
[](#%5F%5Fcodelineno-4-7) NavigationBar: {
[](#%5F%5Fcodelineno-4-8) color: "#ffffff",
[](#%5F%5Fcodelineno-4-9) dividerColor: "#d9d9d9",
[](#%5F%5Fcodelineno-4-10) style: "LIGHT",
[](#%5F%5Fcodelineno-4-11) },
[](#%5F%5Fcodelineno-4-12) },
[](#%5F%5Fcodelineno-4-13)};
[](#%5F%5Fcodelineno-4-14)
[](#%5F%5Fcodelineno-4-15)export default config;
`
## Usage[¶](#usage "Permanent link")
The following examples show how to set the navigation bar color and button style, read the current color and style, and hide and show the navigation bar.
### Set the navigation bar color[¶](#set-the-navigation-bar-color "Permanent link")
Set the background color of the navigation bar to any hexadecimal color, or pass `'transparent'` to make it fully transparent. Only available on Android:
`[](#%5F%5Fcodelineno-5-1)import { NavigationBar } from '@capawesome/capacitor-navigation-bar';
[](#%5F%5Fcodelineno-5-2)
[](#%5F%5Fcodelineno-5-3)const setColor = async () => {
[](#%5F%5Fcodelineno-5-4) await NavigationBar.setColor({ color: '#ffffff' });
[](#%5F%5Fcodelineno-5-5)};
`
### Set the button style[¶](#set-the-button-style "Permanent link")
Choose dark or light navigation bar buttons, or use `Style.Default` to follow the current device appearance. Only available on Android:
`[](#%5F%5Fcodelineno-6-1)import { NavigationBar, Style } from '@capawesome/capacitor-navigation-bar';
[](#%5F%5Fcodelineno-6-2)
[](#%5F%5Fcodelineno-6-3)const setStyle = async () => {
[](#%5F%5Fcodelineno-6-4) await NavigationBar.setStyle({ style: Style.Light });
[](#%5F%5Fcodelineno-6-5)};
`
### Read the current color and style[¶](#read-the-current-color-and-style "Permanent link")
Get the current background color and button style of the navigation bar. Only available on Android:
`[](#%5F%5Fcodelineno-7-1)import { NavigationBar } from '@capawesome/capacitor-navigation-bar';
[](#%5F%5Fcodelineno-7-2)
[](#%5F%5Fcodelineno-7-3)const getColor = async () => {
[](#%5F%5Fcodelineno-7-4) const { color } = await NavigationBar.getColor();
[](#%5F%5Fcodelineno-7-5) return color;
[](#%5F%5Fcodelineno-7-6)};
[](#%5F%5Fcodelineno-7-7)
[](#%5F%5Fcodelineno-7-8)const getStyle = async () => {
[](#%5F%5Fcodelineno-7-9) const { style } = await NavigationBar.getStyle();
[](#%5F%5Fcodelineno-7-10) return style;
[](#%5F%5Fcodelineno-7-11)};
`
### Hide and show the navigation bar[¶](#hide-and-show-the-navigation-bar "Permanent link")
Hide the navigation bar on demand, for example for fullscreen content, and show it again afterwards. Only available on Android:
`[](#%5F%5Fcodelineno-8-1)import { NavigationBar } from '@capawesome/capacitor-navigation-bar';
[](#%5F%5Fcodelineno-8-2)
[](#%5F%5Fcodelineno-8-3)const hide = async () => {
[](#%5F%5Fcodelineno-8-4) await NavigationBar.hide();
[](#%5F%5Fcodelineno-8-5)};
[](#%5F%5Fcodelineno-8-6)
[](#%5F%5Fcodelineno-8-7)const show = async () => {
[](#%5F%5Fcodelineno-8-8) await NavigationBar.show();
[](#%5F%5Fcodelineno-8-9)};
`
## API[¶](#api "Permanent link")
* [getColor()](#getcolor)
* [getStyle()](#getstyle)
* [hide()](#hide)
* [setColor(...)](#setcolor)
* [setStyle(...)](#setstyle)
* [show()](#show)
* [Interfaces](#interfaces)
* [Enums](#enums)
### getColor()[¶](#getcolor "Permanent link")
`[](#%5F%5Fcodelineno-9-1)getColor() => Promise
`
Get the current background color of the navigation bar.
Only available on Android.
**Returns:** `Promise<[GetColorResult](#getcolorresult)>`
**Since:** 8.0.0
---
### getStyle()[¶](#getstyle "Permanent link")
`[](#%5F%5Fcodelineno-10-1)getStyle() => Promise
`
Get the current style of the navigation bar buttons.
Only available on Android.
**Returns:** `Promise<[GetStyleResult](#getstyleresult)>`
**Since:** 8.0.0
---
### hide()[¶](#hide "Permanent link")
`[](#%5F%5Fcodelineno-11-1)hide() => Promise
`
Hide the navigation bar.
Only available on Android.
**Since:** 8.0.0
---
### setColor(...)[¶](#setcolor "Permanent link")
`[](#%5F%5Fcodelineno-12-1)setColor(options: SetColorOptions) => Promise
`
Set the background color of the navigation bar.
Only available on Android.
| Param | Type |
| ----------- | ----------------------------------- |
| **options** | [SetColorOptions](#setcoloroptions) |
**Since:** 8.0.0
---
### setStyle(...)[¶](#setstyle "Permanent link")
`[](#%5F%5Fcodelineno-13-1)setStyle(options: SetStyleOptions) => Promise
`
Set the style of the navigation bar buttons.
Only available on Android.
| Param | Type |
| ----------- | ----------------------------------- |
| **options** | [SetStyleOptions](#setstyleoptions) |
**Since:** 8.0.0
---
### show()[¶](#show "Permanent link")
`[](#%5F%5Fcodelineno-14-1)show() => Promise
`
Show the navigation bar.
Only available on Android.
**Since:** 8.0.0
---
### Interfaces[¶](#interfaces "Permanent link")
#### GetColorResult[¶](#getcolorresult "Permanent link")
| Prop | Type | Description | Since |
| --------- | ------ | --------------------------------------------------------------------------------------------------------- | ----- |
| **color** | string | The hexadecimal color of the navigation bar, or 'transparent' if the navigation bar is fully transparent. | 8.0.0 |
#### GetStyleResult[¶](#getstyleresult "Permanent link")
| Prop | Type | Description | Since |
| --------- | --------------- | ---------------------------------------- | ----- |
| **style** | [Style](#style) | The style of the navigation bar buttons. | 8.0.0 |
#### SetColorOptions[¶](#setcoloroptions "Permanent link")
| Prop | Type | Description | Since |
| ---------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ----- |
| **color** | string | The hexadecimal color to set as the background color of the navigation bar. Use 'transparent' to make the navigation bar transparent. | 8.0.0 |
| **dividerColor** | string | The hexadecimal color to set as the color of the navigation bar divider. Use 'transparent' to hide the divider. Only available on Android (API level 28+). | 8.0.0 |
#### SetStyleOptions[¶](#setstyleoptions "Permanent link")
| Prop | Type | Description | Since |
| --------- | --------------- | ---------------------------------------- | ----- |
| **style** | [Style](#style) | The style of the navigation bar buttons. | 8.0.0 |
### Enums[¶](#enums "Permanent link")
#### Style[¶](#style "Permanent link")
| Members | Value | Description | Since |
| ----------- | --------- | -------------------------------------------- | ----- |
| **Dark** | 'DARK' | Light icons on a dark background. | 8.0.0 |
| **Default** | 'DEFAULT' | Resolved from the current device appearance. | 8.0.0 |
| **Light** | 'LIGHT' | Dark icons on a light background. | 8.0.0 |
## FAQ[¶](#faq "Permanent link")
### Why are the `setColor` and `setStyle` methods not working on Android 15+?[¶](#why-are-the-setcolor-and-setstyle-methods-not-working-on-android-15 "Permanent link")
Starting with Android 15, the system enforces [edge-to-edge display](https://developer.android.com/develop/ui/views/layout/edge-to-edge) by default. In this mode the navigation bar is fully transparent and `Window.setNavigationBarColor` becomes a no-op, so setting the color through this plugin has no visible effect. If your app targets Android 15+ and you want to color the navigation bar area, use the [@capawesome/capacitor-android-edge-to-edge-support](https://github.com/capawesome-team/capacitor-plugins/tree/main/packages/android-edge-to-edge-support) plugin, which paints an overlay behind the navigation bar.
### Why is this plugin not available on iOS?[¶](#why-is-this-plugin-not-available-on-ios "Permanent link")
iOS does not have a system navigation bar that can be customized in the same way as on Android. All methods of this plugin are therefore unimplemented on iOS and reject with an error.
### How do I make the navigation bar transparent?[¶](#how-do-i-make-the-navigation-bar-transparent "Permanent link")
Pass `'transparent'` as the color to the `setColor` method or use it as the `color` value in the [Capacitor configuration](#configuration). You can also pass `'transparent'` as the `dividerColor` to hide the navigation bar divider.
### Can I apply a color and style at app launch?[¶](#can-i-apply-a-color-and-style-at-app-launch "Permanent link")
Yes, you can define the `color`, `dividerColor`, and `style` properties in the `NavigationBar` section of your Capacitor configuration file. The plugin applies these defaults when the app launches, so you don't have to call `setColor` or `setStyle` manually. See the [Configuration](#configuration) section for examples.
### Can I use this plugin with Ionic, React, Vue or Angular?[¶](#can-i-use-this-plugin-with-ionic-react-vue-or-angular "Permanent link")
Yes, the plugin is framework-agnostic. It works in any Capacitor app regardless of the web framework, including Ionic with Angular, React, or Vue, as well as plain JavaScript projects.
## Related Plugins[¶](#related-plugins "Permanent link")
* [Android Dark Mode Support](https://capawesome.io/docs/sdks/capacitor/android-dark-mode-support/): Seamless dark mode support for Android with `prefers-color-scheme` compatibility.
* [Android Edge-to-Edge Support](https://capawesome.io/docs/sdks/capacitor/android-edge-to-edge-support/): Support edge-to-edge display on Android, including setting the background color of the status bar and navigation bar.
* [Home Indicator](https://capawesome.io/docs/sdks/capacitor/home-indicator/): Hide and show the home indicator on iOS.
* [Screen Orientation](https://capawesome.io/docs/sdks/capacitor/screen-orientation/): Lock and unlock the screen orientation.
## Newsletter[¶](#newsletter "Permanent link")
Stay up to date with the latest news and updates about the Capawesome, Capacitor, and Ionic ecosystem by subscribing to our [Capawesome Newsletter](https://cloud.capawesome.io/newsletter/).
## Changelog[¶](#changelog "Permanent link")
See [CHANGELOG.md](https://github.com/capawesome-team/capacitor-plugins/blob/main/packages/navigation-bar/CHANGELOG.md).
## License[¶](#license "Permanent link")
See [LICENSE](https://github.com/capawesome-team/capacitor-plugins/blob/main/packages/navigation-bar/LICENSE).
July 8, 2026
Back to top
```json
{"@context": "https://schema.org", "@graph": [{"@type": "TechArticle", "@id": "https://capawesome.io/docs/sdks/capacitor/navigation-bar/#article", "headline": "Capacitor Navigation Bar Plugin", "name": "Capacitor Navigation Bar Plugin", "description": "Capacitor plugin for Android to customize the navigation bar — set background color, button style, divider color, and toggle visibility.", "inLanguage": "en", "url": "https://capawesome.io/docs/sdks/capacitor/navigation-bar/", "mainEntityOfPage": "https://capawesome.io/docs/sdks/capacitor/navigation-bar/", "author": {"@type": "Organization", "name": "Capawesome", "url": "https://capawesome.io", "logo": {"@type": "ImageObject", "url": "https://capawesome.io/assets/images/logo.svg"}}, "publisher": {"@type": "Organization", "name": "Capawesome", "url": "https://capawesome.io", "logo": {"@type": "ImageObject", "url": "https://capawesome.io/assets/images/logo.svg"}}, "about": {"@id": "https://capawesome.io/docs/sdks/capacitor/navigation-bar/#software"}}, {"@type": "SoftwareSourceCode", "@id": "https://capawesome.io/docs/sdks/capacitor/navigation-bar/#software", "name": "Capacitor Navigation Bar Plugin", "description": "Capacitor plugin for Android to customize the navigation bar — set background color, button style, divider color, and toggle visibility.", "url": "https://capawesome.io/docs/sdks/capacitor/navigation-bar/", "programmingLanguage": "TypeScript", "runtimePlatform": "Capacitor", "codeRepository": "https://github.com/capawesome-team", "author": {"@type": "Organization", "name": "Capawesome", "url": "https://capawesome.io", "logo": {"@type": "ImageObject", "url": "https://capawesome.io/assets/images/logo.svg"}}, "publisher": {"@type": "Organization", "name": "Capawesome", "url": "https://capawesome.io", "logo": {"@type": "ImageObject", "url": "https://capawesome.io/assets/images/logo.svg"}}}]}
{"@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [{"@type": "Question", "name": "Why are the setColor and setStyle methods not working on Android 15+?", "acceptedAnswer": {"@type": "Answer", "text": "Starting with Android 15, the system enforces edge-to-edge display by default. In this mode the navigation bar is fully transparent and Window.setNavigationBarColor becomes a no-op, so setting the color through this plugin has no visible effect. If your app targets Android 15+ and you want to color the navigation bar area, use the @capawesome/capacitor-android-edge-to-edge-support plugin, which paints an overlay behind the navigation bar."}}, {"@type": "Question", "name": "Why is this plugin not available on iOS?", "acceptedAnswer": {"@type": "Answer", "text": "iOS does not have a system navigation bar that can be customized in the same way as on Android. All methods of this plugin are therefore unimplemented on iOS and reject with an error."}}, {"@type": "Question", "name": "How do I make the navigation bar transparent?", "acceptedAnswer": {"@type": "Answer", "text": "Pass 'transparent' as the color to the setColor method or use it as the color value in the Capacitor configuration. You can also pass 'transparent' as the dividerColor to hide the navigation bar divider."}}, {"@type": "Question", "name": "Can I apply a color and style at app launch?", "acceptedAnswer": {"@type": "Answer", "text": "Yes, you can define the color, dividerColor, and style properties in the NavigationBar section of your Capacitor configuration file. The plugin applies these defaults when the app launches, so you don't have to call setColor or setStyle manually. See the Configuration section for examples."}}, {"@type": "Question", "name": "Can I use this plugin with Ionic, React, Vue or Angular?", "acceptedAnswer": {"@type": "Answer", "text": "Yes, the plugin is framework-agnostic. It works in any Capacitor app regardless of the web framework, including Ionic with Angular, React, or Vue, as well as plain JavaScript projects."}}], "url": "https://capawesome.io/docs/sdks/capacitor/navigation-bar/"}
```