> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/android/navigation/ux/llms.txt)

# Upcoming maneuvers banner customization

You can customize the upcoming maneuvers banner by providing your own UI written in Jetpack Compose.

![Upcoming maneuvers banner](https://docs.mapbox.com/android/assets/ideal-img/dash-sdk-upcoming-maneuvers.59b8248.480.png)

For constructing the upcoming maneuvers content, the following classes are used:

```kotlin
class UpcomingManeuversUiState(
    val shields: Set<RouteShield>,
    val maneuvers: List<DashManeuver>,
    val onHideUpcomingManeuversClicked: () -> Unit,
)

class DashRouteManeuver(
    val maneuver: Maneuver,
    val formattedStepDistance: Pair<String, String>,
) : DashManeuver

class DashArrivalManeuver(
    val searchResult: DashSearchResult?,
) : DashManeuver
```

The `UpcomingManeuversUiState` class provides details for rendering maneuvers content. Its parameters include:

-   **maneuvers**: Information about the upcoming maneuvers.
-   **shields**: A set of `RouteShield` objects for visual representation.
-   **onHideUpcomingManeuversClicked**: A function to close upcoming maneuvers view.

The `DashRouteManeuver` class provides details for a maneuver. Its parameters include:

-   **maneuver**: Information about the next maneuver.
-   **formattedStepDistance**: A pair of the formatted distance to the next maneuver and units of measurement.

The `DashArrivalManeuver` class provides details for a destination point. Its parameters include:

-   **searchResult**: Information about the destination point.

## Customizing Upcoming maneuvers Content

The `setUpcomingManeuvers` function in `DashNavigationFragment` enables you to define custom content for the upcoming maneuvers view. It accepts a `UpcomingManeuversUiComposer`, which is a composable function with two parameters: `modifier` and `state`. The `modifier` is an instance of [`Modifier`](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier), used for layout adjustments. The `state` is an instance of `UpcomingManeuversUiState`, encapsulating the information needed to render the maneuvers.

### Example Usage

To set a custom maneuver implementation:

```kotlin
fragment.setUpcomingManeuvers { state, modifier ->
    CustomUpcomingManeuversView(state, modifier)
}
```

The `CustomUpcomingManeuversView` composable defines how the maneuvers are displayed using the provided `UpcomingManeuversUiState`.

To revert to the default implementation at runtime:

```kotlin
fragment.setUpcomingManeuvers { state, modifier ->
    DefaultUpcomingManeuversView(state, modifier)
}
```

For additional examples, refer to the [Dash Android Examples repository](https://github.com/mapbox/dash-android-examples).