Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Pattern Library
Step nav

Step navigation allows learners to progress through the individual steps of the week. It includes a step title and step type, and an arrow icon to indicate next and previous directions.

The next arrow has a subtle animation, which activates when progress toggle button is pressed. The animation is added to encourage learners to progress to the next step.

.m-step-nav
  = render partial: 'steps/step_nav_link', locals: { direction: 'next', label: 'What makes a moon?', sub_label: 'Article', path: '#'}
  = render partial: 'steps/step_nav_link', locals: { direction: 'previous', label: 'Forming other moons', sub_label: 'Article', path: '#'}