---
title: "Jetpack Compose toolbar customization guide"
canonical_url: "https://www.nutrient.io/guides/android/jetpack-compose/components/main-toolbar/"
md_url: "https://www.nutrient.io/guides/android/jetpack-compose/components/main-toolbar.md"
last_updated: "2026-06-08T19:21:59.100Z"
description: "Learn to customize your Jetpack Compose toolbar for better flexibility and integration with DocumentView in Android apps."
---

# Customize your Jetpack Compose toolbar easily

Since Nutrient Android SDK 2024.2, our SDK provides a [`Toolbar`](https://www.nutrient.io/api/android/nutrient/com.pspdfkit.jetpack.compose.components/-main-toolbar.html) that’s made entirely with Jetpack Compose. This toolbar is fully customizable and can be used with [`DocumentView`](https://www.nutrient.io/api/android/nutrient/com.pspdfkit.jetpack.compose.views/index.html#DocumentView(android.net.Uri,androidx.compose.ui.Modifier)). It’s an alternative version of our default toolbar that’s specifically designed to be used more flexibly with Jetpack Compose.

Just like [top app bars](https://developer.android.com/develop/ui/compose/components/app-bars#top-bar), our [`MainToolbar`](https://www.nutrient.io/api/android/nutrient/com.pspdfkit.jetpack.compose.components/-main-toolbar.html) has `modifier`, `title`, `navigationIcon`, and `actions` as parameters, as well as the `documentState`:

```kotlin

@Composable
fun MainToolbar(
    modifier: Modifier = Modifier,
    documentState: DocumentState,
    title: @Composable ((String) -> Unit)? = null,
    navigationIcon: @Composable (tintColor: Color) -> Unit = {},
    actions: @Composable RowScope.(tintColor: Color) -> Unit = {}
)

```

## Usage

`MainToolbar` can be used in the following way:

```kotlin

MainToolbar(documentState = documentState)

```

Make sure to disable the default toolbar by adding `defaultToolbarEnabled(false)` to the existing `PdfActivityConfiguration` as follows:

```kotlin

val pdfActivityConfiguration = PdfActivityConfiguration.Builder(context).defaultToolbarEnabled(false).build()

val documentState = rememberDocumentState(pdf.toUri(), pdfActivityConfiguration)

```

`MainToolbar` is an independent composable, and to achieve [immersive mode](https://www.nutrient.io/api/android/nutrient/com.pspdfkit.configuration.activity/-pdf-activity-configuration/is-immersive-mode-enabled.html), its visibility needs to be handled explicitly. You can access the `onImmersiveModeEnabled` state from `uiListener` in [`DocumentManager`](https://www.nutrient.io/api/android/nutrient/com.pspdfkit.jetpack.compose.interactors/-document-manager/index.html) and use it to manipulate the visibility of `MainToolbar`:

```kotlin

 var toolbarVisibility by remember { mutableStateOf(true) }...
// Used inside `DocumentManager` in `DocumentView`.
uiListener = DefaultListeners.uiListeners(onImmersiveModeEnabled = { enabled ->
             toolbarVisibility = enabled
        })...
AnimatedVisibility(toolbarVisibility) {
             MainToolbar(documentState = documentState)
       }

```

## Exploring further

We have a dedicated [GitHub public repository](https://github.com/PSPDFKit/pspdfkit-android-compose-example) demonstrating everything related to [`DocumentView`](https://www.nutrient.io/api/android/nutrient/com.pspdfkit.jetpack.compose.views/index.html#DocumentView(android.net.Uri,androidx.compose.ui.Modifier)) and the [`MainToolbar`](https://www.nutrient.io/api/android/nutrient/com.pspdfkit.jetpack.compose.components/-main-toolbar.html).