@patternfly/patternfly 6.0.0-alpha.139 → 6.0.0-alpha.140
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/components/MultipleFileUpload/multiple-file-upload.css +1 -1
- package/components/MultipleFileUpload/multiple-file-upload.scss +1 -1
- package/components/Nav/nav.css +7 -0
- package/components/Nav/nav.scss +11 -0
- package/components/_index.css +8 -1
- package/docs/components/Nav/examples/Navigation.md +253 -194
- package/docs/demos/AboutModal/examples/AboutModal.md +15 -5
- package/docs/demos/Alert/examples/Alert.md +45 -15
- package/docs/demos/BackToTop/examples/BackToTop.md +15 -5
- package/docs/demos/Banner/examples/Banner.md +30 -10
- package/docs/demos/CardView/examples/CardView.md +33 -13
- package/docs/demos/ContextSelector/examples/ContextSelector.md +60 -20
- package/docs/demos/Dashboard/examples/Dashboard.md +15 -5
- package/docs/demos/DataList/examples/DataList.md +60 -20
- package/docs/demos/DescriptionList/examples/DescriptionList.md +45 -15
- package/docs/demos/Drawer/examples/Drawer.md +75 -25
- package/docs/demos/JumpLinks/examples/JumpLinks.md +90 -30
- package/docs/demos/Masthead/examples/Masthead.md +135 -45
- package/docs/demos/Modal/examples/Modal.md +90 -30
- package/docs/demos/Nav/examples/Nav.md +132 -46
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +75 -25
- package/docs/demos/Page/examples/Page.md +141 -47
- package/docs/demos/Page/examples/Penta.md +36 -12
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +105 -35
- package/docs/demos/Skeleton/examples/Skeleton.md +15 -5
- package/docs/demos/Table/examples/Table.md +225 -75
- package/docs/demos/Tabs/examples/Tabs.md +90 -30
- package/docs/demos/Toolbar/examples/Toolbar.md +30 -10
- package/docs/demos/Wizard/examples/Wizard.md +135 -45
- package/package.json +1 -1
- package/patternfly-no-globals.css +8 -1
- package/patternfly.css +8 -1
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -12,20 +12,24 @@ cssPrefix: pf-v6-c-nav
|
|
|
12
12
|
<nav class="pf-v6-c-nav" aria-label="Global">
|
|
13
13
|
<ul class="pf-v6-c-nav__list" role="list">
|
|
14
14
|
<li class="pf-v6-c-nav__item">
|
|
15
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
15
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
16
|
+
<span class="pf-v6-c-nav__link-text">Link 1</span>
|
|
17
|
+
</a>
|
|
16
18
|
</li>
|
|
17
19
|
<li class="pf-v6-c-nav__item">
|
|
18
|
-
<a
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
aria-current="page"
|
|
22
|
-
>Current link</a>
|
|
20
|
+
<a href="#" class="pf-v6-c-nav__link pf-m-current" aria-current="page">
|
|
21
|
+
<span class="pf-v6-c-nav__link-text">Current link</span>
|
|
22
|
+
</a>
|
|
23
23
|
</li>
|
|
24
24
|
<li class="pf-v6-c-nav__item">
|
|
25
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
25
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
26
|
+
<span class="pf-v6-c-nav__link-text">Link 3</span>
|
|
27
|
+
</a>
|
|
26
28
|
</li>
|
|
27
29
|
<li class="pf-v6-c-nav__item">
|
|
28
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
30
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
31
|
+
<span class="pf-v6-c-nav__link-text">Link 4</span>
|
|
32
|
+
</a>
|
|
29
33
|
</li>
|
|
30
34
|
</ul>
|
|
31
35
|
</nav>
|
|
@@ -40,13 +44,19 @@ cssPrefix: pf-v6-c-nav
|
|
|
40
44
|
<h2 class="pf-v6-c-nav__section-title" id="grouped-title1">Section title 1</h2>
|
|
41
45
|
<ul class="pf-v6-c-nav__list" role="list">
|
|
42
46
|
<li class="pf-v6-c-nav__item">
|
|
43
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
47
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
48
|
+
<span class="pf-v6-c-nav__link-text">Link 1</span>
|
|
49
|
+
</a>
|
|
44
50
|
</li>
|
|
45
51
|
<li class="pf-v6-c-nav__item">
|
|
46
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
52
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
53
|
+
<span class="pf-v6-c-nav__link-text">Link 2</span>
|
|
54
|
+
</a>
|
|
47
55
|
</li>
|
|
48
56
|
<li class="pf-v6-c-nav__item">
|
|
49
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
57
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
58
|
+
<span class="pf-v6-c-nav__link-text">Link 3</span>
|
|
59
|
+
</a>
|
|
50
60
|
</li>
|
|
51
61
|
</ul>
|
|
52
62
|
</section>
|
|
@@ -55,17 +65,19 @@ cssPrefix: pf-v6-c-nav
|
|
|
55
65
|
<h2 class="pf-v6-c-nav__section-title" id="grouped-title2">Section title 2</h2>
|
|
56
66
|
<ul class="pf-v6-c-nav__list" role="list">
|
|
57
67
|
<li class="pf-v6-c-nav__item">
|
|
58
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
68
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
69
|
+
<span class="pf-v6-c-nav__link-text">Link 1</span>
|
|
70
|
+
</a>
|
|
59
71
|
</li>
|
|
60
72
|
<li class="pf-v6-c-nav__item">
|
|
61
|
-
<a
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
aria-current="page"
|
|
65
|
-
>Current link</a>
|
|
73
|
+
<a href="#" class="pf-v6-c-nav__link pf-m-current" aria-current="page">
|
|
74
|
+
<span class="pf-v6-c-nav__link-text">Current link</span>
|
|
75
|
+
</a>
|
|
66
76
|
</li>
|
|
67
77
|
<li class="pf-v6-c-nav__item">
|
|
68
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
78
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
79
|
+
<span class="pf-v6-c-nav__link-text">Link 3</span>
|
|
80
|
+
</a>
|
|
69
81
|
</li>
|
|
70
82
|
</ul>
|
|
71
83
|
</section>
|
|
@@ -80,13 +92,19 @@ cssPrefix: pf-v6-c-nav
|
|
|
80
92
|
<section class="pf-v6-c-nav__section" aria-label="Section one">
|
|
81
93
|
<ul class="pf-v6-c-nav__list" role="list">
|
|
82
94
|
<li class="pf-v6-c-nav__item">
|
|
83
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
95
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
96
|
+
<span class="pf-v6-c-nav__link-text">Link 1</span>
|
|
97
|
+
</a>
|
|
84
98
|
</li>
|
|
85
99
|
<li class="pf-v6-c-nav__item">
|
|
86
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
100
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
101
|
+
<span class="pf-v6-c-nav__link-text">Link 2</span>
|
|
102
|
+
</a>
|
|
87
103
|
</li>
|
|
88
104
|
<li class="pf-v6-c-nav__item">
|
|
89
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
105
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
106
|
+
<span class="pf-v6-c-nav__link-text">Link 3</span>
|
|
107
|
+
</a>
|
|
90
108
|
</li>
|
|
91
109
|
</ul>
|
|
92
110
|
</section>
|
|
@@ -95,17 +113,19 @@ cssPrefix: pf-v6-c-nav
|
|
|
95
113
|
<section class="pf-v6-c-nav__section" aria-label="Section two">
|
|
96
114
|
<ul class="pf-v6-c-nav__list" role="list">
|
|
97
115
|
<li class="pf-v6-c-nav__item">
|
|
98
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
116
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
117
|
+
<span class="pf-v6-c-nav__link-text">Section 2, link 1</span>
|
|
118
|
+
</a>
|
|
99
119
|
</li>
|
|
100
120
|
<li class="pf-v6-c-nav__item">
|
|
101
|
-
<a
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
aria-current="page"
|
|
105
|
-
>Current link</a>
|
|
121
|
+
<a href="#" class="pf-v6-c-nav__link pf-m-current" aria-current="page">
|
|
122
|
+
<span class="pf-v6-c-nav__link-text">Current link</span>
|
|
123
|
+
</a>
|
|
106
124
|
</li>
|
|
107
125
|
<li class="pf-v6-c-nav__item">
|
|
108
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
126
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
127
|
+
<span class="pf-v6-c-nav__link-text">Link 3</span>
|
|
128
|
+
</a>
|
|
109
129
|
</li>
|
|
110
130
|
</ul>
|
|
111
131
|
</section>
|
|
@@ -124,7 +144,9 @@ cssPrefix: pf-v6-c-nav
|
|
|
124
144
|
aria-expanded="true"
|
|
125
145
|
id="expandable-example1"
|
|
126
146
|
>
|
|
127
|
-
|
|
147
|
+
<span
|
|
148
|
+
class="pf-v6-c-nav__link-text"
|
|
149
|
+
>Link 1 (current and expanded example)</span>
|
|
128
150
|
<span class="pf-v6-c-nav__toggle">
|
|
129
151
|
<span class="pf-v6-c-nav__toggle-icon">
|
|
130
152
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
@@ -137,17 +159,23 @@ cssPrefix: pf-v6-c-nav
|
|
|
137
159
|
>
|
|
138
160
|
<ul class="pf-v6-c-nav__list" role="list">
|
|
139
161
|
<li class="pf-v6-c-nav__item">
|
|
140
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
162
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
163
|
+
<span class="pf-v6-c-nav__link-text">Current link</span>
|
|
164
|
+
</a>
|
|
141
165
|
</li>
|
|
142
166
|
<li class="pf-v6-c-nav__item">
|
|
143
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
167
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
168
|
+
<span class="pf-v6-c-nav__link-text">Subnav link 2</span>
|
|
169
|
+
</a>
|
|
144
170
|
</li>
|
|
145
171
|
<li class="pf-v6-c-nav__item">
|
|
146
172
|
<a
|
|
147
173
|
href="#"
|
|
148
174
|
class="pf-v6-c-nav__link pf-m-current"
|
|
149
175
|
aria-current="page"
|
|
150
|
-
>
|
|
176
|
+
>
|
|
177
|
+
<span class="pf-v6-c-nav__link-text">Subnav link 3</span>
|
|
178
|
+
</a>
|
|
151
179
|
</li>
|
|
152
180
|
</ul>
|
|
153
181
|
</section>
|
|
@@ -158,10 +186,10 @@ cssPrefix: pf-v6-c-nav
|
|
|
158
186
|
aria-expanded="true"
|
|
159
187
|
id="expandable-example2"
|
|
160
188
|
>
|
|
161
|
-
Link 2 (expanded, but not current example)
|
|
162
189
|
<span
|
|
163
|
-
class="pf-v6-c-
|
|
164
|
-
>
|
|
190
|
+
class="pf-v6-c-nav__link-text"
|
|
191
|
+
>Link 2 (expanded, but not current example)</span>
|
|
192
|
+
<span class="pf-v6-c-nav__toggle">
|
|
165
193
|
<span class="pf-v6-c-nav__toggle-icon">
|
|
166
194
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
167
195
|
</span>
|
|
@@ -173,10 +201,14 @@ cssPrefix: pf-v6-c-nav
|
|
|
173
201
|
>
|
|
174
202
|
<ul class="pf-v6-c-nav__list" role="list">
|
|
175
203
|
<li class="pf-v6-c-nav__item">
|
|
176
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
204
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
205
|
+
<span class="pf-v6-c-nav__link-text">Subnav link 1</span>
|
|
206
|
+
</a>
|
|
177
207
|
</li>
|
|
178
208
|
<li class="pf-v6-c-nav__item">
|
|
179
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
209
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
210
|
+
<span class="pf-v6-c-nav__link-text">Subnav link 2</span>
|
|
211
|
+
</a>
|
|
180
212
|
</li>
|
|
181
213
|
</ul>
|
|
182
214
|
</section>
|
|
@@ -187,7 +219,7 @@ cssPrefix: pf-v6-c-nav
|
|
|
187
219
|
aria-expanded="false"
|
|
188
220
|
id="expandable-example3"
|
|
189
221
|
>
|
|
190
|
-
Link 3
|
|
222
|
+
<span class="pf-v6-c-nav__link-text">Link 3</span>
|
|
191
223
|
<span class="pf-v6-c-nav__toggle">
|
|
192
224
|
<span class="pf-v6-c-nav__toggle-icon">
|
|
193
225
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
@@ -201,10 +233,14 @@ cssPrefix: pf-v6-c-nav
|
|
|
201
233
|
>
|
|
202
234
|
<ul class="pf-v6-c-nav__list" role="list">
|
|
203
235
|
<li class="pf-v6-c-nav__item">
|
|
204
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
236
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
237
|
+
<span class="pf-v6-c-nav__link-text">Subnav link 1</span>
|
|
238
|
+
</a>
|
|
205
239
|
</li>
|
|
206
240
|
<li class="pf-v6-c-nav__item">
|
|
207
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
241
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
242
|
+
<span class="pf-v6-c-nav__link-text">Subnav link 2</span>
|
|
243
|
+
</a>
|
|
208
244
|
</li>
|
|
209
245
|
</ul>
|
|
210
246
|
</section>
|
|
@@ -221,7 +257,7 @@ cssPrefix: pf-v6-c-nav
|
|
|
221
257
|
<ul class="pf-v6-c-nav__list" role="list">
|
|
222
258
|
<li class="pf-v6-c-nav__item pf-m-expandable pf-m-expanded">
|
|
223
259
|
<button class="pf-v6-c-nav__link" aria-expanded="true">
|
|
224
|
-
Link 1
|
|
260
|
+
<span class="pf-v6-c-nav__link-text">Link 1</span>
|
|
225
261
|
<span class="pf-v6-c-nav__toggle">
|
|
226
262
|
<span class="pf-v6-c-nav__toggle-icon">
|
|
227
263
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
@@ -231,24 +267,30 @@ cssPrefix: pf-v6-c-nav
|
|
|
231
267
|
<section class="pf-v6-c-nav__subnav" aria-labelledby="subnav-title1">
|
|
232
268
|
<ul class="pf-v6-c-nav__list" role="list">
|
|
233
269
|
<li class="pf-v6-c-nav__item">
|
|
234
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
270
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
271
|
+
<span class="pf-v6-c-nav__link-text">Current link</span>
|
|
272
|
+
</a>
|
|
235
273
|
</li>
|
|
236
274
|
<li class="pf-v6-c-nav__item">
|
|
237
275
|
<a
|
|
238
276
|
href="#"
|
|
239
277
|
class="pf-v6-c-nav__link pf-m-current"
|
|
240
278
|
aria-current="page"
|
|
241
|
-
>
|
|
279
|
+
>
|
|
280
|
+
<span class="pf-v6-c-nav__link-text">Subnav link 2</span>
|
|
281
|
+
</a>
|
|
242
282
|
</li>
|
|
243
283
|
<li class="pf-v6-c-nav__item">
|
|
244
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
284
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
285
|
+
<span class="pf-v6-c-nav__link-text">Subnav link 3</span>
|
|
286
|
+
</a>
|
|
245
287
|
</li>
|
|
246
288
|
</ul>
|
|
247
289
|
</section>
|
|
248
290
|
</li>
|
|
249
291
|
<li class="pf-v6-c-nav__item pf-m-expandable pf-m-expanded">
|
|
250
292
|
<button class="pf-v6-c-nav__link" aria-expanded="true">
|
|
251
|
-
Link 2
|
|
293
|
+
<span class="pf-v6-c-nav__link-text">Link 2</span>
|
|
252
294
|
<span class="pf-v6-c-nav__toggle">
|
|
253
295
|
<span class="pf-v6-c-nav__toggle-icon">
|
|
254
296
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
@@ -258,10 +300,14 @@ cssPrefix: pf-v6-c-nav
|
|
|
258
300
|
<section class="pf-v6-c-nav__subnav" aria-labelledby="subnav-title2">
|
|
259
301
|
<ul class="pf-v6-c-nav__list" role="list">
|
|
260
302
|
<li class="pf-v6-c-nav__item">
|
|
261
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
303
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
304
|
+
<span class="pf-v6-c-nav__link-text">Subnav link 1</span>
|
|
305
|
+
</a>
|
|
262
306
|
</li>
|
|
263
307
|
<li class="pf-v6-c-nav__item">
|
|
264
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
308
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
309
|
+
<span class="pf-v6-c-nav__link-text">Subnav link 2</span>
|
|
310
|
+
</a>
|
|
265
311
|
</li>
|
|
266
312
|
</ul>
|
|
267
313
|
</section>
|
|
@@ -277,7 +323,9 @@ cssPrefix: pf-v6-c-nav
|
|
|
277
323
|
<nav class="pf-v6-c-nav" aria-label="Global">
|
|
278
324
|
<ul class="pf-v6-c-nav__list" role="list">
|
|
279
325
|
<li class="pf-v6-c-nav__item">
|
|
280
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
326
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
327
|
+
<span class="pf-v6-c-nav__link-text">Link 1 (not expandable)</span>
|
|
328
|
+
</a>
|
|
281
329
|
</li>
|
|
282
330
|
<li class="pf-v6-c-nav__item pf-m-expandable pf-m-expanded">
|
|
283
331
|
<button
|
|
@@ -285,10 +333,10 @@ cssPrefix: pf-v6-c-nav
|
|
|
285
333
|
aria-expanded="true"
|
|
286
334
|
id="nav-mixed-link2"
|
|
287
335
|
>
|
|
288
|
-
Link 2 (expanded, but not current example)
|
|
289
336
|
<span
|
|
290
|
-
class="pf-v6-c-
|
|
291
|
-
>
|
|
337
|
+
class="pf-v6-c-nav__link-text"
|
|
338
|
+
>Link 2 (expanded, but not current example)</span>
|
|
339
|
+
<span class="pf-v6-c-nav__toggle">
|
|
292
340
|
<span class="pf-v6-c-nav__toggle-icon">
|
|
293
341
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
294
342
|
</span>
|
|
@@ -297,10 +345,14 @@ cssPrefix: pf-v6-c-nav
|
|
|
297
345
|
<section class="pf-v6-c-nav__subnav" aria-labelledby="nav-mixed-link2">
|
|
298
346
|
<ul class="pf-v6-c-nav__list" role="list">
|
|
299
347
|
<li class="pf-v6-c-nav__item">
|
|
300
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
348
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
349
|
+
<span class="pf-v6-c-nav__link-text">Subnav link 1</span>
|
|
350
|
+
</a>
|
|
301
351
|
</li>
|
|
302
352
|
<li class="pf-v6-c-nav__item">
|
|
303
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
353
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
354
|
+
<span class="pf-v6-c-nav__link-text">Subnav link 2</span>
|
|
355
|
+
</a>
|
|
304
356
|
</li>
|
|
305
357
|
</ul>
|
|
306
358
|
</section>
|
|
@@ -311,10 +363,10 @@ cssPrefix: pf-v6-c-nav
|
|
|
311
363
|
aria-expanded="false"
|
|
312
364
|
id="nav-mixed-link4"
|
|
313
365
|
>
|
|
314
|
-
Link 3 (current, but not expanded example)
|
|
315
366
|
<span
|
|
316
|
-
class="pf-v6-c-
|
|
317
|
-
>
|
|
367
|
+
class="pf-v6-c-nav__link-text"
|
|
368
|
+
>Link 3 (current, but not expanded example)</span>
|
|
369
|
+
<span class="pf-v6-c-nav__toggle">
|
|
318
370
|
<span class="pf-v6-c-nav__toggle-icon">
|
|
319
371
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
320
372
|
</span>
|
|
@@ -327,17 +379,23 @@ cssPrefix: pf-v6-c-nav
|
|
|
327
379
|
>
|
|
328
380
|
<ul class="pf-v6-c-nav__list" role="list">
|
|
329
381
|
<li class="pf-v6-c-nav__item">
|
|
330
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
382
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
383
|
+
<span class="pf-v6-c-nav__link-text">Subnav link 1</span>
|
|
384
|
+
</a>
|
|
331
385
|
</li>
|
|
332
386
|
<li class="pf-v6-c-nav__item">
|
|
333
387
|
<a
|
|
334
388
|
href="#"
|
|
335
389
|
class="pf-v6-c-nav__link pf-m-current"
|
|
336
390
|
aria-current="page"
|
|
337
|
-
>
|
|
391
|
+
>
|
|
392
|
+
<span class="pf-v6-c-nav__link-text">Subnav link 2</span>
|
|
393
|
+
</a>
|
|
338
394
|
</li>
|
|
339
395
|
<li class="pf-v6-c-nav__item">
|
|
340
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
396
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
397
|
+
<span class="pf-v6-c-nav__link-text">Subnav link 3</span>
|
|
398
|
+
</a>
|
|
341
399
|
</li>
|
|
342
400
|
</ul>
|
|
343
401
|
</section>
|
|
@@ -353,13 +411,19 @@ cssPrefix: pf-v6-c-nav
|
|
|
353
411
|
<nav class="pf-v6-c-nav" aria-label="Global">
|
|
354
412
|
<ul class="pf-v6-c-nav__list" role="list">
|
|
355
413
|
<li class="pf-v6-c-nav__item">
|
|
356
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
414
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
415
|
+
<span class="pf-v6-c-nav__link-text">Clusters</span>
|
|
416
|
+
</a>
|
|
357
417
|
</li>
|
|
358
418
|
<li class="pf-v6-c-nav__item">
|
|
359
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
419
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
420
|
+
<span class="pf-v6-c-nav__link-text">Overview</span>
|
|
421
|
+
</a>
|
|
360
422
|
</li>
|
|
361
423
|
<li class="pf-v6-c-nav__item">
|
|
362
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
424
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
425
|
+
<span class="pf-v6-c-nav__link-text">Releases</span>
|
|
426
|
+
</a>
|
|
363
427
|
</li>
|
|
364
428
|
<li class="pf-v6-c-nav__item pf-m-expandable">
|
|
365
429
|
<button
|
|
@@ -367,7 +431,7 @@ cssPrefix: pf-v6-c-nav
|
|
|
367
431
|
aria-expanded="false"
|
|
368
432
|
id="expandable-third-level-example-example-1"
|
|
369
433
|
>
|
|
370
|
-
Subscriptions
|
|
434
|
+
<span class="pf-v6-c-nav__link-text">Subscriptions</span>
|
|
371
435
|
<span class="pf-v6-c-nav__toggle">
|
|
372
436
|
<span class="pf-v6-c-nav__toggle-icon">
|
|
373
437
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
@@ -381,10 +445,14 @@ cssPrefix: pf-v6-c-nav
|
|
|
381
445
|
>
|
|
382
446
|
<ul class="pf-v6-c-nav__list" role="list">
|
|
383
447
|
<li class="pf-v6-c-nav__item">
|
|
384
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
448
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
449
|
+
<span class="pf-v6-c-nav__link-text">Subnav link 1</span>
|
|
450
|
+
</a>
|
|
385
451
|
</li>
|
|
386
452
|
<li class="pf-v6-c-nav__item">
|
|
387
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
453
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
454
|
+
<span class="pf-v6-c-nav__link-text">Subnav link 2</span>
|
|
455
|
+
</a>
|
|
388
456
|
</li>
|
|
389
457
|
</ul>
|
|
390
458
|
</section>
|
|
@@ -395,7 +463,7 @@ cssPrefix: pf-v6-c-nav
|
|
|
395
463
|
aria-expanded="true"
|
|
396
464
|
id="expandable-third-level-example-example-2"
|
|
397
465
|
>
|
|
398
|
-
Cost management
|
|
466
|
+
<span class="pf-v6-c-nav__link-text">Cost management</span>
|
|
399
467
|
<span class="pf-v6-c-nav__toggle">
|
|
400
468
|
<span class="pf-v6-c-nav__toggle-icon">
|
|
401
469
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
@@ -408,10 +476,14 @@ cssPrefix: pf-v6-c-nav
|
|
|
408
476
|
>
|
|
409
477
|
<ul class="pf-v6-c-nav__list" role="list">
|
|
410
478
|
<li class="pf-v6-c-nav__item">
|
|
411
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
479
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
480
|
+
<span class="pf-v6-c-nav__link-text">Overview</span>
|
|
481
|
+
</a>
|
|
412
482
|
</li>
|
|
413
483
|
<li class="pf-v6-c-nav__item">
|
|
414
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
484
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
485
|
+
<span class="pf-v6-c-nav__link-text">Openshift</span>
|
|
486
|
+
</a>
|
|
415
487
|
</li>
|
|
416
488
|
<li class="pf-v6-c-nav__item pf-m-expandable pf-m-expanded">
|
|
417
489
|
<button
|
|
@@ -419,7 +491,7 @@ cssPrefix: pf-v6-c-nav
|
|
|
419
491
|
aria-expanded="true"
|
|
420
492
|
id="-sub-example-1"
|
|
421
493
|
>
|
|
422
|
-
Public clouds
|
|
494
|
+
<span class="pf-v6-c-nav__link-text">Public clouds</span>
|
|
423
495
|
<span class="pf-v6-c-nav__toggle">
|
|
424
496
|
<span class="pf-v6-c-nav__toggle-icon">
|
|
425
497
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
@@ -432,28 +504,40 @@ cssPrefix: pf-v6-c-nav
|
|
|
432
504
|
>
|
|
433
505
|
<ul class="pf-v6-c-nav__list" role="list">
|
|
434
506
|
<li class="pf-v6-c-nav__item">
|
|
435
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
507
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
508
|
+
<span class="pf-v6-c-nav__link-text">Amazon Web Services</span>
|
|
509
|
+
</a>
|
|
436
510
|
</li>
|
|
437
511
|
<li class="pf-v6-c-nav__item">
|
|
438
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
512
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
513
|
+
<span class="pf-v6-c-nav__link-text">Microsoft Azure</span>
|
|
514
|
+
</a>
|
|
439
515
|
</li>
|
|
440
516
|
<li class="pf-v6-c-nav__item">
|
|
441
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
517
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
518
|
+
<span class="pf-v6-c-nav__link-text">Google Cloud Services</span>
|
|
519
|
+
</a>
|
|
442
520
|
</li>
|
|
443
521
|
</ul>
|
|
444
522
|
</section>
|
|
445
523
|
</li>
|
|
446
524
|
<li class="pf-v6-c-nav__item">
|
|
447
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
525
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
526
|
+
<span class="pf-v6-c-nav__link-text">Cost Models</span>
|
|
527
|
+
</a>
|
|
448
528
|
</li>
|
|
449
529
|
<li class="pf-v6-c-nav__item">
|
|
450
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
530
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
531
|
+
<span class="pf-v6-c-nav__link-text">Cost Explorer</span>
|
|
532
|
+
</a>
|
|
451
533
|
</li>
|
|
452
534
|
</ul>
|
|
453
535
|
</section>
|
|
454
536
|
</li>
|
|
455
537
|
<li class="pf-v6-c-nav__item">
|
|
456
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
538
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
539
|
+
<span class="pf-v6-c-nav__link-text">Support Cases</span>
|
|
540
|
+
</a>
|
|
457
541
|
</li>
|
|
458
542
|
</ul>
|
|
459
543
|
</nav>
|
|
@@ -466,17 +550,19 @@ cssPrefix: pf-v6-c-nav
|
|
|
466
550
|
<nav class="pf-v6-c-nav pf-m-horizontal" aria-label="Global">
|
|
467
551
|
<ul class="pf-v6-c-nav__list" role="list">
|
|
468
552
|
<li class="pf-v6-c-nav__item">
|
|
469
|
-
<a
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
aria-current="page"
|
|
473
|
-
>Item 1</a>
|
|
553
|
+
<a href="#" class="pf-v6-c-nav__link pf-m-current" aria-current="page">
|
|
554
|
+
<span class="pf-v6-c-nav__link-text">Item 1</span>
|
|
555
|
+
</a>
|
|
474
556
|
</li>
|
|
475
557
|
<li class="pf-v6-c-nav__item">
|
|
476
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
558
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
559
|
+
<span class="pf-v6-c-nav__link-text">Item 2</span>
|
|
560
|
+
</a>
|
|
477
561
|
</li>
|
|
478
562
|
<li class="pf-v6-c-nav__item">
|
|
479
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
563
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
564
|
+
<span class="pf-v6-c-nav__link-text">Item 3</span>
|
|
565
|
+
</a>
|
|
480
566
|
</li>
|
|
481
567
|
</ul>
|
|
482
568
|
</nav>
|
|
@@ -499,23 +585,29 @@ cssPrefix: pf-v6-c-nav
|
|
|
499
585
|
</div>
|
|
500
586
|
<ul class="pf-v6-c-nav__list" role="list">
|
|
501
587
|
<li class="pf-v6-c-nav__item">
|
|
502
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
588
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
589
|
+
<span class="pf-v6-c-nav__link-text">Horizontal nav item 1</span>
|
|
590
|
+
</a>
|
|
503
591
|
</li>
|
|
504
592
|
<li class="pf-v6-c-nav__item">
|
|
505
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
593
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
594
|
+
<span class="pf-v6-c-nav__link-text">Horizontal nav item 2</span>
|
|
595
|
+
</a>
|
|
506
596
|
</li>
|
|
507
597
|
<li class="pf-v6-c-nav__item">
|
|
508
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
598
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
599
|
+
<span class="pf-v6-c-nav__link-text">Horizontal nav item 3</span>
|
|
600
|
+
</a>
|
|
509
601
|
</li>
|
|
510
602
|
<li class="pf-v6-c-nav__item">
|
|
511
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
603
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
604
|
+
<span class="pf-v6-c-nav__link-text">Horizontal nav item 4</span>
|
|
605
|
+
</a>
|
|
512
606
|
</li>
|
|
513
607
|
<li class="pf-v6-c-nav__item">
|
|
514
|
-
<a
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
aria-current="page"
|
|
518
|
-
>Horizontal nav item 5</a>
|
|
608
|
+
<a href="#" class="pf-v6-c-nav__link pf-m-current" aria-current="page">
|
|
609
|
+
<span class="pf-v6-c-nav__link-text">Horizontal nav item 5</span>
|
|
610
|
+
</a>
|
|
519
611
|
</li>
|
|
520
612
|
</ul>
|
|
521
613
|
<div class="pf-v6-c-nav__scroll-button">
|
|
@@ -537,17 +629,19 @@ cssPrefix: pf-v6-c-nav
|
|
|
537
629
|
<nav class="pf-v6-c-nav pf-m-horizontal pf-m-subnav" aria-label="Local">
|
|
538
630
|
<ul class="pf-v6-c-nav__list" role="list">
|
|
539
631
|
<li class="pf-v6-c-nav__item">
|
|
540
|
-
<a
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
aria-current="page"
|
|
544
|
-
>Item 1</a>
|
|
632
|
+
<a href="#" class="pf-v6-c-nav__link pf-m-current" aria-current="page">
|
|
633
|
+
<span class="pf-v6-c-nav__link-text">Item 1</span>
|
|
634
|
+
</a>
|
|
545
635
|
</li>
|
|
546
636
|
<li class="pf-v6-c-nav__item">
|
|
547
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
637
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
638
|
+
<span class="pf-v6-c-nav__link-text">Item 2</span>
|
|
639
|
+
</a>
|
|
548
640
|
</li>
|
|
549
641
|
<li class="pf-v6-c-nav__item">
|
|
550
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
642
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
643
|
+
<span class="pf-v6-c-nav__link-text">Item 3</span>
|
|
644
|
+
</a>
|
|
551
645
|
</li>
|
|
552
646
|
</ul>
|
|
553
647
|
</nav>
|
|
@@ -573,23 +667,29 @@ cssPrefix: pf-v6-c-nav
|
|
|
573
667
|
</div>
|
|
574
668
|
<ul class="pf-v6-c-nav__list" role="list">
|
|
575
669
|
<li class="pf-v6-c-nav__item">
|
|
576
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
670
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
671
|
+
<span class="pf-v6-c-nav__link-text">Horizontal nav item 1</span>
|
|
672
|
+
</a>
|
|
577
673
|
</li>
|
|
578
674
|
<li class="pf-v6-c-nav__item">
|
|
579
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
675
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
676
|
+
<span class="pf-v6-c-nav__link-text">Horizontal nav item 2</span>
|
|
677
|
+
</a>
|
|
580
678
|
</li>
|
|
581
679
|
<li class="pf-v6-c-nav__item">
|
|
582
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
680
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
681
|
+
<span class="pf-v6-c-nav__link-text">Horizontal nav item 3</span>
|
|
682
|
+
</a>
|
|
583
683
|
</li>
|
|
584
684
|
<li class="pf-v6-c-nav__item">
|
|
585
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
685
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
686
|
+
<span class="pf-v6-c-nav__link-text">Horizontal nav item 4</span>
|
|
687
|
+
</a>
|
|
586
688
|
</li>
|
|
587
689
|
<li class="pf-v6-c-nav__item">
|
|
588
|
-
<a
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
aria-current="page"
|
|
592
|
-
>Horizontal nav item 5</a>
|
|
690
|
+
<a href="#" class="pf-v6-c-nav__link pf-m-current" aria-current="page">
|
|
691
|
+
<span class="pf-v6-c-nav__link-text">Horizontal nav item 5</span>
|
|
692
|
+
</a>
|
|
593
693
|
</li>
|
|
594
694
|
</ul>
|
|
595
695
|
<div class="pf-v6-c-nav__scroll-button">
|
|
@@ -611,13 +711,19 @@ cssPrefix: pf-v6-c-nav
|
|
|
611
711
|
<nav class="pf-v6-c-nav" aria-label="Global">
|
|
612
712
|
<ul class="pf-v6-c-nav__list" role="list">
|
|
613
713
|
<li class="pf-v6-c-nav__item">
|
|
614
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
714
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
715
|
+
<span class="pf-v6-c-nav__link-text">Clusters</span>
|
|
716
|
+
</a>
|
|
615
717
|
</li>
|
|
616
718
|
<li class="pf-v6-c-nav__item">
|
|
617
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
719
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
720
|
+
<span class="pf-v6-c-nav__link-text">Overview</span>
|
|
721
|
+
</a>
|
|
618
722
|
</li>
|
|
619
723
|
<li class="pf-v6-c-nav__item">
|
|
620
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
724
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
725
|
+
<span class="pf-v6-c-nav__link-text">Releases</span>
|
|
726
|
+
</a>
|
|
621
727
|
</li>
|
|
622
728
|
<li class="pf-v6-c-nav__item pf-m-flyout">
|
|
623
729
|
<a
|
|
@@ -627,7 +733,7 @@ cssPrefix: pf-v6-c-nav
|
|
|
627
733
|
aria-haspopup="true"
|
|
628
734
|
aria-expanded="true"
|
|
629
735
|
>
|
|
630
|
-
Subscriptions
|
|
736
|
+
<span class="pf-v6-c-nav__link-text">Subscriptions</span>
|
|
631
737
|
<span class="pf-v6-c-nav__toggle">
|
|
632
738
|
<span class="pf-v6-c-nav__toggle-icon">
|
|
633
739
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
@@ -636,16 +742,24 @@ cssPrefix: pf-v6-c-nav
|
|
|
636
742
|
</a>
|
|
637
743
|
</li>
|
|
638
744
|
<li class="pf-v6-c-nav__item">
|
|
639
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
745
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
746
|
+
<span class="pf-v6-c-nav__link-text">Support cases</span>
|
|
747
|
+
</a>
|
|
640
748
|
</li>
|
|
641
749
|
<li class="pf-v6-c-nav__item">
|
|
642
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
750
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
751
|
+
<span class="pf-v6-c-nav__link-text">Cluster manager feedback</span>
|
|
752
|
+
</a>
|
|
643
753
|
</li>
|
|
644
754
|
<li class="pf-v6-c-nav__item">
|
|
645
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
755
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
756
|
+
<span class="pf-v6-c-nav__link-text">Red Hat Marketplace</span>
|
|
757
|
+
</a>
|
|
646
758
|
</li>
|
|
647
759
|
<li class="pf-v6-c-nav__item">
|
|
648
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
760
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
761
|
+
<span class="pf-v6-c-nav__link-text">Documentation</span>
|
|
762
|
+
</a>
|
|
649
763
|
</li>
|
|
650
764
|
</ul>
|
|
651
765
|
<div class="pf-v6-c-menu pf-m-flyout pf-m-nav">
|
|
@@ -2307,98 +2421,42 @@ cssPrefix: pf-v6-c-nav
|
|
|
2307
2421
|
|
|
2308
2422
|
```
|
|
2309
2423
|
|
|
2310
|
-
### Nav
|
|
2311
|
-
|
|
2312
|
-
When using anything other than a text node for the link text, wrap the link text in an element with `.pf-v6-c-nav__link-text`.
|
|
2424
|
+
### Nav item icons
|
|
2313
2425
|
|
|
2314
2426
|
```html isBeta
|
|
2315
2427
|
<nav class="pf-v6-c-nav" aria-label="Global">
|
|
2316
2428
|
<ul class="pf-v6-c-nav__list" role="list">
|
|
2317
2429
|
<li class="pf-v6-c-nav__item">
|
|
2318
2430
|
<a href="#" class="pf-v6-c-nav__link">
|
|
2319
|
-
<span class="pf-v6-c-nav__link-
|
|
2320
|
-
|
|
2321
|
-
<i class="fas fa-arrow-right" aria-hidden="true"></i>
|
|
2431
|
+
<span class="pf-v6-c-nav__link-icon">
|
|
2432
|
+
<i class="fas fa-fw fa-cube" aria-hidden="true"></i>
|
|
2322
2433
|
</span>
|
|
2434
|
+
<span class="pf-v6-c-nav__link-text">Link 1</span>
|
|
2323
2435
|
</a>
|
|
2324
2436
|
</li>
|
|
2325
|
-
<li class="pf-v6-c-nav__item
|
|
2326
|
-
<
|
|
2327
|
-
class="pf-v6-c-nav__link"
|
|
2328
|
-
|
|
2329
|
-
id="nav-link-text-link2"
|
|
2330
|
-
>
|
|
2331
|
-
<span class="pf-v6-c-nav__link-text">
|
|
2332
|
-
Link 2
|
|
2333
|
-
<small>(small text)</small>
|
|
2334
|
-
</span>
|
|
2335
|
-
<span class="pf-v6-c-nav__toggle">
|
|
2336
|
-
<span class="pf-v6-c-nav__toggle-icon">
|
|
2337
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2338
|
-
</span>
|
|
2437
|
+
<li class="pf-v6-c-nav__item">
|
|
2438
|
+
<a href="#" class="pf-v6-c-nav__link pf-m-current" aria-current="page">
|
|
2439
|
+
<span class="pf-v6-c-nav__link-icon">
|
|
2440
|
+
<i class="fas fa-fw fa-folder" aria-hidden="true"></i>
|
|
2339
2441
|
</span>
|
|
2340
|
-
|
|
2341
|
-
|
|
2342
|
-
class="pf-v6-c-nav__subnav"
|
|
2343
|
-
aria-labelledby="nav-link-text-link2"
|
|
2344
|
-
>
|
|
2345
|
-
<ul class="pf-v6-c-nav__list" role="list">
|
|
2346
|
-
<li class="pf-v6-c-nav__item">
|
|
2347
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
2348
|
-
<span class="pf-v6-c-nav__link-text">
|
|
2349
|
-
<i class="fas fa-user" aria-hidden="true"></i>
|
|
2350
|
-
Subnav link 1
|
|
2351
|
-
</span>
|
|
2352
|
-
</a>
|
|
2353
|
-
</li>
|
|
2354
|
-
<li class="pf-v6-c-nav__item">
|
|
2355
|
-
<a href="#" class="pf-v6-c-nav__link">
|
|
2356
|
-
<span class="pf-v6-c-nav__link-text">
|
|
2357
|
-
<i class="fas fa-user" aria-hidden="true"></i>
|
|
2358
|
-
Subnav link 2
|
|
2359
|
-
</span>
|
|
2360
|
-
</a>
|
|
2361
|
-
</li>
|
|
2362
|
-
</ul>
|
|
2363
|
-
</section>
|
|
2442
|
+
<span class="pf-v6-c-nav__link-text">Current link</span>
|
|
2443
|
+
</a>
|
|
2364
2444
|
</li>
|
|
2365
|
-
<li class="pf-v6-c-nav__item
|
|
2366
|
-
<
|
|
2367
|
-
class="pf-v6-c-nav__link"
|
|
2368
|
-
|
|
2369
|
-
id="nav-link-text-link4"
|
|
2370
|
-
>
|
|
2371
|
-
<span class="pf-v6-c-nav__link-text">
|
|
2372
|
-
Link 3
|
|
2373
|
-
<strong>(strong text)</strong>
|
|
2445
|
+
<li class="pf-v6-c-nav__item">
|
|
2446
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
2447
|
+
<span class="pf-v6-c-nav__link-icon">
|
|
2448
|
+
<i class="fas fa-fw fa-cloud" aria-hidden="true"></i>
|
|
2374
2449
|
</span>
|
|
2375
|
-
<span class="pf-v6-c-
|
|
2376
|
-
|
|
2377
|
-
|
|
2378
|
-
|
|
2450
|
+
<span class="pf-v6-c-nav__link-text">Link 3</span>
|
|
2451
|
+
</a>
|
|
2452
|
+
</li>
|
|
2453
|
+
<li class="pf-v6-c-nav__item">
|
|
2454
|
+
<a href="#" class="pf-v6-c-nav__link">
|
|
2455
|
+
<span class="pf-v6-c-nav__link-icon">
|
|
2456
|
+
<i class="fas fa-fw fa-code" aria-hidden="true"></i>
|
|
2379
2457
|
</span>
|
|
2380
|
-
|
|
2381
|
-
|
|
2382
|
-
class="pf-v6-c-nav__subnav"
|
|
2383
|
-
aria-labelledby="nav-link-text-link4"
|
|
2384
|
-
hidden
|
|
2385
|
-
>
|
|
2386
|
-
<ul class="pf-v6-c-nav__list" role="list">
|
|
2387
|
-
<li class="pf-v6-c-nav__item">
|
|
2388
|
-
<a href="#" class="pf-v6-c-nav__link">Subnav link 1</a>
|
|
2389
|
-
</li>
|
|
2390
|
-
<li class="pf-v6-c-nav__item">
|
|
2391
|
-
<a
|
|
2392
|
-
href="#"
|
|
2393
|
-
class="pf-v6-c-nav__link pf-m-current"
|
|
2394
|
-
aria-current="page"
|
|
2395
|
-
>Subnav link 2</a>
|
|
2396
|
-
</li>
|
|
2397
|
-
<li class="pf-v6-c-nav__item">
|
|
2398
|
-
<a href="#" class="pf-v6-c-nav__link">Subnav link 3</a>
|
|
2399
|
-
</li>
|
|
2400
|
-
</ul>
|
|
2401
|
-
</section>
|
|
2458
|
+
<span class="pf-v6-c-nav__link-text">Link 4</span>
|
|
2459
|
+
</a>
|
|
2402
2460
|
</li>
|
|
2403
2461
|
</ul>
|
|
2404
2462
|
</nav>
|
|
@@ -2436,6 +2494,7 @@ The navigation system relies on several different sub-components:
|
|
|
2436
2494
|
| `.pf-v6-c-nav__list` | `<ul>` | Initiates nav list. |
|
|
2437
2495
|
| `.pf-v6-c-nav__item` | `<li>` | Initiates nav list item. |
|
|
2438
2496
|
| `.pf-v6-c-nav__link` | `<a>` | Initiates nav list link. |
|
|
2497
|
+
| `.pf-v6-c-nav__link-icon` | `<span>` | Initiates nav list link icon. |
|
|
2439
2498
|
| `.pf-v6-c-nav__link-text` | `<span>` | Initiates nav list link text. |
|
|
2440
2499
|
| `.pf-v6-c-nav__section` | `<section>` | Initiates a nav section element. |
|
|
2441
2500
|
| `.pf-v6-c-nav__section-title` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>` | Initiates a nav section title. |
|