Steps
Navigation
Multi-step process indicator with status visualization, clickable navigation, and progress tracking
Horizontal Steps - Default
Account
Create your account
2
Profile
Fill in your details
3
Verification
Verify your email
4
Complete
You're all set!
Steps with Icons
Cart
Review your items
Shipping
Enter shipping details
Payment
Complete payment
Confirmation
Order confirmed
Vertical Steps
Choose Plan
Select a subscription plan that works for you
2
Account Setup
Create your account and set preferences
Set up your account details here...
3
Payment
Enter payment information securely
4
Confirmation
Review and confirm your subscription
Variants
Default
Start
2
Progress
3
End
Bordered
1
Design
Create mockups
2
Develop
Build features
3
Deploy
Go live
Glass
Personal Info
Address
Payment
Minimal
1
Step 1
First step
2
Step 2
Second step
3
Step 3
Third step
Sizes
Small
1
Step 1
2
Step 2
3
Step 3
Medium (Default)
Step 1
2
Step 2
3
Step 3
Large
1
Step 1
First step
2
Step 2
Second step
3
Step 3
Final step
Clickable Steps
Click on any step to navigate
Step 1
First step
2
Step 2
Second step
3
Step 3
Third step
4
Step 4
Final step
Error State
Completed
2
Error
Something went wrong
3
Pending
Usage Guidelines
When to Use
- Progress indication
- Multi-step processes
- Checkout flows
Accessibility
- Progress announced to screen readers
- Completed/current state indicators
Performance
- Static rendering
- No animation overhead when not used
Common Mistakes
- Non-clickable steps when navigation expected
- No validation before proceeding
Frequently Asked Questions
Steps is a simpler progress indicator. Stepper is a full-featured wizard with forms at each step.
Yes, Steps support clickable navigation to jump between steps.
Related Components
View allAppBar
Application bar with scroll effects, elevation changes, and fixed/sticky positioning
BottomNavigation
Mobile bottom navigation bar with icon labels and active state indicators
Breadcrumb
Hierarchical navigation trail with separator customization, truncation support, and ARIA navigation landmarks
Link
Enhanced anchor element with variant system, external link indicators, and programmatic navigation integration