x
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<div class="flex flex-col gap-8"> <div data-controller="midwest-prose" class="midwest-prose prose"> <p>Basic slot usage</p> </div> <nav class="midwest-breadcrumbs style-inline" aria-label="Breadcrumb"> <ol class="breadcrumbs-list"> <li class="breadcrumb-item"> <a class="midwest-breadcrumb variant-default" href="/"> <span class="midwest-label "> Home </span> </a> </li> <li class="breadcrumb-separator" aria-hidden="true"> <span class="sep-char" aria-hidden="true">/</span> </li> <li class="breadcrumb-item"> <a class="midwest-breadcrumb variant-default" href="/articles"> <span class="midwest-label "> Articles </span> </a> </li> <li class="breadcrumb-separator" aria-hidden="true"> <span class="sep-char" aria-hidden="true">/</span> </li> <li class="breadcrumb-item"> <span class="midwest-breadcrumb variant-default current" aria-current="page"> <span class="midwest-label "> Getting Started </span> </span> </li> </ol> </nav> <div data-controller="midwest-prose" class="midwest-prose prose"> <p>Per-crumb icon</p> </div> <nav class="midwest-breadcrumbs style-inline" aria-label="Breadcrumb"> <ol class="breadcrumbs-list"> <li class="breadcrumb-item"> <a class="midwest-breadcrumb variant-default has-icon" href="/"> <div class="midwest-icon " aria-hidden="true"> <div class="midwest-icon-inner"> <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Home"><title>Home</title> <path d="M261.56 101.28a8 8 0 00-11.06 0L66.4 277.15a8 8 0 00-2.47 5.79L63.9 448a32 32 0 0032 32H192a16 16 0 0016-16V328a8 8 0 018-8h80a8 8 0 018 8v136a16 16 0 0016 16h96.06a32 32 0 0032-32V282.94a8 8 0 00-2.47-5.79z"></path><path d="M490.91 244.15l-74.8-71.56V64a16 16 0 00-16-16h-48a16 16 0 00-16 16v32l-57.92-55.38C272.77 35.14 264.71 32 256 32c-8.68 0-16.72 3.14-22.14 8.63l-212.7 203.5c-6.22 6-7 15.87-1.34 22.37A16 16 0 0043 267.56L250.5 69.28a8 8 0 0111.06 0l207.52 198.28a16 16 0 0022.59-.44c6.14-6.36 5.63-16.86-.76-22.97z"></path></svg> </div> </div> <span class="midwest-label "> Home </span> </a> </li> <li class="breadcrumb-separator" aria-hidden="true"> <span class="sep-char" aria-hidden="true">/</span> </li> <li class="breadcrumb-item"> <a class="midwest-breadcrumb variant-default has-icon" href="/articles"> <div class="midwest-icon " aria-hidden="true"> <div class="midwest-icon-inner"> <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Document"><title>Document</title> <path d="M428 224H288a48 48 0 01-48-48V36a4 4 0 00-4-4h-92a64 64 0 00-64 64v320a64 64 0 0064 64h224a64 64 0 0064-64V228a4 4 0 00-4-4z"></path><path d="M419.22 188.59L275.41 44.78a2 2 0 00-3.41 1.41V176a16 16 0 0016 16h129.81a2 2 0 001.41-3.41z"></path></svg> </div> </div> <span class="midwest-label "> Articles </span> </a> </li> <li class="breadcrumb-separator" aria-hidden="true"> <span class="sep-char" aria-hidden="true">/</span> </li> <li class="breadcrumb-item"> <span class="midwest-breadcrumb variant-default current" aria-current="page"> <span class="midwest-label "> Getting Started </span> </span> </li> </ol> </nav> <div data-controller="midwest-prose" class="midwest-prose prose"> <p>Per-crumb variant override (container: pill, first crumb: bold)</p> </div> <nav class="midwest-breadcrumbs style-inline" aria-label="Breadcrumb"> <ol class="breadcrumbs-list"> <li class="breadcrumb-item"> <a class="midwest-breadcrumb variant-bold" href="/"> <span class="midwest-label "> Home </span> </a> </li> <li class="breadcrumb-separator" aria-hidden="true"> <span class="sep-char" aria-hidden="true">/</span> </li> <li class="breadcrumb-item"> <a class="midwest-breadcrumb variant-pill" href="/articles"> <span class="midwest-label "> Articles </span> </a> </li> <li class="breadcrumb-separator" aria-hidden="true"> <span class="sep-char" aria-hidden="true">/</span> </li> <li class="breadcrumb-item"> <span class="midwest-breadcrumb variant-pill current" aria-current="page"> <span class="midwest-label "> Getting Started </span> </span> </li> </ol> </nav></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="flex flex-col gap-8"> <%= midwest_prose { tag.p "Basic slot usage" } %> <%= midwest_breadcrumbs do |b| b.with_breadcrumb(title: 'Home', path: '/') b.with_breadcrumb(title: 'Articles', path: '/articles') b.with_breadcrumb(title: 'Getting Started', current: true) end %> <%= midwest_prose { tag.p "Per-crumb icon" } %> <%= midwest_breadcrumbs do |b| b.with_breadcrumb(title: 'Home', path: '/', icon: :home) b.with_breadcrumb(title: 'Articles', path: '/articles', icon: :document) b.with_breadcrumb(title: 'Getting Started', current: true) end %> <%= midwest_prose { tag.p "Per-crumb variant override (container: pill, first crumb: bold)" } %> <%= midwest_breadcrumbs(variant: :pill) do |b| b.with_breadcrumb(title: 'Home', path: '/', variant: :bold) b.with_breadcrumb(title: 'Articles', path: '/articles') b.with_breadcrumb(title: 'Getting Started', current: true) end %></div>Slots
An alternative to positional args: pass a block and call with_breadcrumb
for each crumb. This gives you full control over each item's options,
including per-crumb icons and per-crumb variant overrides.
No params configured.
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Breadcrumbs/slots
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."