@patternfly/patternfly 5.0.0-prerelease.2 → 5.0.0-prerelease.3

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.
Files changed (42) hide show
  1. package/base/_common.scss +7 -0
  2. package/base/_variables.scss +0 -7
  3. package/base/patternfly-common.css +6 -0
  4. package/base/patternfly-variables.css +0 -6
  5. package/components/Masthead/masthead.css +2 -6
  6. package/components/Masthead/masthead.scss +1 -7
  7. package/components/Masthead/themes/dark/masthead.scss +1 -0
  8. package/components/MenuToggle/menu-toggle.css +13 -11
  9. package/components/MenuToggle/menu-toggle.scss +14 -12
  10. package/components/MenuToggle/themes/dark/menu-toggle.scss +2 -1
  11. package/docs/demos/AboutModal/examples/AboutModal.md +42 -774
  12. package/docs/demos/Alert/examples/Alert.md +126 -2322
  13. package/docs/demos/BackToTop/examples/BackToTop.md +42 -774
  14. package/docs/demos/Banner/examples/Banner.md +84 -1588
  15. package/docs/demos/CardView/examples/CardView.md +42 -774
  16. package/docs/demos/ContextSelector/examples/ContextSelector.md +136 -2448
  17. package/docs/demos/Dashboard/examples/Dashboard.md +42 -774
  18. package/docs/demos/DataList/examples/DataList.md +191 -3119
  19. package/docs/demos/DescriptionList/examples/DescriptionList.md +126 -2322
  20. package/docs/demos/Drawer/examples/Drawer.md +210 -3870
  21. package/docs/demos/JumpLinks/examples/JumpLinks.md +252 -4644
  22. package/docs/demos/Masthead/examples/Masthead.md +144 -1962
  23. package/docs/demos/Modal/examples/Modal.md +252 -4644
  24. package/docs/demos/Nav/examples/Nav.md +336 -6192
  25. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +231 -3891
  26. package/docs/demos/Page/examples/Page.md +378 -6966
  27. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +426 -5550
  28. package/docs/demos/Skeleton/examples/Skeleton.md +42 -774
  29. package/docs/demos/Table/examples/Table.md +752 -11732
  30. package/docs/demos/Tabs/examples/Tabs.md +252 -4644
  31. package/docs/demos/Toolbar/examples/Toolbar.md +84 -1548
  32. package/docs/demos/Wizard/examples/Wizard.md +378 -6966
  33. package/package.json +1 -1
  34. package/patternfly-base-no-globals-theme-dark-unversioned.css +6 -6
  35. package/patternfly-base-no-globals.css +6 -6
  36. package/patternfly-base-theme-dark-unversioned.css +6 -6
  37. package/patternfly-base.css +6 -6
  38. package/patternfly-no-globals.css +21 -23
  39. package/patternfly-theme-dark-unversioned.css +21 -23
  40. package/patternfly.css +21 -23
  41. package/patternfly.min.css +1 -1
  42. package/patternfly.min.css.map +1 -1
@@ -56,800 +56,68 @@ wrapperTag: div
56
56
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
57
57
  >
58
58
  <div class="pf-v5-c-toolbar__item">
59
- <nav
60
- class="pf-v5-c-app-launcher"
59
+ <button
60
+ class="pf-v5-c-menu-toggle pf-m-plain"
61
+ type="button"
62
+ aria-expanded="false"
61
63
  aria-label="Application launcher"
62
- id="data-list-basic-example-masthead-application-launcher"
63
64
  >
64
- <button
65
- class="pf-v5-c-app-launcher__toggle"
66
- type="button"
67
- id="data-list-basic-example-masthead-application-launcher-button"
68
- aria-expanded="false"
69
- aria-label="Application launcher"
70
- >
71
- <i class="fas fa-th" aria-hidden="true"></i>
72
- </button>
73
- <div
74
- class="pf-v5-c-app-launcher__menu pf-m-align-right"
75
- hidden
76
- >
77
- <div class="pf-v5-c-app-launcher__menu-search">
78
- <div class="pf-v5-c-text-input-group">
79
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
80
- <span class="pf-v5-c-text-input-group__text">
81
- <span class="pf-v5-c-text-input-group__icon">
82
- <i class="fas fa-fw fa-search"></i>
83
- </span>
84
- <input
85
- class="pf-v5-c-text-input-group__text-input"
86
- type="text"
87
- placeholder="Filer by name"
88
- value
89
- aria-label="Search input"
90
- />
91
- </span>
92
- </div>
93
- </div>
94
- </div>
95
- <section class="pf-v5-c-app-launcher__group">
96
- <h1 class="pf-v5-c-app-launcher__group-title">Favorites</h1>
97
- <ul role="list">
98
- <li
99
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
100
- >
101
- <a class="pf-v5-c-app-launcher__menu-item">
102
- Link 1
103
- <span
104
- class="pf-v5-c-app-launcher__menu-item-external-icon"
105
- >
106
- <i
107
- class="fas fa-external-link-alt"
108
- aria-hidden="true"
109
- ></i>
110
- </span>
111
- <span
112
- class="pf-v5-screen-reader"
113
- >(opens new window)</span>
114
- </a>
115
- <button
116
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
117
- type="button"
118
- aria-label="Favorite"
119
- >
120
- <i class="fas fa-star" aria-hidden="true"></i>
121
- </button>
122
- </li>
123
- <li
124
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
125
- >
126
- <a class="pf-v5-c-app-launcher__menu-item">
127
- Link 2
128
- <span
129
- class="pf-v5-c-app-launcher__menu-item-external-icon"
130
- >
131
- <i
132
- class="fas fa-external-link-alt"
133
- aria-hidden="true"
134
- ></i>
135
- </span>
136
- <span
137
- class="pf-v5-screen-reader"
138
- >(opens new window)</span>
139
- </a>
140
- <button
141
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
142
- type="button"
143
- aria-label="Favorite"
144
- >
145
- <i class="fas fa-star" aria-hidden="true"></i>
146
- </button>
147
- </li>
148
- </ul>
149
- </section>
150
- <hr class="pf-v5-c-divider" />
151
- <section class="pf-v5-c-app-launcher__group">
152
- <h1 class="pf-v5-c-app-launcher__group-title">Group 1</h1>
153
- <ul role="list">
154
- <li
155
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
156
- >
157
- <a class="pf-v5-c-app-launcher__menu-item">
158
- Link 1
159
- <span
160
- class="pf-v5-c-app-launcher__menu-item-external-icon"
161
- >
162
- <i
163
- class="fas fa-external-link-alt"
164
- aria-hidden="true"
165
- ></i>
166
- </span>
167
- <span
168
- class="pf-v5-screen-reader"
169
- >(opens new window)</span>
170
- </a>
171
- <button
172
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
173
- type="button"
174
- aria-label="Favorite"
175
- >
176
- <i class="fas fa-star" aria-hidden="true"></i>
177
- </button>
178
- </li>
179
- <li
180
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
181
- >
182
- <a class="pf-v5-c-app-launcher__menu-item">
183
- Link 2
184
- <span
185
- class="pf-v5-c-app-launcher__menu-item-external-icon"
186
- >
187
- <i
188
- class="fas fa-external-link-alt"
189
- aria-hidden="true"
190
- ></i>
191
- </span>
192
- <span
193
- class="pf-v5-screen-reader"
194
- >(opens new window)</span>
195
- </a>
196
- <button
197
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
198
- type="button"
199
- aria-label="Favorite"
200
- >
201
- <i class="fas fa-star" aria-hidden="true"></i>
202
- </button>
203
- </li>
204
- </ul>
205
- </section>
206
- </div>
207
- </nav>
65
+ <i class="fas fa-th" aria-hidden="true"></i>
66
+ </button>
208
67
  </div>
209
68
  <div class="pf-v5-c-toolbar__item">
210
- <div class="pf-v5-c-dropdown">
211
- <button
212
- class="pf-v5-c-dropdown__toggle pf-m-plain"
213
- id="data-list-basic-example-masthead-settings-button"
214
- aria-expanded="false"
215
- type="button"
216
- aria-label="Settings"
217
- >
218
- <i class="fas fa-cog" aria-hidden="true"></i>
219
- </button>
220
- <ul
221
- class="pf-v5-c-dropdown__menu pf-m-align-right"
222
- aria-labelledby="data-list-basic-example-masthead-settings-button"
223
- hidden
224
- >
225
- <li>
226
- <button
227
- class="pf-v5-c-dropdown__menu-item"
228
- type="button"
229
- >Settings</button>
230
- </li>
231
- <li>
232
- <button
233
- class="pf-v5-c-dropdown__menu-item"
234
- type="button"
235
- >Use the beta release</button>
236
- </li>
237
- </ul>
238
- </div>
69
+ <button
70
+ class="pf-v5-c-menu-toggle pf-m-plain"
71
+ type="button"
72
+ aria-expanded="false"
73
+ aria-label="Settings"
74
+ >
75
+ <i class="fas fa-cog" aria-hidden="true"></i>
76
+ </button>
239
77
  </div>
240
78
  <div class="pf-v5-c-toolbar__item">
241
- <div class="pf-v5-c-dropdown">
242
- <button
243
- class="pf-v5-c-dropdown__toggle pf-m-plain"
244
- id="data-list-basic-example-masthead-help-button"
245
- aria-expanded="false"
246
- type="button"
247
- aria-label="Help"
248
- >
249
- <i class="fas fa-question-circle" aria-hidden="true"></i>
250
- </button>
251
- <ul
252
- class="pf-v5-c-dropdown__menu pf-m-align-right"
253
- aria-labelledby="data-list-basic-example-masthead-help-button"
254
- hidden
255
- >
256
- <li>
257
- <button
258
- class="pf-v5-c-dropdown__menu-item"
259
- type="button"
260
- >Support options</button>
261
- </li>
262
- <li>
263
- <button
264
- class="pf-v5-c-dropdown__menu-item"
265
- type="button"
266
- >Open support case</button>
267
- </li>
268
- <li>
269
- <button
270
- class="pf-v5-c-dropdown__menu-item"
271
- type="button"
272
- >API documentation</button>
273
- </li>
274
- </ul>
275
- </div>
276
- </div>
277
- </div>
278
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
279
- <div class="pf-v5-c-dropdown">
280
79
  <button
281
80
  class="pf-v5-c-menu-toggle pf-m-plain"
282
81
  type="button"
283
82
  aria-expanded="false"
284
- aria-label="Actions"
83
+ aria-label="Help"
285
84
  >
286
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
85
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
287
86
  </button>
