---
title: Top App Bars
date: '2025-07-02'
description:  App bars indicate the current location within the app and provide quick actions.
---

<!-- AUTOGEN:START -->
:::preview[topappbar]
@code
```kotlin
import androidx.compose.runtime.Composable
import com.composables.uikit.components.Icon
import com.composables.icons.lucide.Bell
import com.composables.icons.lucide.Lucide
import com.composables.icons.lucide.Menu
import com.composables.icons.lucide.Search
import com.composables.uikit.components.IconButton
import com.composables.uikit.components.TopAppBar
import com.composables.uikit.components.Text

@Composable
fun TopAppBarExample() {
    TopAppBar(
        navigation = {
            IconButton(onClick = { /* TODO */ }) {
                Icon(Lucide.Menu, "Toggle Menu")
            }
        },
        title = {
            Text("News")
        },
        actions = {
            IconButton(onClick = { /* TODO */ }) {
                Icon(Lucide.Bell, "Notifications")
            }
            IconButton(onClick = { /* TODO */ }) {
                Icon(Lucide.Search, "Search")
            }
        }
    )
}
```
@end
:::

## Installation

{{uikit:installation}}

## Usage

```kotlin
import androidx.compose.runtime.Composable
import com.composables.uikit.components.Icon
import com.composables.icons.lucide.Bell
import com.composables.icons.lucide.Lucide
import com.composables.icons.lucide.Menu
import com.composables.icons.lucide.Search
import com.composables.uikit.components.IconButton
import com.composables.uikit.components.TopAppBar
import com.composables.uikit.components.Text

@Composable
fun TopAppBarExample() {
    TopAppBar(
        navigation = {
            IconButton(onClick = { /* TODO */ }) {
                Icon(Lucide.Menu, "Toggle Menu")
            }
        },
        title = {
            Text("News")
        },
        actions = {
            IconButton(onClick = { /* TODO */ }) {
                Icon(Lucide.Bell, "Notifications")
            }
            IconButton(onClick = { /* TODO */ }) {
                Icon(Lucide.Search, "Search")
            }
        }
    )
}
```
<!-- AUTOGEN:END -->