Skip to content
On this page

Steps ​

Responsive horizontal process steps

Examples ​

Base

Show code

Variants

Show code

Vertical

Show code

Class props ​

'Classes applied to the element'
How does the Class props inspector work?
Class propDescriptionPropsSuffixes
animatedClassClass of Steps component when animation gets triggered.animated
β–· itemClassClass of the content item.
β–· itemHeaderActiveClassClass of the nav item when active.
β–· itemHeaderClassClass of the nav item.
πŸ” Classes applied have a higher specificity than expected when positionClass is applied
β–· itemHeaderPreviousClassClass of the nav item behind the active one.
β–· itemHeaderVariantClassClass of the nav item with variant (default value by parent steps component).variantprimary
info
warning
danger
mobileClassClass of steps component when on mobile.
πŸ‘‰ Switch to mobile view to see it in action!
positionClassClass of the Steps component when is vertical and its position changes.position
vertical
bottom
left
right
rootClassRoot class of the element.
sizeClassSize of the steps.sizesmall
medium
large
stepContentClassClass of the Steps component content.
πŸ” Classes applied have a higher specificity than expected when positionClass is applied
stepContentTransitioningClassClass of the Steps component content when transition is happening.
πŸ‘‰ Click on a marker to see it in action
stepDividerClassClass of the Steps component dividers.
πŸ” Classes applied have a higher specificity than expected when mobileClass or itemHeaderActiveClass or itemHeaderPreviousClass or positionClass is applied
stepLinkClassClass of the Steps component link.
πŸ” Classes applied have a higher specificity than expected when itemHeaderActiveClass is applied
stepLinkClickableClassClass of the Steps component link when clickable.clickable
stepLinkLabelClassClass of the Step component link label.
stepLinkLabelPositionClassClass of the Step component link label when positioned.labelPositionbottom
right
left
stepMarkerClassClass of the Steps component marker.
πŸ” Classes applied have a higher specificity than expected when itemHeaderActiveClass or itemHeaderPreviousClass is applied
stepMarkerRoundedClassClass of the Steps markers trigger when are rounded.rounded
stepNavigationClassClass of the Steps component navigation element.
πŸ” Classes applied have a higher specificity than expected when positionClass is applied
stepsClassClass of the steps container.
πŸ” Classes applied have a higher specificity than expected when positionClass is applied
verticalClassClass of the tooltip trigger.vertical

Steps component ​

html
<o-steps></o-steps>

Props ​

Prop nameDescriptionTypeValuesDefault
animatedStep navigation is animatedboolean-true
ariaNextLabelstring-
ariaPreviousLabelstring-
hasNavigationNext and previous buttons below the component. You can use this property if you want to use your own custom navigation items.boolean-true
iconNextIcon to use for navigation buttonstring-
From config:
steps: {
Β Β iconNext: 'chevron-right'
}
iconPackIcon pack to use for the navigationstringmdi, fa, fas and any other custom icon pack
iconPrevIcon to use for navigation buttonstring-
From config:
steps: {
Β Β iconPrev: 'chevron-left'
}
labelPositionPosition of the marker label, optionalstringbottom, right, left'bottom'
mobileBreakpointMobile breakpoint as max-width valuestring-
overrideboolean-
roundedRounded step markersboolean-true

Slots ​

NameDescriptionBindings
default
navigation

StepItem component ​

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

Props ​

Prop nameDescriptionTypeValuesDefault
clickableItem can be used directly to navigate. If undefined, previous steps are clickable while the others are notboolean-undefined
overrideboolean-
stepStep marker content (when there is no icon)string|number-
variantDefault style for the step, optional This will override parent type. Could be used to set a completed step to "success" for examplestring|object-

Sass variables ​

Current theme ➜ Oruga Base

SASS VariableDefault
$steps-details-background-colorhsl(0, 0%, 100%)
$steps-details-padding0.2em
$steps-marker-background$grey-light
$steps-marker-color$primary-invert
$steps-marker-border0.2em solid #fff
$steps-marker-font-weight700
$steps-marker-rounded-border-radius$base-rounded-border-radius
$steps-color$grey-lighter
$steps-previous-color$primary
$steps-active-color$primary
$steps-divider-height0.2em
$steps-vertical-padding1em 0
$steps-item-line-height$base-line-height
$steps-link-colorhsl(0, 0%, 29%)
$steps-content-padding1rem
$steps-font-size$base-font-size
$steps-details-title-font-weight600

See ➜ πŸ“„ Full scss file

Current theme ➜ Oruga Full

SASS VariableDefault
$steps-details-background-colorhsl(0, 0%, 100%)
$steps-details-padding0.2em
$steps-marker-background$grey-light
$steps-marker-color$primary-invert
$steps-marker-border0.2em solid #fff
$steps-marker-font-weight700
$steps-marker-rounded-border-radius$base-rounded-border-radius
$steps-color$grey-lighter
$steps-previous-color$primary
$steps-active-color$primary
$steps-divider-height0.2em
$steps-vertical-padding1em 0
$steps-item-line-height$base-line-height
$steps-link-colorhsl(0, 0%, 29%)
$steps-content-padding1rem
$steps-font-size$base-font-size
$steps-details-title-font-weight600

See ➜ πŸ“„ Full scss file

Current theme ➜ Bulma

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

Current theme ➜ Bootstrap

SASS VariableDefault
$steps-marker-bgvar(--#{$prefix}gray-light)
$steps-marker-bordervar(--#{$prefix}white)
$steps-marker-colorvar(--#{$prefix}white)
$steps-color-activevar(--#{$prefix}primary)
$steps-title-colorvar(--#{$prefix}dark)
$steps-title-bgvar(--#{$prefix}white)
$steps-divider-height0.2em
$steps-content-spacer1rem
$steps-content-padding1rem
$steps-vertical-padding1em 0

See ➜ πŸ“„ Full scss file

Released under the MIT License.