---
title: Toolbar
description: Medium, centered, and large title toolbars for page-level actions and navigation.
---

Use toolbars to anchor a screen title, navigation affordances, and top-level actions.

<UiDemo id="toolbar-actions" />

## 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/Toolbar.kt" />
<ComponentSource file="components/Utils.kt" />
</Tab>
</Tabs>

## Examples

### Centered

<UiDemo id="centered-toolbar" />

### Large

<UiDemo id="large-toolbar" />

## API Reference

### Toolbar

A top app bar with medium and large title variants.

```kotlin
@Composable
fun Toolbar(
    title: @Composable RowScope.() -> Unit,
    modifier: Modifier = Modifier,
    backgroundColor: Color = Color.Transparent,
    contentColor: Color = LocalContentColor.current,
    windowInsets: WindowInsets = toolbarWindowInsets(),
    leading: @Composable (RowScope.() -> Unit)? = null,
    trailing: @Composable (RowScope.() -> Unit)? = null,
    size: ToolbarSize = ToolbarSize.Medium,
)
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `title` | `@Composable RowScope.() -> Unit` | Composable title content displayed by the toolbar. |
| `modifier` | `Modifier` | Modifier applied to the toolbar. |
| `backgroundColor` | `Color` | Background color used by the toolbar. |
| `contentColor` | `Color` | Color used for toolbar content. |
| `windowInsets` | `WindowInsets` | Insets applied around the toolbar content. |
| `leading` | `@Composable (RowScope.() -> Unit)?` | Optional leading content shown before the title. |
| `trailing` | `@Composable (RowScope.() -> Unit)?` | Optional trailing content shown after the title. |
| `size` | `ToolbarSize` | Size variant used by the standard toolbar. |

### CenteredToolbar

A toolbar with centered title content.

```kotlin
@Composable
fun CenteredToolbar(
    title: @Composable (RowScope.() -> Unit),
    modifier: Modifier = Modifier,
    leading: @Composable (RowScope.() -> Unit)? = null,
    trailing: @Composable (RowScope.() -> Unit)? = null,
    backgroundColor: Color = Color.Transparent,
    contentColor: Color = LocalContentColor.current,
    windowInsets: WindowInsets = toolbarWindowInsets(),
)
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `title` | `@Composable (RowScope.() -> Unit)` | Composable title content displayed by the toolbar. |
| `modifier` | `Modifier` | Modifier applied to the toolbar. |
| `leading` | `@Composable (RowScope.() -> Unit)?` | Optional leading content shown before the title. |
| `trailing` | `@Composable (RowScope.() -> Unit)?` | Optional trailing content shown after the title. |
| `backgroundColor` | `Color` | Background color used by the toolbar. |
| `contentColor` | `Color` | Color used for toolbar content. |
| `windowInsets` | `WindowInsets` | Insets applied around the toolbar content. |

### ToolbarSize

Size variants for the standard Toolbar.

```kotlin
@JvmInline
value class ToolbarSize internal constructor(@Suppress("unused") private val value: Int)
```

| Value | Description |
|-------|-------------|
| `Medium` | Uses the standard single-row toolbar height. |
| `Large` | Uses the large title toolbar layout. |