Arrow Steps

This widget is used to display a sequence of steps in a horizontal line with arrows between them. It is useful for showing a multi-step process or a timeline.

It can be used with fields json and it must return the following structure:

[
  {
    "title": "Step 1",
    "active": true
  },
  {
    "title": "Step 2",
    "active": false
  },
  {
    "title": "Step 3",
    "active": false
  }
]

<field name="steps" widget="arrow_steps" />

Step 1
Step 2
Step 3

With icons

If you want to add an icon before step text, just only add attribute icon on desired json structure. It’s not mandatory add icon on all steps:

[
  {
    "title": "Step 1",
    "active": true,
    "icon": "home"
  },
  {
    "title": "Step 2",
    "active": false,
  },
  {
    "title": "Step 3",
    "active": false
  },
  {
    "title": "Step 4",
    "active": false,
    "icon": "check"
  }
]

Step 1
Step 2
Step 3
Step 4