Steps

Responsive horizontal process steps

Examples

Base

Prev icon

Next icon

Label position

Steps position

Show code

HTMLJS

html

<section>
    <o-field grouped group-multiline>
        <o-field>
            <o-switch v-model="showSocial"> Show Social step </o-switch>
        </o-field>
        <o-field>
            <o-switch v-model="isAnimated"> Animated </o-switch>
        </o-field>
        <o-field>
            <o-switch v-model="isRounded"> Rounded </o-switch>
        </o-field>
        <o-field>
            <o-switch v-model="isVertical"> Vertical </o-switch>
        </o-field>
        <o-field>
            <o-switch v-model="isStepsClickable">
                Clickable Marker
            </o-switch>
        </o-field>
        <o-field>
            <o-switch v-model="hasNavigation">
                Navigation Buttons
            </o-switch>
        </o-field>
        <o-field>
            <o-switch v-model="customNavigation">
                Custom Navigation
            </o-switch>
        </o-field>
        <o-field>
            <o-switch v-model="isProfileSuccess">
                Set <code>success</code> for profile
            </o-switch>
        </o-field>
        <o-field>
            <o-switch v-model="enableProfileActivateEvent">
                Enable profile activate event
            </o-switch>
        </o-field>
    </o-field>

    <o-field v-if="hasNavigation" grouped>
        <o-field label="Prev icon">
            <o-select v-model="prevIcon">
                <option value="chevron-left">Chevron</option>
                <option value="arrow-left">Arrow</option>
            </o-select>
        </o-field>
        <o-field label="Next icon">
            <o-select v-model="nextIcon">
                <option value="chevron-right">Chevron</option>
                <option value="arrow-right">Arrow</option>
            </o-select>
        </o-field>
        <o-field label="Label position">
            <o-select v-model="labelPosition">
                <option value="bottom">Bottom</option>
                <option value="right">Right</option>
                <option value="left">Left</option>
            </o-select>
        </o-field>
        <o-field label="Steps position">
            <o-select v-model="stepsPosition">
                <option value="right">Right</option>
                <option value="left">Left</option>
            </o-select>
        </o-field>
    </o-field>

    <o-steps
        v-model="activeStep"
        :vertical="isVertical"
        :animated="isAnimated"
        :rounded="isRounded"
        :has-navigation="hasNavigation"
        :icon-prev="prevIcon"
        :icon-next="nextIcon"
        :label-position="labelPosition">
        <o-step-item step="1" label="Account" :clickable="isStepsClickable">
            <h1 class="title has-text-centered">Account</h1>
            Lorem ipsum dolor sit amet.
        </o-step-item>

        <o-step-item
            step="2"
            label="Profile"
            :clickable="isStepsClickable"
            :variant="isProfileSuccess ? 'success' : ''"
            @activate="onProfileActivate">
            <h1 class="title has-text-centered">Profile</h1>
            Lorem ipsum dolor sit amet.
        </o-step-item>

        <o-step-item
            step="3"
            :visible="showSocial"
            label="Social"
            :clickable="isStepsClickable">
            <h1 class="title has-text-centered">Social</h1>
            Lorem ipsum dolor sit amet.
        </o-step-item>

        <o-step-item
            :step="showSocial ? '4' : '3'"
            label="Finish"
            :clickable="isStepsClickable"
            disabled>
            <h1 class="title has-text-centered">Finish</h1>
            Lorem ipsum dolor sit amet.
        </o-step-item>

        <template v-if="customNavigation" #navigation="{ previous, next }">
            <o-button
                outlined
                label="Previous"
                variant="danger"
                icon-pack="fas"
                icon-left="backward"
                :disabled="previous.disabled"
                @click.prevent="previous.action" />

            <o-button
                outlined
                label="Next"
                variant="success"
                icon-pack="fas"
                icon-right="forward"
                :disabled="next.disabled"
                @click.prevent="next.action" />
        </template>
    </o-steps>
</section>

html

import { ref } from "vue";

// Is
const activeStep = ref(1);
const isStepsClickable = ref(false);
const isAnimated = ref(true);
const isVertical = ref(false);
const isProfileSuccess = ref(false);
const isRounded = ref(true);
const enableProfileActivateEvent = ref(false);
// Navigation
const hasNavigation = ref(true);
const customNavigation = ref(false);
// Icon
const prevIcon = ref("chevron-left");
const nextIcon = ref("chevron-right");
// Misc
const showSocial = ref(false);
const labelPosition = ref("bottom");
const stepsPosition = ref("left");

