Steps

Component

Note: upcoming steps that are neither :visited nor :active are :disabled by default

Also note: active steps are both active & visited. Active is seen as a transitory step that augments a visited step's appearance.

1
Donation (link)
2
Your Info (span)
3
Payment (span)
Receipt (span)

= ui.nfg :steps do
  = ui.nfg :step, :visited, step: 1, body: 'Donation (link)', href: '#back'
  = ui.nfg :step, :active, step: 2, body: 'Your Info (span)'
  = ui.nfg :step, step: 3, body: 'Payment (span)'
  = ui.nfg :step, icon: 'check', body: 'Receipt (span)'

<ul class="nav nav-fill nav-steps">
  <li class="nav-item visited"><a class="nav-link" href="#back">
      <div class="step-indicator">1</div>
      <p class="mt-1 mb-0 step-text text-muted font-size-sm">Donation (link)</p>
    </a></li>
  <li class="nav-item active visited"><span class="nav-link">
      <div class="step-indicator">2</div>
      <p class="mt-1 mb-0 step-text text-muted font-size-sm">Your Info (span)</p>
    </span></li>
  <li class="nav-item disabled" tabindex="-1"><span class="nav-link disabled" tabindex="-1">
      <div class="step-indicator">3</div>
      <p class="mt-1 mb-0 step-text text-muted font-size-sm">Payment (span)</p>
    </span></li>
  <li class="nav-item disabled" tabindex="-1"><span class="nav-link disabled" tabindex="-1">
      <div class="step-indicator"><i aria-hidden="true" class="fa fa-check"></i></div>
      <p class="mt-1 mb-0 step-text text-muted font-size-sm">Receipt (span)</p>
    </span></li>
</ul>

Steps without bodies

1
2
3
Verify verticality

= ui.nfg :steps do
  = ui.nfg :step, :visited, step: 1, href: '#back'
  = ui.nfg :step, :active, step: 2
  = ui.nfg :step, step: 3, body: 'Verify verticality', href: '#test'
  = ui.nfg :step, icon: 'check'

<ul class="nav nav-fill nav-steps">
  <li class="nav-item visited"><a class="nav-link" href="#back">
      <div class="step-indicator">1</div>
    </a></li>
  <li class="nav-item active visited"><span class="nav-link">
      <div class="step-indicator">2</div>
    </span></li>
  <li class="nav-item disabled" tabindex="-1"><a class="nav-link disabled" href="#test" tabindex="-1">
      <div class="step-indicator">3</div>
      <p class="mt-1 mb-0 step-text text-muted font-size-sm">Verify verticality</p>
    </a></li>
  <li class="nav-item disabled" tabindex="-1"><span class="nav-link disabled" tabindex="-1">
      <div class="step-indicator"><i aria-hidden="true" class="fa fa-check"></i></div>
    </span></li>
</ul>