x
1
2
3
4
5
6
7
8
9
<nav class="breadcrumb" aria-label="Breadcrumb"> <a href="#home">Home</a> <span class="icon icon--chevron-right" aria-hidden="true"></span> <span class="icon icon--ellipsis" aria-hidden="true"></span> <span class="icon icon--chevron-right" aria-hidden="true"></span> <a href="#components">Components</a> <span class="icon icon--chevron-right" aria-hidden="true"></span> <span class="text-primary" aria-disabled="true" aria-current="page" role="link">Breadcrumb</span></nav>1
2
3
4
5
6
7
8
9
<nav class="breadcrumb" aria-label="Breadcrumb"> <%= link_to "Home", "#home" %> <span class="icon icon--chevron-right" aria-hidden="true"></span> <span class="icon icon--ellipsis" aria-hidden="true"></span> <span class="icon icon--chevron-right" aria-hidden="true"></span> <%= link_to "Components", "#components" %> <span class="icon icon--chevron-right" aria-hidden="true"></span> <span class="text-primary" aria-disabled="true" aria-current="page" role="link">Breadcrumb</span></nav>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
:where(.breadcrumb) { align-items: center; color: var(--color-text-subtle); column-gap: var(--size-1); display: flex; flex-wrap: wrap; font-size: var(--text-sm); overflow-wrap: break-word; a:hover { color: var(--color-text); } @media (width >= 40rem) { column-gap: var(--size-2); }}
Java Script is not required or multiple files are needed, check the notes.
No notes provided.