288
- <div
289
- class="pf-v5-c-menu pf-m-drilldown pf-m-align-right"
290
- hidden
291
- >
292
- <div class="pf-v5-c-menu__content">
293
- <section class="pf-v5-c-menu__group pf-m-hidden-on-sm">
294
- <ul class="pf-v5-c-menu__list" role="menu">
295
- <li
296
- class="pf-v5-c-menu__list-item pf-m-disabled"
297
- role="none"
298
- >
299
- <button
300
- class="pf-v5-c-menu__item"
301
- type="button"
302
- disabled
303
- role="menuitem"
304
- >
305
- <span class="pf-v5-c-menu__item-description">
306
- <div class="pf-v5-u-font-size-sm">Username:</div>
307
- <div class="pf-v5-u-font-size-md">ned_username</div>
308
- </span>
309
- </button>
310
- </li>
311
- <li
312
- class="pf-v5-c-menu__list-item pf-m-disabled"
313
- role="none"
314
- >
315
- <button
316
- class="pf-v5-c-menu__item"
317
- type="button"
318
- disabled
319
- role="menuitem"
320
- >
321
- <span class="pf-v5-c-menu__item-description">
322
- <div
323
- class="pf-v5-u-font-size-sm"
324
- >Account number:</div>
325
- <div class="pf-v5-u-font-size-md">123456789</div>
326
- </span>
327
- </button>
328
- </li>
329
- <li class="pf-v5-c-divider" role="separator"></li>
330
- <li class="pf-v5-c-menu__list-item" role="none">
331
- <button
332
- class="pf-v5-c-menu__item"
333
- type="button"
334
- role="menuitem"
335
- >
336
- <span class="pf-v5-c-menu__item-main">
337
- <span class="pf-v5-c-menu__item-text">My profile</span>
338
- </span>
339
- </button>
340
- </li>
341
- <li class="pf-v5-c-menu__list-item" role="none">
342
- <button
343
- class="pf-v5-c-menu__item"
344
- type="button"
345
- role="menuitem"
346
- >
347
- <span class="pf-v5-c-menu__item-main">
348
- <span
349
- class="pf-v5-c-menu__item-text"
350
- >User management</span>
351
- </span>
352
- </button>
353
- </li>
354
- <li class="pf-v5-c-menu__list-item" role="none">
355
- <button
356
- class="pf-v5-c-menu__item"
357
- type="button"
358
- role="menuitem"
359
- >
360
- <span class="pf-v5-c-menu__item-main">
361
- <span class="pf-v5-c-menu__item-text">Logout</span>
362
- </span>
363
- </button>
364
- </li>
365
- </ul>
366
- </section>
367
- <hr class="pf-v5-c-divider pf-m-hidden-on-sm" />
368
- <section class="pf-v5-c-menu__group">
369
- <ul class="pf-v5-c-menu__list" role="menu">
370
- <li class="pf-v5-c-menu__list-item" role="none">
371
- <button
372
- class="pf-v5-c-menu__item"
373
- type="button"
374
- role="menuitem"
375
- aria-expanded="false"
376
- >
377
- <span class="pf-v5-c-menu__item-main">
378
- <span class="pf-v5-c-menu__item-icon">
379
- <i
380
- class="fas fa-fw fa-cog"
381
- aria-hidden="true"
382
- ></i>
383
- </span>
384
- <span class="pf-v5-c-menu__item-text">Settings</span>
385
- <span class="pf-v5-c-menu__item-toggle-icon">
386
- <i class="fas fa-angle-right"></i>
387
- </span>
388
- </span>
389
- </button>
390
- <div class="pf-v5-c-menu" hidden>
391
- <div class="pf-v5-c-menu__content">
392
- <ul class="pf-v5-c-menu__list" role="menu">
393
- <li
394
- class="pf-v5-c-menu__list-item pf-m-drill-up"
395
- role="none"
396
- >
397
- <button
398
- class="pf-v5-c-menu__item"
399
- type="button"
400
- role="menuitem"
401
- >
402
- <span class="pf-v5-c-menu__item-main">
403
- <span
404
- class="pf-v5-c-menu__item-toggle-icon"
405
- >
406
- <i class="fas fa-angle-left"></i>
407
- </span>
408
- <span class="pf-v5-c-menu__item-icon">
409
- <i
410
- class="fas fa-fw fa-cog"
411
- aria-hidden="true"
412
- ></i>
413
- </span>
414
- <span
415
- class="pf-v5-c-menu__item-text"
416
- >Settings</span>
417
- </span>
418
- </button>
419
- </li>
420
- <li class="pf-v5-c-divider" role="separator"></li>
421
- <li
422
- class="pf-v5-c-menu__list-item"
423
- role="none"
424
- >
425
- <a
426
- class="pf-v5-c-menu__item"
427
- href="#"
428
- role="menuitem"
429
- >
430
- <span class="pf-v5-c-menu__item-main">
431
- <span
432
- class="pf-v5-c-menu__item-text"
433
- >Customer support</span>
434
- </span>
435
- </a>
436
- </li>
437
- <li
438
- class="pf-v5-c-menu__list-item"
439
- role="none"
440
- >
441
- <a
442
- class="pf-v5-c-menu__item"
443
- href="#"
444
- role="menuitem"
445
- >
446
- <span class="pf-v5-c-menu__item-main">
447
- <span
448
- class="pf-v5-c-menu__item-text"
449
- >About</span>
450
- </span>
451
- </a>
452
- </li>
453
- </ul>
454
- </div>
455
- </div>
456
- </li>
457
-
458
- <li class="pf-v5-c-menu__list-item" role="none">
459
- <button
460
- class="pf-v5-c-menu__item"
461
- type="button"
462
- role="menuitem"
463
- aria-expanded="false"
464
- >
465
- <span class="pf-v5-c-menu__item-main">
466
- <span class="pf-v5-c-menu__item-icon">
467
- <i
468
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
469
- aria-hidden="true"
470
- ></i>
471
- </span>
472
- <span class="pf-v5-c-menu__item-text">Help</span>
473
- <span class="pf-v5-c-menu__item-toggle-icon">
474
- <i class="fas fa-angle-right"></i>
475
- </span>
476
- </span>
477
- </button>
478
- <div class="pf-v5-c-menu" hidden>
479
- <div class="pf-v5-c-menu__content">
480
- <ul class="pf-v5-c-menu__list" role="menu">
481
- <li
482
- class="pf-v5-c-menu__list-item pf-m-drill-up"
483
- role="none"
484
- >
485
- <button
486
- class="pf-v5-c-menu__item"
487
- type="button"
488
- role="menuitem"
489
- >
490
- <span class="pf-v5-c-menu__item-main">
491
- <span
492
- class="pf-v5-c-menu__item-toggle-icon"
493
- >
494
- <i class="fas fa-angle-left"></i>
495
- </span>
496
- <span class="pf-v5-c-menu__item-icon">
497
- <i
498
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
499
- aria-hidden="true"
500
- ></i>
501
- </span>
502
- <span
503
- class="pf-v5-c-menu__item-text"
504
- >Help</span>
505
- </span>
506
- </button>
507
- </li>
508
- <li class="pf-v5-c-divider" role="separator"></li>
509
- <li
510
- class="pf-v5-c-menu__list-item"
511
- role="none"
512
- >
513
- <a
514
- class="pf-v5-c-menu__item"
515
- href="#"
516
- role="menuitem"
517
- >
518
- <span class="pf-v5-c-menu__item-main">
519
- <span
520
- class="pf-v5-c-menu__item-text"
521
- >Support options</span>
522
- </span>
523
- </a>
524
- </li>
525
- <li
526
- class="pf-v5-c-menu__list-item"
527
- role="none"
528
- >
529
- <a
530
- class="pf-v5-c-menu__item"
531
- href="#"
532
- role="menuitem"
533
- >
534
- <span class="pf-v5-c-menu__item-main">
535
- <span
536
- class="pf-v5-c-menu__item-text"
537
- >Open support case</span>
538
- </span>
539
- </a>
540
- </li>
541
- <li
542
- class="pf-v5-c-menu__list-item"
543
- role="none"
544
- >
545
- <a
546
- class="pf-v5-c-menu__item"
547
- href="#"
548
- role="menuitem"
549
- >
550
- <span class="pf-v5-c-menu__item-main">
551
- <span
552
- class="pf-v5-c-menu__item-text"
553
- >API documentation</span>
554
- </span>
555
- </a>
556
- </li>
557
- </ul>
558
- </div>
559
- </div>
560
- </li>
561
-
562
- <li class="pf-v5-c-menu__list-item" role="none">
563
- <button
564
- class="pf-v5-c-menu__item"
565
- type="button"
566
- role="menuitem"
567
- >
568
- <span class="pf-v5-c-menu__item-main">
569
- <span class="pf-v5-c-menu__item-icon">
570
- <i class="fas fa-fw fa-th" aria-hidden="true"></i>
571
- </span>
572
- <span
573
- class="pf-v5-c-menu__item-text"
574
- >Application launcher</span>
575
- <span class="pf-v5-c-menu__item-toggle-icon">
576
- <i class="fas fa-angle-right"></i>
577
- </span>
578
- </span>
579
- </button>
580
- <div class="pf-v5-c-menu" hidden>
581
- <div class="pf-v5-c-menu__header">
582
- <button
583
- class="pf-v5-c-menu__item"
584
- type="button"
585
- role="menuitem"
586
- >
587
- <span class="pf-v5-c-menu__item-main">
588
- <span
589
- class="pf-v5-c-menu__item-toggle-icon"
590
- >
591
- <i class="fas fa-angle-left"></i>
592
- </span>
593
- <span class="pf-v5-c-menu__item-icon">
594
- <i
595
- class="fas fa-fw fa-th"
596
- aria-hidden="true"
597
- ></i>
598
- </span>
599
- <span
600
- class="pf-v5-c-menu__item-text"
601
- >Application launcher</span>
602
- </span>
603
- </button>
604
- </div>
605
- <div class="pf-v5-c-menu__search">
606
- <div class="pf-v5-c-menu__search-input">
607
- <div class="pf-v5-c-text-input-group">
608
- <div
609
- class="pf-v5-c-text-input-group__main pf-m-icon"
610
- >
611
- <span
612
- class="pf-v5-c-text-input-group__text"
613
- >
614
- <span
615
- class="pf-v5-c-text-input-group__icon"
616
- >
617
- <i class="fas fa-fw fa-search"></i>
618
- </span>
619
- <input
620
- class="pf-v5-c-text-input-group__text-input"
621
- type="text"
622
- placeholder="Search"
623
- value
624
- aria-label="Search input"
625
- />
626
- </span>
627
- </div>
628
- </div>
629
- </div>
630
- </div>
631
- <hr class="pf-v5-c-divider" />
632
- <section class="pf-v5-c-menu__group">
633
- <h1 class="pf-v5-c-menu__group-title">Favorites</h1>
634
- <ul class="pf-v5-c-menu__list" role="menu">
635
- <li
636
- class="pf-v5-c-menu__list-item"
637
- role="none"
638
- >
639
- <a
640
- class="pf-v5-c-menu__item"
641
- href="#"
642
- role="menuitem"
643
- >
644
- <span class="pf-v5-c-menu__item-main">
645
- <span
646
- class="pf-v5-c-menu__item-text"
647
- >Link 1</span>
648
- </span>
649
- </a>
650
- <button
651
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
652
- type="button"
653
- aria-label="Starred"
654
- >
655
- <span
656
- class="pf-v5-c-menu__item-action-icon"
657
- >
658
- <i
659
- class="fas fa-star"
660
- aria-hidden="true"
661
- ></i>
662
- </span>
663
- </button>
664
- </li>
665
- <li
666
- class="pf-v5-c-menu__list-item"
667
- role="none"
668
- >
669
- <a
670
- class="pf-v5-c-menu__item"
671
- href="#"
672
- role="menuitem"
673
- target="_blank"
674
- >
675
- <span class="pf-v5-c-menu__item-main">
676
- <span
677
- class="pf-v5-c-menu__item-text"
678
- >Link 2</span>
679
- <span
680
- class="pf-v5-c-menu__item-external-icon"
681
- >
682
- <i
683
- class="fas fa-external-link-alt"
684
- aria-hidden="true"
685
- ></i>
686
- </span>
687
- <span
688
- class="pf-v5-screen-reader"
689
- >(opens new window)</span>
690
- </span>
691
- </a>
692
- <button
693
- class="pf-v5-c-menu__item-action pf-m-favorite"
694
- type="button"
695
- aria-label="Not starred"
696
- >
697
- <span
698
- class="pf-v5-c-menu__item-action-icon"
699
- >
700
- <i
701
- class="fas fa-star"
702
- aria-hidden="true"
703
- ></i>
704
- </span>
705
- </button>
706
- </li>
707
- </ul>
708
- </section>
709
- <hr class="pf-v5-c-divider" />
710
- <section class="pf-v5-c-menu__group">
711
- <h1 class="pf-v5-c-menu__group-title">Group 1</h1>
712
- <ul class="pf-v5-c-menu__list" role="menu">
713
- <li
714
- class="pf-v5-c-menu__list-item"
715
- role="none"
716
- >
717
- <a
718
- class="pf-v5-c-menu__item"
719
- href="#"
720
- role="menuitem"
721
- >
722
- <span class="pf-v5-c-menu__item-main">
723
- <span
724
- class="pf-v5-c-menu__item-text"
725
- >Link 1</span>
726
- </span>
727
- </a>
728
- <button
729
- class="pf-v5-c-menu__item-action pf-m-favorite"
730
- type="button"
731
- aria-label="Not starred"
732
- >
733
- <span
734
- class="pf-v5-c-menu__item-action-icon"
735
- >
736
- <i
737
- class="fas fa-star"
738
- aria-hidden="true"
739
- ></i>
740
- </span>
741
- </button>
742
- </li>
743
- <li
744
- class="pf-v5-c-menu__list-item"
745
- role="none"
746
- >
747
- <a
748
- class="pf-v5-c-menu__item"
749
- href="#"
750
- role="menuitem"
751
- target="_blank"
752
- >
753
- <span class="pf-v5-c-menu__item-main">
754
- <span
755
- class="pf-v5-c-menu__item-text"
756
- >Link 2</span>
757
- <span
758
- class="pf-v5-c-menu__item-external-icon"
759
- >
760
- <i
761
- class="fas fa-external-link-alt"
762
- aria-hidden="true"
763
- ></i>
764
- </span>
765
- <span
766
- class="pf-v5-screen-reader"
767
- >(opens new window)</span>
768
- </span>
769
- </a>
770
- <button
771
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
772
- type="button"
773
- aria-label="Starred"
774
- >
775
- <span
776
- class="pf-v5-c-menu__item-action-icon"
777
- >
778
- <i
779
- class="fas fa-star"
780
- aria-hidden="true"
781
- ></i>
782
- </span>
783
- </button>
784
- </li>
785
- </ul>
786
- </section>
787
- </div>
788
- </li>
789
- </ul>
790
- </section>
791
- </div>
792
- </div>
793
87
  </div>
794
88
  </div>
795
- </div>
796
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
797
- <div
798
- class="pf-v5-c-dropdown pf-m-full-height"
799
- style="--pf-v5-c-dropdown--MaxWidth: 20ch;"
800
- >
89
+ <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
801
90
  <button
802
- class="pf-v5-c-dropdown__toggle"
803
- id="data-list-basic-example-masthead-profile-button"
804
- aria-expanded="false"
91
+ class="pf-v5-c-menu-toggle pf-m-plain"
805
92
  type="button"
93
+ aria-expanded="false"
94
+ aria-label="Actions"
806
95
  >
807
- <span class="pf-v5-c-dropdown__toggle-image">
808
- <img
809
- class="pf-v5-c-avatar"
810
- alt="Avatar image"
811
- src="/assets/images/img_avatar-light.svg"
812
- />
813
- </span>
814
- <span class="pf-v5-c-dropdown__toggle-text">Ned Username</span>
815
- <span class="pf-v5-c-dropdown__toggle-icon">
816
- <i class="fas fa-caret-down" aria-hidden="true"></i>
817
- </span>
96
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
818
97
  </button>
819
- <div class="pf-v5-c-dropdown__menu" hidden>
820
- <section class="pf-v5-c-dropdown__group">
821
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
822
- <div class="pf-v5-u-font-size-sm">Account number:</div>
823
- <div>123456789</div>
824
- </div>
825
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
826
- <div class="pf-v5-u-font-size-sm">Username:</div>
827
- <div>mshaksho@redhat.com</div>
828
- </div>
829
- </section>
830
- <hr class="pf-v5-c-divider" />
831
- <section class="pf-v5-c-dropdown__group">
832
- <ul>
833
- <li>
834
- <a
835
- class="pf-v5-c-dropdown__menu-item"
836
- href="#"
837
- >My profile</a>
838
- </li>
839
- <li>
840
- <a
841
- class="pf-v5-c-dropdown__menu-item"
842
- href="#"
843
- >User management</a>
844
- </li>
845
- <li>
846
- <a class="pf-v5-c-dropdown__menu-item" href="#">Logout</a>
847
- </li>
848
- </ul>
849
- </section>
850
- </div>
851
98
  </div>
852
99
  </div>
