Steps

Responsive horizontal process steps

Account

Lorem ipsum dolor sit amet.
<template>
    <section>
        <div class="block">
            <b-field grouped group-multiline>
                <div class="control">
                    <b-switch v-model="showSocial"> Show Social step </b-switch>
                </div>
                <div class="control">
                    <b-switch v-model="isAnimated"> Animated </b-switch>
                </div>
                <div class="control">
                    <b-switch v-model="isRounded"> Rounded </b-switch>
                </div>
                <div class="control">
                    <b-switch v-model="isStepsClickable"> Clickable Marker </b-switch>
                </div>
            </b-field>
            <b-field grouped group-multiline>
                <div class="control">
                    <b-switch v-model="hasNavigation"> Navigation Buttons </b-switch>
                </div>
                <div class="control">
                    <b-switch v-model="customNavigation"> Custom Navigation </b-switch>
                </div>
                <div class="control">
                    <b-switch v-model="isProfileSuccess"> Set <code>is-success</code> for profile </b-switch>
                </div>
            </b-field>
            <b-field v-if="hasNavigation" grouped group-multiline>
                <b-field label="Prev icon">
                    <b-select v-model="prevIcon">
                        <option value="chevron-left">Chevron</option>
                        <option value="arrow-left">Arrow</option>
                    </b-select>
                </b-field>
                <b-field label="Next icon">
                    <b-select v-model="nextIcon">
                        <option value="chevron-right">Chevron</option>
                        <option value="arrow-right">Arrow</option>
                    </b-select>
                </b-field>
                <b-field label="Label position">
                    <b-select v-model="labelPosition">
                        <option value="bottom">Bottom</option>
                        <option value="right">Right</option>
                        <option value="left">Left</option>
                    </b-select>
                </b-field>
                <b-field label="Mobile mode">
                    <b-select v-model="mobileMode">
                        <option :value="null">-</option>
                        <option value="minimalist">Minimalist</option>
                        <option value="compact">Compact</option>
                    </b-select>
                </b-field>
            </b-field>
        </div>
        <b-steps
            v-model="activeStep"
            :animated="isAnimated"
            :rounded="isRounded"
            :has-navigation="hasNavigation"
            :icon-prev="prevIcon"
            :icon-next="nextIcon"
            :label-position="labelPosition"
            :mobile-mode="mobileMode">
            <b-step-item step="1" label="Account" :clickable="isStepsClickable">
                <h1 class="title has-text-centered">Account</h1>
                Lorem ipsum dolor sit amet.
            </b-step-item>

            <b-step-item step="2" label="Profile" :clickable="isStepsClickable" :type="{'is-success': isProfileSuccess}">
                <h1 class="title has-text-centered">Profile</h1>
                Lorem ipsum dolor sit amet.
            </b-step-item>

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

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

            <template
                v-if="customNavigation"
                slot="navigation"
                slot-scope="{previous, next}">
                <b-button
                    outlined
                    type="is-danger"
                    icon-pack="fas"
                    icon-left="backward"
                    :disabled="previous.disabled"
                    @click.prevent="previous.action">
                    Previous
                </b-button>
                <b-button
                    outlined
                    type="is-success"
                    icon-pack="fas"
                    icon-right="forward"
                    :disabled="next.disabled"
                    @click.prevent="next.action">
                    Next
                </b-button>
            </template>
        </b-steps>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                activeStep: 0,

                showSocial: false,
                isAnimated: true,
                isRounded: true,
                isStepsClickable: false,

                hasNavigation: true,
                customNavigation: false,
                isProfileSuccess: false,

                prevIcon: 'chevron-left',
                nextIcon: 'chevron-right',
                labelPosition: 'bottom',
                mobileMode: 'minimalist'
            }
        }
    }
</script>

# Dynamic

Items can be created / modified / deleted and will always keep the defined order.

You can also use v-if to show (or not) a Step Item.

Pictures: Lorem ipsum dolor sit amet.
<template>
    <section>
        <div class="block">
            <b-switch v-model="showMusic"> Show Music item (using <code>v-if</code>) </b-switch>
        </div>
        <div class="block">
            <b-switch v-model="showBooks"> Show books item (by adding / removing from the array) </b-switch>
        </div>
        <div class="block">
            <b-switch v-model="showGames"> Show games item (by using the visible property) </b-switch>
        </div>
        <b-steps v-model="activeStep">
            <template v-for="(step, index) in steps">
                <b-step-item
                    v-if="step.displayed"
                    :key="index"
                    :visible="step.visible"
                    :label="step.label">
                    {{ step.content }}
                </b-step-item>
            </template>
        </b-steps>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                activeStep: 0,
                showMusic: true,
                showBooks: false,
                showGames: false
            }
        },
        computed: {
            baseSteps() {
                return [
                    {
                        label: 'Pictures',
                        content: 'Pictures: Lorem ipsum dolor sit amet.',
                        displayed: true,
                    },
                    {
                        label: 'Music',
                        content: 'Music: Lorem ipsum dolor sit amet.',
                        displayed: this.showMusic,
                    },
                    {
                        label: 'Games',
                        content: 'Games: Lorem ipsum dolor sit amet.',
                        displayed: true,
                        visible: this.showGames
                    },
                    {
                        label: 'Videos',
                        content: 'Videos: Lorem ipsum dolor sit amet.',
                        displayed: true,
                    }
                ]
            },
            steps() {
                const steps = [...this.baseSteps]
                if (this.showBooks) {
                    steps.splice(steps.length - 1, 0, this.bookStep);
                }
                return steps
            },
            bookStep() {
                return {
                    label: 'Books',
                    content: 'Books: Lorem ipsum dolor sit amet.',
                    displayed: true,
                }
            }
        }
    }
