DEX-31 Process stepper

Process Stepper

The Process Stepper component displays a numbered sequence of steps, helping users follow a process in the correct order. Each step is configured as a child item within the component datasource and can contain its own content and supported nested components.

Jira Ticket

DEX-31 – Process Stepper

Supported Page Types

Content authors can add the Process Stepper component to the following page types:

• Landing Page
• Content Page
• Content Page with Side Navigation

How to Configure Process Stepper in Sitecore

1. Log in to Sitecore as an Author, Approver, or Administrator.
2. Open Experience Editor and navigate to the page where you want to add the component.
3. Add the Process Stepper component to the main placeholder.
4. Create a new datasource in the page's local Data folder or select an existing datasource.
5. Configure the Process Stepper datasource fields.
6. Add Process Stepper Item child items beneath the datasource, with each item representing a step in the process.
7. Configure the fields for each step.
8. Save and publish the page.

Component Fields

Process Stepper Datasource

Process Stepper Item

Additional Information

• The component supports 2 to 9 steps.
• Steps are displayed in the same order as they appear in the content tree.
• Reordering step items automatically updates the displayed numbering.
• Each step includes its own placeholder, allowing authors to add supported components such as images, downloads, and callouts.
• The same datasource can be reused on multiple pages.
• If fewer than 2 steps are configured, the component will not render on the published page.
• If more than 9 steps are configured, only the first 9 steps will be displayed.

Demo Video

Video link

Result

The configured steps are displayed as a numbered sequence, providing users with a clear and structured process. Any content added within a step is displayed directly beneath that step, allowing authors to enrich the process with supporting information and components.

The example below demonstrates a Process Stepper configured with three steps, showing how content is presented to users in a sequential and easy-to-follow format.