100
+ <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
101
+ <button
102
+ class="pf-v5-c-menu-toggle pf-m-full-height"
103
+ type="button"
104
+ aria-expanded="false"
105
+ >
106
+ <span class="pf-v5-c-menu-toggle__icon">
107
+ <img
108
+ class="pf-v5-c-avatar"
109
+ alt="Avatar image"
110
+ src="/assets/images/img_avatar-light.svg"
111
+ />
112
+ </span>
113
+ <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
114
+ <span class="pf-v5-c-menu-toggle__controls">
115
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
116
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
117
+ </span>
118
+ </span>
119
+ </button>
120
+ </div>
853
121
  </div>
854
122
  </div>
855
123
  </div>
@@ -1649,800 +917,68 @@ wrapperTag: div
1649
917
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
1650
918
  >
1651
919
  <div class="pf-v5-c-toolbar__item">
1652
- <nav
1653
- class="pf-v5-c-app-launcher"
920
+ <button
921
+ class="pf-v5-c-menu-toggle pf-m-plain"
922
+ type="button"
923
+ aria-expanded="false"
1654
924
  aria-label="Application launcher"
1655
- id="data-list-actionable-example-masthead-application-launcher"
1656
925
  >
1657
- <button
1658
- class="pf-v5-c-app-launcher__toggle"
1659
- type="button"
1660
- id="data-list-actionable-example-masthead-application-launcher-button"
1661
- aria-expanded="false"
1662
- aria-label="Application launcher"
1663
- >
1664
- <i class="fas fa-th" aria-hidden="true"></i>
1665
- </button>
1666
- <div
1667
- class="pf-v5-c-app-launcher__menu pf-m-align-right"
1668
- hidden
1669
- >
1670
- <div class="pf-v5-c-app-launcher__menu-search">
1671
- <div class="pf-v5-c-text-input-group">
1672
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
1673
- <span class="pf-v5-c-text-input-group__text">
1674
- <span class="pf-v5-c-text-input-group__icon">
1675
- <i class="fas fa-fw fa-search"></i>
1676
- </span>
1677
- <input
1678
- class="pf-v5-c-text-input-group__text-input"
1679
- type="text"
1680
- placeholder="Filer by name"
1681
- value
1682
- aria-label="Search input"
1683
- />
1684
- </span>
1685
- </div>
1686
- </div>
1687
- </div>
1688
- <section class="pf-v5-c-app-launcher__group">
1689
- <h1 class="pf-v5-c-app-launcher__group-title">Favorites</h1>
1690
- <ul role="list">
1691
- <li
1692
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1693
- >
1694
- <a class="pf-v5-c-app-launcher__menu-item">
1695
- Link 1
1696
- <span
1697
- class="pf-v5-c-app-launcher__menu-item-external-icon"
1698
- >
1699
- <i
1700
- class="fas fa-external-link-alt"
1701
- aria-hidden="true"
1702
- ></i>
1703
- </span>
1704
- <span
1705
- class="pf-v5-screen-reader"
1706
- >(opens new window)</span>
1707
- </a>
1708
- <button
1709
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
1710
- type="button"
1711
- aria-label="Favorite"
1712
- >
1713
- <i class="fas fa-star" aria-hidden="true"></i>
1714
- </button>
1715
- </li>
1716
- <li
1717
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
1718
- >
1719
- <a class="pf-v5-c-app-launcher__menu-item">
1720
- Link 2
1721
- <span
1722
- class="pf-v5-c-app-launcher__menu-item-external-icon"
1723
- >
1724
- <i
1725
- class="fas fa-external-link-alt"
1726
- aria-hidden="true"
1727
- ></i>
1728
- </span>
1729
- <span
1730
- class="pf-v5-screen-reader"
1731
- >(opens new window)</span>
1732
- </a>
1733
- <button
1734
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
1735
- type="button"
1736
- aria-label="Favorite"
1737
- >
1738
- <i class="fas fa-star" aria-hidden="true"></i>
1739
- </button>
1740
- </li>
1741
- </ul>
1742
- </section>
1743
- <hr class="pf-v5-c-divider" />
1744
- <section class="pf-v5-c-app-launcher__group">
1745
- <h1 class="pf-v5-c-app-launcher__group-title">Group 1</h1>
1746
- <ul role="list">
1747
- <li
1748
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
1749
- >
1750
- <a class="pf-v5-c-app-launcher__menu-item">
1751
- Link 1
1752
- <span
1753
- class="pf-v5-c-app-launcher__menu-item-external-icon"
1754
- >
1755
- <i
1756
- class="fas fa-external-link-alt"
1757
- aria-hidden="true"
1758
- ></i>
1759
- </span>
1760
- <span
1761
- class="pf-v5-screen-reader"
1762
- >(opens new window)</span>
1763
- </a>
1764
- <button
1765
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
1766
- type="button"
1767
- aria-label="Favorite"
1768
- >
1769
- <i class="fas fa-star" aria-hidden="true"></i>
1770
- </button>
1771
- </li>
1772
- <li
1773
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1774
- >
1775
- <a class="pf-v5-c-app-launcher__menu-item">
1776
- Link 2
1777
- <span
1778
- class="pf-v5-c-app-launcher__menu-item-external-icon"
1779
- >
1780
- <i
1781
- class="fas fa-external-link-alt"
1782
- aria-hidden="true"
1783
- ></i>
1784
- </span>
1785
- <span
1786
- class="pf-v5-screen-reader"
1787
- >(opens new window)</span>
1788
- </a>
1789
- <button
1790
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
1791
- type="button"
1792
- aria-label="Favorite"
1793
- >
1794
- <i class="fas fa-star" aria-hidden="true"></i>
1795
- </button>
1796
- </li>
1797
- </ul>
1798
- </section>
1799
- </div>
1800
- </nav>
926
+ <i class="fas fa-th" aria-hidden="true"></i>
927
+ </button>
1801
928
  </div>
1802
929
  <div class="pf-v5-c-toolbar__item">
1803
- <div class="pf-v5-c-dropdown">
1804
- <button
1805
- class="pf-v5-c-dropdown__toggle pf-m-plain"
1806
- id="data-list-actionable-example-masthead-settings-button"
1807
- aria-expanded="false"
1808
- type="button"
1809
- aria-label="Settings"
1810
- >
1811
- <i class="fas fa-cog" aria-hidden="true"></i>
1812
- </button>
1813
- <ul
1814
- class="pf-v5-c-dropdown__menu pf-m-align-right"
1815
- aria-labelledby="data-list-actionable-example-masthead-settings-button"
1816
- hidden
1817
- >
1818
- <li>
1819
- <button
1820
- class="pf-v5-c-dropdown__menu-item"
1821
- type="button"
1822
- >Settings</button>
1823
- </li>
1824
- <li>
1825
- <button
1826
- class="pf-v5-c-dropdown__menu-item"
1827
- type="button"
1828
- >Use the beta release</button>
1829
- </li>
1830
- </ul>
1831
- </div>
930
+ <button
931
+ class="pf-v5-c-menu-toggle pf-m-plain"
932
+ type="button"
933
+ aria-expanded="false"
934
+ aria-label="Settings"
935
+ >
936
+ <i class="fas fa-cog" aria-hidden="true"></i>
937
+ </button>
1832
938
  </div>
1833
939
  <div class="pf-v5-c-toolbar__item">
1834
- <div class="pf-v5-c-dropdown">
1835
- <button
1836
- class="pf-v5-c-dropdown__toggle pf-m-plain"
1837
- id="data-list-actionable-example-masthead-help-button"
1838
- aria-expanded="false"
1839
- type="button"
1840
- aria-label="Help"
1841
- >
1842
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1843
- </button>
1844
- <ul
1845
- class="pf-v5-c-dropdown__menu pf-m-align-right"
1846
- aria-labelledby="data-list-actionable-example-masthead-help-button"
1847
- hidden
1848
- >
1849
- <li>
1850
- <button
1851
- class="pf-v5-c-dropdown__menu-item"
1852
- type="button"
1853
- >Support options</button>
1854
- </li>
1855
- <li>
1856
- <button
1857
- class="pf-v5-c-dropdown__menu-item"
1858
- type="button"
1859
- >Open support case</button>
1860
- </li>
1861
- <li>
1862
- <button
1863
- class="pf-v5-c-dropdown__menu-item"
1864
- type="button"
1865
- >API documentation</button>
1866
- </li>
1867
- </ul>
1868
- </div>
1869
- </div>
1870
- </div>
1871
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
1872
- <div class="pf-v5-c-dropdown">
1873
940
  <button
1874
941
  class="pf-v5-c-menu-toggle pf-m-plain"
1875
942
  type="button"
1876
943
  aria-expanded="false"
1877
- aria-label="Actions"
944
+ aria-label="Help"
1878
945
  >
1879
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
946
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
1880
947
  </button>
