---
emphasized: true
meta:
  nav: Steppers Vertical
  title: Vertical Stepper component
  description: The vertical stepper component is a navigation element that guides users through a sequence of steps.
  keywords: vertical stepper, vuetify vertical stepper component, vue vertical stepper component
related:
  - /components/buttons/
  - /components/icons/
  - /styles/transitions/
features:
  label: 'C: VStepperVertical'
  github: /components/VStepperVertical/
  report: true
---

# 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

| Component | Description |
| - | - |
| [v-stepper-vertical](/api/v-stepper-vertical/) | Primary Component |

<ApiInline hide-links />

### Guide

The `v-stepper-vertical` is the vertical variant of the [v-stepper](/components/steppers/) component. It also extends functionality of [v-expansion-panels](/components/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" />
