Subway Line
Crumbs as metro stops on a horizontal line. The current page is the lit "you are here" stop with a soft pulsing glow.
Subway Line the 12th of 22 designs in the 22 CSS Breadcrumbs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<nav class="bc-12" aria-label="Breadcrumb">
<ol class="bc-12__list">
<li class="bc-12__item">
<a class="bc-12__link" href="javascript:void(0)">
<span class="bc-12__dot" aria-hidden="true"></span>
<span class="bc-12__label">Home</span>
</a>
</li>
<li class="bc-12__item">
<a class="bc-12__link" href="javascript:void(0)">
<span class="bc-12__dot" aria-hidden="true"></span>
<span class="bc-12__label">Components</span>
</a>
</li>
<li class="bc-12__item">
<a class="bc-12__link bc-12__link--cur" aria-current="page" href="javascript:void(0)">
<span class="bc-12__dot" aria-hidden="true"></span>
<span class="bc-12__label">Buttons</span>
</a>
</li>
</ol>
</nav> .bc-12__list {
display: flex;
align-items: center;
list-style: none;
padding: 14px 18px 8px;
margin: 0;
position: relative;
}
.bc-12__list::before {
content: "";
position: absolute;
top: 24px;
left: 24px;
right: 24px;
height: 2px;
background: linear-gradient(
90deg,
rgba(139, 127, 255, 0.65) 0%,
rgba(139, 127, 255, 0.65) var(--bc12-cur, 100%),
rgba(255, 255, 255, 0.12) var(--bc12-cur, 100%),
rgba(255, 255, 255, 0.12) 100%
);
border-radius: 2px;
}
.bc-12__item {
flex: 1;
display: flex;
justify-content: center;
}
.bc-12__link {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-decoration: none;
position: relative;
padding: 0 6px;
transition: transform 0.2s;
}
.bc-12__link:hover {
transform: translateY(-2px);
}
.bc-12__dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: #0e0e16;
border: 2px solid rgba(139, 127, 255, 0.65);
position: relative;
z-index: 1;
transition:
background 0.2s,
border-color 0.2s,
box-shadow 0.2s;
}
.bc-12__link:hover .bc-12__dot {
border-color: #a78bfa;
background: rgba(139, 127, 255, 0.15);
}
.bc-12__label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
transition: color 0.2s;
white-space: nowrap;
}
.bc-12__link:hover .bc-12__label {
color: rgba(255, 255, 255, 0.85);
}
.bc-12__link--cur {
pointer-events: none;
}
.bc-12__link--cur .bc-12__dot {
background: #a78bfa;
border-color: #a78bfa;
box-shadow:
0 0 0 4px rgba(167, 139, 250, 0.18),
0 0 14px rgba(167, 139, 250, 0.6);
animation: bc12pulse 2s ease-in-out infinite;
}
.bc-12__link--cur .bc-12__label {
color: #fff;
font-weight: 700;
}
@keyframes bc12pulse {
0%,
100% {
box-shadow:
0 0 0 4px rgba(167, 139, 250, 0.18),
0 0 14px rgba(167, 139, 250, 0.6);
}
50% {
box-shadow:
0 0 0 6px rgba(167, 139, 250, 0.08),
0 0 22px rgba(167, 139, 250, 0.85);
}
}
@media (prefers-reduced-motion: reduce) {
.bc-12__link--cur .bc-12__dot {
animation: none;
}
.bc-12__link:hover {
transform: none;
}
}