With the navigation component, when should mode=back and when mode=close be used?
The hamburger icon is present on any view listed in the drawer. These views are main destinations. Other views trickle down to deeper levels within the app's hierarchy. Deeper level views go together with either a back or close icon.
When using the mode=back view attribute, a back icon is displayed. This is the most common mode and therefor also the default. Use this for destinations that are nested within each other. E.g. All groups (hamburger icon) > Specific group with items (back icon) > Specific item (back icon).
When using the mode=close view attribute, a close icon is displayed. Use this for views that would normally have a creation action (E.g. "Save", "Add" or "Create") as well as a discard action (E.g. "Cancel"). When added to a flow, it might look something like this: All groups (hamburger icon) > Specific group with items (back icon) > Add new item (close icon).
2 Likes