Back to Vuetify

Vertical Steppers

packages/docs/src/pages/en/components/vertical-steppers.md

4.2.01.2 KB
Original Source

Vertical Steppers

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

<PageFeatures />

Usage

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

<ExamplesUsage name="v-stepper-vertical" /> <PromotedEntry />

API

ComponentDescription
v-stepper-verticalPrimary Component
<ApiInline hide-links />

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.

<ExamplesExample file="v-stepper-vertical/prop-non-linear" />

Slots

The v-stepper-vertical component has several slots for customization.

Actions

Customize the flow of your stepper by hooking into the available prev and next slots.

<ExamplesExample file="v-stepper-vertical/slot-actions" />