• A step progress indicator should at least show two steps.
• Use dynamic steps for sub-steps and steps which are dependent on default steps.
• Displaying a partial view of the last step on the screen for a scrollable step progress indicator is highly recommended.
• Keep step names short – we recommend no more than two lines of text.

• Try to avoid showing both header and step names under step nodes.
• Don’t count dynamic steps in the total number of steps.
• Don’t show a partial view of a step on the screen if the step progress indicator is not scrollable.

A. Current Step Name (Optional)

Describes the current step’s name.

B. “All Steps” Button (Optional)

Allows users to view all steps on another screen.

C. Step Node

Displays the number or icon representing a step in the user flow.

D. Step Line

A line that connects the current step with the next step. No step line for the final step.

E. Step Name (Optional)

Describes each step’s name.

A. Step Node

Displays the number or icon representing a step in the user flow.

B. Step Line

A line that connects the current step with the next step. No step line for the final step.

C. Step Name

Describes each step’s name.

Step Navigation

If a step progress indicator contains more steps than one screen can show, users can drag horizontally to view more steps.

When users complete the last step on one screen and try to navigate to the next step, the step progress indicator automatically scrolls to the next screen with the selected step pinned as the first step on the screen. However, if the last auto-scroll screen contains the final step, the progress indicator bar is right aligned. 

A step progress indicator may contain the following value states of a step: default, active, complete, error, error active, and disabled.

Numeric steps default to a step progress indicator, which indicates the corresponding step number in the process, such as step “1”, “2”, and so on. The number should not exceed three digits because of limited space in the node. Numeric steps cannot be used together with icon steps. 

Icon steps can be used to replace the numeric steps, and the default icon size is 16pt. The icon can be swapped with any SAP Fiori icons depending on the user’s needs. Icon steps cannot be combined with numeric steps. 

Dynamic steps can be used as sub-steps, such as step “2.1”, “2.2”, and so on. It may also be used for a step that depends on certain user action during a previous default step, and is only displayed after the action is taken, such as choosing an option in a form.