Menu
Step
UI Docs
Getting Started New in 2.9
Introduction
Integrations Build Tools Recipes Glossary
Usage
Theming Layouts
Globals
Reset Site
Elements
Button Container Divider Emoji Flag Header Icon Image Input Label List Loader Placeholder Rail Reveal Segment Step Text
Collections
Breadcrumb Form Grid Menu Message Table
Views
Ad Card Comment Feed Item Statistic
Modules
Accordion Calendar Checkbox Dimmer Dropdown Embed Flyout Modal Nag Popup Progress Rating Search Shape Sidebar Slider Sticky Tab Toast Transition
Behaviors
API Form Validation State Visibility

Step
A step shows the completion status of an activity in a series of activities

3 Themes

Types

Step

A single step

Shipping

Circular Step

A single circular step

Shipping

Groups

Steps

A set of steps

Responsive Element

Steps will automatically stack on mobile. To make steps automatically stack for tablet use the tablet stackable variation.

Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order

Circular Steps

Circular steps shows a series of steps with a connection line between them.

Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order

Ordered

A step can show an ordered sequence of steps

Shipping
Choose your shipping options
Billing
Enter billing information
Confirm
Verify order details
Transfer
Package on its way
Delivered
Package received
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm
Verify order details
Transfer
Package on its way
Delivered
Package received

Vertical

A step can be displayed stacked vertically

Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details

Right vertical steps will show the active arrow to the left

Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details

Vertical Circular

Vertical circular steps show a series of steps with the connection line between them vertically next to the title and description of each step. Similar to Connected Feed

Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details

Content

Description

A step can contain a description

Shipping
Choose your shipping options

Circular steps always need a content wrapper

Shipping
Choose your shipping options

Center Aligned

Horizontal circular steps can show their title center aligned next to the connection line. The last step will not show the connection line anymore

Shipping
Billing

Bottom Aligned

Horizontal circular steps can also show their title and/or description under the connection line

Shipping
Choose your shipping options
Billing
Enter billing information

Icon

A step can contain an icon

Shipping
Choose your shipping options

Icons in circular steps are part of the title or description node

Shipping
Choose your shipping options

Link

A step can link by either using an anchor tag or adding the link class

Shipping
Choose your shipping options
Billing
Enter billing information
Shipping
Choose your shipping options
Billing
Enter billing information
Shipping
Choose your shipping options
Billing
Enter billing information
Shipping
Choose your shipping options
Billing
Enter billing information

States

Active

A step can be highlighted as active

Billing
Enter billing information
Billing
Enter billing information

Completed

A step can show that a user has completed it

Billing
Enter billing information
Billing
Enter billing information

Disabled

A step can show that it cannot be selected

Billing
Billing

Variations

Stackable

A step can stack vertically only on smaller screens

Circular steps do not automatically stack on mobile devices via CSS only. But you can use a small javascript snippet to accomplish this and switch to Vertical Circular Steps automatically.

$(window).on('resize', function() { var circularSteps = $('.ui.stackable.circular.steps'), isMobile = window.innerWidth <= 768; if (isMobile) { circularSteps.addClass('vertical'); } else { circularSteps.removeClass('vertical'); } });
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details

Fluid

A fluid step takes up the width of its container

Shipping
Choose your shipping options
Billing
Enter billing information

The steps take up the entire column width

Unstackable

A step can prevent itself from stacking on mobile

Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details

Attached

Steps can be attached to other elements

Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details

Evenly Divided

Steps can be divided evenly inside their parent

Shipping
Billing
Confirm Order
Billing
Confirm Order

Horizontal circular steps are always evenly divided

Shipping
Billing
Confirm Order

Size

Steps can have different sizes

Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Shipping
Billing
Shipping
Billing
Shipping
Billing
Shipping
Billing
Shipping
Billing
Shipping
Billing
Shipping
Billing
Shipping
Billing

Inverted

A step's color can be inverted

Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm
Verify order details
Transfer
Package on its way
Delivered
Package received
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm
Verify order details
Transfer
Package on its way
Delivered
Package received
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details

Color

Circular Steps can be shown in different colors for active and completed steps of the whole step group

Completed
Completed...
...and active
Completed...
...and active ... and disabled
Active
Default
Completed
Completed...
...and active
Completed...
...and active ... and disabled
Active
Default
Completed
Completed...
...and active
Completed...
...and active ... and disabled
Active
Default
Completed
Completed...
...and active
Completed...
...and active ... and disabled
Active
Default
Completed
Completed...
...and active
Completed...
...and active ... and disabled
Active
Default
Completed
Completed...
...and active
Completed...
...and active ... and disabled
Active
Default
Completed
Completed...
...and active
Completed...
...and active ... and disabled
Active
Default
Completed
Completed...
...and active
Completed...
...and active ... and disabled
Active
Default
Completed
Completed...
...and active
Completed...
...and active ... and disabled
Active
Default
Completed
Completed...
...and active
Completed...
...and active ... and disabled
Active
Default
Completed
Completed...
...and active
Completed...
...and active ... and disabled
Active
Default
Completed
Completed...
...and active
Completed...
...and active ... and disabled
Active
Default
Completed
Completed...
...and active
Completed...
...and active ... and disabled
Active
Default
Completed
Completed...
...and active
Completed...
...and active ... and disabled
Active
Default
Completed
Completed...
...and active
Completed...
...and active ... and disabled
Active
Default

Single steps of a circular steps group can have a separate color


Dimmer Message
Dimmer sub-header