x
1
2
3
4
5
6
7
<nav class="breadcrumb" aria-label="Breadcrumb"> <a href="#">Home</a> <span class="icon icon--chevron-right" aria-hidden="true"></span> <a href="#">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
<nav class="breadcrumb" aria-label="Breadcrumb"> <%= link_to "Home", "#" %> <span class="icon icon--chevron-right" aria-hidden="true"></span> <%= link_to "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; column-gap: var(--size-1); color: var(--color-text-subtle); 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); }}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import { Controller } from "@hotwired/stimulus"import { rovingIndex } from "https://esm.sh/roving-ux@1.0.5?standalone"export default class extends Controller { static targets = [ "item" ] #observer initialize() { this.#observer = new IntersectionObserver(this.#reset.bind(this)) } connect() { this.#observer.observe(this.element) } disconnect() { this.#observer.disconnect() } #reset([ entry ]) { entry.isIntersecting && this.#start() } #start() { this.#rovingIndex() this.#focus() } #rovingIndex() { rovingIndex({ element: this.element, target: "[data-menu-target='item']" }) } #focus() { this.itemTargets[0].focus() }}Install
bin/rails generate css_zero:add breadcrumb dropdown