Intro
In apps designed with hierarchical navigation, sibling navigation can help users to easily navigate between child objects.
Sibling navigation in compact width (left) and regular width (right)
Usage
Do
Use sibling navigation when you have a sequence of objects, such as instructional steps, work orders, or hardware components lists.
Don't
- Don’t use sibling navigation to replace hierarchical navigation, which is used to navigate between parent and child objects. Sibling navigation should only be used to navigate between child objects.
- Don’t use it when there is no sequence of objects in your application.
Anatomy
Sibling navigation uses two existing components — the navigation bar title (two-line title) and toolbar:
A. Info in Navigation Bar
Upper Line: Shows the current and total numbers of the sibling pages Lower Line: Shows the parent name of the sibling pages
B. Buttons in Toolbar
Previous: Brings the user back to the previous child view page
Next: Brings the user to the next child view page
Sibling navigation anatomy
Behavior and Interaction
Adaptive Design
The layouts on both compact and regular follow the standard toolbar behavior and adapt accordingly.
Sibling navigation in compact width (left) and regular width (right)
Variations
Text-Based Sibling Navigation
Text-based sibling navigation is best used if one of the following applies to your app:
- It has a toolbar and action buttons
- It doesn’t have a toolbar
Icon-Based Sibling Navigation
Use icon-based sibling navigation if the following applies to your app:
- It has a toolbar and two or more action buttons
- It has a toolbar that is icon-based
- It is only available for compact width devices
Text-based sibling navigation (left) and icon-based sibling navigation (right)