1881
- <div
1882
- class="pf-v5-c-menu pf-m-drilldown pf-m-align-right"
1883
- hidden
1884
- >
1885
- <div class="pf-v5-c-menu__content">
1886
- <section class="pf-v5-c-menu__group pf-m-hidden-on-sm">
1887
- <ul class="pf-v5-c-menu__list" role="menu">
1888
- <li
1889
- class="pf-v5-c-menu__list-item pf-m-disabled"
1890
- role="none"
1891
- >
1892
- <button
1893
- class="pf-v5-c-menu__item"
1894
- type="button"
1895
- disabled
1896
- role="menuitem"
1897
- >
1898
- <span class="pf-v5-c-menu__item-description">
1899
- <div class="pf-v5-u-font-size-sm">Username:</div>
1900
- <div class="pf-v5-u-font-size-md">ned_username</div>
1901
- </span>
1902
- </button>
1903
- </li>
1904
- <li
1905
- class="pf-v5-c-menu__list-item pf-m-disabled"
1906
- role="none"
1907
- >
1908
- <button
1909
- class="pf-v5-c-menu__item"
1910
- type="button"
1911
- disabled
1912
- role="menuitem"
1913
- >
1914
- <span class="pf-v5-c-menu__item-description">
1915
- <div
1916
- class="pf-v5-u-font-size-sm"
1917
- >Account number:</div>
1918
- <div class="pf-v5-u-font-size-md">123456789</div>
1919
- </span>
1920
- </button>
1921
- </li>
1922
- <li class="pf-v5-c-divider" role="separator"></li>
1923
- <li class="pf-v5-c-menu__list-item" role="none">
1924
- <button
1925
- class="pf-v5-c-menu__item"
1926
- type="button"
1927
- role="menuitem"
1928
- >
1929
- <span class="pf-v5-c-menu__item-main">
1930
- <span class="pf-v5-c-menu__item-text">My profile</span>
1931
- </span>
1932
- </button>
1933
- </li>
1934
- <li class="pf-v5-c-menu__list-item" role="none">
1935
- <button
1936
- class="pf-v5-c-menu__item"
1937
- type="button"
1938
- role="menuitem"
1939
- >
1940
- <span class="pf-v5-c-menu__item-main">
1941
- <span
1942
- class="pf-v5-c-menu__item-text"
1943
- >User management</span>
1944
- </span>
1945
- </button>
1946
- </li>
1947
- <li class="pf-v5-c-menu__list-item" role="none">
1948
- <button
1949
- class="pf-v5-c-menu__item"
1950
- type="button"
1951
- role="menuitem"
1952
- >
1953
- <span class="pf-v5-c-menu__item-main">
1954
- <span class="pf-v5-c-menu__item-text">Logout</span>
1955
- </span>
1956
- </button>
1957
- </li>
1958
- </ul>
1959
- </section>
1960
- <hr class="pf-v5-c-divider pf-m-hidden-on-sm" />
1961
- <section class="pf-v5-c-menu__group">
1962
- <ul class="pf-v5-c-menu__list" role="menu">
1963
- <li class="pf-v5-c-menu__list-item" role="none">
1964
- <button
1965
- class="pf-v5-c-menu__item"
1966
- type="button"
1967
- role="menuitem"
1968
- aria-expanded="false"
1969
- >
1970
- <span class="pf-v5-c-menu__item-main">
1971
- <span class="pf-v5-c-menu__item-icon">
1972
- <i
1973
- class="fas fa-fw fa-cog"
1974
- aria-hidden="true"
1975
- ></i>
1976
- </span>
1977
- <span class="pf-v5-c-menu__item-text">Settings</span>
1978
- <span class="pf-v5-c-menu__item-toggle-icon">
1979
- <i class="fas fa-angle-right"></i>
1980
- </span>
1981
- </span>
1982
- </button>
1983
- <div class="pf-v5-c-menu" hidden>
1984
- <div class="pf-v5-c-menu__content">
1985
- <ul class="pf-v5-c-menu__list" role="menu">
1986
- <li
1987
- class="pf-v5-c-menu__list-item pf-m-drill-up"
1988
- role="none"
1989
- >
1990
- <button
1991
- class="pf-v5-c-menu__item"
1992
- type="button"
1993
- role="menuitem"
1994
- >
1995
- <span class="pf-v5-c-menu__item-main">
1996
- <span
1997
- class="pf-v5-c-menu__item-toggle-icon"
1998
- >
1999
- <i class="fas fa-angle-left"></i>
2000
- </span>
2001
- <span class="pf-v5-c-menu__item-icon">
2002
- <i
2003
- class="fas fa-fw fa-cog"
2004
- aria-hidden="true"
2005
- ></i>
2006
- </span>
2007
- <span
2008
- class="pf-v5-c-menu__item-text"
2009
- >Settings</span>
2010
- </span>
2011
- </button>
2012
- </li>
2013
- <li class="pf-v5-c-divider" role="separator"></li>
2014
- <li
2015
- class="pf-v5-c-menu__list-item"
2016
- role="none"
2017
- >
2018
- <a
2019
- class="pf-v5-c-menu__item"
2020
- href="#"
2021
- role="menuitem"
2022
- >
2023
- <span class="pf-v5-c-menu__item-main">
2024
- <span
2025
- class="pf-v5-c-menu__item-text"
2026
- >Customer support</span>
2027
- </span>
2028
- </a>
2029
- </li>
2030
- <li
2031
- class="pf-v5-c-menu__list-item"
2032
- role="none"
2033
- >
2034
- <a
2035
- class="pf-v5-c-menu__item"
2036
- href="#"
2037
- role="menuitem"
2038
- >
2039
- <span class="pf-v5-c-menu__item-main">
2040
- <span
2041
- class="pf-v5-c-menu__item-text"
2042
- >About</span>
2043
- </span>
2044
- </a>
2045
- </li>
2046
- </ul>
2047
- </div>
2048
- </div>
2049
- </li>
2050
-
2051
- <li class="pf-v5-c-menu__list-item" role="none">
2052
- <button
2053
- class="pf-v5-c-menu__item"
2054
- type="button"
2055
- role="menuitem"
2056
- aria-expanded="false"
2057
- >
2058
- <span class="pf-v5-c-menu__item-main">
2059
- <span class="pf-v5-c-menu__item-icon">
2060
- <i
2061
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
2062
- aria-hidden="true"
2063
- ></i>
2064
- </span>
2065
- <span class="pf-v5-c-menu__item-text">Help</span>
2066
- <span class="pf-v5-c-menu__item-toggle-icon">
2067
- <i class="fas fa-angle-right"></i>
2068
- </span>
2069
- </span>
2070
- </button>
2071
- <div class="pf-v5-c-menu" hidden>
2072
- <div class="pf-v5-c-menu__content">
2073
- <ul class="pf-v5-c-menu__list" role="menu">
2074
- <li
2075
- class="pf-v5-c-menu__list-item pf-m-drill-up"
2076
- role="none"
2077
- >
2078
- <button
2079
- class="pf-v5-c-menu__item"
2080
- type="button"
2081
- role="menuitem"
2082
- >
2083
- <span class="pf-v5-c-menu__item-main">
2084
- <span
2085
- class="pf-v5-c-menu__item-toggle-icon"
2086
- >
2087
- <i class="fas fa-angle-left"></i>
2088
- </span>
2089
- <span class="pf-v5-c-menu__item-icon">
2090
- <i
2091
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
2092
- aria-hidden="true"
2093
- ></i>
2094
- </span>
2095
- <span
2096
- class="pf-v5-c-menu__item-text"
2097
- >Help</span>
2098
- </span>
2099
- </button>
2100
- </li>
2101
- <li class="pf-v5-c-divider" role="separator"></li>
2102
- <li
2103
- class="pf-v5-c-menu__list-item"
2104
- role="none"
2105
- >
2106
- <a
2107
- class="pf-v5-c-menu__item"
2108
- href="#"
2109
- role="menuitem"
2110
- >
2111
- <span class="pf-v5-c-menu__item-main">
2112
- <span
2113
- class="pf-v5-c-menu__item-text"
2114
- >Support options</span>
2115
- </span>
2116
- </a>
2117
- </li>
2118
- <li
2119
- class="pf-v5-c-menu__list-item"
2120
- role="none"
2121
- >
2122
- <a
2123
- class="pf-v5-c-menu__item"
2124
- href="#"
2125
- role="menuitem"
2126
- >
2127
- <span class="pf-v5-c-menu__item-main">
2128
- <span
2129
- class="pf-v5-c-menu__item-text"
2130
- >Open support case</span>
2131
- </span>
2132
- </a>
2133
- </li>
2134
- <li
2135
- class="pf-v5-c-menu__list-item"
2136
- role="none"
2137
- >
2138
- <a
2139
- class="pf-v5-c-menu__item"
2140
- href="#"
2141
- role="menuitem"
2142
- >
2143
- <span class="pf-v5-c-menu__item-main">
2144
- <span
2145
- class="pf-v5-c-menu__item-text"
2146
- >API documentation</span>
2147
- </span>
2148
- </a>
2149
- </li>
2150
- </ul>
2151
- </div>
2152
- </div>
2153
- </li>
2154
-
2155
- <li class="pf-v5-c-menu__list-item" role="none">
2156
- <button
2157
- class="pf-v5-c-menu__item"
2158
- type="button"
2159
- role="menuitem"
2160
- >
2161
- <span class="pf-v5-c-menu__item-main">
2162
- <span class="pf-v5-c-menu__item-icon">
2163
- <i class="fas fa-fw fa-th" aria-hidden="true"></i>
2164
- </span>
2165
- <span
2166
- class="pf-v5-c-menu__item-text"
2167
- >Application launcher</span>
2168
- <span class="pf-v5-c-menu__item-toggle-icon">
2169
- <i class="fas fa-angle-right"></i>
2170
- </span>
2171
- </span>
2172
- </button>
2173
- <div class="pf-v5-c-menu" hidden>
2174
- <div class="pf-v5-c-menu__header">
2175
- <button
2176
- class="pf-v5-c-menu__item"
2177
- type="button"
2178
- role="menuitem"
2179
- >
2180
- <span class="pf-v5-c-menu__item-main">
2181
- <span
2182
- class="pf-v5-c-menu__item-toggle-icon"
2183
- >
2184
- <i class="fas fa-angle-left"></i>
2185
- </span>
2186
- <span class="pf-v5-c-menu__item-icon">
2187
- <i
2188
- class="fas fa-fw fa-th"
2189
- aria-hidden="true"
2190
- ></i>
2191
- </span>
2192
- <span
2193
- class="pf-v5-c-menu__item-text"
2194
- >Application launcher</span>
2195
- </span>
2196
- </button>
2197
- </div>
2198
- <div class="pf-v5-c-menu__search">
2199
- <div class="pf-v5-c-menu__search-input">
2200
- <div class="pf-v5-c-text-input-group">
2201
- <div
2202
- class="pf-v5-c-text-input-group__main pf-m-icon"
2203
- >
2204
- <span
2205
- class="pf-v5-c-text-input-group__text"
2206
- >
2207
- <span
2208
- class="pf-v5-c-text-input-group__icon"
2209
- >
2210
- <i class="fas fa-fw fa-search"></i>
2211
- </span>
2212
- <input
2213
- class="pf-v5-c-text-input-group__text-input"
2214
- type="text"
2215
- placeholder="Search"
2216
- value
2217
- aria-label="Search input"
2218
- />
2219
- </span>
2220
- </div>
2221
- </div>
2222
- </div>
2223
- </div>
2224
- <hr class="pf-v5-c-divider" />
2225
- <section class="pf-v5-c-menu__group">
2226
- <h1 class="pf-v5-c-menu__group-title">Favorites</h1>
2227
- <ul class="pf-v5-c-menu__list" role="menu">
2228
- <li
2229
- class="pf-v5-c-menu__list-item"
2230
- role="none"
2231
- >
2232
- <a
2233
- class="pf-v5-c-menu__item"
2234
- href="#"
2235
- role="menuitem"
2236
- >
2237
- <span class="pf-v5-c-menu__item-main">
2238
- <span
2239
- class="pf-v5-c-menu__item-text"
2240
- >Link 1</span>
2241
- </span>
2242
- </a>
2243
- <button
2244
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
2245
- type="button"
2246
- aria-label="Starred"
2247
- >
2248
- <span
2249
- class="pf-v5-c-menu__item-action-icon"
2250
- >
2251
- <i
2252
- class="fas fa-star"
2253
- aria-hidden="true"
2254
- ></i>
2255
- </span>
2256
- </button>
2257
- </li>
2258
- <li
2259
- class="pf-v5-c-menu__list-item"
2260
- role="none"
2261
- >
2262
- <a
2263
- class="pf-v5-c-menu__item"
2264
- href="#"
2265
- role="menuitem"
2266
- target="_blank"
2267
- >
2268
- <span class="pf-v5-c-menu__item-main">
2269
- <span
2270
- class="pf-v5-c-menu__item-text"
2271
- >Link 2</span>
2272
- <span
2273
- class="pf-v5-c-menu__item-external-icon"
2274
- >
2275
- <i
2276
- class="fas fa-external-link-alt"
2277
- aria-hidden="true"
2278
- ></i>
2279
- </span>
2280
- <span
2281
- class="pf-v5-screen-reader"
2282
- >(opens new window)</span>
2283
- </span>
2284
- </a>
2285
- <button
2286
- class="pf-v5-c-menu__item-action pf-m-favorite"
2287
- type="button"
2288
- aria-label="Not starred"
2289
- >
2290
- <span
2291
- class="pf-v5-c-menu__item-action-icon"
2292
- >
2293
- <i
2294
- class="fas fa-star"
2295
- aria-hidden="true"
2296
- ></i>
2297
- </span>
2298
- </button>
2299
- </li>
2300
- </ul>
2301
- </section>
2302
- <hr class="pf-v5-c-divider" />
2303
- <section class="pf-v5-c-menu__group">
2304
- <h1 class="pf-v5-c-menu__group-title">Group 1</h1>
2305
- <ul class="pf-v5-c-menu__list" role="menu">
2306
- <li
2307
- class="pf-v5-c-menu__list-item"
2308
- role="none"
2309
- >
2310
- <a
2311
- class="pf-v5-c-menu__item"
2312
- href="#"
2313
- role="menuitem"
2314
- >
2315
- <span class="pf-v5-c-menu__item-main">
2316
- <span
2317
- class="pf-v5-c-menu__item-text"
2318
- >Link 1</span>
2319
- </span>
2320
- </a>
2321
- <button
2322
- class="pf-v5-c-menu__item-action pf-m-favorite"
2323
- type="button"
2324
- aria-label="Not starred"
2325
- >
2326
- <span
2327
- class="pf-v5-c-menu__item-action-icon"
2328
- >
2329
- <i
2330
- class="fas fa-star"
2331
- aria-hidden="true"
2332
- ></i>
2333
- </span>
2334
- </button>
2335
- </li>
2336
- <li
2337
- class="pf-v5-c-menu__list-item"
2338
- role="none"
2339
- >
2340
- <a
2341
- class="pf-v5-c-menu__item"
2342
- href="#"
2343
- role="menuitem"
2344
- target="_blank"
2345
- >
2346
- <span class="pf-v5-c-menu__item-main">
2347
- <span
2348
- class="pf-v5-c-menu__item-text"
2349
- >Link 2</span>
2350
- <span
2351
- class="pf-v5-c-menu__item-external-icon"
2352
- >
2353
- <i
2354
- class="fas fa-external-link-alt"
2355
- aria-hidden="true"
2356
- ></i>
2357
- </span>
2358
- <span
2359
- class="pf-v5-screen-reader"
2360
- >(opens new window)</span>
2361
- </span>
2362
- </a>
2363
- <button
2364
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
2365
- type="button"
2366
- aria-label="Starred"
2367
- >
2368
- <span
2369
- class="pf-v5-c-menu__item-action-icon"
2370
- >
2371
- <i
2372
- class="fas fa-star"
2373
- aria-hidden="true"
2374
- ></i>
2375
- </span>
2376
- </button>
2377
- </li>
2378
- </ul>
2379
- </section>
2380
- </div>
2381
- </li>
2382
- </ul>
2383
- </section>
2384
- </div>
2385
- </div>
2386
948
  </div>
2387
949
  </div>
2388
- </div>
2389
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
2390
- <div
2391
- class="pf-v5-c-dropdown pf-m-full-height"
2392
- style="--pf-v5-c-dropdown--MaxWidth: 20ch;"
2393
- >
950
+ <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
2394
951
  <button
2395
- class="pf-v5-c-dropdown__toggle"
2396
- id="data-list-actionable-example-masthead-profile-button"
2397
- aria-expanded="false"
952
+ class="pf-v5-c-menu-toggle pf-m-plain"
2398
953
  type="button"
954
+ aria-expanded="false"
955
+ aria-label="Actions"
2399
956
  >
2400
- <span class="pf-v5-c-dropdown__toggle-image">
2401
- <img
2402
- class="pf-v5-c-avatar"
2403
- alt="Avatar image"
2404
- src="/assets/images/img_avatar-light.svg"
2405
- />
2406
- </span>
2407
- <span class="pf-v5-c-dropdown__toggle-text">Ned Username</span>
2408
- <span class="pf-v5-c-dropdown__toggle-icon">
2409
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2410
- </span>
957
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2411
958
  </button>
2412
- <div class="pf-v5-c-dropdown__menu" hidden>
2413
- <section class="pf-v5-c-dropdown__group">
2414
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
2415
- <div class="pf-v5-u-font-size-sm">Account number:</div>
2416
- <div>123456789</div>
2417
- </div>
2418
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
2419
- <div class="pf-v5-u-font-size-sm">Username:</div>
2420
- <div>mshaksho@redhat.com</div>
2421
- </div>
2422
- </section>
2423
- <hr class="pf-v5-c-divider" />
2424
- <section class="pf-v5-c-dropdown__group">
2425
- <ul>
2426
- <li>
2427
- <a
2428
- class="pf-v5-c-dropdown__menu-item"
2429
- href="#"
2430
- >My profile</a>
2431
- </li>
2432
- <li>
2433
- <a
2434
- class="pf-v5-c-dropdown__menu-item"
2435
- href="#"
2436
- >User management</a>
2437
- </li>
2438
- <li>
2439
- <a class="pf-v5-c-dropdown__menu-item" href="#">Logout</a>
2440
- </li>
2441
- </ul>
2442
- </section>
2443
- </div>
2444
959
  </div>
2445
960
  </div>
961
+ <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
962
+ <button
963
+ class="pf-v5-c-menu-toggle pf-m-full-height"
964
+ type="button"
965
+ aria-expanded="false"
966
+ >
967
+ <span class="pf-v5-c-menu-toggle__icon">
968
+ <img
969
+ class="pf-v5-c-avatar"
970
+ alt="Avatar image"
971
+ src="/assets/images/img_avatar-light.svg"
972
+ />
973
+ </span>
974
+ <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
975
+ <span class="pf-v5-c-menu-toggle__controls">
976
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
977
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
978
+ </span>
979
+ </span>
980
+ </button>
981
+ </div>
2446
982
  </div>
2447
983
  </div>
2448
984
  </div>
@@ -3221,811 +1757,79 @@ wrapperTag: div
3221
1757
  <div class="pf-v5-c-masthead__content">
3222
1758
  <div
3223
1759
  class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
