An edge aware compact navigation bar built with pure HTML and CSS that aligns navigation elements precisely within constrained layout boundaries. It enhances space efficient navigation clarity while maintaining responsive structure.
Usage
Use this component when interfaces require tight horizontal navigation layouts, such as admin headers, application toolbars, or mobile first dashboards where space optimization is essential.
Implementation
The layout uses compact horizontal alignment with controlled padding and edge-aware spacing, ensuring elements align cleanly within container limits. CSS handles responsive behavior and hover state styling across breakpoints.
HTML
<nav class="nav-edge">
<a class="is-active">Home</a>
<a>Search</a>
<a>Profile</a>
</nav>CSS
.nav-edge {
width: 200px;
padding: 0.4rem;
border-radius: 11px;
background: #ffffff;
box-shadow: 0 14px 28px rgba(0,0,0,0.14);
display: flex;
justify-content: space-between;
font-size: 12px;
}
.nav-edge a {
padding: 0.35rem 0.45rem;
border-radius: 10px;
color: #6b7280;
text-decoration: none;
transition: background 150ms ease, color 150ms ease;
}
.nav-edge a:hover {
background: #eef2ff;
color: #111827;
}
.nav-edge a.is-active {
background: #6366f1;
color: #ffffff;
font-weight: 600;
}
@media (prefers-color-scheme: dark) {
.nav-edge {
background: #020617;
}
.nav-edge a {
color: #9ca3af;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Designed for compact horizontal layouts
- Enhances boundary aligned navigation structure
- Fully responsive across breakpoints
- Suitable for dashboards and toolbars
- Easy to customize spacing and alignment
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.