Menu
Step
UI Docs
Globals
Site
Elements
Button Container Divider Flag Header Icon Image Input Label List Loader Placeholder Rail Reveal Segment Step
Collections
Breadcrumb Form Grid Menu Message Table
Views
Card Item Statistic
Modules
Accordion Checkbox Dimmer Dropdown Modal Popup Progress Search Shape Sidebar Sticky Tab Transition

Step

Types

Step

A single 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

Ordered

A step can show a ordered sequence of steps

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

Vertical

A step can be displayed stacked vertically

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

Icon

A step can contain an icon

Shipping
Choose your shipping options

Link

A step can link

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

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

Variations

Stackable

A step can stack vertically only on smaller screens

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
New in 2.2.11

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

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
Billing
Shipping
Billing
Shipping
Billing
Shipping
Billing

Community

Help Translate Submit an Issue Join our Chat CLA

Network

GitHub Repo User Forums 1.x Docs 0.x Docs

Help Preserve This Project

Support for the continued development of Semantic UI comes directly from the community.

Free & Open Source (MIT)
The Translation Needs Your Help

This translation is only % complete!

We need your help to make Semantic available to people who speak your language.

Our translation tools are easy to use and allow you to translate text without having to leave the site.

No Thanks
Help Translate
Would you like to visit the mirror site?

Semantic is available at semantic-ui.cn a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.

No Thanks
Yes, take me to the mirror

Dimmer Message
Dimmer sub-header