3224
- id="data-list-expandable-example-masthead-toolbar"
3225
- >
3226
- <div class="pf-v5-c-toolbar__content">
3227
- <div class="pf-v5-c-toolbar__content-section">
3228
- <div
3229
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
3230
- >
3231
- <div
3232
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
3233
- >
3234
- <div class="pf-v5-c-toolbar__item">
3235
- <nav
3236
- class="pf-v5-c-app-launcher"
3237
- aria-label="Application launcher"
3238
- id="data-list-expandable-example-masthead-application-launcher"
3239
- >
3240
- <button
3241
- class="pf-v5-c-app-launcher__toggle"
3242
- type="button"
3243
- id="data-list-expandable-example-masthead-application-launcher-button"
3244
- aria-expanded="false"
3245
- aria-label="Application launcher"
3246
- >
3247
- <i class="fas fa-th" aria-hidden="true"></i>
3248
- </button>
3249
- <div
3250
- class="pf-v5-c-app-launcher__menu pf-m-align-right"
3251
- hidden
3252
- >
3253
- <div class="pf-v5-c-app-launcher__menu-search">
3254
- <div class="pf-v5-c-text-input-group">
3255
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
3256
- <span class="pf-v5-c-text-input-group__text">
3257
- <span class="pf-v5-c-text-input-group__icon">
3258
- <i class="fas fa-fw fa-search"></i>
3259
- </span>
3260
- <input
3261
- class="pf-v5-c-text-input-group__text-input"
3262
- type="text"
3263
- placeholder="Filer by name"
3264
- value
3265
- aria-label="Search input"
3266
- />
3267
- </span>
3268
- </div>
3269
- </div>
3270
- </div>
3271
- <section class="pf-v5-c-app-launcher__group">
3272
- <h1 class="pf-v5-c-app-launcher__group-title">Favorites</h1>
3273
- <ul role="list">
3274
- <li
3275
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
3276
- >
3277
- <a class="pf-v5-c-app-launcher__menu-item">
3278
- Link 1
3279
- <span
3280
- class="pf-v5-c-app-launcher__menu-item-external-icon"
3281
- >
3282
- <i
3283
- class="fas fa-external-link-alt"
3284
- aria-hidden="true"
3285
- ></i>
3286
- </span>
3287
- <span
3288
- class="pf-v5-screen-reader"
3289
- >(opens new window)</span>
3290
- </a>
3291
- <button
3292
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
3293
- type="button"
3294
- aria-label="Favorite"
3295
- >
3296
- <i class="fas fa-star" aria-hidden="true"></i>
3297
- </button>
3298
- </li>
3299
- <li
3300
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
3301
- >
3302
- <a class="pf-v5-c-app-launcher__menu-item">
3303
- Link 2
3304
- <span
3305
- class="pf-v5-c-app-launcher__menu-item-external-icon"
3306
- >
3307
- <i
3308
- class="fas fa-external-link-alt"
3309
- aria-hidden="true"
3310
- ></i>
3311
- </span>
3312
- <span
3313
- class="pf-v5-screen-reader"
3314
- >(opens new window)</span>
3315
- </a>
3316
- <button
3317
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
3318
- type="button"
3319
- aria-label="Favorite"
3320
- >
3321
- <i class="fas fa-star" aria-hidden="true"></i>
3322
- </button>
3323
- </li>
3324
- </ul>
3325
- </section>
3326
- <hr class="pf-v5-c-divider" />
3327
- <section class="pf-v5-c-app-launcher__group">
3328
- <h1 class="pf-v5-c-app-launcher__group-title">Group 1</h1>
3329
- <ul role="list">
3330
- <li
3331
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
3332
- >
3333
- <a class="pf-v5-c-app-launcher__menu-item">
3334
- Link 1
3335
- <span
3336
- class="pf-v5-c-app-launcher__menu-item-external-icon"
3337
- >
3338
- <i
3339
- class="fas fa-external-link-alt"
3340
- aria-hidden="true"
3341
- ></i>
3342
- </span>
3343
- <span
3344
- class="pf-v5-screen-reader"
3345
- >(opens new window)</span>
3346
- </a>
3347
- <button
3348
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
3349
- type="button"
3350
- aria-label="Favorite"
3351
- >
3352
- <i class="fas fa-star" aria-hidden="true"></i>
3353
- </button>
3354
- </li>
3355
- <li
3356
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
3357
- >
3358
- <a class="pf-v5-c-app-launcher__menu-item">
3359
- Link 2
3360
- <span
3361
- class="pf-v5-c-app-launcher__menu-item-external-icon"
3362
- >
3363
- <i
3364
- class="fas fa-external-link-alt"
3365
- aria-hidden="true"
3366
- ></i>
3367
- </span>
3368
- <span
3369
- class="pf-v5-screen-reader"
3370
- >(opens new window)</span>
3371
- </a>
3372
- <button
3373
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
3374
- type="button"
3375
- aria-label="Favorite"
3376
- >
3377
- <i class="fas fa-star" aria-hidden="true"></i>
3378
- </button>
3379
- </li>
3380
- </ul>
3381
- </section>
3382
- </div>
3383
- </nav>
3384
- </div>
3385
- <div class="pf-v5-c-toolbar__item">
3386
- <div class="pf-v5-c-dropdown">
3387
- <button
3388
- class="pf-v5-c-dropdown__toggle pf-m-plain"
3389
- id="data-list-expandable-example-masthead-settings-button"
3390
- aria-expanded="false"
3391
- type="button"
3392
- aria-label="Settings"
3393
- >
3394
- <i class="fas fa-cog" aria-hidden="true"></i>
3395
- </button>
3396
- <ul
3397
- class="pf-v5-c-dropdown__menu pf-m-align-right"
3398
- aria-labelledby="data-list-expandable-example-masthead-settings-button"
3399
- hidden
3400
- >
3401
- <li>
3402
- <button
3403
- class="pf-v5-c-dropdown__menu-item"
3404
- type="button"
3405
- >Settings</button>
3406
- </li>
3407
- <li>
3408
- <button
3409
- class="pf-v5-c-dropdown__menu-item"
3410
- type="button"
3411
- >Use the beta release</button>
3412
- </li>
3413
- </ul>
3414
- </div>
3415
- </div>
3416
- <div class="pf-v5-c-toolbar__item">
3417
- <div class="pf-v5-c-dropdown">
3418
- <button
3419
- class="pf-v5-c-dropdown__toggle pf-m-plain"
3420
- id="data-list-expandable-example-masthead-help-button"
3421
- aria-expanded="false"
3422
- type="button"
3423
- aria-label="Help"
3424
- >
3425
- <i class="fas fa-question-circle" aria-hidden="true"></i>
3426
- </button>
3427
- <ul
3428
- class="pf-v5-c-dropdown__menu pf-m-align-right"
3429
- aria-labelledby="data-list-expandable-example-masthead-help-button"
3430
- hidden
3431
- >
3432
- <li>
3433
- <button
3434
- class="pf-v5-c-dropdown__menu-item"
3435
- type="button"
3436
- >Support options</button>
3437
- </li>
3438
- <li>
3439
- <button
3440
- class="pf-v5-c-dropdown__menu-item"
3441
- type="button"
3442
- >Open support case</button>
3443
- </li>
3444
- <li>
3445
- <button
3446
- class="pf-v5-c-dropdown__menu-item"
3447
- type="button"
3448
- >API documentation</button>
3449
- </li>
3450
- </ul>
3451
- </div>
3452
- </div>
3453
- </div>
3454
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
3455
- <div class="pf-v5-c-dropdown">
3456
- <button
3457
- class="pf-v5-c-menu-toggle pf-m-plain"
3458
- type="button"
3459
- aria-expanded="false"
3460
- aria-label="Actions"
3461
- >
3462
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3463
- </button>
3464
- <div
3465
- class="pf-v5-c-menu pf-m-drilldown pf-m-align-right"
3466
- hidden
3467
- >
3468
- <div class="pf-v5-c-menu__content">
3469
- <section class="pf-v5-c-menu__group pf-m-hidden-on-sm">
3470
- <ul class="pf-v5-c-menu__list" role="menu">
3471
- <li
3472
- class="pf-v5-c-menu__list-item pf-m-disabled"
3473
- role="none"
3474
- >
3475
- <button
3476
- class="pf-v5-c-menu__item"
3477
- type="button"
3478
- disabled
3479
- role="menuitem"
3480
- >
3481
- <span class="pf-v5-c-menu__item-description">
3482
- <div class="pf-v5-u-font-size-sm">Username:</div>
3483
- <div class="pf-v5-u-font-size-md">ned_username</div>
3484
- </span>
3485
- </button>
3486
- </li>
3487
- <li
3488
- class="pf-v5-c-menu__list-item pf-m-disabled"
3489
- role="none"
3490
- >
3491
- <button
3492
- class="pf-v5-c-menu__item"
3493
- type="button"
3494
- disabled
3495
- role="menuitem"
3496
- >
3497
- <span class="pf-v5-c-menu__item-description">
3498
- <div
3499
- class="pf-v5-u-font-size-sm"
3500
- >Account number:</div>
3501
- <div class="pf-v5-u-font-size-md">123456789</div>
3502
- </span>
3503
- </button>
3504
- </li>
3505
- <li class="pf-v5-c-divider" role="separator"></li>
3506
- <li class="pf-v5-c-menu__list-item" role="none">
3507
- <button
3508
- class="pf-v5-c-menu__item"
3509
- type="button"
3510
- role="menuitem"
3511
- >
3512
- <span class="pf-v5-c-menu__item-main">
3513
- <span class="pf-v5-c-menu__item-text">My profile</span>
3514
- </span>
3515
- </button>
3516
- </li>
3517
- <li class="pf-v5-c-menu__list-item" role="none">
3518
- <button
3519
- class="pf-v5-c-menu__item"
3520
- type="button"
3521
- role="menuitem"
3522
- >
3523
- <span class="pf-v5-c-menu__item-main">
3524
- <span
3525
- class="pf-v5-c-menu__item-text"
3526
- >User management</span>
3527
- </span>
3528
- </button>
3529
- </li>
3530
- <li class="pf-v5-c-menu__list-item" role="none">
3531
- <button
3532
- class="pf-v5-c-menu__item"
3533
- type="button"
3534
- role="menuitem"
3535
- >
3536
- <span class="pf-v5-c-menu__item-main">
3537
- <span class="pf-v5-c-menu__item-text">Logout</span>
3538
- </span>
3539
- </button>
3540
- </li>
3541
- </ul>
3542
- </section>
3543
- <hr class="pf-v5-c-divider pf-m-hidden-on-sm" />
3544
- <section class="pf-v5-c-menu__group">
3545
- <ul class="pf-v5-c-menu__list" role="menu">
3546
- <li class="pf-v5-c-menu__list-item" role="none">
3547
- <button
3548
- class="pf-v5-c-menu__item"
3549
- type="button"
3550
- role="menuitem"
3551
- aria-expanded="false"
3552
- >
3553
- <span class="pf-v5-c-menu__item-main">
3554
- <span class="pf-v5-c-menu__item-icon">
3555
- <i
3556
- class="fas fa-fw fa-cog"
3557
- aria-hidden="true"
3558
- ></i>
3559
- </span>
3560
- <span class="pf-v5-c-menu__item-text">Settings</span>
3561
- <span class="pf-v5-c-menu__item-toggle-icon">
3562
- <i class="fas fa-angle-right"></i>
3563
- </span>
3564
- </span>
3565
- </button>
3566
- <div class="pf-v5-c-menu" hidden>
3567
- <div class="pf-v5-c-menu__content">
3568
- <ul class="pf-v5-c-menu__list" role="menu">
3569
- <li
3570
- class="pf-v5-c-menu__list-item pf-m-drill-up"
3571
- role="none"
3572
- >
3573
- <button
3574
- class="pf-v5-c-menu__item"
3575
- type="button"
3576
- role="menuitem"
3577
- >
3578
- <span class="pf-v5-c-menu__item-main">
3579
- <span
3580
- class="pf-v5-c-menu__item-toggle-icon"
3581
- >
3582
- <i class="fas fa-angle-left"></i>
3583
- </span>
3584
- <span class="pf-v5-c-menu__item-icon">
3585
- <i
3586
- class="fas fa-fw fa-cog"
3587
- aria-hidden="true"
3588
- ></i>
3589
- </span>
3590
- <span
3591
- class="pf-v5-c-menu__item-text"
3592
- >Settings</span>
3593
- </span>
3594
- </button>
3595
- </li>
3596
- <li class="pf-v5-c-divider" role="separator"></li>
3597
- <li
3598
- class="pf-v5-c-menu__list-item"
3599
- role="none"
3600
- >
3601
- <a
3602
- class="pf-v5-c-menu__item"
3603
- href="#"
3604
- role="menuitem"
3605
- >
3606
- <span class="pf-v5-c-menu__item-main">
3607
- <span
3608
- class="pf-v5-c-menu__item-text"
3609
- >Customer support</span>
3610
- </span>
3611
- </a>
3612
- </li>
3613
- <li
3614
- class="pf-v5-c-menu__list-item"
3615
- role="none"
3616
- >
3617
- <a
3618
- class="pf-v5-c-menu__item"
3619
- href="#"
3620
- role="menuitem"
3621
- >
3622
- <span class="pf-v5-c-menu__item-main">
3623
- <span
3624
- class="pf-v5-c-menu__item-text"
3625
- >About</span>
3626
- </span>
3627
- </a>
3628
- </li>
3629
- </ul>
3630
- </div>
3631
- </div>
3632
- </li>
3633
-
3634
- <li class="pf-v5-c-menu__list-item" role="none">
3635
- <button
3636
- class="pf-v5-c-menu__item"
3637
- type="button"
3638
- role="menuitem"
3639
- aria-expanded="false"
3640
- >
3641
- <span class="pf-v5-c-menu__item-main">
3642
- <span class="pf-v5-c-menu__item-icon">
3643
- <i
3644
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
3645
- aria-hidden="true"
3646
- ></i>
3647
- </span>
3648
- <span class="pf-v5-c-menu__item-text">Help</span>
3649
- <span class="pf-v5-c-menu__item-toggle-icon">
3650
- <i class="fas fa-angle-right"></i>
3651
- </span>
3652
- </span>
3653
- </button>
3654
- <div class="pf-v5-c-menu" hidden>
3655
- <div class="pf-v5-c-menu__content">
3656
- <ul class="pf-v5-c-menu__list" role="menu">
3657
- <li
3658
- class="pf-v5-c-menu__list-item pf-m-drill-up"
3659
- role="none"
3660
- >
3661
- <button
3662
- class="pf-v5-c-menu__item"
3663
- type="button"
3664
- role="menuitem"
3665
- >
3666
- <span class="pf-v5-c-menu__item-main">
3667
- <span
3668
- class="pf-v5-c-menu__item-toggle-icon"
3669
- >
3670
- <i class="fas fa-angle-left"></i>
3671
- </span>
3672
- <span class="pf-v5-c-menu__item-icon">
3673
- <i
3674
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
3675
- aria-hidden="true"
3676
- ></i>
3677
- </span>
3678
- <span
3679
- class="pf-v5-c-menu__item-text"
3680
- >Help</span>
3681
- </span>
3682
- </button>
3683
- </li>
3684
- <li class="pf-v5-c-divider" role="separator"></li>
3685
- <li
3686
- class="pf-v5-c-menu__list-item"
3687
- role="none"
3688
- >
3689
- <a
3690
- class="pf-v5-c-menu__item"
3691
- href="#"
3692
- role="menuitem"
3693
- >
3694
- <span class="pf-v5-c-menu__item-main">
3695
- <span
3696
- class="pf-v5-c-menu__item-text"
3697
- >Support options</span>
3698
- </span>
3699
- </a>
3700
- </li>
3701
- <li
3702
- class="pf-v5-c-menu__list-item"
3703
- role="none"
3704
- >
3705
- <a
3706
- class="pf-v5-c-menu__item"
3707
- href="#"
3708
- role="menuitem"
3709
- >
3710
- <span class="pf-v5-c-menu__item-main">
3711
- <span
3712
- class="pf-v5-c-menu__item-text"
3713
- >Open support case</span>
3714
- </span>
3715
- </a>
3716
- </li>
3717
- <li
3718
- class="pf-v5-c-menu__list-item"
3719
- role="none"
3720
- >
3721
- <a
3722
- class="pf-v5-c-menu__item"
3723
- href="#"
3724
- role="menuitem"
3725
- >
3726
- <span class="pf-v5-c-menu__item-main">
3727
- <span
3728
- class="pf-v5-c-menu__item-text"
3729
- >API documentation</span>
3730
- </span>
3731
- </a>
3732
- </li>
3733
- </ul>
3734
- </div>
3735
- </div>
3736
- </li>
3737
-
3738
- <li class="pf-v5-c-menu__list-item" role="none">
3739
- <button
3740
- class="pf-v5-c-menu__item"
3741
- type="button"
3742
- role="menuitem"
3743
- >
3744
- <span class="pf-v5-c-menu__item-main">
3745
- <span class="pf-v5-c-menu__item-icon">
3746
- <i class="fas fa-fw fa-th" aria-hidden="true"></i>
3747
- </span>
3748
- <span
3749
- class="pf-v5-c-menu__item-text"
3750
- >Application launcher</span>
3751
- <span class="pf-v5-c-menu__item-toggle-icon">
3752
- <i class="fas fa-angle-right"></i>
3753
- </span>
3754
- </span>
3755
- </button>
3756
- <div class="pf-v5-c-menu" hidden>
3757
- <div class="pf-v5-c-menu__header">
3758
- <button
3759
- class="pf-v5-c-menu__item"
3760
- type="button"
3761
- role="menuitem"
3762
- >
3763
- <span class="pf-v5-c-menu__item-main">
3764
- <span
3765
- class="pf-v5-c-menu__item-toggle-icon"
3766
- >
3767
- <i class="fas fa-angle-left"></i>
3768
- </span>
3769
- <span class="pf-v5-c-menu__item-icon">
3770
- <i
3771
- class="fas fa-fw fa-th"
3772
- aria-hidden="true"
3773
- ></i>
3774
- </span>
3775
- <span
3776
- class="pf-v5-c-menu__item-text"
3777
- >Application launcher</span>
3778
- </span>
3779
- </button>
3780
- </div>
3781
- <div class="pf-v5-c-menu__search">
3782
- <div class="pf-v5-c-menu__search-input">
3783
- <div class="pf-v5-c-text-input-group">
3784
- <div
3785
- class="pf-v5-c-text-input-group__main pf-m-icon"
3786
- >
3787
- <span
3788
- class="pf-v5-c-text-input-group__text"
3789
- >
3790
- <span
3791
- class="pf-v5-c-text-input-group__icon"
3792
- >
3793
- <i class="fas fa-fw fa-search"></i>
3794
- </span>
3795
- <input
3796
- class="pf-v5-c-text-input-group__text-input"
3797
- type="text"
3798
- placeholder="Search"
3799
- value
3800
- aria-label="Search input"
3801
- />
3802
- </span>
3803
- </div>
3804
- </div>
3805
- </div>
3806
- </div>
3807
- <hr class="pf-v5-c-divider" />
3808
- <section class="pf-v5-c-menu__group">
3809
- <h1 class="pf-v5-c-menu__group-title">Favorites</h1>
3810
- <ul class="pf-v5-c-menu__list" role="menu">
3811
- <li
3812
- class="pf-v5-c-menu__list-item"
3813
- role="none"
3814
- >
3815
- <a
3816
- class="pf-v5-c-menu__item"
3817
- href="#"
3818
- role="menuitem"
3819
- >
3820
- <span class="pf-v5-c-menu__item-main">
3821
- <span
3822
- class="pf-v5-c-menu__item-text"
3823
- >Link 1</span>
3824
- </span>
3825
- </a>
3826
- <button
3827
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
3828
- type="button"
3829
- aria-label="Starred"
3830
- >
3831
- <span
3832
- class="pf-v5-c-menu__item-action-icon"
3833
- >
3834
- <i
3835
- class="fas fa-star"
3836
- aria-hidden="true"
3837
- ></i>
3838
- </span>
3839
- </button>
3840
- </li>
3841
- <li
3842
- class="pf-v5-c-menu__list-item"
3843
- role="none"
3844
- >
3845
- <a
3846
- class="pf-v5-c-menu__item"
3847
- href="#"
3848
- role="menuitem"
3849
- target="_blank"
3850
- >
3851
- <span class="pf-v5-c-menu__item-main">
3852
- <span
3853
- class="pf-v5-c-menu__item-text"
3854
- >Link 2</span>
3855
- <span
3856
- class="pf-v5-c-menu__item-external-icon"
3857
- >
3858
- <i
3859
- class="fas fa-external-link-alt"
3860
- aria-hidden="true"
3861
- ></i>
3862
- </span>
3863
- <span
3864
- class="pf-v5-screen-reader"
3865
- >(opens new window)</span>
3866
- </span>
3867
- </a>
3868
- <button
3869
- class="pf-v5-c-menu__item-action pf-m-favorite"
3870
- type="button"
3871
- aria-label="Not starred"
3872
- >
3873
- <span
3874
- class="pf-v5-c-menu__item-action-icon"
3875
- >
3876
- <i
3877
- class="fas fa-star"
3878
- aria-hidden="true"
3879
- ></i>
3880
- </span>
3881
- </button>
3882
- </li>
3883
- </ul>
3884
- </section>
3885
- <hr class="pf-v5-c-divider" />
3886
- <section class="pf-v5-c-menu__group">
3887
- <h1 class="pf-v5-c-menu__group-title">Group 1</h1>
3888
- <ul class="pf-v5-c-menu__list" role="menu">
3889
- <li
3890
- class="pf-v5-c-menu__list-item"
3891
- role="none"
3892
- >
3893
- <a
3894
- class="pf-v5-c-menu__item"
3895
- href="#"
3896
- role="menuitem"
3897
- >
3898
- <span class="pf-v5-c-menu__item-main">
3899
- <span
3900
- class="pf-v5-c-menu__item-text"
3901
- >Link 1</span>
3902
- </span>
3903
- </a>
3904
- <button
3905
- class="pf-v5-c-menu__item-action pf-m-favorite"
3906
- type="button"
3907
- aria-label="Not starred"
3908
- >
3909
- <span
3910
- class="pf-v5-c-menu__item-action-icon"
3911
- >
3912
- <i
3913
- class="fas fa-star"
3914
- aria-hidden="true"
3915
- ></i>
3916
- </span>
3917
- </button>
3918
- </li>
3919
- <li
3920
- class="pf-v5-c-menu__list-item"
3921
- role="none"
3922
- >
3923
- <a
3924
- class="pf-v5-c-menu__item"
3925
- href="#"
3926
- role="menuitem"
3927
- target="_blank"
3928
- >
3929
- <span class="pf-v5-c-menu__item-main">
3930
- <span
3931
- class="pf-v5-c-menu__item-text"
3932
- >Link 2</span>
3933
- <span
3934
- class="pf-v5-c-menu__item-external-icon"
3935
- >
3936
- <i
3937
- class="fas fa-external-link-alt"
3938
- aria-hidden="true"
3939
- ></i>
3940
- </span>
3941
- <span
3942
- class="pf-v5-screen-reader"
3943
- >(opens new window)</span>
3944
- </span>
3945
- </a>
3946
- <button
3947
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
3948
- type="button"
3949
- aria-label="Starred"
3950
- >
3951
- <span
3952
- class="pf-v5-c-menu__item-action-icon"
3953
- >
3954
- <i
3955
- class="fas fa-star"
3956
- aria-hidden="true"
3957
- ></i>
3958
- </span>
3959
- </button>
3960
- </li>
3961
- </ul>
3962
- </section>
3963
- </div>
3964
- </li>
3965
- </ul>
3966
- </section>
3967
- </div>
3968
- </div>
3969
- </div>
3970
- </div>
3971
- </div>
3972
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1760
+ id="data-list-expandable-example-masthead-toolbar"
1761
+ >
1762
+ <div class="pf-v5-c-toolbar__content">
1763
+ <div class="pf-v5-c-toolbar__content-section">
1764
+ <div
1765
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1766
+ >
3973
1767
  <div
