Steps

current is the index of the step in progress. Everything before it is complete and gets a tick; everything after is still to come. The current one is marked aria-current="step", so it is announced as well as coloured.

Basic steps

  1. Install

  2. Write a page

  3. Build

  4. Deploy

steps({
  current: 1,
  items: [
    { title: 'Install' },
    { title: 'Write a page' },
    { title: 'Build' },
    { title: 'Deploy' },
  ],
})

With descriptions

  1. Install

    npm install -D sitelo

  2. Write a page

    src/index.ht.js

  3. Build

    sitelo build

  4. Deploy

    Publish dist/

steps({
  current: 2,
  items: [
    { title: 'Install', description: 'npm install -D sitelo' },
    { title: 'Write a page', description: 'src/index.ht.js' },
    { title: 'Build', description: 'sitelo build' },
    { title: 'Deploy', description: 'Publish dist/' },
  ],
})

Vertical

Better when the descriptions are longer than a few words.

  1. Add the package

    sitelo brings its own Vite, so there is nothing else to install.

  2. Write a function that returns HTML

    One file under src/ is a whole site.

  3. Publish the output

    dist/ is plain static files — any host will take them.

steps({
  direction: 'vertical',
  current: 1,
  items: [
    { title: 'Add the package', description: 'sitelo brings its own Vite, so there is nothing else to install.' },
    { title: 'Write a function that returns HTML', description: 'One file under src/ is a whole site.' },
    { title: 'Publish the output', description: 'dist/ is plain static files — any host will take them.' },
  ],
})

Nothing done yet

  1. Install

  2. Configure

  3. Deploy

steps({ current: 0, items: ['Install', 'Configure', 'Deploy'] })

All done

Set current past the last index and every step reads as complete.

  1. Install

  2. Configure

  3. Deploy

steps({ current: 3, items: ['Install', 'Configure', 'Deploy'] })

On a phone

A horizontal row has nowhere to go on a narrow screen, so it turns vertical on its own below 40rem — no prop needed. Narrow this window to see it.

Labelling it

The list is an <ol>, which already carries the order. Add label when the page has more than one set of steps and they need telling apart.

  1. Build

  2. Upload

  3. Invalidate cache

steps({
  label: 'Deployment progress',
  current: 1,
  items: ['Build', 'Upload', 'Invalidate cache'],
})

Props

PropTypeDefaultDescription
itemsArray[]Strings, or { title, description } objects.
currentnumber0Index of the step in progress.
direction'horizontal' | 'vertical''horizontal'Layout. Horizontal turns vertical under 40rem.
labelstring—Accessible name for the list.