--- 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/plugins/navigation-bar.png --- [ Skip to content](#capawesomecapacitor-navigation-bar) [ 🎉 Introducing **Capawesome Platform** — one platform for Live Updates, Native Builds, App Store Publishing, and Insider SDKs.](https://capawesome.io) * [ Formbricks ](/docs/plugins/formbricks/) * [ Geocoder ](/docs/plugins/geocoder/) * [ Google Sign-In ](/docs/plugins/google-sign-in/) * [ Grafana Faro ](/docs/plugins/grafana-faro/) * [ libSQL ](/docs/plugins/libsql/) * [ Live Update ](/docs/plugins/live-update/) * [ Managed Configurations ](/docs/plugins/managed-configurations/) * [ Media Session ](/docs/plugins/media-session/) * [ ML Kit ](/docs/plugins/mlkit/) * Navigation Bar [ Navigation Bar ](/docs/plugins/navigation-bar/) * [ Usage ](#usage) * [ API ](#api) * [ Enums ](#enums) * [ FAQ ](#faq) * [ Changelog ](#changelog) * [ License ](#license) * [ NFC ](/docs/plugins/nfc/) * [ OAuth ](/docs/plugins/oauth/) * [ Pedometer ](/docs/plugins/pedometer/) * [ Photo Editor ](/docs/plugins/photo-editor/) * [ PostHog ](/docs/plugins/posthog/) * [ Printer ](/docs/plugins/printer/) * [ Purchases ](/docs/plugins/purchases/) * [ RealtimeKit ](/docs/plugins/realtimekit/) * [ Screen Orientation ](/docs/plugins/screen-orientation/) * [ Screenshot ](/docs/plugins/screenshot/) * [ Secure Preferences ](/docs/plugins/secure-preferences/) * [ Speech Recognition ](/docs/plugins/speech-recognition/) * [ Speech Synthesis ](/docs/plugins/speech-synthesis/) * [ Share Target ](/docs/plugins/share-target/) * [ Square Mobile Payments ](/docs/plugins/square-mobile-payments/) * [ SQLite ](/docs/plugins/sqlite/) * [ Superwall ](/docs/plugins/superwall/) * [ Torch ](/docs/plugins/torch/) * [ Wifi ](/docs/plugins/wifi/) * [ Zip ](/docs/plugins/zip/) * [ Cloud ](/docs/cloud/) * [ Live Updates ](/docs/cloud/live-updates/) * Advanced * Integrations * [ Native Builds ](/docs/cloud/native-builds/) * [ Configuration ](/docs/cloud/native-builds/configuration/) * [ Environments ](/docs/cloud/native-builds/environments/) * Guides * [ Sample Projects ](/docs/cloud/native-builds/sample-projects/) * [ Troubleshooting ](/docs/cloud/native-builds/troubleshooting/) * [ Automations ](/docs/cloud/automations/) * [ Assist ](/docs/cloud/assist/) * Account * Organizations * [ Organization and User Management ](/docs/cloud/organizations/memberships/) * [ Single Sign-On (SSO) ](/docs/cloud/organizations/sso/) * [ Teams ](/docs/cloud/organizations/teams/) * [ Two-Factor Authentication ](/docs/cloud/organizations/two-factor-authentication/) * [ Integrations ](/docs/cloud/integrations/) * [ License Keys ](/docs/cloud/license-keys/) * [ Webhooks ](/docs/cloud/webhooks/) * [ Pricing ](https://capawesome.io/pricing/) * [ FAQ ](/docs/cloud/faq/) * [ Support ](/docs/cloud/support/) * [ Contributing ](/docs/contributing/) * [ LLMs ](/docs/llms/) * [ Insiders ](/docs/insiders/) * [ License ](https://capawesome.io/legal/eula/) * [ Support ](/docs/insiders/support/) * [ FAQ ](/docs/insiders/faq/) * [ Blog ](/blog/) * Categories * [ Usage ](#usage) * [ API ](#api) * [ Enums ](#enums) * [ FAQ ](#faq) * [ Changelog ](#changelog) * [ License ](#license) # @capawesome/capacitor-navigation-bar[¶](#capawesomecapacitor-navigation-bar "Permanent link") Capacitor plugin to set the background color and button style of the navigation bar. [ ![Deliver Live Updates to your Capacitor app with Capawesome Cloud](../../assets/external/cloud.capawesome.io/assets/banners/cloud-build-and-deploy-capacitor-apps.69628c3f.png) ](https://cloud.capawesome.io/) ## Features[¶](#features "Permanent link") We are proud to offer one of the most complete and feature-rich Capacitor plugins for navigation bar customization. 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. * 🔁 **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! ## 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/). ## 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") `[](#%5F%5Fcodelineno-5-1)import { NavigationBar, Style } 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)}; [](#%5F%5Fcodelineno-5-6) [](#%5F%5Fcodelineno-5-7)const setStyle = async () => { [](#%5F%5Fcodelineno-5-8) await NavigationBar.setStyle({ style: Style.Light }); [](#%5F%5Fcodelineno-5-9)}; [](#%5F%5Fcodelineno-5-10) [](#%5F%5Fcodelineno-5-11)const getColor = async () => { [](#%5F%5Fcodelineno-5-12) const { color } = await NavigationBar.getColor(); [](#%5F%5Fcodelineno-5-13) return color; [](#%5F%5Fcodelineno-5-14)}; [](#%5F%5Fcodelineno-5-15) [](#%5F%5Fcodelineno-5-16)const getStyle = async () => { [](#%5F%5Fcodelineno-5-17) const { style } = await NavigationBar.getStyle(); [](#%5F%5Fcodelineno-5-18) return style; [](#%5F%5Fcodelineno-5-19)}; [](#%5F%5Fcodelineno-5-20) [](#%5F%5Fcodelineno-5-21)const hide = async () => { [](#%5F%5Fcodelineno-5-22) await NavigationBar.hide(); [](#%5F%5Fcodelineno-5-23)}; [](#%5F%5Fcodelineno-5-24) [](#%5F%5Fcodelineno-5-25)const show = async () => { [](#%5F%5Fcodelineno-5-26) await NavigationBar.show(); [](#%5F%5Fcodelineno-5-27)}; ` ## 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-6-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-7-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-8-1)hide() => Promise ` Hide the navigation bar. Only available on Android. **Since:** 8.0.0 --- ### setColor(...)[¶](#setcolor "Permanent link") `[](#%5F%5Fcodelineno-9-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-10-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-11-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. ## 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). May 27, 2026 Back to top