Updated: January 27, 2022

Sibling Navigation

FUIPageViewController

Intro

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

 

Sibling navigation in compact width (left) and regular width (right)
Sibling navigation in compact width (left) and regular width (right)

Usage

Do

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

Don't

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

Sibling navigation anatomy
Sibling navigation anatomy

Behavior and Interaction

When navigating to the next child view via sibling navigation, the child view will be presented by push transition.

Navigating to next and previous child objects via sibling navigation
Navigating to next and previous child objects via sibling navigation

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)
Sibling navigation in compact width (left) and regular width (right)

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)
Information
The icon-based toolbar is recommended to be used only for the iPhone version. For iPad version, it is recommended to use a text-based toolbar, as it has more space to show the complete text string.
Text-based sibling navigation (left) and icon-based sibling navigation (right)
Text-based sibling navigation (left) and icon-based sibling navigation (right)

Resources

Related Foundation: Navigation

Development: FUIPageViewController