A status step sidebar built with pure HTML and CSS that visually represents multi stage progress within a vertical navigation layout. It highlights current, completed, and upcoming steps using structured indicators and clean alignment.
Usage
Use this component when workflows require step-by-step progress tracking, such as onboarding flows, checkout processes, form completion stages, or dashboard setup sequences.
Implementation
The layout uses vertical step alignment, status markers, and conditional styling to differentiate completed and active states. CSS controls spacing, connectors, and responsive stacking behavior for smaller screens.
HTML
<nav class="sidebar-step">
<span class="is-done">Setup</span>
<span class="is-active">Billing</span>
<span>Launch</span>
</nav>CSS
.sidebar-step {
width: 200px;
padding: 0.6rem;
border-radius: 18px;
background: #ECECEC;
display: grid;
gap: 0.25rem;
font-size: 12px;
}
.sidebar-step span {
padding: 0.45rem 0.6rem;
border-radius: 12px;
color: #9ca3af;
}
.sidebar-step .is-active {
background: #6366f1;
color: #ffffff;
font-weight: 600;
}
.sidebar-step .is-done {
background: #052e16;
color: #4ade80;
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Displays multi step progress clearly
- Differentiates active and completed states
- Fully responsive across breakpoints
- Suitable for onboarding and checkout flows
- Maintains clean sidebar navigation structure
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.