In the apps that designed with hierarchical navigation, the Sibling navigation pattern can help users easily navigate in the sequence of child objects.

Usage

Use when you have a sequence of objects, such as instructional steps, work orders, or hardware components list.

Don’t use to replace hierarchical navigation. Sibling navigation, as its name suggests, it should always be using to navigate between child objects. For navigating between parent and child objects, please use hierarchical navigation.

Don’t use when there will not be a sequence of objects presenting in your app.

Structure

The Sibling Navigation pattern is using two existing components — Navigation Bar Title (2-line) and Toolbar:

A.  Sibling Navigation – Info

• Upper Line: Shows the current & total numbers of the sibling pages
• Lower Line: Shows the parent name of the sibling pages

B.  Sibling Navigation – Controls

• Previous: Go to the previous child view page
• Next: Go to the next child view page

Variations

Types

Based on the style of your toolbar, choosing the text or icon style of the Sibling Navigation control accordingly:

Text-based:
Choose this type if your app currently:

• has a toolbar and has one action button
• doesn’t have a toolbar

Icon-based:

Choose this type if your app currently:

• has a toolbar and it has two or more action buttons
• has a toolbar and it’s icon-based
• Your app only provides iPhone version, not both iPhone and iPad versions [1]

[1] Icon-based toolbar is recommended to be used only for the iPhone version. For the iPad version, it’s recommended to use text-based toolbar, as it has more space to show the complete text string.

Behavior & Interaction

Adaptivity

The layouts on both compact and regular will all follow the standard Toolbar and adapt accordingly.