Vertical Steppers

The v-stepper-vertical component can be used as a navigation element that guides users through a sequence of steps.

Copy Page as Markdown

Installation

Labs components require manual import and registration with the Vuetify instance.

import {
  VStepperVertical,
  VStepperVerticalItem,
  VStepperVerticalActions,
} from 'vuetify/labs/VStepperVertical'

export default createVuetify({
  components: {
    VStepperVertical,
    VStepperVerticalItem,
    VStepperVerticalActions,
  },
})

Usage

Vertical steppers allow users to complete a series of actions in step order.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!

<v-stepper-vertical :items="['Step 1', 'Step 2', 'Step 3']"></v-stepper-vertical>

ads via vuetify

API

Component	Description
v-stepper-vertical	Primary Component

Toggle Inline API

Guide

The v-stepper-vertical is the vertical variant of the v-stepper component. It also extends functionality of v-expansion-panels.

Props

Non linear

Non-linear stepper allow the user to navigate freely – skip to a desired section without forcing clicks on the action buttons within, provided editable prop is also present. When combined with :mandatory="false", allowes to collapse the section as well.

Step content