---
title: TopAppBar
description: A Jetpack Compose TopAppBar component for displaying a title, a navigation icon, and actions at the top of a screen.
sourceCodeUrl: 'https://github.com/expo/expo/tree/sdk-58/packages/expo-ui'
packageName: '@expo/ui'
platforms: ['android', 'expo-go']
---

This documentation is available as Markdown for AI agents and LLMs. See the [full Markdown index](https://docs.expo.dev/llms.txt) or append .md to any documentation URL.

# TopAppBar

A Jetpack Compose TopAppBar component for displaying a title, a navigation icon, and actions at the top of a screen.

<AgentInstructions>

## Submitting Feedback

If you encounter errors, misleading or outdated information, report it so Expo can be improved:

Preferred command:
npx --yes submit-expo-feedback@latest --category docs --subject "/versions/latest/sdk/ui/jetpack-compose/topappbar/" "<actionable feedback>"

Direct HTTP fallback:
curl -X POST https://api.expo.dev/v2/feedback/docs-send -H 'Content-Type: application/json' -d '{"url":"/versions/latest/sdk/ui/jetpack-compose/topappbar/","feedback":"🤖 Agent feedback for docs: <specific, actionable description> (<model>, <harness>)"}'

Only submit when you have something specific and actionable to report. Try to give the most context.

## Navigation

When answering a related or follow-up question, use llms.txt to find the relevant page as Markdown (.md) instead of guessing.

You are here: Reference (v58.0.0) > Expo UI > Jetpack Compose (53 pages in this section)
Full documentation tree: [llms.txt](https://docs.expo.dev/llms.txt)

</AgentInstructions>
Android, Included in Expo Go

Expo UI TopAppBar matches the official Jetpack Compose [`TopAppBar`](https://developer.android.com/develop/ui/compose/components/app-bars#small) API. It displays a title, a navigation icon, and action buttons at the top of a screen.

## Installation

```sh
# npm
npx expo install @expo/ui

# yarn
yarn expo install @expo/ui

# pnpm
pnpm expo install @expo/ui

# bun
bun expo install @expo/ui
```

If you are installing this in an [existing React Native app](https://docs.expo.dev/bare/overview.md), make sure to [install `expo`](https://docs.expo.dev/bare/installing-expo-modules.md) in your project.

## Usage

### Basic top app bar

Put content in the `TopAppBar.Title`, `TopAppBar.NavigationIcon`, and `TopAppBar.Actions` slots. Each slot is optional. Set `style={{ typography: 'titleLarge' }}` on the title `Text` to use Material 3 title typography.

```tsx BasicTopAppBar.tsx
import {
  Host,
  Icon,
  IconButton,
  Text,
  TopAppBar,
} from '@expo/ui/jetpack-compose';
import { fillMaxWidth } from '@expo/ui/jetpack-compose/modifiers';

const CLOSE_ICON = require('./assets/close.xml');
const EDIT_ICON = require('./assets/edit.xml');

export default function BasicTopAppBar() {
  return (
    <Host
      matchContents={{ vertical: true }}
      style={{ width: '100%' }}>
      <TopAppBar modifiers={[fillMaxWidth()]}>
        <TopAppBar.NavigationIcon>
          <IconButton onClick={() => console.log('Close')}>
            <Icon source={CLOSE_ICON} contentDescription="Close" />
          </IconButton>
        </TopAppBar.NavigationIcon>
        <TopAppBar.Title>
          <Text style={{ typography: 'titleLarge' }}>Inbox</Text>
        </TopAppBar.Title>
        <TopAppBar.Actions>
          <IconButton onClick={() => console.log('Edit')}>
            <Icon source={EDIT_ICON} contentDescription="Edit" />
          </IconButton>
        </TopAppBar.Actions>
      </TopAppBar>
    </Host>
  );
}
```

### Window insets

By default, the app bar adds the status bar height above its content. It also adds any system bar or display cutout inset at its sides. These insets assume the bar is at the top edge of the window, even inside a nested `Host`. If a parent view already handles the insets, pass `windowInsets={{}}`. This removes both the top and horizontal insets.

```tsx TopAppBarWithoutInsets.tsx
import { Host, Text, TopAppBar } from '@expo/ui/jetpack-compose';
import { fillMaxWidth } from '@expo/ui/jetpack-compose/modifiers';

export default function TopAppBarWithoutInsets() {
  return (
    <Host
      matchContents={{ vertical: true }}
      style={{ width: '100%' }}>
      <TopAppBar windowInsets={{}} modifiers={[fillMaxWidth()]}>
        <TopAppBar.Title>
          <Text style={{ typography: 'titleLarge' }}>Settings</Text>
        </TopAppBar.Title>
      </TopAppBar>
    </Host>
  );
}
```

## API

```tsx
import { TopAppBar } from '@expo/ui/jetpack-compose';
```

## Component

### `TopAppBar`

Supported platforms: Android.

Type: React.[Element](https://www.typescriptlang.org/docs/handbook/jsx.html#function-component)<[TopAppBarProps](https://docs.expo.dev/versions/latest/sdk/ui/jetpack-compose/topappbar.md#topappbarprops)\>

A Material 3 small top app bar that shows a title, a navigation icon, and actions.

TopAppBarProps

### `children`

Supported platforms: Android.

Type: [ReactNode](https://reactnative.dev/docs/react-node)

`TopAppBar.Title`, `TopAppBar.NavigationIcon`, and `TopAppBar.Actions` slots.

### `colors`

Supported platforms: Android.

Optional • Type: [TopAppBarColors](https://docs.expo.dev/versions/latest/sdk/ui/jetpack-compose/topappbar.md#topappbarcolors)

Colors for the app bar. Unset colors use `TopAppBarDefaults.topAppBarColors()`.

### `modifiers`

Supported platforms: Android.

Optional • Type: `ModifierConfig[]`

Modifiers for the component.

### `windowInsets`

Supported platforms: Android.

Optional • Type: [PaddingValuesRecord](https://docs.expo.dev/versions/latest/sdk/ui/jetpack-compose/topappbar.md#paddingvaluesrecord)

Insets in dp that the app bar adds around its content. Missing sides are `0`. When omitted, the app bar uses `TopAppBarDefaults.windowInsets`, which assumes the bar is at the top edge of the window, even inside a nested `Host`. Pass `{}` when a parent handles the insets. This removes both the top status bar inset and the horizontal system bar and display cutout insets.

## Types

### `PaddingValuesRecord`

Supported platforms: Android.

Per-side padding values in dp for the content.

| Property | Type | Description |
| --- | --- | --- |
| bottom(optional) | `number` | - |
| end(optional) | `number` | - |
| start(optional) | `number` | - |
| top(optional) | `number` | - |

### `TopAppBarColors`

Supported platforms: Android.

Colors for the top app bar.

| Property | Type | Description |
| --- | --- | --- |
| actionIconContentColor(optional) | [ColorValue](https://reactnative.dev/docs/colors) | Color of the action icons. |
| containerColor(optional) | [ColorValue](https://reactnative.dev/docs/colors) | Color of the container (background). |
| navigationIconContentColor(optional) | [ColorValue](https://reactnative.dev/docs/colors) | Color of the navigation icon. |
| titleContentColor(optional) | [ColorValue](https://reactnative.dev/docs/colors) | Color of the title. |