{"_id":"@capawesome/capacitor-navigation-bar","_rev":"4-dbc1e5523f3edee4e1a936a019f34fc4","name":"@capawesome/capacitor-navigation-bar","dist-tags":{"dev":"7.0.0-dev.2fed8fd6.1779871806","latest":"8.0.2"},"versions":{"7.0.0-dev.2fed8fd6.1779871806":{"name":"@capawesome/capacitor-navigation-bar","version":"7.0.0-dev.2fed8fd6.1779871806","keywords":["capacitor","plugin","native","ionic","android","ios","navigation bar"],"author":{"name":"Robin Genz","email":"mail@robingenz.dev"},"license":"MIT","_id":"@capawesome/capacitor-navigation-bar@7.0.0-dev.2fed8fd6.1779871806","maintainers":[{"name":"robingenz","email":"mail@robingenz.dev"}],"homepage":"https://capawesome.io/docs/plugins/navigation-bar/","bugs":{"url":"https://github.com/capawesome-team/capacitor-plugins/issues"},"dist":{"shasum":"24c3ebea170d58868f7eac39120ce4707de15bb4","tarball":"https://registry.npmjs.org/@capawesome/capacitor-navigation-bar/-/capacitor-navigation-bar-7.0.0-dev.2fed8fd6.1779871806.tgz","fileCount":36,"integrity":"sha512-DapekyibGIiQg+fhN4D5luQIdW4FnaNCWYXI97yf2EysHpz4o3PeCkocBsK3uZm9Otjw0aphzjkWRbBXos7bXA==","signatures":[{"sig":"MEUCIQC85UoZB3RvPELu0uEPf0eveelULhx0P++KNAXMqUbBRAIgblpLdvFvhNJ7h7KurgocZx/25EbRu5f77rxwZ3KMjwc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":71651},"main":"dist/plugin.cjs.js","types":"dist/esm/index.d.ts","unpkg":"dist/plugin.js","module":"dist/esm/index.js","funding":[{"url":"https://github.com/sponsors/capawesome-team/","type":"github"},{"url":"https://opencollective.com/capawesome","type":"opencollective"}],"gitHead":"2fed8fd6df6ec41e60a1a46c526231d5a393be2b","scripts":{"fmt":"npm run eslint -- --fix && npm run prettier -- --write && npm run swiftlint -- --fix --format","lint":"npm run eslint && npm run prettier -- --check && npm run swiftlint -- lint","build":"npm run clean && npm run docgen && tsc && rollup -c rollup.config.mjs","clean":"rimraf ./dist","watch":"tsc --watch","docgen":"docgen --api NavigationBarPlugin --output-readme README.md --output-json dist/docs.json","eslint":"eslint . --ext ts","verify":"npm run verify:ios && npm run verify:android && npm run verify:web","prettier":"prettier \"**/*.{css,html,ts,js,java}\"","swiftlint":"node-swiftlint","verify:ios":"cd ios && pod install && xcodebuild -workspace Plugin.xcworkspace -scheme Plugin -destination generic/platform=iOS && cd ..","verify:web":"npm run build","prepublishOnly":"npm run build","verify:android":"cd android && ./gradlew clean build test && cd ..","ios:pod:install":"cd ios && pod install --repo-update && cd ..","ios:spm:install":"cd ios && swift package resolve && cd .."},"_npmUser":{"name":"robingenz","email":"mail@robingenz.dev"},"capacitor":{"ios":{"src":"ios"},"android":{"src":"android"}},"repository":{"url":"git+https://github.com/capawesome-team/capacitor-plugins.git","type":"git"},"_npmVersion":"11.12.1","description":"Capacitor plugin to set the background color and button style of the navigation bar.","directories":{},"_nodeVersion":"24.15.0","eslintConfig":{"extends":"@ionic/eslint-config/recommended"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"8.57.0","rimraf":"6.1.2","rollup":"4.53.3","swiftlint":"2.0.0","typescript":"5.9.3","@capacitor/cli":"8.0.0","@capacitor/ios":"8.0.0","@capacitor/core":"8.0.0","@capacitor/docgen":"0.3.1","@capacitor/android":"8.0.0","@ionic/eslint-config":"0.4.0","prettier-plugin-java":"2.6.7"},"peerDependencies":{"@capacitor/core":">=8.0.0"},"_npmOperationalInternal":{"tmp":"tmp/capacitor-navigation-bar_7.0.0-dev.2fed8fd6.1779871806_1779871938532_0.5946899561924632","host":"s3://npm-registry-packages-npm-production"}},"8.0.0":{"name":"@capawesome/capacitor-navigation-bar","version":"8.0.0","keywords":["capacitor","plugin","native","ionic","android","ios","navigation bar"],"author":{"name":"Robin Genz","email":"mail@robingenz.dev"},"license":"MIT","_id":"@capawesome/capacitor-navigation-bar@8.0.0","maintainers":[{"name":"robingenz","email":"mail@robingenz.dev"}],"homepage":"https://capawesome.io/docs/plugins/navigation-bar/","bugs":{"url":"https://github.com/capawesome-team/capacitor-plugins/issues"},"dist":{"shasum":"4e1ea088023cc8c898fded7cd4ce49855971ddf1","tarball":"https://registry.npmjs.org/@capawesome/capacitor-navigation-bar/-/capacitor-navigation-bar-8.0.0.tgz","fileCount":36,"integrity":"sha512-Rj2I7neRjWUZ1FCHbBmvba1qcJRpTPnYolMCJ3ck7aKHyrgIyumAJeV4y0xMmwFa260DlURr22gI7Z+k/YlhCA==","signatures":[{"sig":"MEUCIGiBblCYloYlJVgvvrRMmBDEMdfQea0pDuwiPfoKipbCAiEAroYUbC+Toum0MKlzeANHV4sbhmk3xCojXmY5s0tuW04=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@capawesome%2fcapacitor-navigation-bar@8.0.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":68921},"main":"dist/plugin.cjs.js","types":"dist/esm/index.d.ts","unpkg":"dist/plugin.js","module":"dist/esm/index.js","funding":[{"url":"https://github.com/sponsors/capawesome-team/","type":"github"},{"url":"https://opencollective.com/capawesome","type":"opencollective"}],"gitHead":"6a012af0f45063e5fb67dd94642cbebd19253089","scripts":{"fmt":"npm run eslint -- --fix && npm run prettier -- --write && npm run swiftlint -- --fix --format","lint":"npm run eslint && npm run prettier -- --check && npm run swiftlint -- lint","build":"npm run clean && npm run docgen && tsc && rollup -c rollup.config.mjs","clean":"rimraf ./dist","watch":"tsc --watch","docgen":"docgen --api NavigationBarPlugin --output-readme README.md --output-json dist/docs.json","eslint":"eslint . --ext ts","verify":"npm run verify:ios && npm run verify:android && npm run verify:web","prettier":"prettier \"**/*.{css,html,ts,js,java}\"","swiftlint":"node-swiftlint","verify:ios":"cd ios && pod install && xcodebuild -workspace Plugin.xcworkspace -scheme Plugin -destination generic/platform=iOS && cd ..","verify:web":"npm run build","prepublishOnly":"npm run build","verify:android":"cd android && ./gradlew clean build test && cd ..","ios:pod:install":"cd ios && pod install --repo-update && cd ..","ios:spm:install":"cd ios && swift package resolve && cd .."},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:bd37af5f-559c-40cb-8697-cc22b626065b"}},"capacitor":{"ios":{"src":"ios"},"android":{"src":"android"}},"repository":{"url":"git+https://github.com/capawesome-team/capacitor-plugins.git","type":"git"},"_npmVersion":"11.12.1","description":"Capacitor plugin to set the background color and button style of the navigation bar.","directories":{},"_nodeVersion":"24.15.0","eslintConfig":{"extends":"@ionic/eslint-config/recommended"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"8.57.0","rimraf":"6.1.2","rollup":"4.53.3","swiftlint":"2.0.0","typescript":"5.9.3","@capacitor/cli":"8.0.0","@capacitor/ios":"8.0.0","@capacitor/core":"8.0.0","@capacitor/docgen":"0.3.1","@capacitor/android":"8.0.0","@ionic/eslint-config":"0.4.0","prettier-plugin-java":"2.6.7"},"peerDependencies":{"@capacitor/core":">=8.0.0"},"_npmOperationalInternal":{"tmp":"tmp/capacitor-navigation-bar_8.0.0_1779879410307_0.48975580436519905","host":"s3://npm-registry-packages-npm-production"}},"8.0.1":{"name":"@capawesome/capacitor-navigation-bar","version":"8.0.1","keywords":["capacitor","capacitor-plugin","plugin","native","ionic","android","ios","navigation bar","android navigation bar","navigation bar color","hide navigation bar","system bars","system ui"],"author":{"name":"Robin Genz","email":"mail@robingenz.dev"},"license":"MIT","_id":"@capawesome/capacitor-navigation-bar@8.0.1","maintainers":[{"name":"robingenz","email":"mail@robingenz.dev"}],"homepage":"https://capawesome.io/docs/sdks/capacitor/navigation-bar/","bugs":{"url":"https://github.com/capawesome-team/capacitor-plugins/issues"},"dist":{"shasum":"caba6973293611ce69d62832383e43e879eea0ee","tarball":"https://registry.npmjs.org/@capawesome/capacitor-navigation-bar/-/capacitor-navigation-bar-8.0.1.tgz","fileCount":36,"integrity":"sha512-N9Y1RjWKawFhSe5sp+dGJFU1BUf3wIG+B/La2vfh5YGIx+BS/mJer3MN6cg0QuZno7NyVM+5BgsOhhLVlFbLkA==","signatures":[{"sig":"MEQCIAEHM0Nk1coJpz8QcMj8eWWM+erun5KtRK6iJL8kAJNtAiA432pNYmT+QW+bLeR2kzOx0u+lprAt5IOK3v+6nsxC7w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@capawesome%2fcapacitor-navigation-bar@8.0.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":72418},"main":"dist/plugin.cjs.js","types":"dist/esm/index.d.ts","unpkg":"dist/plugin.js","module":"dist/esm/index.js","funding":[{"url":"https://github.com/sponsors/capawesome-team/","type":"github"},{"url":"https://opencollective.com/capawesome","type":"opencollective"}],"gitHead":"3e61f4b412f9f3f512c21169bb135bbb23a67e6d","scripts":{"fmt":"npm run eslint -- --fix && npm run prettier -- --write && npm run swiftlint -- --fix --format","lint":"npm run eslint && npm run prettier -- --check && npm run swiftlint -- lint","build":"npm run clean && npm run docgen && tsc && rollup -c rollup.config.mjs","clean":"rimraf ./dist","watch":"tsc --watch","docgen":"docgen --api NavigationBarPlugin --output-readme README.md --output-json dist/docs.json","eslint":"eslint . --ext ts","verify":"npm run verify:ios && npm run verify:android && npm run verify:web","prettier":"prettier \"**/*.{css,html,ts,js,java}\"","swiftlint":"node-swiftlint","verify:ios":"cd ios && pod install && xcodebuild -workspace Plugin.xcworkspace -scheme Plugin -destination generic/platform=iOS && cd ..","verify:web":"npm run build","prepublishOnly":"npm run build","verify:android":"cd android && ./gradlew clean build test && cd ..","ios:pod:install":"cd ios && pod install --repo-update && cd ..","ios:spm:install":"cd ios && swift package resolve && cd .."},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:bd37af5f-559c-40cb-8697-cc22b626065b"}},"capacitor":{"ios":{"src":"ios"},"android":{"src":"android"}},"repository":{"url":"git+https://github.com/capawesome-team/capacitor-plugins.git","type":"git"},"_npmVersion":"11.16.0","description":"Capacitor plugin to set the background color and button style of the navigation bar on Android.","directories":{},"_nodeVersion":"24.18.0","eslintConfig":{"extends":"@ionic/eslint-config/recommended"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"8.57.0","rimraf":"6.1.2","rollup":"4.53.3","swiftlint":"2.0.0","typescript":"5.9.3","@capacitor/cli":"8.0.0","@capacitor/ios":"8.0.0","@capacitor/core":"8.0.0","@capacitor/docgen":"0.3.1","@capacitor/android":"8.0.0","@ionic/eslint-config":"0.4.0","prettier-plugin-java":"2.6.7"},"peerDependencies":{"@capacitor/core":">=8.0.0"},"_npmOperationalInternal":{"tmp":"tmp/capacitor-navigation-bar_8.0.1_1784103002181_0.8354185280389672","host":"s3://npm-registry-packages-npm-production"}},"8.0.2":{"name":"@capawesome/capacitor-navigation-bar","version":"8.0.2","description":"Capacitor plugin to set the background color and button style of the navigation bar on Android.","main":"dist/plugin.cjs.js","module":"dist/esm/index.js","types":"dist/esm/index.d.ts","unpkg":"dist/plugin.js","author":{"name":"Robin Genz","email":"mail@robingenz.dev"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/capawesome-team/capacitor-plugins.git"},"bugs":{"url":"https://github.com/capawesome-team/capacitor-plugins/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/capawesome-team/"},{"type":"opencollective","url":"https://opencollective.com/capawesome"}],"homepage":"https://capawesome.io/docs/sdks/capacitor/navigation-bar/","keywords":["capacitor","capacitor-plugin","plugin","native","ionic","android","ios","navigation bar","android navigation bar","navigation bar color","hide navigation bar","system bars","system ui"],"scripts":{"verify":"npm run verify:ios && npm run verify:android && npm run verify:web","verify:ios":"cd ios && pod install && xcodebuild -workspace Plugin.xcworkspace -scheme Plugin -destination generic/platform=iOS && cd ..","verify:android":"cd android && ./gradlew clean build test && cd ..","verify:web":"npm run build","lint":"npm run eslint && npm run prettier -- --check && npm run swiftlint -- lint","fmt":"npm run eslint -- --fix && npm run prettier -- --write && npm run swiftlint -- --fix --format","eslint":"eslint . --ext ts","prettier":"prettier \"**/*.{css,html,ts,js,java}\"","swiftlint":"node-swiftlint","docgen":"docgen --api NavigationBarPlugin --output-readme README.md --output-json dist/docs.json","build":"npm run clean && npm run docgen && tsc && rollup -c rollup.config.mjs","clean":"rimraf ./dist","watch":"tsc --watch","ios:pod:install":"cd ios && pod install --repo-update && cd ..","ios:spm:install":"cd ios && swift package resolve && cd ..","prepublishOnly":"npm run build"},"devDependencies":{"@capacitor/android":"8.0.0","@capacitor/cli":"8.4.2","@capacitor/core":"8.0.0","@capacitor/docgen":"0.3.1","@capacitor/ios":"8.0.0","@ionic/eslint-config":"0.4.0","eslint":"8.57.0","prettier-plugin-java":"2.9.7","rimraf":"6.1.2","rollup":"4.62.3","swiftlint":"2.0.0","typescript":"5.9.3"},"peerDependencies":{"@capacitor/core":">=8.0.0"},"eslintConfig":{"extends":"@ionic/eslint-config/recommended"},"capacitor":{"ios":{"src":"ios"},"android":{"src":"android"}},"publishConfig":{"access":"public"},"gitHead":"7c1937ed10b7de86ca2c1cdc3539a2735fd69a00","_id":"@capawesome/capacitor-navigation-bar@8.0.2","_nodeVersion":"24.19.0","_npmVersion":"11.17.0","dist":{"integrity":"sha512-Ov3UDsNLQ+Z0aUqSi4Q92EfEoXQ5iVENLHWHOYt1Bz2rpcma1AjmtIe7zV5/yRFdrZKTdkTB1skLrHmj36Tg4A==","shasum":"ea18db5d8ac5a7f8b3709915085db6e411f48fba","tarball":"https://registry.npmjs.org/@capawesome/capacitor-navigation-bar/-/capacitor-navigation-bar-8.0.2.tgz","fileCount":36,"unpackedSize":72387,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@capawesome%2fcapacitor-navigation-bar@8.0.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICsyXFM9NHKE24uNzpIqmBSzE4rWDI/JyKWBLCL1ErT1AiB5ww3q2GTjEaKPzWKoBCAz68yRjNZT5vgT2RaooFLrcg=="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:bd37af5f-559c-40cb-8697-cc22b626065b"}},"directories":{},"maintainers":[{"name":"robingenz","email":"mail@robingenz.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/capacitor-navigation-bar_8.0.2_1788337375123_0.5946058645378403"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-27T08:52:18.334Z","modified":"2026-09-02T08:22:55.676Z","7.0.0-dev.2fed8fd6.1779871806":"2026-05-27T08:52:18.654Z","8.0.0":"2026-05-27T10:56:50.485Z","8.0.1":"2026-07-15T08:10:02.309Z","8.0.2":"2026-09-02T08:22:55.260Z"},"bugs":{"url":"https://github.com/capawesome-team/capacitor-plugins/issues"},"author":{"name":"Robin Genz","email":"mail@robingenz.dev"},"license":"MIT","homepage":"https://capawesome.io/docs/sdks/capacitor/navigation-bar/","keywords":["capacitor","capacitor-plugin","plugin","native","ionic","android","ios","navigation bar","android navigation bar","navigation bar color","hide navigation bar","system bars","system ui"],"repository":{"type":"git","url":"git+https://github.com/capawesome-team/capacitor-plugins.git"},"description":"Capacitor plugin to set the background color and button style of the navigation bar on Android.","maintainers":[{"name":"robingenz","email":"mail@robingenz.dev"}],"readme":"# Capacitor Navigation Bar Plugin\n\nCapacitor plugin to set the background color and button style of the navigation bar.\n\n<div class=\"capawesome-z29o10a\">\n  <a href=\"https://cloud.capawesome.io/\" target=\"_blank\">\n    <img alt=\"Deliver Live Updates to your Capacitor app with Capawesome Cloud\" src=\"https://cloud.capawesome.io/assets/banners/cloud-build-and-deploy-capacitor-apps.png?t=1\" />\n  </a>\n</div>\n\n## Features\n\nThe 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:\n\n- 🎨 **Background color**: Set the navigation bar background to any hex color or fully transparent.\n- 🔘 **Button style**: Choose dark or light navigation bar buttons, or follow the system appearance.\n- ➖ **Divider color**: Customize the navigation bar divider color on Android 9+.\n- 👁️ **Visibility**: Hide or show the navigation bar on demand.\n- ⚙️ **Configuration**: Apply defaults at app launch via the Capacitor configuration.\n- 🤝 **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.\n- 🔁 **Up-to-date**: Always supports the latest Capacitor version.\n- ⭐️ **Support**: Priority support from the Capawesome Team.\n- ✨ **Handcrafted**: Built from the ground up with care and expertise, not forked or AI-generated.\n\nMissing a feature? Just [open an issue](https://github.com/capawesome-team/capacitor-plugins/issues) and we'll take a look!\n\n## Use Cases\n\nThe Navigation Bar plugin is typically used to make the Android system navigation bar blend in with the app's design, for example:\n\n- **Brand theming**: Set the navigation bar background to your brand color so it matches the rest of your app.\n- **Dark mode support**: Switch the navigation bar color and button style when the user toggles between light and dark themes.\n- **Immersive experiences**: Hide the navigation bar for fullscreen content such as videos or games and show it again afterwards.\n- **Consistent app launch**: Apply a default color, divider color, and button style at app launch via the Capacitor configuration.\n\n## Compatibility\n\n| Plugin Version | Capacitor Version | Status         |\n| -------------- | ----------------- | -------------- |\n| 8.x.x          | >=8.x.x           | Active support |\n\n## Guides\n\n- [Capacitor Edge-to-Edge & Safe Areas: The Complete Guide](https://capawesome.io/blog/capacitor-edge-to-edge-and-safe-areas-guide/)\n\n## Installation\n\nYou can use our **AI-Assisted Setup** to install the plugin.\nAdd the [Capawesome Skills](https://github.com/capawesome-team/skills) to your AI tool using the following command:\n\n```bash\nnpx skills add capawesome-team/skills --skill capacitor-plugins\n```\n\nThen use the following prompt:\n\n```\n Use the `capacitor-plugins` skill from `capawesome-team/skills` to install the `@capawesome/capacitor-navigation-bar` plugin in my project.\n```\n\nIf you prefer **Manual Setup**, install the plugin by running the following commands:\n\n```bash\nnpm install @capawesome/capacitor-navigation-bar\nnpx cap sync\n```\n\n## Configuration\n\n<docgen-config>\n<!--Update the source file JSDoc comments and rerun docgen to update the docs below-->\n\n| Prop               | Type                                        | Description                                                                                                                                                        | Since |\n| ------------------ | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----- |\n| **`color`**        | <code>string</code>                         | 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 |\n| **`dividerColor`** | <code>string</code>                         | 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 |\n| **`style`**        | <code>'DARK' \\| 'LIGHT' \\| 'DEFAULT'</code> | The style of the navigation bar buttons. Only available on Android.                                                                                                | 8.0.0 |\n\n### Examples\n\nIn `capacitor.config.json`:\n\n```json\n{\n  \"plugins\": {\n    \"NavigationBar\": {\n      \"color\": \"#ffffff\",\n      \"dividerColor\": \"#d9d9d9\",\n      \"style\": \"LIGHT\"\n    }\n  }\n}\n```\n\nIn `capacitor.config.ts`:\n\n```ts\n/// <reference types=\"@capawesome/capacitor-navigation-bar\" />\n\nimport { CapacitorConfig } from '@capacitor/cli';\n\nconst config: CapacitorConfig = {\n  plugins: {\n    NavigationBar: {\n      color: \"#ffffff\",\n      dividerColor: \"#d9d9d9\",\n      style: \"LIGHT\",\n    },\n  },\n};\n\nexport default config;\n```\n\n</docgen-config>\n\n## Usage\n\nThe 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.\n\n### Set the navigation bar color\n\nSet the background color of the navigation bar to any hexadecimal color, or pass `'transparent'` to make it fully transparent. Only available on Android:\n\n```typescript\nimport { NavigationBar } from '@capawesome/capacitor-navigation-bar';\n\nconst setColor = async () => {\n  await NavigationBar.setColor({ color: '#ffffff' });\n};\n```\n\n### Set the button style\n\nChoose dark or light navigation bar buttons, or use `Style.Default` to follow the current device appearance. Only available on Android:\n\n```typescript\nimport { NavigationBar, Style } from '@capawesome/capacitor-navigation-bar';\n\nconst setStyle = async () => {\n  await NavigationBar.setStyle({ style: Style.Light });\n};\n```\n\n### Read the current color and style\n\nGet the current background color and button style of the navigation bar. Only available on Android:\n\n```typescript\nimport { NavigationBar } from '@capawesome/capacitor-navigation-bar';\n\nconst getColor = async () => {\n  const { color } = await NavigationBar.getColor();\n  return color;\n};\n\nconst getStyle = async () => {\n  const { style } = await NavigationBar.getStyle();\n  return style;\n};\n```\n\n### Hide and show the navigation bar\n\nHide the navigation bar on demand, for example for fullscreen content, and show it again afterwards. Only available on Android:\n\n```typescript\nimport { NavigationBar } from '@capawesome/capacitor-navigation-bar';\n\nconst hide = async () => {\n  await NavigationBar.hide();\n};\n\nconst show = async () => {\n  await NavigationBar.show();\n};\n```\n\n## API\n\n<docgen-index>\n\n* [`getColor()`](#getcolor)\n* [`getStyle()`](#getstyle)\n* [`hide()`](#hide)\n* [`setColor(...)`](#setcolor)\n* [`setStyle(...)`](#setstyle)\n* [`show()`](#show)\n* [Interfaces](#interfaces)\n* [Enums](#enums)\n\n</docgen-index>\n\n<docgen-api>\n<!--Update the source file JSDoc comments and rerun docgen to update the docs below-->\n\n### getColor()\n\n```typescript\ngetColor() => Promise<GetColorResult>\n```\n\nGet the current background color of the navigation bar.\n\nOnly available on Android.\n\n**Returns:** <code>Promise&lt;<a href=\"#getcolorresult\">GetColorResult</a>&gt;</code>\n\n**Since:** 8.0.0\n\n--------------------\n\n\n### getStyle()\n\n```typescript\ngetStyle() => Promise<GetStyleResult>\n```\n\nGet the current style of the navigation bar buttons.\n\nOnly available on Android.\n\n**Returns:** <code>Promise&lt;<a href=\"#getstyleresult\">GetStyleResult</a>&gt;</code>\n\n**Since:** 8.0.0\n\n--------------------\n\n\n### hide()\n\n```typescript\nhide() => Promise<void>\n```\n\nHide the navigation bar.\n\nOnly available on Android.\n\n**Since:** 8.0.0\n\n--------------------\n\n\n### setColor(...)\n\n```typescript\nsetColor(options: SetColorOptions) => Promise<void>\n```\n\nSet the background color of the navigation bar.\n\nOnly available on Android.\n\n| Param         | Type                                                        |\n| ------------- | ----------------------------------------------------------- |\n| **`options`** | <code><a href=\"#setcoloroptions\">SetColorOptions</a></code> |\n\n**Since:** 8.0.0\n\n--------------------\n\n\n### setStyle(...)\n\n```typescript\nsetStyle(options: SetStyleOptions) => Promise<void>\n```\n\nSet the style of the navigation bar buttons.\n\nOnly available on Android.\n\n| Param         | Type                                                        |\n| ------------- | ----------------------------------------------------------- |\n| **`options`** | <code><a href=\"#setstyleoptions\">SetStyleOptions</a></code> |\n\n**Since:** 8.0.0\n\n--------------------\n\n\n### show()\n\n```typescript\nshow() => Promise<void>\n```\n\nShow the navigation bar.\n\nOnly available on Android.\n\n**Since:** 8.0.0\n\n--------------------\n\n\n### Interfaces\n\n\n#### GetColorResult\n\n| Prop        | Type                | Description                                                                                                 | Since |\n| ----------- | ------------------- | ----------------------------------------------------------------------------------------------------------- | ----- |\n| **`color`** | <code>string</code> | The hexadecimal color of the navigation bar, or `'transparent'` if the navigation bar is fully transparent. | 8.0.0 |\n\n\n#### GetStyleResult\n\n| Prop        | Type                                    | Description                              | Since |\n| ----------- | --------------------------------------- | ---------------------------------------- | ----- |\n| **`style`** | <code><a href=\"#style\">Style</a></code> | The style of the navigation bar buttons. | 8.0.0 |\n\n\n#### SetColorOptions\n\n| Prop               | Type                | Description                                                                                                                                                  | Since |\n| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----- |\n| **`color`**        | <code>string</code> | The hexadecimal color to set as the background color of the navigation bar. Use `'transparent'` to make the navigation bar transparent.                      | 8.0.0 |\n| **`dividerColor`** | <code>string</code> | 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 |\n\n\n#### SetStyleOptions\n\n| Prop        | Type                                    | Description                              | Since |\n| ----------- | --------------------------------------- | ---------------------------------------- | ----- |\n| **`style`** | <code><a href=\"#style\">Style</a></code> | The style of the navigation bar buttons. | 8.0.0 |\n\n\n### Enums\n\n\n#### Style\n\n| Members       | Value                  | Description                                  | Since |\n| ------------- | ---------------------- | -------------------------------------------- | ----- |\n| **`Dark`**    | <code>'DARK'</code>    | Light icons on a dark background.            | 8.0.0 |\n| **`Default`** | <code>'DEFAULT'</code> | Resolved from the current device appearance. | 8.0.0 |\n| **`Light`**   | <code>'LIGHT'</code>   | Dark icons on a light background.            | 8.0.0 |\n\n</docgen-api>\n\n## FAQ\n\n### Why are the `setColor` and `setStyle` methods not working on Android 15+?\n\nStarting 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.\nIf 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.\n\n### Why is this plugin not available on iOS?\n\niOS 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.\n\n### How do I make the navigation bar transparent?\n\nPass `'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.\n\n### Can I apply a color and style at app launch?\n\nYes, 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.\n\n### Can I use this plugin with Ionic, React, Vue or Angular?\n\nYes, 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.\n\n## Related Plugins\n\n- [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.\n- [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.\n- [Home Indicator](https://capawesome.io/docs/sdks/capacitor/home-indicator/): Hide and show the home indicator on iOS.\n- [Screen Orientation](https://capawesome.io/docs/sdks/capacitor/screen-orientation/): Lock and unlock the screen orientation.\n\n## Newsletter\n\nStay 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/).\n\n## Changelog\n\nSee [CHANGELOG.md](https://github.com/capawesome-team/capacitor-plugins/blob/main/packages/navigation-bar/CHANGELOG.md).\n\n## License\n\nSee [LICENSE](https://github.com/capawesome-team/capacitor-plugins/blob/main/packages/navigation-bar/LICENSE).\n","readmeFilename":"README.md"}