const onProfileActivate = () => {
    if (enableProfileActivateEvent.value) {
        alert("Profile Activated");
    }
};

scss

css

Variants

Success

Info

Warning

Danger

Show code

Vertical

Right position

Size

Label position

Show code

HTMLJS

html

<section>
    <o-field grouped>
        <o-field>
            <o-switch v-model="position" true-value="right">
                Right position
            </o-switch>
        </o-field>
        <o-field label="Size">
            <o-select v-model="size" placeholder="Size">
                <option :value="null">Default</option>
                <option value="small">Small</option>
                <option value="medium">Medium</option>
                <option value="large">Large</option>
            </o-select>
        </o-field>
        <o-field label="Label position" label-position="on-border">
            <o-select v-model="labelPosition">
                <option value="bottom">Bottom</option>
                <option value="right">Right</option>
                <option value="left">Left</option>
            </o-select>
        </o-field>
    </o-field>

    <o-steps
        :position="position"
        :label-position="labelPosition"
        :size="size"
        vertical>
        <o-step-item label="Account" icon="user-lock">
            Account: Lorem ipsum dolor sit amet. <br />
            Account: Lorem ipsum dolor sit amet. <br />
            Account: Lorem ipsum dolor sit amet.
        </o-step-item>

        <o-step-item label="Profile" icon="user">
            Profile: Lorem ipsum dolor sit amet. <br />
            Profile: Lorem ipsum dolor sit amet.? <br />
            Profile: Lorem ipsum dolor sit amet. <br />
            Profile: Lorem ipsum dolor sit amet.
        </o-step-item>

        <o-step-item label="Social" icon="user-plus" disabled>
            Social: Lorem ipsum dolor sit amet. <br />
            Social: Lorem ipsum dolor sit amet. <br />
            Social: Lorem ipsum dolor sit amet. <br />
            Social: Lorem ipsum dolor sit amet. <br />
            Social: Lorem ipsum dolor sit amet.
        </o-step-item>
    </o-steps>
</section>

html

import { ref } from "vue";

const labelPosition = ref("bottom");
const position = ref(null);
const size = ref(null);

scss

css

Class props

How does the Class props inspector work?

Class prop	Description	Props	Suffixes
animatedClass	Class of Steps component when animation gets triggered.	`animated`
▷ itemClass	Class of the content item.
▷ itemHeaderActiveClass	Class of the nav item when active.
▷ itemHeaderClass	Class of the nav item. 🔍 Classes applied have a higher specificity than expected when positionClass* is applied*
▷ itemHeaderPreviousClass	Class of the nav item behind the active one.
▷ itemHeaderVariantClass	Class of the nav item with variant (default value by parent steps component).	`variant`	`primary info warning danger`
mobileClass	Class of steps component when on mobile. 👉 Switch to mobile view to see it in action!
positionClass	Class of the Steps component when is vertical and its position changes.	`position vertical`	`bottom left right`
rootClass	Root class of the element.
sizeClass	Size of the steps.	`size`	`small medium large`
stepContentClass	Class of the Steps component content. 🔍 Classes applied have a higher specificity than expected when positionClass* is applied*
stepContentTransitioningClass	Class of the Steps component content when transition is happening. 👉 Click on a marker to see it in action
stepDividerClass	Class of the Steps component dividers. 🔍 Classes applied have a higher specificity than expected when mobileClass* or itemHeaderActiveClass or itemHeaderPreviousClass or positionClass is applied*
stepLinkClass	Class of the Steps component link. 🔍 Classes applied have a higher specificity than expected when itemHeaderActiveClass* is applied*
stepLinkClickableClass	Class of the Steps component link when clickable.	`clickable`
stepLinkLabelClass	Class of the Step component link label.
stepLinkLabelPositionClass	Class of the Step component link label when positioned.	`labelPosition`	`bottom right left`
stepMarkerClass	Class of the Steps component marker. 🔍 Classes applied have a higher specificity than expected when itemHeaderActiveClass* or itemHeaderPreviousClass is applied*
stepMarkerRoundedClass	Class of the Steps markers trigger when are rounded.	`rounded`
stepNavigationClass	Class of the Steps component navigation element. 🔍 Classes applied have a higher specificity than expected when positionClass* is applied*
stepsClass	Class of the steps container. 🔍 Classes applied have a higher specificity than expected when positionClass* is applied*
verticalClass	Class of the tooltip trigger.	`vertical`

