Card Navigation

Most Gmail add-ons are built using multiple
cards. To have an effective user experience,
you should use simple and natural navigation between cards in your add-on.

Basic navigation

An add-on that uses a contextual trigger builds and returns an array of one
or more Card
objects that the Gmail UI displays.
If there is only one card, Gmail displays it. Otherwise, Gmail auotmatically
presets the card headers in a list when the add-on opens. When the user
clicks any of those headers, Gmail displays the corresponding card.

When the user selects a card from the list, the UI switches to that card and
provides a back arrow in the card's header row. Selecting this back arrow
takes the user back to the card header list.

This 'flat' card arrangement works well if your add-on doesn't need any
transitions between cards you create. In these cases, no extra work is
necessary to create effective card navigation controls.

Card stack navigation

You can also create transitions between cards as you build your add-on's UI.
The UI places the cards that are displayed in an internal stack that you can
control. After a card is pushed or popped from the stack, the UI automatically
displays the top card of the stack. It is possible to push or pop multiple
cards simultaneously. The cards added when
the add-on is first opened are the root cards. Root cards can't
be removed.

The Navigation
class provides functions to push and pop cards from the stack. To build
effective card navigation, you configure your
widgets to use navigation
actions.

To navigate to a new card when a widget is selected, you must do the following: