Process steps

Process Steps — Configurable Horizontal Step Navigator

Guide learners through a process, journey, or workflow with a horizontal step navigator supporting 3–8 steps, each with its own content card. Ideal for onboarding paths, procedures, learning journeys, and any sequential explanation where seeing the whole path at a glance matters.

Each step holds an ordered set of content items you arrange freely: rich text, an image with alt text, audio with a custom scrubbable player and optional transcript, and video (uploaded, YouTube, or Vimeo) with the same controls and optional transcript. Drag to reorder, and mix multiple items of the same type within a step. Steps authored in older versions of this block keep working and displaying exactly as before, so existing courses are unaffected when you update.

Choose Free or Sequential navigation (later steps stay locked until earlier ones are visited), mark completion on load or once every step has been seen, and optionally show visited checkmarks, auto-play a step's media, and reveal navigation arrows on hover.

Make it yours with content-card and accent colors (including a transparent card), adjustable corner radius, eight connector styles, four marker shapes, and configurable step-label size and color. Fully keyboard-operable with proper labels for screen-reader users, and the step row auto-scales to fit the space your lesson gives it.

The Learning path preset starts with six steps. Learners see a horizontal row with numbered circle markers and arrow connectors.

It starts in sequential mode, so later steps stay locked until earlier steps are visited. Visited steps can show checkmarks, and completion can wait until every step has been seen.

For each step, fill in the step label and the content card. Add a heading, description, and ordered content.

Content can be rich text and media. Media can be an image, audio, or video. Add image alt text and transcripts where the media needs them.

Use drag order when a step needs more than one content item. The preset includes sample audio and an image asset.

Learners click a marker to open that step's card. They can also use next and previous controls when navigation arrows are shown.

Use free navigation when the order can be explored on demand. Use sequential navigation when the path should reveal in order. The row keeps the whole workflow visible while learners read the current card.

Pick Interactive flow chart when learners need to explore choices, consequences, and branching outcomes.

Pick Horizontal timeline or Timeline when your content is a series of events or milestones. Pick Numbered slide carousel for a short sequence of points, rules, or practices.