Steps component

html

<o-steps></o-steps>

Props

Prop name	Description	Type	Values	Default
animated	Step navigation is animated	boolean	-	true
ariaNextLabel		string	-
ariaPreviousLabel		string	-
hasNavigation	Next and previous buttons below the component. You can use this property if you want to use your own custom navigation items.	boolean	-	true
iconNext	Icon to use for navigation button	string	-	From config: `steps: { iconNext: 'chevron-right' }`
iconPack	Icon pack to use for the navigation	string	`mdi`, `fa`, `fas and any other custom icon pack`
iconPrev	Icon to use for navigation button	string	-	From config: `steps: { iconPrev: 'chevron-left' }`
labelPosition	Position of the marker label, optional	string	`bottom`, `right`, `left`	'bottom'
mobileBreakpoint	Mobile breakpoint as max-width value	string	-
override		boolean	-
rounded	Rounded step markers	boolean	-	true

Slots

Name	Description	Bindings
default
navigation

StepItem component

html

<o-step-item></o-step-item>

Props

Prop name	Description	Type	Values	Default
clickable	Item can be used directly to navigate. If undefined, previous steps are clickable while the others are not	boolean	-	undefined
override		boolean	-
step	Step marker content (when there is no icon)	string\|number	-
variant	Default style for the step, optional This will override parent type. Could be used to set a completed step to "success" for example	string\|object	-

Sass variables

Current theme ➜ Oruga Base

SASS Variable	Default
$steps-details-background-color	hsl(0, 0%, 100%)
$steps-details-padding	0.2em
$steps-marker-background	$grey-light
$steps-marker-color	$primary-invert
$steps-marker-border	0.2em solid #fff
$steps-marker-font-weight	700
$steps-marker-rounded-border-radius	$base-rounded-border-radius
$steps-color	$grey-lighter
$steps-previous-color	$primary
$steps-active-color	$primary
$steps-divider-height	0.2em
$steps-vertical-padding	1em 0
$steps-item-line-height	$base-line-height
$steps-link-color	hsl(0, 0%, 29%)
$steps-content-padding	1rem
$steps-font-size	$base-font-size
$steps-details-title-font-weight	600

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

SASS Variable	Default
$steps-details-background-color	hsl(0, 0%, 100%)
$steps-details-padding	0.2em
$steps-marker-background	$grey-light
$steps-marker-color	$primary-invert
$steps-marker-border	0.2em solid #fff
$steps-marker-font-weight	700
$steps-marker-rounded-border-radius	$base-rounded-border-radius
$steps-color	$grey-lighter
$steps-previous-color	$primary
$steps-active-color	$primary
$steps-divider-height	0.2em
$steps-vertical-padding	1em 0
$steps-item-line-height	$base-line-height
$steps-link-color	hsl(0, 0%, 29%)
$steps-content-padding	1rem
$steps-font-size	$base-font-size
$steps-details-title-font-weight	600

See ➜ 📄 Full scss file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

SASS Variable	Default
$steps-marker-bg	var(--#{$prefix}gray-light)
$steps-marker-border	var(--#{$prefix}white)
$steps-marker-color	var(--#{$prefix}white)
$steps-color-active	var(--#{$prefix}primary)
$steps-title-color	var(--#{$prefix}dark)
$steps-title-bg	var(--#{$prefix}white)
$steps-divider-height	0.2em
$steps-content-spacer	1rem
$steps-content-padding	1rem
$steps-vertical-padding	1em 0

See ➜ 📄 Full scss file

Steps ​

Examples ​

Base

Account

Profile

Social

Finish

Variants

Vertical

Class props ​

Account

Profile

Social

Class prop

Description

Props

Suffixes

Steps component ​

Props ​

Slots ​

StepItem component ​

Props ​

Sass variables ​

Steps

Examples

Class props

Steps component

Props

Slots

StepItem component

Props

Sass variables