3974
- class="pf-v5-c-dropdown pf-m-full-height"
3975
- style="--pf-v5-c-dropdown--MaxWidth: 20ch;"
1768
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
3976
1769
  >
1770
+ <div class="pf-v5-c-toolbar__item">
1771
+ <button
1772
+ class="pf-v5-c-menu-toggle pf-m-plain"
1773
+ type="button"
1774
+ aria-expanded="false"
1775
+ aria-label="Application launcher"
1776
+ >
1777
+ <i class="fas fa-th" aria-hidden="true"></i>
1778
+ </button>
1779
+ </div>
1780
+ <div class="pf-v5-c-toolbar__item">
1781
+ <button
1782
+ class="pf-v5-c-menu-toggle pf-m-plain"
1783
+ type="button"
1784
+ aria-expanded="false"
1785
+ aria-label="Settings"
1786
+ >
1787
+ <i class="fas fa-cog" aria-hidden="true"></i>
1788
+ </button>
1789
+ </div>
1790
+ <div class="pf-v5-c-toolbar__item">
1791
+ <button
1792
+ class="pf-v5-c-menu-toggle pf-m-plain"
1793
+ type="button"
1794
+ aria-expanded="false"
1795
+ aria-label="Help"
1796
+ >
1797
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
1798
+ </button>
1799
+ </div>
1800
+ </div>
1801
+ <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
3977
1802
  <button
3978
- class="pf-v5-c-dropdown__toggle"
3979
- id="data-list-expandable-example-masthead-profile-button"
3980
- aria-expanded="false"
1803
+ class="pf-v5-c-menu-toggle pf-m-plain"
3981
1804
  type="button"
1805
+ aria-expanded="false"
1806
+ aria-label="Actions"
3982
1807
  >
3983
- <span class="pf-v5-c-dropdown__toggle-image">
3984
- <img
3985
- class="pf-v5-c-avatar"
3986
- alt="Avatar image"
3987
- src="/assets/images/img_avatar-light.svg"
3988
- />
3989
- </span>
3990
- <span class="pf-v5-c-dropdown__toggle-text">Ned Username</span>
3991
- <span class="pf-v5-c-dropdown__toggle-icon">
3992
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3993
- </span>
1808
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3994
1809
  </button>
3995
- <div class="pf-v5-c-dropdown__menu" hidden>
3996
- <section class="pf-v5-c-dropdown__group">
3997
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
3998
- <div class="pf-v5-u-font-size-sm">Account number:</div>
3999
- <div>123456789</div>
4000
- </div>
4001
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
4002
- <div class="pf-v5-u-font-size-sm">Username:</div>
4003
- <div>mshaksho@redhat.com</div>
4004
- </div>
4005
- </section>
4006
- <hr class="pf-v5-c-divider" />
4007
- <section class="pf-v5-c-dropdown__group">
4008
- <ul>
4009
- <li>
4010
- <a
4011
- class="pf-v5-c-dropdown__menu-item"
4012
- href="#"
4013
- >My profile</a>
4014
- </li>
4015
- <li>
4016
- <a
4017
- class="pf-v5-c-dropdown__menu-item"
4018
- href="#"
4019
- >User management</a>
4020
- </li>
4021
- <li>
4022
- <a class="pf-v5-c-dropdown__menu-item" href="#">Logout</a>
4023
- </li>
4024
- </ul>
4025
- </section>
4026
- </div>
4027
1810
  </div>
4028
1811
  </div>
1812
+ <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1813
+ <button
1814
+ class="pf-v5-c-menu-toggle pf-m-full-height"
1815
+ type="button"
1816
+ aria-expanded="false"
1817
+ >
1818
+ <span class="pf-v5-c-menu-toggle__icon">
1819
+ <img
1820
+ class="pf-v5-c-avatar"
1821
+ alt="Avatar image"
1822
+ src="/assets/images/img_avatar-light.svg"
1823
+ />
1824
+ </span>
1825
+ <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1826
+ <span class="pf-v5-c-menu-toggle__controls">
1827
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1828
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1829
+ </span>
1830
+ </span>
1831
+ </button>
1832
+ </div>
4029
1833
  </div>
