> ## Documentation Index
> Fetch the complete documentation index at: https://docs.median.co/llms.txt
> Use this file to discover all available pages before exploring further.

# System navigation bar (Android)

> Set the color and icon style of the Android system navigation bar at runtime with the Median JavaScript Bridge.

The [system navigation bar](https://developer.android.com/design/ui/mobile/guides/foundations/system-bars#navigation-bar) is the area at the bottom of an Android screen that users navigate with. Depending on the device settings, it shows three buttons, two buttons, or a gesture handle that users swipe.

| 3-button navigation | 2-button navigation | Gesture navigation |
| :-: | :-: | :-: |
| ![Android 3-button navigation bar](https://mintcdn.com/median-co/_JK44TBZ6nhRO8kn/images/docs/docs/system-nav-bar/3button.png?fit=max\&auto=format\&n=_JK44TBZ6nhRO8kn\&q=85\&s=d4ba0773d9ab1607808645f1d6e64e02) | ![Android 2-button navigation bar](https://mintcdn.com/median-co/_JK44TBZ6nhRO8kn/images/docs/docs/system-nav-bar/2button.png?fit=max\&auto=format\&n=_JK44TBZ6nhRO8kn\&q=85\&s=ff038be98ffd4d52aa1e6adf9755faff) | ![Android gesture navigation bar](https://mintcdn.com/median-co/_JK44TBZ6nhRO8kn/images/docs/docs/system-nav-bar/gesture.png?fit=max\&auto=format\&n=_JK44TBZ6nhRO8kn\&q=85\&s=fe20e3bc0c4c606df3fc3b36497e9932) |

You can set the navigation bar's color and icon style at runtime from your website using the Median JavaScript Bridge.

> [!NOTE]
>
> **Android only**
>
> The system navigation bar is an Android feature. These settings have no effect
> on iOS.

## Configuration options

| Parameter | Values | Description |
| - | - | - |
| `style` | `'light'`, `'dark'`, or `'auto'` | Sets the color of the navigation bar icons. `light` shows dark icons, `dark` shows white icons, and `auto` follows the device's light or dark mode setting. |
| `color` | Hex value, for example `RRGGBB` or `AARRGGBB` | Sets the navigation bar background to a solid color. Use `00000000` for a fully transparent navigation bar. |

## Setting the navigation bar at runtime

### Option 1: Match the navigation bar to your page background

To have Median detect your webpage's background color and apply it to the navigation bar, call the built-in helper function when the library loads.

Median JavaScript Bridge

```javascript JavaScript theme={null}
function median_library_ready() {
  median_match_system_navbar_to_body_background_color();
}
```

### Option 2: Set a custom navigation bar style

For full control, call `median.systemNavBar.set()` with your own values. The example below creates a red navigation bar with 50% transparency and white icons.

Median JavaScript Bridge

```javascript JavaScript theme={null}
// Trigger on demand, e.g. from a button or route change
if (navigator.userAgent.indexOf("median") > -1) {
  median.systemNavBar.set({
    style: "dark", // white icons
    color: "80ff0000", // 50% alpha red
  });
}

// Or apply on page load
function median_library_ready() {
  median.systemNavBar.set({
    style: "dark",
    color: "80ff0000",
  });
}
```


## Related topics

- [Full screen](https://docs.median.co/docs/full-screen.md)
- [Top navigation bar demo app](https://docs.median.co/docs/top-nav-bar-demo-app.md)
- [Bottom tab bar](https://docs.median.co/docs/bottom-tab-bar.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.