---
title: Navigation Bar
description: Bottom navigation bars for switching between top-level destinations.
---

Use a navigation bar when users need to move between a small set of primary destinations.

<UiDemo id="navigation-bar" />

## Installation

<Tabs>
<Tab title="Gradle">
```kotlin title="app/build.gradle.kts"
implementation("com.composables:ui:0.1.0")
```
</Tab>
<Tab title="Copy & Paste">
#### Add the required dependencies

```kotlin title="app/build.gradle.kts"
implementation("com.composables:composeunstyled:2.7.0")
```

#### Copy and paste the following sources into your project

<ComponentSource file="components/NavigationBar.kt" />
<ComponentSource file="components/Utils.kt" />
</Tab>
</Tabs>

## Examples

### Disabled items

<UiDemo id="disabled-navigation-bar" />

### Custom insets

<UiDemo id="custom-insets-navigation-bar" />

## API Reference

### NavigationBar

A bottom navigation bar container.

```kotlin
@Composable
fun NavigationBar(
    modifier: Modifier = Modifier,
    windowInsets: WindowInsets = navigationBarWindowInsets(),
    content: @Composable RowScope.() -> Unit,
)
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `modifier` | `Modifier` | Modifier applied to the component. |
| `windowInsets` | `WindowInsets` | Insets applied around the navigation bar content. |
| `content` | `@Composable RowScope.() -> Unit` | Composable content displayed by the component. |

### NavigationBarItem

A single destination action inside a navigation bar.

```kotlin
@Composable
fun NavigationBarItem(
    selected: Boolean,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = RoundedCornerShape(8.dp),
    content: @Composable () -> Unit,
)
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `selected` | `Boolean` | Whether the navigation item is currently selected. |
| `onClick` | `() -> Unit` | Called when the navigation item is activated. |
| `modifier` | `Modifier` | Modifier applied to the component. |
| `enabled` | `Boolean` | Whether the navigation item can be interacted with. |
| `shape` | `Shape` | Shape used for the selected navigation item background. |
| `content` | `@Composable () -> Unit` | Composable content displayed by the component. |