NavigationStepper

The steps of a process, linear or not, with the current step optionally in the URL.

import { NavigationStepper } from '@zairakai/vue-components/Navigation'

Usage

<NavigationStepper />

Example

2. 2AddressWhere to ship
3. 3Payment

<script setup>
  import { ref } from 'vue'

  const step = ref(1)
  const steps = [{ label: 'Account' }, { label: 'Address', description: 'Where to ship' }, { label: 'Payment' }]
</script>

<template>
  <NavigationStepper
    v-model="step"
    :steps="steps"
  />
</template>

Props

Name	Type	Default	Description
id	string
class	string
steps	array	[]	The steps: { id, label, description }.
modelValue	number	undefined	The index of the current step, starting at 0.
linear	boolean	true	In a linear stepper only the completed steps can be reached again.
orientation	string	'horizontal'
queryParam	string		Keep the current step in this query parameter of the URL (?step=2).
label	string

Events

Name	Description
update:modelValue

Slots

Name	Description
marker

See Theming for the class hooks and the data-* state of the components.