In apps designed with hierarchical navigation, the sibling navigation pattern can help users to easily navigate between child objects.

Usage

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

Don’t use it 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 not a sequence of objects in your application.

Anatomy

The Sibling Navigation pattern uses 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: Goes to the previous child view page
• Next: Goes to the next child view page

Behavior and Interaction

Adaptive Design

The layouts on both compact and regular follow the standard toolbar behavior and adapt accordingly.

Variations

Types

Based on the style of your toolbar, choose the text or icon style of the sibling navigation control as follows:

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

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

Icon-based:

Choose this type if your app currently…

• has a toolbar and two or more action buttons
• has a toolbar which is icon-based
• only provides a version for iPhone (and no version for iPad)

Resources

Related Foundation: Navigation

Development: FUIPageViewController