A step context navigation strip built with pure HTML and CSS that displays sequential workflow stages in a horizontal layout. It enhances process visibility and contextual orientation without requiring JavaScript.
Usage
Use this component when interfaces require clear step by step progression display, such as onboarding flows, checkout processes, multi stage forms, or setup sequences that benefit from persistent progress context.
Implementation
The layout uses horizontal step alignment with visual connectors, differentiating active, completed, and upcoming stages through CSS based state styling. Responsive rules ensure clean stacking and readability on smaller screens.
HTML
<nav class="nav-step">
<span class="is-complete">Setup</span>
<span class="is-current">Billing</span>
<span>Launch</span>
</nav>CSS
.nav-step {
width: 200px;
padding: 0.4rem;
border-radius: 14px;
background: #F5F5F5;
display: flex;
gap: 0.25rem;
font-size: 11px;
}
.nav-step span {
flex: 1;
padding: 0.35rem 0;
border-radius: 10px;
text-align: center;
color: #a1a1aa;
}
.nav-step .is-current {
background: #2563eb;
color: #ffffff;
font-weight: 600;
}
.nav-step .is-complete {
background: #064e3b;
color: #6ee7b7;
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Displays sequential workflow stages
- Enhances progress tracking clarity
- Fully responsive across breakpoints
- Suitable for onboarding and checkout flows
- Easy to customize step indicators and spacing
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.