4030
1834
  </div>
4031
1835
  </div>
@@ -5590,800 +3394,68 @@ wrapperTag: div
5590
3394
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
5591
3395
  >
5592
3396
  <div class="pf-v5-c-toolbar__item">
5593
- <nav
5594
- class="pf-v5-c-app-launcher"
3397
+ <button
3398
+ class="pf-v5-c-menu-toggle pf-m-plain"
3399
+ type="button"
3400
+ aria-expanded="false"
5595
3401
  aria-label="Application launcher"
5596
- id="data-list-static-bottom-example-masthead-application-launcher"
5597
3402
  >
5598
- <button
5599
- class="pf-v5-c-app-launcher__toggle"
5600
- type="button"
5601
- id="data-list-static-bottom-example-masthead-application-launcher-button"
5602
- aria-expanded="false"
5603
- aria-label="Application launcher"
5604
- >
5605
- <i class="fas fa-th" aria-hidden="true"></i>
5606
- </button>
5607
- <div
5608
- class="pf-v5-c-app-launcher__menu pf-m-align-right"
5609
- hidden
5610
- >
5611
- <div class="pf-v5-c-app-launcher__menu-search">
5612
- <div class="pf-v5-c-text-input-group">
5613
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
5614
- <span class="pf-v5-c-text-input-group__text">
5615
- <span class="pf-v5-c-text-input-group__icon">
5616
- <i class="fas fa-fw fa-search"></i>
5617
- </span>
5618
- <input
5619
- class="pf-v5-c-text-input-group__text-input"
5620
- type="text"
5621
- placeholder="Filer by name"
5622
- value
5623
- aria-label="Search input"
5624
- />
5625
- </span>
5626
- </div>
5627
- </div>
5628
- </div>
5629
- <section class="pf-v5-c-app-launcher__group">
5630
- <h1 class="pf-v5-c-app-launcher__group-title">Favorites</h1>
5631
- <ul role="list">
5632
- <li
5633
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
5634
- >
5635
- <a class="pf-v5-c-app-launcher__menu-item">
5636
- Link 1
5637
- <span
5638
- class="pf-v5-c-app-launcher__menu-item-external-icon"
5639
- >
5640
- <i
5641
- class="fas fa-external-link-alt"
5642
- aria-hidden="true"
5643
- ></i>
5644
- </span>
5645
- <span
5646
- class="pf-v5-screen-reader"
5647
- >(opens new window)</span>
5648
- </a>
5649
- <button
5650
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
5651
- type="button"
5652
- aria-label="Favorite"
5653
- >
5654
- <i class="fas fa-star" aria-hidden="true"></i>
5655
- </button>
5656
- </li>
5657
- <li
5658
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
5659
- >
5660
- <a class="pf-v5-c-app-launcher__menu-item">
5661
- Link 2
5662
- <span
5663
- class="pf-v5-c-app-launcher__menu-item-external-icon"
5664
- >
5665
- <i
5666
- class="fas fa-external-link-alt"
5667
- aria-hidden="true"
5668
- ></i>
5669
- </span>
5670
- <span
5671
- class="pf-v5-screen-reader"
5672
- >(opens new window)</span>
5673
- </a>
5674
- <button
5675
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
5676
- type="button"
5677
- aria-label="Favorite"
5678
- >
5679
- <i class="fas fa-star" aria-hidden="true"></i>
5680
- </button>
5681
- </li>
5682
- </ul>
5683
- </section>
5684
- <hr class="pf-v5-c-divider" />
5685
- <section class="pf-v5-c-app-launcher__group">
5686
- <h1 class="pf-v5-c-app-launcher__group-title">Group 1</h1>
5687
- <ul role="list">
5688
- <li
5689
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
5690
- >
5691
- <a class="pf-v5-c-app-launcher__menu-item">
5692
- Link 1
5693
- <span
5694
- class="pf-v5-c-app-launcher__menu-item-external-icon"
5695
- >
5696
- <i
5697
- class="fas fa-external-link-alt"
5698
- aria-hidden="true"
5699
- ></i>
5700
- </span>
5701
- <span
5702
- class="pf-v5-screen-reader"
5703
- >(opens new window)</span>
5704
- </a>
5705
- <button
5706
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
5707
- type="button"
5708
- aria-label="Favorite"
5709
- >
5710
- <i class="fas fa-star" aria-hidden="true"></i>
5711
- </button>
5712
- </li>
5713
- <li
5714
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
5715
- >
5716
- <a class="pf-v5-c-app-launcher__menu-item">
5717
- Link 2
5718
- <span
5719
- class="pf-v5-c-app-launcher__menu-item-external-icon"
5720
- >
5721
- <i
5722
- class="fas fa-external-link-alt"
5723
- aria-hidden="true"
5724
- ></i>
5725
- </span>
5726
- <span
5727
- class="pf-v5-screen-reader"
5728
- >(opens new window)</span>
5729
- </a>
5730
- <button
5731
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
5732
- type="button"
5733
- aria-label="Favorite"
5734
- >
5735
- <i class="fas fa-star" aria-hidden="true"></i>
5736
- </button>
5737
- </li>
5738
- </ul>
5739
- </section>
5740
- </div>
5741
- </nav>
3403
+ <i class="fas fa-th" aria-hidden="true"></i>
3404
+ </button>
5742
3405
  </div>
5743
3406
  <div class="pf-v5-c-toolbar__item">
5744
- <div class="pf-v5-c-dropdown">
5745
- <button
5746
- class="pf-v5-c-dropdown__toggle pf-m-plain"
5747
- id="data-list-static-bottom-example-masthead-settings-button"
5748
- aria-expanded="false"
5749
- type="button"
5750
- aria-label="Settings"
5751
- >
5752
- <i class="fas fa-cog" aria-hidden="true"></i>
5753
- </button>
5754
- <ul
5755
- class="pf-v5-c-dropdown__menu pf-m-align-right"
5756
- aria-labelledby="data-list-static-bottom-example-masthead-settings-button"
5757
- hidden
5758
- >
5759
- <li>
5760
- <button
5761
- class="pf-v5-c-dropdown__menu-item"
5762
- type="button"
5763
- >Settings</button>
5764
- </li>
5765
- <li>
5766
- <button
5767
- class="pf-v5-c-dropdown__menu-item"
5768
- type="button"
5769
- >Use the beta release</button>
5770
- </li>
5771
- </ul>
5772
- </div>
3407
+ <button
3408
+ class="pf-v5-c-menu-toggle pf-m-plain"
3409
+ type="button"
3410
+ aria-expanded="false"
3411
+ aria-label="Settings"
3412
+ >
3413
+ <i class="fas fa-cog" aria-hidden="true"></i>
3414
+ </button>
5773
3415
  </div>
5774
3416
  <div class="pf-v5-c-toolbar__item">
5775
- <div class="pf-v5-c-dropdown">
5776
- <button
5777
- class="pf-v5-c-dropdown__toggle pf-m-plain"
5778
- id="data-list-static-bottom-example-masthead-help-button"
5779
- aria-expanded="false"
5780
- type="button"
5781
- aria-label="Help"
5782
- >
5783
- <i class="fas fa-question-circle" aria-hidden="true"></i>
5784
- </button>
5785
- <ul
5786
- class="pf-v5-c-dropdown__menu pf-m-align-right"
5787
- aria-labelledby="data-list-static-bottom-example-masthead-help-button"
5788
- hidden
5789
- >
5790
- <li>
5791
- <button
5792
- class="pf-v5-c-dropdown__menu-item"
5793
- type="button"
5794
- >Support options</button>
5795
- </li>
5796
- <li>
5797
- <button
5798
- class="pf-v5-c-dropdown__menu-item"
5799
- type="button"
5800
- >Open support case</button>
5801
- </li>
5802
- <li>
5803
- <button
5804
- class="pf-v5-c-dropdown__menu-item"
5805
- type="button"
5806
- >API documentation</button>
5807
- </li>
5808
- </ul>
5809
- </div>
5810
- </div>
5811
- </div>
5812
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
5813
- <div class="pf-v5-c-dropdown">
5814
3417
  <button
5815
3418
  class="pf-v5-c-menu-toggle pf-m-plain"
5816
3419
  type="button"
5817
3420
  aria-expanded="false"
5818
- aria-label="Actions"
3421
+ aria-label="Help"
5819
3422
  >
5820
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3423
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
5821
3424
  </button>
