UI Components Navigation & Search Sibling Navigation

Updated: March 30, 2023

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 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

The sibling navigation pattern uses two existing components — navigation bar title (two-line title) and toolbar:

A. Info

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

 

B. Controls

• Previous: Brings the user back to the previous child view page
• Next: Brings the user to the next child view page

Sibling navigation anatomy
Sibling navigation anatomy

Behavior and Interaction

When the user navigates 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

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 an action button
  • 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
Information

We recommend using the icon-based toolbar only for compact width devices. For regular widths, we recommend using 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