UI Components Navigation & Search Sibling Navigation

Updated: August 21, 2024

Sibling Navigation

FUIPageViewController

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

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

Development: FUIPageViewController

Related Foundation: Navigation