</script>

# Icons

<template>
    <b-steps>
        <b-step-item label="Account" icon="account-key"></b-step-item>
        <b-step-item label="Profile" icon="account"></b-step-item>
        <b-step-item label="Social" icon="account-plus"></b-step-item>
    </b-steps>
</template>

# Sizes

<template>
    <section>
        <b-steps size="is-small">
            <b-step-item label="Account" icon="account-key"></b-step-item>
            <b-step-item label="Profile" icon="account"></b-step-item>
            <b-step-item label="Social" icon="account-plus"></b-step-item>
        </b-steps>

        <b-steps size="is-medium">
            <b-step-item label="Account" icon="account-key"></b-step-item>
            <b-step-item label="Profile" icon="account"></b-step-item>
            <b-step-item label="Social" icon="account-plus"></b-step-item>
        </b-steps>

        <b-steps size="is-large">
            <b-step-item label="Account" icon="account-key"></b-step-item>
            <b-step-item label="Profile" icon="account"></b-step-item>
            <b-step-item label="Social" icon="account-plus"></b-step-item>
        </b-steps>
    </section>
</template>

# Types

<template>
    <section>
        <b-steps type="is-black">
            <b-step-item label="Account" icon="account-key"></b-step-item>
            <b-step-item label="Profile" icon="account"></b-step-item>
            <b-step-item label="Social" icon="account-plus"></b-step-item>
        </b-steps>

        <b-steps type="is-info">
            <b-step-item label="Account" icon="account-key"></b-step-item>
            <b-step-item label="Profile" icon="account"></b-step-item>
            <b-step-item label="Social" icon="account-plus"></b-step-item>
        </b-steps>

        <b-steps type="is-success">
            <b-step-item label="Account" icon="account-key"></b-step-item>
            <b-step-item label="Profile" icon="account"></b-step-item>
            <b-step-item label="Social" icon="account-plus"></b-step-item>
        </b-steps>
    </section>
</template>

# Vertical

Account: Lorem ipsum dolor sit amet.
Account: Lorem ipsum dolor sit amet.
Account: Lorem ipsum dolor sit amet.
<template>
    <section>
        <b-field grouped group-multiline>
            <div class="control">
                <b-switch v-model="position" true-value="is-right" false-value="is-left"> Right position </b-switch>
            </div>
            <b-field label="Size" label-position="on-border">
                <b-select v-model="size" placeholder="Size">
                    <option :value="null">Default</option>
                    <option value="is-small">Small</option>
                    <option value="is-medium">Medium</option>
                    <option value="is-large">Large</option>
                </b-select>
            </b-field>
            <b-field label="Label position" label-position="on-border">
                <b-select v-model="labelPosition">
                    <option value="bottom">Bottom</option>
                    <option value="right">Right</option>
                    <option value="left">Left</option>
                </b-select>
            </b-field>
        </b-field>

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

            <b-step-item label="Profile" icon="account">
                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.
            </b-step-item>

            <b-step-item label="Social" icon="account-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.
            </b-step-item>
        </b-steps>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                labelPosition: 'bottom',
                position: null,
                size: null,
            }
        }
    }
</script>

# API

Steps

Name
Description
Type
Values
Default
v-modelBinding value, step index. Passing undefined will show the first stepNumber, Stringundefined
animatedSteps have slide animationBooleantrue
animationCustom animation (transition name)Stringslide-next slide-prev
typeDefault Type/Style for the steps, optionalStringis-white, is-black, is-light, is-dark, is-primary, is-info, is-success, is-warning, is-danger, and any other colors you've set in the $colors list on Sass
sizeSize of the step, optionalStringis-small, is-medium, is-large
destroy-on-hideDestroy stepitem on hideBooleanfalse
icon-packIcon pack to use for the navigationStringmdi
icon-prevIcon to use for navigation buttonStringchevron-left
icon-nextIcon to use for navigation buttonStringchevron-right
has-navigationNext and previous buttons below the component. You can use this property if you want to use your own custom navigation items.Booleantrue
verticalDisplay the steps verticallyBooleanfalse
positionPosition of the vertical step, optionalStringis-right
label-positionPosition of the marker label, optionalStringbottom, right, leftbottom
roundedRounded step markersBooleantrue
mobile-modeHow Steps will be displayed for mobile userStringminimalist: Only the active Step is displayed, compact: Step label is displayed only for the active, null: Will keep the same behavior as desktopminimalist
aria-page-labelAccessibility label for the page link. If passed, this text will be prepended to the number of the page.String
aria-current-labelAccessibility label for the current page link. If passed, this text will be prepended to the current page.String

Item

Name
Description
Type
Values
Default
stepStep marker content (when there is no icon)String | Number
labelStep labelString
valueStep identifierStringVnode uid
typeDefault Type/Style for the step, optional. This will override parent type. Could be used to set a completed step to is-success for exampleStringis-white, is-black, is-light, is-dark, is-primary, is-info, is-success, is-warning, is-danger, and any other colors you've set in the $colors list on Sass
iconIcon nameString
icon-packIcon pack to useStringmdi
clickableItem can be used directly to navigate. If undefined, previous steps are clickable while the others are not.Boolean
visibleItem is visibleBoolean-true
headerClassThe classes to add to the step label containerString, Array, Object--

# Variables

You can use these variables to customize this component.

Name
Default
$steps-details-background-color$body-background-color
$steps-maker-default-color$grey-light
$steps-marker-default-border.2em solid #fff
$steps-default-color$grey-lighter
$steps-previous-color$primary
$steps-active-color$primary
$steps-divider-height.2em
$steps-vertical-padding1em 0
$steps-mobile-max-width$tablet
$steps-colors$colors

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub