This navigation bar shifts visual weight toward the edges, guiding scanning behavior without pills, centering, or active underlines.
HTML
<nav class="nav-edge">
<a class="is-active">Dashboard</a>
<a>Usage</a>
<a>Settings</a>
</nav>CSS
.nav-edge {
width: 200px;
padding: 0.5rem 0.6rem;
border-radius: 5px;
background: #ffffff;
box-shadow: 0 14px 28px rgba(0,0,0,0.12);
display: flex;
justify-content: space-between;
}
.nav-edge a {
font-size: 12px;
color: #6b7280;
cursor: pointer;
transition: color 150ms ease, transform 150ms ease;
}
.nav-edge a:hover {
transform: translateY(-1px);
color: #374151;
}
.nav-edge a.is-active {
color: #111827;
font-weight: 600;
}
@media (prefers-color-scheme: dark) {
.nav-edge {
background: #020617;
}
.nav-edge a {
color: #9ca3af;
}
.nav-edge a.is-active {
color: #e5e7eb;
}
}Notes
- No pills, no center emphasis, no indicators
- Relies on typographic weight + spacing
- Ideal for compact headers and toolbars
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.