Use steppers to:
- Navigate through a small collection of 2-5 items (e.g., carousel slides, images, content panels)
- Show users their position within a collection
- Provide clear previous/next controls for sequential navigation
- Display multiple items in a fixed space without scrolling
Do not use steppers:
- For collections with more than 5 items, consider pagination or alternative navigation instead
- When all items can be displayed at once without navigation
- For non-sequential content where order does not matter
- When users need to jump to specific items by name or category, use tabs or navigation instead
Stepper vs pagination vs tabs
|
Use a stepper for |
Use pagination for |
Use tabs for |
|---|---|---|
|
Small collections (2-5 items) in carousels |
Large collections (6+ pages) of content |
Switching between distinct content sections |
|
Sequential image galleries or slides |
Search results, product listings |
Settings categories, form sections |
|
Continuous carousel loops |
Content with defined start and end |
Content organization by topic |
Component relationship
Steppers will always be a child component of a larger composition that displays content in a fixed area. Common parent components include:
- Image carousels
- Content sliders
- Featured content rotators
- Product showcases
Placement
Steppers should always be placed at the bottom of the composition and given enough space to provide a clear control hit area.
The stepper component includes:
- Previous button (icon button on the left)
- Visual indicators
- Next button (icon button on the right)