An accent rail sidebar built with pure HTML and CSS that introduces a visually distinct vertical rail to emphasize navigation or contextual sections. It enhances layout hierarchy and visual structure through controlled accent styling.
Usage
Use this component when interfaces require strong visual separation of navigation areas, such as dashboards, admin panels, documentation pages, or app layouts that benefit from clear section distinction.
Implementation
The structure uses a vertical accent rail element combined with aligned navigation items or contextual tools. CSS manages accent color styling, spacing, responsive stacking behavior, and hover states for consistent interaction feedback.
HTML
<nav class="sidebar-rail">
<button class="is-active">Overview</button>
<button>Reports</button>
<button>Settings</button>
<span class="sidebar-rail__indicator"></span>
</nav>CSS
.sidebar-rail {
position: relative;
width: 180px;
padding: 0.5rem;
border-radius: 16px;
background: #ffffff;
color: #111827;
box-shadow: 0 18px 36px rgba(0, 0, 0, 0.12);
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.sidebar-rail button {
position: relative;
height: 36px;
padding: 0.5rem 0.75rem 0.5rem 1.25rem;
border-radius: 10px;
border: none;
background: transparent;
font-size: 13px;
text-align: left;
color: inherit;
cursor: pointer;
}
.sidebar-rail__indicator {
position: absolute;
left: 0.75rem;
top: 0.75rem;
width: 3px;
height: 20px;
background: #6366f1;
border-radius: 999px;
transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-rail button:nth-child(1).is-active ~ .sidebar-rail__indicator {
transform: translateY(0);
}
.sidebar-rail button:nth-child(2).is-active ~ .sidebar-rail__indicator {
transform: translateY(36px);
}
.sidebar-rail button:nth-child(3).is-active ~ .sidebar-rail__indicator {
transform: translateY(72px);
}
.sidebar-rail button:nth-child(1):hover ~ .sidebar-rail__indicator {
transform: translateY(0);
}
.sidebar-rail button:nth-child(2):hover ~ .sidebar-rail__indicator {
transform: translateY(36px);
}
.sidebar-rail button:nth-child(3):hover ~ .sidebar-rail__indicator {
transform: translateY(72px);
}
@media (prefers-color-scheme: dark) {
.sidebar-rail {
background: #111827;
color: #e5e7eb;
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(255, 255, 255, 0.04);
}
.sidebar-rail__indicator {
background: #818cf8;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Adds a distinct visual accent rail
- Improves layout hierarchy clarity
- Fully responsive across breakpoints
- Suitable for dashboards and structured interfaces
- Easy to customize accent color and width
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.