@vsn-ux/gaia-styles 0.6.2 → 0.6.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/all-10pt.css +997 -0
- package/dist/all-no-reset-10pt.css +997 -0
- package/dist/all-no-reset.css +997 -0
- package/dist/all.css +997 -0
- package/dist/components/breadcrumbs.css +301 -0
- package/dist/components/side-navigation.css +842 -0
- package/dist/components.css +997 -0
- package/dist/docs/Breadcrumbs.md +712 -0
- package/dist/docs/SideNavigation.md +524 -0
- package/package.json +1 -1
- package/src/styles/components/breadcrumbs.css +158 -0
- package/src/styles/components/side-navigation.css +351 -0
- package/src/styles/components.css +2 -0
|
@@ -0,0 +1,712 @@
|
|
|
1
|
+
# Breadcrumbs
|
|
2
|
+
|
|
3
|
+
## Visual Structure
|
|
4
|
+
|
|
5
|
+
```
|
|
6
|
+
ga-breadcrumb
|
|
7
|
+
└── ga-breadcrumb-item [--link|--overflow|--current-page|--back]
|
|
8
|
+
├── ga-breadcrumb-item__trigger
|
|
9
|
+
│ └── ga-breadcrumb-item__label (optional)
|
|
10
|
+
├── ga-breadcrumb-item__explorer (optional, button — opens sibling menu)
|
|
11
|
+
│ └── ga-icon
|
|
12
|
+
├── ga-breadcrumb-item__separator (optional)
|
|
13
|
+
└── ga-breadcrumb-item__menu (optional, overflow only)
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Elements Hierarchy
|
|
17
|
+
|
|
18
|
+
### Core Block
|
|
19
|
+
|
|
20
|
+
- `ga-breadcrumb` - Main container for the breadcrumb navigation
|
|
21
|
+
|
|
22
|
+
### Mandatory Elements
|
|
23
|
+
|
|
24
|
+
- `ga-breadcrumb-item` - Individual breadcrumb item, must use one of the item modifiers
|
|
25
|
+
- `ga-breadcrumb-item__trigger` - Clickable trigger element inside each item
|
|
26
|
+
|
|
27
|
+
### Optional Elements
|
|
28
|
+
|
|
29
|
+
- `ga-breadcrumb-item__label` - Text label inside the trigger (truncated with ellipsis when overflowing)
|
|
30
|
+
- `ga-breadcrumb-item__separator` - Separator character between items (present on `--link` and `--overflow` items)
|
|
31
|
+
- `ga-breadcrumb-item__menu` - Dropdown menu panel revealed by the overflow trigger
|
|
32
|
+
- `ga-breadcrumb-item__group` - Wrapper that groups the trigger and explorer button together; manages focus outline at the group level so inner elements suppress their own outlines
|
|
33
|
+
|
|
34
|
+
### Modifiers
|
|
35
|
+
|
|
36
|
+
#### Item Type Modifiers
|
|
37
|
+
|
|
38
|
+
- `ga-breadcrumb-item--link` - A navigable ancestor link; shows underline on hover and uses action text color
|
|
39
|
+
- `ga-breadcrumb-item--overflow` - A collapsed group of hidden items; displays a trigger that opens a dropdown menu
|
|
40
|
+
- `ga-breadcrumb-item--current-page` - The last item representing the current page; rendered in bold, non-navigable style
|
|
41
|
+
- `ga-breadcrumb-item--back` - A mobile-style back navigation item; displays an icon alongside a bold label, with action-colored icon that updates on hover
|
|
42
|
+
|
|
43
|
+
## Examples
|
|
44
|
+
|
|
45
|
+
### Standard Navigation
|
|
46
|
+
|
|
47
|
+
```html
|
|
48
|
+
<div class="flex flex-col gap-6">
|
|
49
|
+
<nav class="ga-breadcrumb">
|
|
50
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
51
|
+
<div class="ga-breadcrumb-item__group">
|
|
52
|
+
<a class="ga-breadcrumb-item__trigger" href="#">
|
|
53
|
+
<span class="ga-breadcrumb-item__label">Finance</span>
|
|
54
|
+
</a>
|
|
55
|
+
<button class="ga-breadcrumb-item__explorer" tabindex="-1">
|
|
56
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
57
|
+
</button>
|
|
58
|
+
</div>
|
|
59
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
60
|
+
</div>
|
|
61
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
62
|
+
<div class="ga-breadcrumb-item__group">
|
|
63
|
+
<a class="ga-breadcrumb-item__trigger" href="#">
|
|
64
|
+
<span class="ga-breadcrumb-item__label">Accounts payable</span>
|
|
65
|
+
</a>
|
|
66
|
+
<button class="ga-breadcrumb-item__explorer" tabindex="-1">
|
|
67
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
68
|
+
</button>
|
|
69
|
+
</div>
|
|
70
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
71
|
+
</div>
|
|
72
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--current-page">
|
|
73
|
+
<span class="ga-breadcrumb-item__trigger">Invoice #INV-2025-0441</span>
|
|
74
|
+
</div>
|
|
75
|
+
</nav>
|
|
76
|
+
<nav class="ga-breadcrumb">
|
|
77
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
78
|
+
<div class="ga-breadcrumb-item__group">
|
|
79
|
+
<a class="ga-breadcrumb-item__trigger" href="#">
|
|
80
|
+
<span class="ga-breadcrumb-item__label">Human resources</span>
|
|
81
|
+
</a>
|
|
82
|
+
<button class="ga-breadcrumb-item__explorer" tabindex="-1">
|
|
83
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
84
|
+
</button>
|
|
85
|
+
</div>
|
|
86
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
87
|
+
</div>
|
|
88
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
89
|
+
<div class="ga-breadcrumb-item__group">
|
|
90
|
+
<a class="ga-breadcrumb-item__trigger" href="#">
|
|
91
|
+
<span class="ga-breadcrumb-item__label">Employees</span>
|
|
92
|
+
</a>
|
|
93
|
+
<button class="ga-breadcrumb-item__explorer" tabindex="-1">
|
|
94
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
95
|
+
</button>
|
|
96
|
+
</div>
|
|
97
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
98
|
+
</div>
|
|
99
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--current-page">
|
|
100
|
+
<span class="ga-breadcrumb-item__trigger">Lars Eriksson</span>
|
|
101
|
+
</div>
|
|
102
|
+
</nav>
|
|
103
|
+
<nav class="ga-breadcrumb">
|
|
104
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
105
|
+
<div class="ga-breadcrumb-item__group">
|
|
106
|
+
<a class="ga-breadcrumb-item__trigger" href="#">
|
|
107
|
+
<span class="ga-breadcrumb-item__label">Procurement</span>
|
|
108
|
+
</a>
|
|
109
|
+
<button class="ga-breadcrumb-item__explorer" tabindex="-1">
|
|
110
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
111
|
+
</button>
|
|
112
|
+
</div>
|
|
113
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
114
|
+
</div>
|
|
115
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
116
|
+
<div class="ga-breadcrumb-item__group">
|
|
117
|
+
<a class="ga-breadcrumb-item__trigger" href="#">
|
|
118
|
+
<span class="ga-breadcrumb-item__label">Suppliers</span>
|
|
119
|
+
</a>
|
|
120
|
+
<button class="ga-breadcrumb-item__explorer" tabindex="-1">
|
|
121
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
122
|
+
</button>
|
|
123
|
+
</div>
|
|
124
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
125
|
+
</div>
|
|
126
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--current-page">
|
|
127
|
+
<div class="ga-breadcrumb-item__group">
|
|
128
|
+
<span class="ga-breadcrumb-item__trigger">Bergström AB</span>
|
|
129
|
+
<button class="ga-breadcrumb-item__explorer">
|
|
130
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
131
|
+
</button>
|
|
132
|
+
</div>
|
|
133
|
+
</div>
|
|
134
|
+
</nav>
|
|
135
|
+
<nav class="ga-breadcrumb">
|
|
136
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
137
|
+
<div class="ga-breadcrumb-item__group">
|
|
138
|
+
<a class="ga-breadcrumb-item__trigger" href="#">
|
|
139
|
+
<span class="ga-breadcrumb-item__label">Payroll</span>
|
|
140
|
+
</a>
|
|
141
|
+
<button class="ga-breadcrumb-item__explorer" tabindex="-1">
|
|
142
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
143
|
+
</button>
|
|
144
|
+
</div>
|
|
145
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
146
|
+
</div>
|
|
147
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
148
|
+
<div class="ga-breadcrumb-item__group">
|
|
149
|
+
<a class="ga-breadcrumb-item__trigger" href="#">
|
|
150
|
+
<span class="ga-breadcrumb-item__label">Pay runs</span>
|
|
151
|
+
</a>
|
|
152
|
+
<button class="ga-breadcrumb-item__explorer" tabindex="-1">
|
|
153
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
154
|
+
</button>
|
|
155
|
+
</div>
|
|
156
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
157
|
+
</div>
|
|
158
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--current-page">
|
|
159
|
+
<div class="ga-breadcrumb-item__group">
|
|
160
|
+
<span class="ga-breadcrumb-item__trigger">April 2026</span>
|
|
161
|
+
<button class="ga-breadcrumb-item__explorer">
|
|
162
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
163
|
+
</button>
|
|
164
|
+
</div>
|
|
165
|
+
</div>
|
|
166
|
+
</nav>
|
|
167
|
+
</div>
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
### Deep Navigation
|
|
171
|
+
|
|
172
|
+
```html
|
|
173
|
+
<div class="flex flex-col gap-6">
|
|
174
|
+
<nav class="ga-breadcrumb">
|
|
175
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
176
|
+
<div class="ga-breadcrumb-item__group">
|
|
177
|
+
<a class="ga-breadcrumb-item__trigger" href="#">
|
|
178
|
+
<span class="ga-breadcrumb-item__label">Settings</span>
|
|
179
|
+
</a>
|
|
180
|
+
<button class="ga-breadcrumb-item__explorer" tabindex="-1">
|
|
181
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
182
|
+
</button>
|
|
183
|
+
</div>
|
|
184
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
185
|
+
</div>
|
|
186
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
187
|
+
<a class="ga-breadcrumb-item__trigger" href="#">Accounting</a>
|
|
188
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
189
|
+
</div>
|
|
190
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
191
|
+
<div class="ga-breadcrumb-item__group">
|
|
192
|
+
<a class="ga-breadcrumb-item__trigger" href="#">
|
|
193
|
+
<span class="ga-breadcrumb-item__label">Chart of accounts</span>
|
|
194
|
+
</a>
|
|
195
|
+
<button class="ga-breadcrumb-item__explorer" tabindex="-1">
|
|
196
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
197
|
+
</button>
|
|
198
|
+
</div>
|
|
199
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
200
|
+
</div>
|
|
201
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--current-page">
|
|
202
|
+
<span class="ga-breadcrumb-item__trigger">Account 3000 – Revenue</span>
|
|
203
|
+
</div>
|
|
204
|
+
</nav>
|
|
205
|
+
<nav class="ga-breadcrumb">
|
|
206
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
207
|
+
<div class="ga-breadcrumb-item__group">
|
|
208
|
+
<a class="ga-breadcrumb-item__trigger" href="#">
|
|
209
|
+
<span class="ga-breadcrumb-item__label">Finance</span>
|
|
210
|
+
</a>
|
|
211
|
+
<button class="ga-breadcrumb-item__explorer" tabindex="-1">
|
|
212
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
213
|
+
</button>
|
|
214
|
+
</div>
|
|
215
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
216
|
+
</div>
|
|
217
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
218
|
+
<a class="ga-breadcrumb-item__trigger" href="#">General ledger</a>
|
|
219
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
220
|
+
</div>
|
|
221
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
222
|
+
<div class="ga-breadcrumb-item__group">
|
|
223
|
+
<a class="ga-breadcrumb-item__trigger" href="#">
|
|
224
|
+
<span class="ga-breadcrumb-item__label">Period 2027-Q1</span>
|
|
225
|
+
</a>
|
|
226
|
+
<button class="ga-breadcrumb-item__explorer" tabindex="-1">
|
|
227
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
228
|
+
</button>
|
|
229
|
+
</div>
|
|
230
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
231
|
+
</div>
|
|
232
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--current-page">
|
|
233
|
+
<span class="ga-breadcrumb-item__trigger">Journal #GL-0094</span>
|
|
234
|
+
</div>
|
|
235
|
+
</nav>
|
|
236
|
+
<nav class="ga-breadcrumb">
|
|
237
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
238
|
+
<a class="ga-breadcrumb-item__trigger" href="#">Administration</a>
|
|
239
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
240
|
+
</div>
|
|
241
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
242
|
+
<a class="ga-breadcrumb-item__trigger" href="#">User management</a>
|
|
243
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
244
|
+
</div>
|
|
245
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
246
|
+
<div class="ga-breadcrumb-item__group">
|
|
247
|
+
<a class="ga-breadcrumb-item__trigger" href="#">
|
|
248
|
+
<span class="ga-breadcrumb-item__label">Roles</span>
|
|
249
|
+
</a>
|
|
250
|
+
<button class="ga-breadcrumb-item__explorer" tabindex="-1">
|
|
251
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
252
|
+
</button>
|
|
253
|
+
</div>
|
|
254
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
255
|
+
</div>
|
|
256
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--current-page">
|
|
257
|
+
<span class="ga-breadcrumb-item__trigger">Finance Manager</span>
|
|
258
|
+
</div>
|
|
259
|
+
</nav>
|
|
260
|
+
</div>
|
|
261
|
+
```
|
|
262
|
+
|
|
263
|
+
### Explorer
|
|
264
|
+
|
|
265
|
+
```html
|
|
266
|
+
<div class="flex flex-col gap-8">
|
|
267
|
+
<div class="flex flex-col gap-1">
|
|
268
|
+
<p class="text-sm" style="color: var(--ga-color-text-subtle)">
|
|
269
|
+
Hover — text underlines, chevron becomes the target for opening a sibling
|
|
270
|
+
menu
|
|
271
|
+
</p>
|
|
272
|
+
<nav class="ga-breadcrumb">
|
|
273
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
274
|
+
<div class="ga-breadcrumb-item__group">
|
|
275
|
+
<a class="ga-breadcrumb-item__trigger" href="#">
|
|
276
|
+
<span class="ga-breadcrumb-item__label">Payroll</span>
|
|
277
|
+
</a>
|
|
278
|
+
<button class="ga-breadcrumb-item__explorer" tabindex="-1">
|
|
279
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
280
|
+
</button>
|
|
281
|
+
</div>
|
|
282
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
283
|
+
</div>
|
|
284
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
285
|
+
<a class="ga-breadcrumb-item__trigger" href="#">Pay runs</a>
|
|
286
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
287
|
+
</div>
|
|
288
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
289
|
+
<div class="ga-breadcrumb-item__group">
|
|
290
|
+
<a class="ga-breadcrumb-item__trigger" href="#">
|
|
291
|
+
<span class="ga-breadcrumb-item__label">Period 2027-Q1</span>
|
|
292
|
+
</a>
|
|
293
|
+
<button class="ga-breadcrumb-item__explorer" tabindex="-1">
|
|
294
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
295
|
+
</button>
|
|
296
|
+
</div>
|
|
297
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
298
|
+
</div>
|
|
299
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--current-page">
|
|
300
|
+
<span class="ga-breadcrumb-item__trigger">Journal #GL-0094</span>
|
|
301
|
+
</div>
|
|
302
|
+
</nav>
|
|
303
|
+
</div>
|
|
304
|
+
<div class="flex flex-col gap-1">
|
|
305
|
+
<p class="text-sm" style="color: var(--ga-color-text-subtle)">
|
|
306
|
+
Active — chevron clicked, menu lists sibling pay run periods
|
|
307
|
+
</p>
|
|
308
|
+
<nav class="ga-breadcrumb">
|
|
309
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
310
|
+
<div class="ga-breadcrumb-item__group">
|
|
311
|
+
<a class="ga-breadcrumb-item__trigger" href="#">
|
|
312
|
+
<span class="ga-breadcrumb-item__label">Payroll</span>
|
|
313
|
+
</a>
|
|
314
|
+
<button class="ga-breadcrumb-item__explorer" tabindex="-1">
|
|
315
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
316
|
+
</button>
|
|
317
|
+
</div>
|
|
318
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
319
|
+
</div>
|
|
320
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
321
|
+
<a class="ga-breadcrumb-item__trigger" href="#">Pay runs</a>
|
|
322
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
323
|
+
</div>
|
|
324
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
325
|
+
<div class="ga-breadcrumb-item__group">
|
|
326
|
+
<a class="ga-breadcrumb-item__trigger" href="#">
|
|
327
|
+
<span class="ga-breadcrumb-item__label">Period 2027-Q1</span>
|
|
328
|
+
</a>
|
|
329
|
+
<button
|
|
330
|
+
class="ga-breadcrumb-item__explorer"
|
|
331
|
+
tabindex="-1"
|
|
332
|
+
aria-expanded="true"
|
|
333
|
+
>
|
|
334
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
335
|
+
</button>
|
|
336
|
+
</div>
|
|
337
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
338
|
+
<div class="ga-breadcrumb-item__menu absolute top-full mt-[6px]">
|
|
339
|
+
<div class="ga-menu">
|
|
340
|
+
<button class="ga-menu__item">
|
|
341
|
+
<div class="ga-menu__item-content">
|
|
342
|
+
<div class="ga-menu__item-label">Period 2027 Q2</div>
|
|
343
|
+
</div>
|
|
344
|
+
</button>
|
|
345
|
+
<button class="ga-menu__item ga-menu__item--selected">
|
|
346
|
+
<div class="ga-menu__item-content">
|
|
347
|
+
<div class="ga-menu__item-label">Period 2027 Q3</div>
|
|
348
|
+
</div>
|
|
349
|
+
</button>
|
|
350
|
+
<button class="ga-menu__item">
|
|
351
|
+
<div class="ga-menu__item-content">
|
|
352
|
+
<div class="ga-menu__item-label">Period 2027 Q4</div>
|
|
353
|
+
</div>
|
|
354
|
+
</button>
|
|
355
|
+
</div>
|
|
356
|
+
</div>
|
|
357
|
+
</div>
|
|
358
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--current-page">
|
|
359
|
+
<span class="ga-breadcrumb-item__trigger">Journal #GL-0094</span>
|
|
360
|
+
</div>
|
|
361
|
+
</nav>
|
|
362
|
+
</div>
|
|
363
|
+
</div>
|
|
364
|
+
```
|
|
365
|
+
|
|
366
|
+
### Overflow
|
|
367
|
+
|
|
368
|
+
```html
|
|
369
|
+
<div class="flex flex-col gap-6">
|
|
370
|
+
<div class="flex flex-col gap-1">
|
|
371
|
+
<p class="text-sm" style="color: var(--ga-color-text-subtle)">
|
|
372
|
+
Full breadcrumb trail
|
|
373
|
+
</p>
|
|
374
|
+
<nav class="ga-breadcrumb">
|
|
375
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
376
|
+
<a class="ga-breadcrumb-item__trigger" href="#">Administration</a>
|
|
377
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
378
|
+
</div>
|
|
379
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
380
|
+
<a class="ga-breadcrumb-item__trigger" href="#">User management</a>
|
|
381
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
382
|
+
</div>
|
|
383
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
384
|
+
<div class="ga-breadcrumb-item__group">
|
|
385
|
+
<a class="ga-breadcrumb-item__trigger" href="#">
|
|
386
|
+
<span class="ga-breadcrumb-item__label">Roles</span>
|
|
387
|
+
</a>
|
|
388
|
+
<button class="ga-breadcrumb-item__explorer" tabindex="-1">
|
|
389
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
390
|
+
</button>
|
|
391
|
+
</div>
|
|
392
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
393
|
+
</div>
|
|
394
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--current-page">
|
|
395
|
+
<span class="ga-breadcrumb-item__trigger">Finance Manager</span>
|
|
396
|
+
</div>
|
|
397
|
+
</nav>
|
|
398
|
+
</div>
|
|
399
|
+
<div class="flex flex-col gap-1">
|
|
400
|
+
<p class="text-sm" style="color: var(--ga-color-text-subtle)">
|
|
401
|
+
Administration tier is hidden
|
|
402
|
+
</p>
|
|
403
|
+
<nav class="ga-breadcrumb">
|
|
404
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--overflow">
|
|
405
|
+
<button class="ga-breadcrumb-item__trigger" aria-expanded="false">
|
|
406
|
+
<span class="ga-breadcrumb-item__label">...</span>
|
|
407
|
+
<!-- icon: chevron-down, size=16, class="ga-icon" -->
|
|
408
|
+
</button>
|
|
409
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
410
|
+
</div>
|
|
411
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
412
|
+
<a class="ga-breadcrumb-item__trigger" href="#">User management</a>
|
|
413
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
414
|
+
</div>
|
|
415
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
416
|
+
<div class="ga-breadcrumb-item__group">
|
|
417
|
+
<a class="ga-breadcrumb-item__trigger" href="#">
|
|
418
|
+
<span class="ga-breadcrumb-item__label">Roles</span>
|
|
419
|
+
</a>
|
|
420
|
+
<button class="ga-breadcrumb-item__explorer" tabindex="-1">
|
|
421
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
422
|
+
</button>
|
|
423
|
+
</div>
|
|
424
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
425
|
+
</div>
|
|
426
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--current-page">
|
|
427
|
+
<span class="ga-breadcrumb-item__trigger">Finance Manager</span>
|
|
428
|
+
</div>
|
|
429
|
+
</nav>
|
|
430
|
+
</div>
|
|
431
|
+
<div class="flex flex-col gap-1">
|
|
432
|
+
<p class="text-sm" style="color: var(--ga-color-text-subtle)">
|
|
433
|
+
Deeper nesting, only last two items visible
|
|
434
|
+
</p>
|
|
435
|
+
<nav class="ga-breadcrumb">
|
|
436
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--overflow">
|
|
437
|
+
<button class="ga-breadcrumb-item__trigger" aria-expanded="false">
|
|
438
|
+
<span class="ga-breadcrumb-item__label">...</span>
|
|
439
|
+
<!-- icon: chevron-down, size=16, class="ga-icon" -->
|
|
440
|
+
</button>
|
|
441
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
442
|
+
</div>
|
|
443
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
444
|
+
<div class="ga-breadcrumb-item__group">
|
|
445
|
+
<a class="ga-breadcrumb-item__trigger" href="#">
|
|
446
|
+
<span class="ga-breadcrumb-item__label">Roles</span>
|
|
447
|
+
</a>
|
|
448
|
+
<button class="ga-breadcrumb-item__explorer" tabindex="-1">
|
|
449
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
450
|
+
</button>
|
|
451
|
+
</div>
|
|
452
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
453
|
+
</div>
|
|
454
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--current-page">
|
|
455
|
+
<span class="ga-breadcrumb-item__trigger">Finance Manager</span>
|
|
456
|
+
</div>
|
|
457
|
+
</nav>
|
|
458
|
+
</div>
|
|
459
|
+
<div class="flex flex-col gap-1">
|
|
460
|
+
<p class="text-sm" style="color: var(--ga-color-text-subtle)">
|
|
461
|
+
Extreme viewport, only current page visible
|
|
462
|
+
</p>
|
|
463
|
+
<nav class="ga-breadcrumb">
|
|
464
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--overflow">
|
|
465
|
+
<button class="ga-breadcrumb-item__trigger" aria-expanded="false">
|
|
466
|
+
<span class="ga-breadcrumb-item__label">...</span>
|
|
467
|
+
<!-- icon: chevron-down, size=16, class="ga-icon" -->
|
|
468
|
+
</button>
|
|
469
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
470
|
+
</div>
|
|
471
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--current-page">
|
|
472
|
+
<span class="ga-breadcrumb-item__trigger">Finance Manager</span>
|
|
473
|
+
</div>
|
|
474
|
+
</nav>
|
|
475
|
+
</div>
|
|
476
|
+
<div class="flex flex-col gap-1">
|
|
477
|
+
<p class="text-sm" style="color: var(--ga-color-text-subtle)">
|
|
478
|
+
Mobile view
|
|
479
|
+
</p>
|
|
480
|
+
<nav class="ga-breadcrumb">
|
|
481
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--back">
|
|
482
|
+
<a class="ga-breadcrumb-item__trigger" href="#">
|
|
483
|
+
<!-- icon: arrow-left, size=16, class="ga-icon" -->
|
|
484
|
+
</a>
|
|
485
|
+
<span class="ga-breadcrumb-item__label">Finance Manager</span>
|
|
486
|
+
</div>
|
|
487
|
+
</nav>
|
|
488
|
+
</div>
|
|
489
|
+
</div>
|
|
490
|
+
```
|
|
491
|
+
|
|
492
|
+
### Overflow Active
|
|
493
|
+
|
|
494
|
+
```html
|
|
495
|
+
<nav class="ga-breadcrumb">
|
|
496
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--overflow">
|
|
497
|
+
<button class="ga-breadcrumb-item__trigger" aria-expanded="true">
|
|
498
|
+
<span class="ga-breadcrumb-item__label">...</span>
|
|
499
|
+
<!-- icon: chevron-down, size=16, class="ga-icon" -->
|
|
500
|
+
</button>
|
|
501
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
502
|
+
<div class="ga-breadcrumb-item__menu absolute top-full mt-[6px]">
|
|
503
|
+
<div class="ga-menu">
|
|
504
|
+
<button class="ga-menu__item">
|
|
505
|
+
<div class="ga-menu__item-content">
|
|
506
|
+
<div class="ga-menu__item-label">Settings</div>
|
|
507
|
+
</div>
|
|
508
|
+
</button>
|
|
509
|
+
<button class="ga-menu__item">
|
|
510
|
+
<div class="ga-menu__item-content">
|
|
511
|
+
<div class="ga-menu__item-label">Finance</div>
|
|
512
|
+
</div>
|
|
513
|
+
</button>
|
|
514
|
+
<button class="ga-menu__item">
|
|
515
|
+
<div class="ga-menu__item-content">
|
|
516
|
+
<div class="ga-menu__item-label">Accounting</div>
|
|
517
|
+
</div>
|
|
518
|
+
</button>
|
|
519
|
+
</div>
|
|
520
|
+
</div>
|
|
521
|
+
</div>
|
|
522
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
523
|
+
<a class="ga-breadcrumb-item__trigger" href="#">Chart of accounts</a>
|
|
524
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
525
|
+
</div>
|
|
526
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--current-page">
|
|
527
|
+
<span class="ga-breadcrumb-item__trigger">Account 3000 – Revenue</span>
|
|
528
|
+
</div>
|
|
529
|
+
</nav>
|
|
530
|
+
```
|
|
531
|
+
|
|
532
|
+
### Truncation
|
|
533
|
+
|
|
534
|
+
```html
|
|
535
|
+
<div class="flex flex-col gap-8">
|
|
536
|
+
<div class="flex flex-col gap-1">
|
|
537
|
+
<p class="text-sm" style="color: var(--ga-color-text-subtle)">
|
|
538
|
+
Single truncated link item — hover shows full label via tooltip
|
|
539
|
+
</p>
|
|
540
|
+
<div class="pt-10">
|
|
541
|
+
<nav class="ga-breadcrumb">
|
|
542
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
543
|
+
<div class="ga-breadcrumb-item__group">
|
|
544
|
+
<a class="ga-breadcrumb-item__trigger" href="#">
|
|
545
|
+
<span class="ga-breadcrumb-item__label">Settings</span>
|
|
546
|
+
</a>
|
|
547
|
+
<button class="ga-breadcrumb-item__explorer" tabindex="-1">
|
|
548
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
549
|
+
</button>
|
|
550
|
+
</div>
|
|
551
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
552
|
+
</div>
|
|
553
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link group">
|
|
554
|
+
<div
|
|
555
|
+
class="invisible absolute bottom-full left-0 group-hover:visible"
|
|
556
|
+
>
|
|
557
|
+
<div
|
|
558
|
+
class="ga-tooltip ga-tooltip--top-start"
|
|
559
|
+
style="white-space: nowrap"
|
|
560
|
+
>
|
|
561
|
+
Bank account management
|
|
562
|
+
</div>
|
|
563
|
+
</div>
|
|
564
|
+
<div class="ga-breadcrumb-item__group">
|
|
565
|
+
<a class="ga-breadcrumb-item__trigger" href="#">
|
|
566
|
+
<span class="ga-breadcrumb-item__label">
|
|
567
|
+
Bank account man...ent
|
|
568
|
+
</span>
|
|
569
|
+
</a>
|
|
570
|
+
<button class="ga-breadcrumb-item__explorer" tabindex="-1">
|
|
571
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
572
|
+
</button>
|
|
573
|
+
</div>
|
|
574
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
575
|
+
</div>
|
|
576
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--current-page">
|
|
577
|
+
<span class="ga-breadcrumb-item__trigger">Account #BA-220</span>
|
|
578
|
+
</div>
|
|
579
|
+
</nav>
|
|
580
|
+
</div>
|
|
581
|
+
</div>
|
|
582
|
+
<div class="flex flex-col gap-1">
|
|
583
|
+
<p class="text-sm" style="color: var(--ga-color-text-subtle)">
|
|
584
|
+
Multiple truncated items — 4-level path where slot 2 and 3 are long
|
|
585
|
+
</p>
|
|
586
|
+
<div class="pt-10">
|
|
587
|
+
<nav class="ga-breadcrumb">
|
|
588
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link">
|
|
589
|
+
<div class="ga-breadcrumb-item__group">
|
|
590
|
+
<a class="ga-breadcrumb-item__trigger" href="#">
|
|
591
|
+
<span class="ga-breadcrumb-item__label">Settings</span>
|
|
592
|
+
</a>
|
|
593
|
+
<button class="ga-breadcrumb-item__explorer" tabindex="-1">
|
|
594
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
595
|
+
</button>
|
|
596
|
+
</div>
|
|
597
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
598
|
+
</div>
|
|
599
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link group">
|
|
600
|
+
<div
|
|
601
|
+
class="invisible absolute bottom-full left-0 group-hover:visible"
|
|
602
|
+
>
|
|
603
|
+
<div
|
|
604
|
+
class="ga-tooltip ga-tooltip--top-start"
|
|
605
|
+
style="white-space: nowrap"
|
|
606
|
+
>
|
|
607
|
+
Organisation configuration
|
|
608
|
+
</div>
|
|
609
|
+
</div>
|
|
610
|
+
<div class="ga-breadcrumb-item__group">
|
|
611
|
+
<a class="ga-breadcrumb-item__trigger" href="#">
|
|
612
|
+
<span class="ga-breadcrumb-item__label">
|
|
613
|
+
Organisation config...ion
|
|
614
|
+
</span>
|
|
615
|
+
</a>
|
|
616
|
+
<button class="ga-breadcrumb-item__explorer" tabindex="-1">
|
|
617
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
618
|
+
</button>
|
|
619
|
+
</div>
|
|
620
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
621
|
+
</div>
|
|
622
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--link group">
|
|
623
|
+
<div
|
|
624
|
+
class="invisible absolute bottom-full left-0 group-hover:visible"
|
|
625
|
+
>
|
|
626
|
+
<div
|
|
627
|
+
class="ga-tooltip ga-tooltip--top-start"
|
|
628
|
+
style="white-space: nowrap"
|
|
629
|
+
>
|
|
630
|
+
Bank account management
|
|
631
|
+
</div>
|
|
632
|
+
</div>
|
|
633
|
+
<div class="ga-breadcrumb-item__group">
|
|
634
|
+
<a class="ga-breadcrumb-item__trigger" href="#">
|
|
635
|
+
<span class="ga-breadcrumb-item__label">
|
|
636
|
+
Bank account man...ent
|
|
637
|
+
</span>
|
|
638
|
+
</a>
|
|
639
|
+
<button class="ga-breadcrumb-item__explorer" tabindex="-1">
|
|
640
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
641
|
+
</button>
|
|
642
|
+
</div>
|
|
643
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
644
|
+
</div>
|
|
645
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--current-page">
|
|
646
|
+
<span class="ga-breadcrumb-item__trigger">Account #BA-220</span>
|
|
647
|
+
</div>
|
|
648
|
+
</nav>
|
|
649
|
+
</div>
|
|
650
|
+
</div>
|
|
651
|
+
<div class="flex flex-col gap-1">
|
|
652
|
+
<p class="text-sm" style="color: var(--ga-color-text-subtle)">
|
|
653
|
+
Current-page item — last to truncate, always shows full title as page
|
|
654
|
+
heading when possible
|
|
655
|
+
</p>
|
|
656
|
+
<div class="flex flex-col gap-3">
|
|
657
|
+
<nav class="ga-breadcrumb">
|
|
658
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--overflow">
|
|
659
|
+
<button class="ga-breadcrumb-item__trigger" aria-expanded="false">
|
|
660
|
+
<span class="ga-breadcrumb-item__label">...</span>
|
|
661
|
+
<!-- icon: chevron-down, size=16, class="ga-icon" -->
|
|
662
|
+
</button>
|
|
663
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
664
|
+
</div>
|
|
665
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--current-page">
|
|
666
|
+
<div class="ga-breadcrumb-item__group">
|
|
667
|
+
<span class="ga-breadcrumb-item__trigger">
|
|
668
|
+
Invoice #INV-2025-03841 – Bergström
|
|
669
|
+
</span>
|
|
670
|
+
<button class="ga-breadcrumb-item__explorer">
|
|
671
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
672
|
+
</button>
|
|
673
|
+
</div>
|
|
674
|
+
</div>
|
|
675
|
+
</nav>
|
|
676
|
+
<div class="pt-10">
|
|
677
|
+
<nav class="ga-breadcrumb">
|
|
678
|
+
<div class="ga-breadcrumb-item ga-breadcrumb-item--overflow">
|
|
679
|
+
<button class="ga-breadcrumb-item__trigger" aria-expanded="false">
|
|
680
|
+
<span class="ga-breadcrumb-item__label">...</span>
|
|
681
|
+
<!-- icon: chevron-down, size=16, class="ga-icon" -->
|
|
682
|
+
</button>
|
|
683
|
+
<span class="ga-breadcrumb-item__separator">/</span>
|
|
684
|
+
</div>
|
|
685
|
+
<div
|
|
686
|
+
class="ga-breadcrumb-item ga-breadcrumb-item--current-page group"
|
|
687
|
+
>
|
|
688
|
+
<div
|
|
689
|
+
class="invisible absolute bottom-full left-0 group-hover:visible"
|
|
690
|
+
>
|
|
691
|
+
<div
|
|
692
|
+
class="ga-tooltip ga-tooltip--top-start"
|
|
693
|
+
style="white-space: nowrap"
|
|
694
|
+
>
|
|
695
|
+
Invoice #INV-2025-03841 – Bergström
|
|
696
|
+
</div>
|
|
697
|
+
</div>
|
|
698
|
+
<div class="ga-breadcrumb-item__group">
|
|
699
|
+
<span class="ga-breadcrumb-item__trigger">
|
|
700
|
+
Invoice #INV-20...röm
|
|
701
|
+
</span>
|
|
702
|
+
<button class="ga-breadcrumb-item__explorer">
|
|
703
|
+
<!-- icon: chevrons-up-down, size=16, class="ga-icon" -->
|
|
704
|
+
</button>
|
|
705
|
+
</div>
|
|
706
|
+
</div>
|
|
707
|
+
</nav>
|
|
708
|
+
</div>
|
|
709
|
+
</div>
|
|
710
|
+
</div>
|
|
711
|
+
</div>
|
|
712
|
+
```
|