You can transition from the Navigation template to the Map template to show a compact list of places without losing the turn information.
The turn information on the routing card is condensed into a floating navigation bar that moves to the side and remains visible.
Sample flow
The user is using the app. They decide to add a stop to their journey.
User action | Where action is performed | Step count after action |
---|---|---|
The user taps an action to add a stop during an active route. | Navigation template
![]() |
1 |
A compact list appears, showing the available options to add a stop, while the turn information shrinks into a floating navigation bar and moves to the side. | Map template
![]() |
2 |
The user taps the desired stop. | Map template
![]() |
2 |
The stop is added to the route and the app informs the user with a navigation alert. | Navigation template
![]() |
3 |