5822
- <div
5823
- class="pf-v5-c-menu pf-m-drilldown pf-m-align-right"
5824
- hidden
5825
- >
5826
- <div class="pf-v5-c-menu__content">
5827
- <section class="pf-v5-c-menu__group pf-m-hidden-on-sm">
5828
- <ul class="pf-v5-c-menu__list" role="menu">
5829
- <li
5830
- class="pf-v5-c-menu__list-item pf-m-disabled"
5831
- role="none"
5832
- >
5833
- <button
5834
- class="pf-v5-c-menu__item"
5835
- type="button"
5836
- disabled
5837
- role="menuitem"
5838
- >
5839
- <span class="pf-v5-c-menu__item-description">
5840
- <div class="pf-v5-u-font-size-sm">Username:</div>
5841
- <div class="pf-v5-u-font-size-md">ned_username</div>
5842
- </span>
5843
- </button>
5844
- </li>
5845
- <li
5846
- class="pf-v5-c-menu__list-item pf-m-disabled"
5847
- role="none"
5848
- >
5849
- <button
5850
- class="pf-v5-c-menu__item"
5851
- type="button"
5852
- disabled
5853
- role="menuitem"
5854
- >
5855
- <span class="pf-v5-c-menu__item-description">
5856
- <div
5857
- class="pf-v5-u-font-size-sm"
5858
- >Account number:</div>
5859
- <div class="pf-v5-u-font-size-md">123456789</div>
5860
- </span>
5861
- </button>
5862
- </li>
5863
- <li class="pf-v5-c-divider" role="separator"></li>
5864
- <li class="pf-v5-c-menu__list-item" role="none">
5865
- <button
5866
- class="pf-v5-c-menu__item"
5867
- type="button"
5868
- role="menuitem"
5869
- >
5870
- <span class="pf-v5-c-menu__item-main">
5871
- <span class="pf-v5-c-menu__item-text">My profile</span>
5872
- </span>
5873
- </button>
5874
- </li>
5875
- <li class="pf-v5-c-menu__list-item" role="none">
5876
- <button
5877
- class="pf-v5-c-menu__item"
5878
- type="button"
5879
- role="menuitem"
5880
- >
5881
- <span class="pf-v5-c-menu__item-main">
5882
- <span
5883
- class="pf-v5-c-menu__item-text"
5884
- >User management</span>
5885
- </span>
5886
- </button>
5887
- </li>
5888
- <li class="pf-v5-c-menu__list-item" role="none">
5889
- <button
5890
- class="pf-v5-c-menu__item"
5891
- type="button"
5892
- role="menuitem"
5893
- >
5894
- <span class="pf-v5-c-menu__item-main">
5895
- <span class="pf-v5-c-menu__item-text">Logout</span>
5896
- </span>
5897
- </button>
5898
- </li>
5899
- </ul>
5900
- </section>
5901
- <hr class="pf-v5-c-divider pf-m-hidden-on-sm" />
5902
- <section class="pf-v5-c-menu__group">
5903
- <ul class="pf-v5-c-menu__list" role="menu">
5904
- <li class="pf-v5-c-menu__list-item" role="none">
5905
- <button
5906
- class="pf-v5-c-menu__item"
5907
- type="button"
5908
- role="menuitem"
5909
- aria-expanded="false"
5910
- >
5911
- <span class="pf-v5-c-menu__item-main">
5912
- <span class="pf-v5-c-menu__item-icon">
5913
- <i
5914
- class="fas fa-fw fa-cog"
5915
- aria-hidden="true"
5916
- ></i>
5917
- </span>
5918
- <span class="pf-v5-c-menu__item-text">Settings</span>
5919
- <span class="pf-v5-c-menu__item-toggle-icon">
5920
- <i class="fas fa-angle-right"></i>
5921
- </span>
5922
- </span>
5923
- </button>
5924
- <div class="pf-v5-c-menu" hidden>
5925
- <div class="pf-v5-c-menu__content">
5926
- <ul class="pf-v5-c-menu__list" role="menu">
5927
- <li
5928
- class="pf-v5-c-menu__list-item pf-m-drill-up"
5929
- role="none"
5930
- >
5931
- <button
5932
- class="pf-v5-c-menu__item"
5933
- type="button"
5934
- role="menuitem"
5935
- >
5936
- <span class="pf-v5-c-menu__item-main">
5937
- <span
5938
- class="pf-v5-c-menu__item-toggle-icon"
5939
- >
5940
- <i class="fas fa-angle-left"></i>
5941
- </span>
5942
- <span class="pf-v5-c-menu__item-icon">
5943
- <i
5944
- class="fas fa-fw fa-cog"
5945
- aria-hidden="true"
5946
- ></i>
5947
- </span>
5948
- <span
5949
- class="pf-v5-c-menu__item-text"
5950
- >Settings</span>
5951
- </span>
5952
- </button>
5953
- </li>
5954
- <li class="pf-v5-c-divider" role="separator"></li>
5955
- <li
5956
- class="pf-v5-c-menu__list-item"
5957
- role="none"
5958
- >
5959
- <a
5960
- class="pf-v5-c-menu__item"
5961
- href="#"
5962
- role="menuitem"
5963
- >
5964
- <span class="pf-v5-c-menu__item-main">
5965
- <span
5966
- class="pf-v5-c-menu__item-text"
5967
- >Customer support</span>
5968
- </span>
5969
- </a>
5970
- </li>
5971
- <li
5972
- class="pf-v5-c-menu__list-item"
5973
- role="none"
5974
- >
5975
- <a
5976
- class="pf-v5-c-menu__item"
5977
- href="#"
5978
- role="menuitem"
5979
- >
5980
- <span class="pf-v5-c-menu__item-main">
5981
- <span
5982
- class="pf-v5-c-menu__item-text"
5983
- >About</span>
5984
- </span>
5985
- </a>
5986
- </li>
5987
- </ul>
5988
- </div>
5989
- </div>
5990
- </li>
5991
-
5992
- <li class="pf-v5-c-menu__list-item" role="none">
5993
- <button
5994
- class="pf-v5-c-menu__item"
5995
- type="button"
5996
- role="menuitem"
5997
- aria-expanded="false"
5998
- >
5999
- <span class="pf-v5-c-menu__item-main">
6000
- <span class="pf-v5-c-menu__item-icon">
6001
- <i
6002
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
6003
- aria-hidden="true"
6004
- ></i>
6005
- </span>
6006
- <span class="pf-v5-c-menu__item-text">Help</span>
6007
- <span class="pf-v5-c-menu__item-toggle-icon">
6008
- <i class="fas fa-angle-right"></i>
6009
- </span>
6010
- </span>
6011
- </button>
6012
- <div class="pf-v5-c-menu" hidden>
6013
- <div class="pf-v5-c-menu__content">
6014
- <ul class="pf-v5-c-menu__list" role="menu">
6015
- <li
6016
- class="pf-v5-c-menu__list-item pf-m-drill-up"
6017
- role="none"
6018
- >
6019
- <button
6020
- class="pf-v5-c-menu__item"
6021
- type="button"
6022
- role="menuitem"
6023
- >
6024
- <span class="pf-v5-c-menu__item-main">
6025
- <span
6026
- class="pf-v5-c-menu__item-toggle-icon"
6027
- >
6028
- <i class="fas fa-angle-left"></i>
6029
- </span>
6030
- <span class="pf-v5-c-menu__item-icon">
6031
- <i
6032
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
6033
- aria-hidden="true"
6034
- ></i>
6035
- </span>
6036
- <span
6037
- class="pf-v5-c-menu__item-text"
6038
- >Help</span>
6039
- </span>
6040
- </button>
6041
- </li>
6042
- <li class="pf-v5-c-divider" role="separator"></li>
6043
- <li
6044
- class="pf-v5-c-menu__list-item"
6045
- role="none"
6046
- >
6047
- <a
6048
- class="pf-v5-c-menu__item"
6049
- href="#"
6050
- role="menuitem"
6051
- >
6052
- <span class="pf-v5-c-menu__item-main">
6053
- <span
6054
- class="pf-v5-c-menu__item-text"
6055
- >Support options</span>
6056
- </span>
6057
- </a>
6058
- </li>
6059
- <li
6060
- class="pf-v5-c-menu__list-item"
6061
- role="none"
6062
- >
6063
- <a
6064
- class="pf-v5-c-menu__item"
6065
- href="#"
6066
- role="menuitem"
6067
- >
6068
- <span class="pf-v5-c-menu__item-main">
6069
- <span
6070
- class="pf-v5-c-menu__item-text"
6071
- >Open support case</span>
6072
- </span>
6073
- </a>
6074
- </li>
6075
- <li
6076
- class="pf-v5-c-menu__list-item"
6077
- role="none"
6078
- >
6079
- <a
6080
- class="pf-v5-c-menu__item"
6081
- href="#"
6082
- role="menuitem"
6083
- >
6084
- <span class="pf-v5-c-menu__item-main">
6085
- <span
6086
- class="pf-v5-c-menu__item-text"
6087
- >API documentation</span>
6088
- </span>
6089
- </a>
6090
- </li>
6091
- </ul>
6092
- </div>
6093
- </div>
6094
- </li>
6095
-
6096
- <li class="pf-v5-c-menu__list-item" role="none">
6097
- <button
6098
- class="pf-v5-c-menu__item"
6099
- type="button"
6100
- role="menuitem"
6101
- >
6102
- <span class="pf-v5-c-menu__item-main">
6103
- <span class="pf-v5-c-menu__item-icon">
6104
- <i class="fas fa-fw fa-th" aria-hidden="true"></i>
6105
- </span>
6106
- <span
6107
- class="pf-v5-c-menu__item-text"
6108
- >Application launcher</span>
6109
- <span class="pf-v5-c-menu__item-toggle-icon">
6110
- <i class="fas fa-angle-right"></i>
6111
- </span>
6112
- </span>
6113
- </button>
6114
- <div class="pf-v5-c-menu" hidden>
6115
- <div class="pf-v5-c-menu__header">
6116
- <button
6117
- class="pf-v5-c-menu__item"
6118
- type="button"
6119
- role="menuitem"
6120
- >
6121
- <span class="pf-v5-c-menu__item-main">
6122
- <span
6123
- class="pf-v5-c-menu__item-toggle-icon"
6124
- >
6125
- <i class="fas fa-angle-left"></i>
6126
- </span>
6127
- <span class="pf-v5-c-menu__item-icon">
6128
- <i
6129
- class="fas fa-fw fa-th"
6130
- aria-hidden="true"
6131
- ></i>
6132
- </span>
6133
- <span
6134
- class="pf-v5-c-menu__item-text"
6135
- >Application launcher</span>
6136
- </span>
6137
- </button>
6138
- </div>
6139
- <div class="pf-v5-c-menu__search">
6140
- <div class="pf-v5-c-menu__search-input">
6141
- <div class="pf-v5-c-text-input-group">
6142
- <div
6143
- class="pf-v5-c-text-input-group__main pf-m-icon"
6144
- >
6145
- <span
6146
- class="pf-v5-c-text-input-group__text"
6147
- >
6148
- <span
6149
- class="pf-v5-c-text-input-group__icon"
6150
- >
6151
- <i class="fas fa-fw fa-search"></i>
6152
- </span>
6153
- <input
6154
- class="pf-v5-c-text-input-group__text-input"
6155
- type="text"
6156
- placeholder="Search"
6157
- value
6158
- aria-label="Search input"
6159
- />
6160
- </span>
6161
- </div>
6162
- </div>
6163
- </div>
6164
- </div>
6165
- <hr class="pf-v5-c-divider" />
6166
- <section class="pf-v5-c-menu__group">
6167
- <h1 class="pf-v5-c-menu__group-title">Favorites</h1>
6168
- <ul class="pf-v5-c-menu__list" role="menu">
6169
- <li
6170
- class="pf-v5-c-menu__list-item"
6171
- role="none"
6172
- >
6173
- <a
6174
- class="pf-v5-c-menu__item"
6175
- href="#"
6176
- role="menuitem"
6177
- >
6178
- <span class="pf-v5-c-menu__item-main">
6179
- <span
6180
- class="pf-v5-c-menu__item-text"
6181
- >Link 1</span>
6182
- </span>
6183
- </a>
6184
- <button
6185
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
6186
- type="button"
6187
- aria-label="Starred"
6188
- >
6189
- <span
6190
- class="pf-v5-c-menu__item-action-icon"
6191
- >
6192
- <i
6193
- class="fas fa-star"
6194
- aria-hidden="true"
6195
- ></i>
6196
- </span>
6197
- </button>
6198
- </li>
6199
- <li
6200
- class="pf-v5-c-menu__list-item"
6201
- role="none"
6202
- >
6203
- <a
6204
- class="pf-v5-c-menu__item"
6205
- href="#"
6206
- role="menuitem"
6207
- target="_blank"
6208
- >
6209
- <span class="pf-v5-c-menu__item-main">
6210
- <span
6211
- class="pf-v5-c-menu__item-text"
6212
- >Link 2</span>
6213
- <span
6214
- class="pf-v5-c-menu__item-external-icon"
6215
- >
6216
- <i
6217
- class="fas fa-external-link-alt"
6218
- aria-hidden="true"
6219
- ></i>
6220
- </span>
6221
- <span
6222
- class="pf-v5-screen-reader"
6223
- >(opens new window)</span>
6224
- </span>
6225
- </a>
6226
- <button
6227
- class="pf-v5-c-menu__item-action pf-m-favorite"
6228
- type="button"
6229
- aria-label="Not starred"
6230
- >
6231
- <span
6232
- class="pf-v5-c-menu__item-action-icon"
6233
- >
6234
- <i
6235
- class="fas fa-star"
6236
- aria-hidden="true"
6237
- ></i>
6238
- </span>
6239
- </button>
6240
- </li>
6241
- </ul>
6242
- </section>
6243
- <hr class="pf-v5-c-divider" />
6244
- <section class="pf-v5-c-menu__group">
6245
- <h1 class="pf-v5-c-menu__group-title">Group 1</h1>
6246
- <ul class="pf-v5-c-menu__list" role="menu">
6247
- <li
6248
- class="pf-v5-c-menu__list-item"
6249
- role="none"
6250
- >
6251
- <a
6252
- class="pf-v5-c-menu__item"
6253
- href="#"
6254
- role="menuitem"
6255
- >
6256
- <span class="pf-v5-c-menu__item-main">
6257
- <span
6258
- class="pf-v5-c-menu__item-text"
6259
- >Link 1</span>
6260
- </span>
6261
- </a>
6262
- <button
6263
- class="pf-v5-c-menu__item-action pf-m-favorite"
6264
- type="button"
6265
- aria-label="Not starred"
6266
- >
6267
- <span
6268
- class="pf-v5-c-menu__item-action-icon"
6269
- >
6270
- <i
6271
- class="fas fa-star"
6272
- aria-hidden="true"
6273
- ></i>
6274
- </span>
6275
- </button>
6276
- </li>
6277
- <li
6278
- class="pf-v5-c-menu__list-item"
6279
- role="none"
6280
- >
6281
- <a
6282
- class="pf-v5-c-menu__item"
6283
- href="#"
6284
- role="menuitem"
6285
- target="_blank"
6286
- >
6287
- <span class="pf-v5-c-menu__item-main">
6288
- <span
6289
- class="pf-v5-c-menu__item-text"
6290
- >Link 2</span>
6291
- <span
6292
- class="pf-v5-c-menu__item-external-icon"
6293
- >
6294
- <i
6295
- class="fas fa-external-link-alt"
6296
- aria-hidden="true"
6297
- ></i>
6298
- </span>
6299
- <span
6300
- class="pf-v5-screen-reader"
6301
- >(opens new window)</span>
6302
- </span>
6303
- </a>
6304
- <button
6305
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
6306
- type="button"
6307
- aria-label="Starred"
6308
- >
6309
- <span
6310
- class="pf-v5-c-menu__item-action-icon"
6311
- >
6312
- <i
6313
- class="fas fa-star"
6314
- aria-hidden="true"
6315
- ></i>
6316
- </span>
6317
- </button>
6318
- </li>
6319
- </ul>
6320
- </section>
6321
- </div>
6322
- </li>
6323
- </ul>
6324
- </section>
6325
- </div>
6326
- </div>
6327
3425
  </div>
6328
3426
  </div>
6329
- </div>
6330
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
6331
- <div
6332
- class="pf-v5-c-dropdown pf-m-full-height"
6333
- style="--pf-v5-c-dropdown--MaxWidth: 20ch;"
6334
- >
3427
+ <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
6335
3428
  <button
6336
- class="pf-v5-c-dropdown__toggle"
6337
- id="data-list-static-bottom-example-masthead-profile-button"
6338
- aria-expanded="false"
3429
+ class="pf-v5-c-menu-toggle pf-m-plain"
6339
3430
  type="button"
3431
+ aria-expanded="false"
3432
+ aria-label="Actions"
6340
3433
  >
6341
- <span class="pf-v5-c-dropdown__toggle-image">
6342
- <img
6343
- class="pf-v5-c-avatar"
6344
- alt="Avatar image"
6345
- src="/assets/images/img_avatar-light.svg"
6346
- />
6347
- </span>
6348
- <span class="pf-v5-c-dropdown__toggle-text">Ned Username</span>
6349
- <span class="pf-v5-c-dropdown__toggle-icon">
6350
- <i class="fas fa-caret-down" aria-hidden="true"></i>
6351
- </span>
3434
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
6352
3435
  </button>
6353
- <div class="pf-v5-c-dropdown__menu" hidden>
6354
- <section class="pf-v5-c-dropdown__group">
6355
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
6356
- <div class="pf-v5-u-font-size-sm">Account number:</div>
6357
- <div>123456789</div>
6358
- </div>
6359
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
6360
- <div class="pf-v5-u-font-size-sm">Username:</div>
6361
- <div>mshaksho@redhat.com</div>
6362
- </div>
6363
- </section>
6364
- <hr class="pf-v5-c-divider" />
6365
- <section class="pf-v5-c-dropdown__group">
6366
- <ul>
6367
- <li>
6368
- <a
6369
- class="pf-v5-c-dropdown__menu-item"
6370
- href="#"
6371
- >My profile</a>
6372
- </li>
6373
- <li>
6374
- <a
6375
- class="pf-v5-c-dropdown__menu-item"
6376
- href="#"
6377
- >User management</a>
6378
- </li>
6379
- <li>
6380
- <a class="pf-v5-c-dropdown__menu-item" href="#">Logout</a>
6381
- </li>
6382
- </ul>
6383
- </section>
6384
- </div>
6385
3436
  </div>
6386
3437
  </div>
3438
+ <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
3439
+ <button
3440
+ class="pf-v5-c-menu-toggle pf-m-full-height"
3441
+ type="button"
3442
+ aria-expanded="false"
3443
+ >
3444
+ <span class="pf-v5-c-menu-toggle__icon">
3445
+ <img
3446
+ class="pf-v5-c-avatar"
3447
+ alt="Avatar image"
3448
+ src="/assets/images/img_avatar-light.svg"
3449
+ />
3450
+ </span>
3451
+ <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
3452
+ <span class="pf-v5-c-menu-toggle__controls">
3453
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3454
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3455
+ </span>
3456
+ </span>
3457
+ </button>
3458
+ </div>
6387
3459
  </div>
6388
3460
  </div>
6389
3461
  </div>