A status aware navigation bar built with pure HTML and CSS that visually differentiates navigation items based on their current state. It enhances active, completed, or disabled state clarity without requiring JavaScript.
Usage
Use this component when interfaces require state driven navigation feedback, such as multi step processes, dashboards, onboarding flows, or applications that need clear visual status indicators.
Implementation
State styling is handled using CSS class based selectors and conditional visual cues, such as color shifts, badges, or subtle icon indicators. Responsive rules maintain consistent alignment across screen sizes.
HTML
<nav class="nav-status">
<a class="is-done">Setup</a>
<a class="is-current">Billing</a>
<a>Launch</a>
</nav>CSS
.nav-status {
width: 200px;
padding: 0.4rem;
border-radius: 11px;
background: #f9fafb;
display: flex;
gap: 0.3rem;
font-size: 11px;
}
.nav-status a {
flex: 1;
padding: 0.35rem 0;
border-radius: 10px;
text-align: center;
text-decoration: none;
color: #6b7280;
background: #ffffff;
transition: background 150ms ease, color 150ms ease;
}
.nav-status a.is-current {
background: #6366f1;
color: #ffffff;
font-weight: 600;
}
.nav-status a.is-done {
background: #ecfdf5;
color: #16a34a;
}
@media (prefers-color-scheme: dark) {
.nav-status {
background: #020617;
}
.nav-status a {
background: #020617;
color: #9ca3af;
}
.nav-status a.is-done {
background: #052e16;
color: #4ade80;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Supports active, completed, and disabled states
- Enhances navigation state visibility
- Fully responsive across breakpoints
- Suitable for workflows and dashboards
- Easy to customize state colors and indicators
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.