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.
List template included in the Map + Content template
2
The user taps the chosen stop.
List template included in the Map + Content template
2
The user clicks the Navigate button to start
navigation.
Pane template included in the Map + Content template
3
The stop is added to the route and the app informs the user with a
navigation alert.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-07-23 UTC."],[[["\u003cp\u003eTransition seamlessly from the Navigation template to the Map + Content template to display a compact list of places while retaining turn-by-turn directions in a floating navigation bar.\u003c/p\u003e\n"],["\u003cp\u003eThis transition is ideal for adding a stop during an active route, where users can view options in a list and maintain visibility of their navigation instructions.\u003c/p\u003e\n"],["\u003cp\u003eThe step count remains efficient, increasing only when a new template is introduced or an action significantly alters the content, and not simply for refreshes within the same template.\u003c/p\u003e\n"]]],[],null,["\u003cbr /\u003e\n\nYou can transition from the\n[Navigation template](/cars/design/create-apps/apps-for-drivers/templates/navigation-template)\nto the [Map + Content template](/cars/design/create-apps/apps-for-drivers/templates/map-content-template)\nto show a compact list of places without losing the turn information.\n\nThe turn information on the routing card is condensed into a floating navigation\nbar that moves to the side and remains visible.\n\nSample flow\n\nThe user is using the app. They decide to add a stop to their journey.\n\n| User action | Where action is performed | Step count after action |\n|------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------|\n| The user taps an action to add a stop during an active route. | Navigation template | 1 |\n| 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. | List template included in the Map + Content template | 2 |\n| The user taps the chosen stop. | List template included in the Map + Content template | **Note:** Because the content of the map template does not change, this is considered a refresh and does not add to the step count. | 2 |\n| The user clicks the **Navigate** button to start navigation. | Pane template included in the Map + Content template | 3 |\n| The stop is added to the route and the app informs the user with a [navigation alert](/cars/design/create-apps/apps-for-drivers/templates/navigation-template#alerts). | Navigation template | 1 |"]]
