@patternfly/patternfly 5.0.0-prerelease.1 → 5.0.0-prerelease.10

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 (90) hide show
  1. package/base/_common.scss +7 -0
  2. package/base/_fonts.scss +1 -1
  3. package/base/_variables.scss +4 -7
  4. package/base/patternfly-common.css +6 -0
  5. package/base/patternfly-fonts.css +1 -1
  6. package/base/patternfly-themes.css +14 -0
  7. package/base/patternfly-variables.css +8 -6
  8. package/base/themes/dark/_chart-globals.scss +1 -1
  9. package/base/themes/dark/_variables.scss +4 -0
  10. package/components/AboutModalBox/about-modal-box.css +7 -8
  11. package/components/Accordion/accordion.css +2 -0
  12. package/components/Alert/alert.css +2 -0
  13. package/components/Banner/banner.css +9 -8
  14. package/components/CalendarMonth/calendar-month.css +5 -0
  15. package/components/CalendarMonth/calendar-month.scss +2 -0
  16. package/components/CalendarMonth/themes/dark/calendar-month.scss +4 -0
  17. package/components/Card/card.css +4 -0
  18. package/components/Card/themes/dark/card.scss +7 -1
  19. package/components/Chip/chip-group.css +2 -0
  20. package/components/Chip/chip.css +2 -0
  21. package/components/ContextSelector/context-selector.css +2 -0
  22. package/components/DataList/data-list.css +2 -0
  23. package/components/FormControl/form-control.css +2 -0
  24. package/components/LogViewer/log-viewer.css +7 -8
  25. package/components/Login/login.css +8 -9
  26. package/components/Masthead/masthead.css +11 -14
  27. package/components/Masthead/masthead.scss +1 -7
  28. package/components/Masthead/themes/dark/masthead.scss +1 -0
  29. package/components/Menu/menu.css +2 -0
  30. package/components/MenuToggle/menu-toggle.css +13 -11
  31. package/components/MenuToggle/menu-toggle.scss +14 -12
  32. package/components/MenuToggle/themes/dark/menu-toggle.scss +2 -1
  33. package/components/Page/page.css +11 -10
  34. package/components/Select/select.css +2 -0
  35. package/components/Switch/switch.css +3 -0
  36. package/components/Switch/switch.scss +3 -0
  37. package/components/Switch/themes/dark/switch.scss +1 -0
  38. package/components/Table/table.css +2 -0
  39. package/components/TextInputGroup/text-input-group.css +2 -2
  40. package/components/TextInputGroup/text-input-group.scss +2 -2
  41. package/components/Wizard/wizard.css +7 -8
  42. package/docs/components/Drawer/examples/Drawer.md +2 -2
  43. package/docs/components/Dropdown/deprecated/Dropdown.css +64 -0
  44. package/docs/components/Dropdown/{examples → deprecated}/Dropdown.md +1 -0
  45. package/docs/components/Nav/examples/Navigation.md +2 -2
  46. package/docs/components/Select/deprecated/Select.css +56 -0
  47. package/docs/components/Select/{examples → deprecated}/Select.md +1 -0
  48. package/docs/components/Switch/examples/Switch.md +36 -0
  49. package/docs/demos/AboutModal/examples/AboutModal.md +42 -774
  50. package/docs/demos/Alert/examples/Alert.md +126 -2322
  51. package/docs/demos/BackToTop/examples/BackToTop.md +42 -774
  52. package/docs/demos/Banner/examples/Banner.md +84 -1588
  53. package/docs/demos/CardView/examples/CardView.md +42 -774
  54. package/docs/demos/ContextSelector/examples/ContextSelector.md +136 -2448
  55. package/docs/demos/Dashboard/examples/Dashboard.md +42 -774
  56. package/docs/demos/DataList/examples/DataList.md +191 -3119
  57. package/docs/demos/DescriptionList/examples/DescriptionList.md +126 -2322
  58. package/docs/demos/Drawer/examples/Drawer.md +210 -3870
  59. package/docs/demos/JumpLinks/examples/JumpLinks.md +252 -4644
  60. package/docs/demos/Masthead/examples/Masthead.md +144 -1962
  61. package/docs/demos/Modal/examples/Modal.md +252 -4644
  62. package/docs/demos/Nav/examples/Nav.md +337 -6193
  63. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +231 -3891
  64. package/docs/demos/Page/examples/Page.md +378 -6966
  65. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +426 -5550
  66. package/docs/demos/Skeleton/examples/Skeleton.md +42 -774
  67. package/docs/demos/Table/examples/Table.md +752 -11732
  68. package/docs/demos/Tabs/examples/Tabs.md +252 -4644
  69. package/docs/demos/Toolbar/examples/Toolbar.md +84 -1548
  70. package/docs/demos/Wizard/examples/Wizard.md +378 -6966
  71. package/package.json +2 -2
  72. package/patternfly-base-no-globals-theme-dark-unversioned.css +22 -7
  73. package/patternfly-base-no-globals.css +22 -7
  74. package/patternfly-base-theme-dark-unversioned.css +22 -7
  75. package/patternfly-base.css +22 -7
  76. package/patternfly-charts-theme-dark-unversioned.css +66 -66
  77. package/patternfly-charts-theme-dark.css +66 -66
  78. package/patternfly-no-globals.css +314 -609
  79. package/patternfly-theme-dark-unversioned.css +314 -609
  80. package/patternfly.css +314 -609
  81. package/patternfly.min.css +1 -1
  82. package/patternfly.min.css.map +1 -1
  83. package/sass-utilities/placeholders.scss +8 -0
  84. package/sass-utilities/scss-variables.scss +6 -2
  85. package/sass-utilities/themes/dark/placeholders.scss +3 -8
  86. package/sass-utilities/themes/dark/scss-variables.scss +6 -3
  87. package/RELEASE-NOTES.md +0 -1815
  88. package/UPGRADE-GUIDE.md +0 -1298
  89. package/docs/components/Dropdown/examples/Dropdown.css +0 -64
  90. package/docs/components/Select/examples/Select.css +0 -55
package/docs/demos/Masthead/examples/Masthead.md CHANGED
@@ -51,54 +51,14 @@ wrapperTag: div
51
51
  <div class="pf-v5-c-toolbar__content-section">
52
52
  <div class="pf-v5-c-toolbar__group pf-m-align-right">
53
53
  <div class="pf-v5-c-toolbar__item">
54
- <div class="pf-v5-c-dropdown">
55
- <button
56
- class="pf-v5-c-dropdown__toggle pf-m-plain"
57
- id="masthead-basic-example-masthead-header-action-button"
58
- aria-expanded="false"
59
- type="button"
60
- aria-label="Actions"
61
- >
62
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
63
- </button>
64
- <ul
65
- class="pf-v5-c-dropdown__menu pf-m-align-right"
66
- aria-labelledby="masthead-basic-example-masthead-header-action-button"
67
- hidden
68
- >
69
- <li>
70
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
71
- </li>
72
- <li>
73
- <button
74
- class="pf-v5-c-dropdown__menu-item"
75
- type="button"
76
- >Action</button>
77
- </li>
78
- <li>
79
- <a
80
- class="pf-v5-c-dropdown__menu-item pf-m-disabled"
81
- href="#"
82
- aria-disabled="true"
83
- tabindex="-1"
84
- >Disabled link</a>
85
- </li>
86
- <li>
87
- <button
88
- class="pf-v5-c-dropdown__menu-item"
89
- type="button"
90
- disabled
91
- >Disabled action</button>
92
- </li>
93
- <li class="pf-v5-c-divider" role="separator"></li>
94
- <li>
95
- <a
96
- class="pf-v5-c-dropdown__menu-item"
97
- href="#"
98
- >Separated link</a>
99
- </li>
100
- </ul>
101
- </div>
54
+ <button
55
+ class="pf-v5-c-menu-toggle pf-m-plain"
56
+ type="button"
57
+ aria-expanded="false"
58
+ aria-label="Actions"
59
+ >
60
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
61
+ </button>
102
62
  </div>
103
63
  </div>
104
64
  </div>
@@ -277,238 +237,44 @@ wrapperTag: div
277
237
  <div class="pf-v5-c-toolbar__content-section">
278
238
  <div class="pf-v5-c-toolbar__group pf-m-filter-group">
279
239
  <div class="pf-v5-c-toolbar__item">
280
- <div class="pf-v5-c-context-selector pf-m-full-height">
281
- <span
282
- id="masthead-context-selecton-drilldown-example-masthead-context-selector-label"
283
- hidden
284
- >Selected project:</span>
285
- <button
286
- class="pf-v5-c-context-selector__toggle"
287
- aria-expanded="false"
288
- id="masthead-context-selecton-drilldown-example-masthead-context-selector-toggle"
289
- aria-labelledby="masthead-context-selecton-drilldown-example-masthead-context-selector-label masthead-context-selecton-drilldown-example-masthead-context-selector-toggle"
290
- >
291
- <span
292
- class="pf-v5-c-context-selector__toggle-text"
293
- >Context selector</span>
294
- <span class="pf-v5-c-context-selector__toggle-icon">
240
+ <button
241
+ class="pf-v5-c-menu-toggle pf-m-full-height"
242
+ type="button"
243
+ aria-expanded="false"
244
+ >
245
+ <span class="pf-v5-c-menu-toggle__text">Context selector</span>
246
+ <span class="pf-v5-c-menu-toggle__controls">
247
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
295
248
  <i class="fas fa-caret-down" aria-hidden="true"></i>
296
249
  </span>
297
- </button>
298
- <div class="pf-v5-c-context-selector__menu" hidden>
299
- <div class="pf-v5-c-context-selector__menu-search">
300
- <div class="pf-v5-c-text-input-group">
301
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
302
- <span class="pf-v5-c-text-input-group__text">
303
- <span class="pf-v5-c-text-input-group__icon">
304
- <i class="fas fa-fw fa-search"></i>
305
- </span>
306
- <input
307
- class="pf-v5-c-text-input-group__text-input"
308
- type="text"
309
- placeholder="Search"
310
- value
311
- aria-label="Search input"
312
- />
313
- </span>
314
- </div>
315
- </div>
316
- </div>
317
- <ul class="pf-v5-c-context-selector__menu-list" role="list">
318
- <li>
319
- <a
320
- class="pf-v5-c-context-selector__menu-list-item"
321
- href="#"
322
- >Link</a>
323
- </li>
324
- <li>
325
- <button
326
- class="pf-v5-c-context-selector__menu-list-item"
327
- type="button"
328
- >Action</button>
329
- </li>
330
- <li>
331
- <a
332
- class="pf-v5-c-context-selector__menu-list-item pf-m-disabled"
333
- href="#"
334
- aria-disabled="true"
335
- tabindex="-1"
336
- >Disabled link</a>
337
- </li>
338
- <li>
339
- <button
340
- class="pf-v5-c-context-selector__menu-list-item"
341
- type="button"
342
- disabled
343
- >Disabled action</button>
344
- </li>
345
- <li>
346
- <button
347
- class="pf-v5-c-context-selector__menu-list-item"
348
- type="button"
349
- >My project</button>
350
- </li>
351
- <li>
352
- <button
353
- class="pf-v5-c-context-selector__menu-list-item"
354
- type="button"
355
- >OpenShift cluster</button>
356
- </li>
357
- <li>
358
- <button
359
- class="pf-v5-c-context-selector__menu-list-item"
360
- type="button"
361
- >Production Ansible</button>
362
- </li>
363
- <li>
364
- <button
365
- class="pf-v5-c-context-selector__menu-list-item"
366
- type="button"
367
- >AWS</button>
368
- </li>
369
- <li>
370
- <button
371
- class="pf-v5-c-context-selector__menu-list-item"
372
- type="button"
373
- >Azure</button>
374
- </li>
375
- <li>
376
- <button
377
- class="pf-v5-c-context-selector__menu-list-item"
378
- type="button"
379
- >My project</button>
380
- </li>
381
- <li>
382
- <button
383
- class="pf-v5-c-context-selector__menu-list-item"
384
- type="button"
385
- >OpenShift cluster</button>
386
- </li>
387
- <li>
388
- <button
389
- class="pf-v5-c-context-selector__menu-list-item"
390
- type="button"
391
- >Production Ansible</button>
392
- </li>
393
- <li>
394
- <button
395
- class="pf-v5-c-context-selector__menu-list-item"
396
- type="button"
397
- >AWS</button>
398
- </li>
399
- <li>
400
- <button
401
- class="pf-v5-c-context-selector__menu-list-item"
402
- type="button"
403
- >Azure</button>
404
- </li>
405
- </ul>
406
- </div>
407
- </div>
250
+ </span>
251
+ </button>
408
252
  </div>
409
253
  <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-lg">
410
- <div class="pf-v5-c-dropdown pf-m-full-height">
411
- <button
412
- class="pf-v5-c-dropdown__toggle"
413
- id="dropdown-expanded-button"
414
- aria-expanded="false"
415
- type="button"
416
- >
417
- <span class="pf-v5-c-dropdown__toggle-text">Dropdown</span>
418
- <span class="pf-v5-c-dropdown__toggle-icon">
419
- <i class="fas fa-caret-down" aria-hidden="true"></i>
420
- </span>
421
- </button>
422
- <ul
423
- class="pf-v5-c-dropdown__menu"
424
- aria-labelledby="dropdown-expanded-button"
425
- hidden
426
- >
427
- <li>
428
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
429
- </li>
430
- <li>
431
- <button
432
- class="pf-v5-c-dropdown__menu-item"
433
- type="button"
434
- >Action</button>
435
- </li>
436
- <li>
437
- <a
438
- class="pf-v5-c-dropdown__menu-item pf-m-disabled"
439
- href="#"
440
- aria-disabled="true"
441
- tabindex="-1"
442
- >Disabled link</a>
443
- </li>
444
- <li>
445
- <button
446
- class="pf-v5-c-dropdown__menu-item"
447
- type="button"
448
- disabled
449
- >Disabled action</button>
450
- </li>
451
- <li class="pf-v5-c-divider" role="separator"></li>
452
- <li>
453
- <a
454
- class="pf-v5-c-dropdown__menu-item"
455
- href="#"
456
- >Separated link</a>
457
- </li>
458
- </ul>
459
- </div>
460
- </div>
461
- </div>
462
- <div class="pf-v5-c-toolbar__item pf-m-align-right">
463
- <div class="pf-v5-c-dropdown">
464
254
  <button
465
- class="pf-v5-c-dropdown__toggle pf-m-plain"
466
- id="masthead-context-selecton-drilldown-example-masthead-header-action-button"
467
- aria-expanded="false"
255
+ class="pf-v5-c-menu-toggle pf-m-full-height"
468
256
  type="button"
469
- aria-label="Actions"
257
+ aria-expanded="false"
470
258
  >
471
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
259
+ <span class="pf-v5-c-menu-toggle__text">Dropdown</span>
260
+ <span class="pf-v5-c-menu-toggle__controls">
261
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
262
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
263
+ </span>
264
+ </span>
472
265
  </button>
473
- <ul
474
- class="pf-v5-c-dropdown__menu pf-m-align-right"
475
- aria-labelledby="masthead-context-selecton-drilldown-example-masthead-header-action-button"
476
- hidden
477
- >
478
- <li>
479
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
480
- </li>
481
- <li>
482
- <button
483
- class="pf-v5-c-dropdown__menu-item"
484
- type="button"
485
- >Action</button>
486
- </li>
487
- <li>
488
- <a
489
- class="pf-v5-c-dropdown__menu-item pf-m-disabled"
490
- href="#"
491
- aria-disabled="true"
492
- tabindex="-1"
493
- >Disabled link</a>
494
- </li>
495
- <li>
496
- <button
497
- class="pf-v5-c-dropdown__menu-item"
498
- type="button"
499
- disabled
500
- >Disabled action</button>
501
- </li>
502
- <li class="pf-v5-c-divider" role="separator"></li>
503
- <li>
504
- <a
505
- class="pf-v5-c-dropdown__menu-item"
506
- href="#"
507
- >Separated link</a>
508
- </li>
509
- </ul>
510
266
  </div>
511
267
  </div>
268
+ <div class="pf-v5-c-toolbar__item pf-m-align-right">
269
+ <button
270
+ class="pf-v5-c-menu-toggle pf-m-plain"
271
+ type="button"
272
+ aria-expanded="false"
273
+ aria-label="Actions"
274
+ >
275
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
276
+ </button>
277
+ </div>
512
278
  </div>
513
279
  </div>
514
280
  </div>
@@ -796,54 +562,14 @@ wrapperTag: div
796
562
  </div>
797
563
  </div>
798
564
  <div class="pf-v5-c-toolbar__item">
799
- <div class="pf-v5-c-dropdown">
800
- <button
801
- class="pf-v5-c-dropdown__toggle pf-m-plain"
802
- id="masthead-toolbar-filters-example-masthead-header-action-button"
803
- aria-expanded="false"
804
- type="button"
805
- aria-label="Actions"
806
- >
807
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
808
- </button>
809
- <ul
810
- class="pf-v5-c-dropdown__menu pf-m-align-right"
811
- aria-labelledby="masthead-toolbar-filters-example-masthead-header-action-button"
812
- hidden
813
- >
814
- <li>
815
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
816
- </li>
817
- <li>
818
- <button
819
- class="pf-v5-c-dropdown__menu-item"
820
- type="button"
821
- >Action</button>
822
- </li>
823
- <li>
824
- <a
825
- class="pf-v5-c-dropdown__menu-item pf-m-disabled"
826
- href="#"
827
- aria-disabled="true"
828
- tabindex="-1"
829
- >Disabled link</a>
830
- </li>
831
- <li>
832
- <button
833
- class="pf-v5-c-dropdown__menu-item"
834
- type="button"
835
- disabled
836
- >Disabled action</button>
837
- </li>
838
- <li class="pf-v5-c-divider" role="separator"></li>
839
- <li>
840
- <a
841
- class="pf-v5-c-dropdown__menu-item"
842
- href="#"
843
- >Separated link</a>
844
- </li>
845
- </ul>
846
- </div>
565
+ <button
566
+ class="pf-v5-c-menu-toggle pf-m-plain"
567
+ type="button"
568
+ aria-expanded="false"
569
+ aria-label="Actions"
570
+ >
571
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
572
+ </button>
847
573
  </div>
848
574
  </div>
849
575
  <div
@@ -1137,54 +863,14 @@ wrapperTag: div
1137
863
  </div>
1138
864
  </div>
1139
865
  <div class="pf-v5-c-toolbar__item">
1140
- <div class="pf-v5-c-dropdown">
1141
- <button
1142
- class="pf-v5-c-dropdown__toggle pf-m-plain"
1143
- id="masthead-toggle-group-filters-example-masthead-header-action-button"
1144
- aria-expanded="false"
1145
- type="button"
1146
- aria-label="Actions"
1147
- >
1148
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1149
- </button>
1150
- <ul
1151
- class="pf-v5-c-dropdown__menu pf-m-align-right"
1152
- aria-labelledby="masthead-toggle-group-filters-example-masthead-header-action-button"
1153
- hidden
1154
- >
1155
- <li>
1156
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
1157
- </li>
1158
- <li>
1159
- <button
1160
- class="pf-v5-c-dropdown__menu-item"
1161
- type="button"
1162
- >Action</button>
1163
- </li>
1164
- <li>
1165
- <a
1166
- class="pf-v5-c-dropdown__menu-item pf-m-disabled"
1167
- href="#"
1168
- aria-disabled="true"
1169
- tabindex="-1"
1170
- >Disabled link</a>
1171
- </li>
1172
- <li>
1173
- <button
1174
- class="pf-v5-c-dropdown__menu-item"
1175
- type="button"
1176
- disabled
1177
- >Disabled action</button>
1178
- </li>
1179
- <li class="pf-v5-c-divider" role="separator"></li>
1180
- <li>
1181
- <a
1182
- class="pf-v5-c-dropdown__menu-item"
1183
- href="#"
1184
- >Separated link</a>
1185
- </li>
1186
- </ul>
1187
- </div>
866
+ <button
867
+ class="pf-v5-c-menu-toggle pf-m-plain"
868
+ type="button"
869
+ aria-expanded="false"
870
+ aria-label="Actions"
871
+ >
872
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
873
+ </button>
1188
874
  </div>
1189
875
  </div>
1190
876
  <div
@@ -1768,800 +1454,68 @@ wrapperTag: div
1768
1454
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
1769
1455
  >
1770
1456
  <div class="pf-v5-c-toolbar__item">
1771
- <nav
1772
- class="pf-v5-c-app-launcher"
1457
+ <button
1458
+ class="pf-v5-c-menu-toggle pf-m-plain"
1459
+ type="button"
1460
+ aria-expanded="false"
1773
1461
  aria-label="Application launcher"
1774
- id="masthead-advanced-with-menu-example-masthead-application-launcher"
1775
1462
  >
1776
- <button
1777
- class="pf-v5-c-app-launcher__toggle"
1778
- type="button"
1779
- id="masthead-advanced-with-menu-example-masthead-application-launcher-button"
1780
- aria-expanded="false"
1781
- aria-label="Application launcher"
1782
- >
1783
- <i class="fas fa-th" aria-hidden="true"></i>
1784
- </button>
1785
- <div
1786
- class="pf-v5-c-app-launcher__menu pf-m-align-right"
1787
- hidden
1788
- >
1789
- <div class="pf-v5-c-app-launcher__menu-search">
1790
- <div class="pf-v5-c-text-input-group">
1791
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
1792
- <span class="pf-v5-c-text-input-group__text">
1793
- <span class="pf-v5-c-text-input-group__icon">
1794
- <i class="fas fa-fw fa-search"></i>
1795
- </span>
1796
- <input
1797
- class="pf-v5-c-text-input-group__text-input"
1798
- type="text"
1799
- placeholder="Filer by name"
1800
- value
1801
- aria-label="Search input"
1802
- />
1803
- </span>
1804
- </div>
1805
- </div>
1806
- </div>
1807
- <section class="pf-v5-c-app-launcher__group">
1808
- <h1 class="pf-v5-c-app-launcher__group-title">Favorites</h1>
1809
- <ul role="list">
1810
- <li
1811
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1812
- >
1813
- <a class="pf-v5-c-app-launcher__menu-item">
1814
- Link 1
1815
- <span
1816
- class="pf-v5-c-app-launcher__menu-item-external-icon"
1817
- >
1818
- <i
1819
- class="fas fa-external-link-alt"
1820
- aria-hidden="true"
1821
- ></i>
1822
- </span>
1823
- <span
1824
- class="pf-v5-screen-reader"
1825
- >(opens new window)</span>
1826
- </a>
1827
- <button
1828
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
1829
- type="button"
1830
- aria-label="Favorite"
1831
- >
1832
- <i class="fas fa-star" aria-hidden="true"></i>
1833
- </button>
1834
- </li>
1835
- <li
1836
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
1837
- >
1838
- <a class="pf-v5-c-app-launcher__menu-item">
1839
- Link 2
1840
- <span
1841
- class="pf-v5-c-app-launcher__menu-item-external-icon"
1842
- >
1843
- <i
1844
- class="fas fa-external-link-alt"
1845
- aria-hidden="true"
1846
- ></i>
1847
- </span>
1848
- <span
1849
- class="pf-v5-screen-reader"
1850
- >(opens new window)</span>
1851
- </a>
1852
- <button
1853
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
1854
- type="button"
1855
- aria-label="Favorite"
1856
- >
1857
- <i class="fas fa-star" aria-hidden="true"></i>
1858
- </button>
1859
- </li>
1860
- </ul>
1861
- </section>
1862
- <hr class="pf-v5-c-divider" />
1863
- <section class="pf-v5-c-app-launcher__group">
1864
- <h1 class="pf-v5-c-app-launcher__group-title">Group 1</h1>
1865
- <ul role="list">
1866
- <li
1867
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
1868
- >
1869
- <a class="pf-v5-c-app-launcher__menu-item">
1870
- Link 1
1871
- <span
1872
- class="pf-v5-c-app-launcher__menu-item-external-icon"
1873
- >
1874
- <i
1875
- class="fas fa-external-link-alt"
1876
- aria-hidden="true"
1877
- ></i>
1878
- </span>
1879
- <span
1880
- class="pf-v5-screen-reader"
1881
- >(opens new window)</span>
1882
- </a>
1883
- <button
1884
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
1885
- type="button"
1886
- aria-label="Favorite"
1887
- >
1888
- <i class="fas fa-star" aria-hidden="true"></i>
1889
- </button>
1890
- </li>
1891
- <li
1892
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1893
- >
1894
- <a class="pf-v5-c-app-launcher__menu-item">
1895
- Link 2
1896
- <span
1897
- class="pf-v5-c-app-launcher__menu-item-external-icon"
1898
- >
1899
- <i
1900
- class="fas fa-external-link-alt"
1901
- aria-hidden="true"
1902
- ></i>
1903
- </span>
1904
- <span
1905
- class="pf-v5-screen-reader"
1906
- >(opens new window)</span>
1907
- </a>
1908
- <button
1909
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
1910
- type="button"
1911
- aria-label="Favorite"
1912
- >
1913
- <i class="fas fa-star" aria-hidden="true"></i>
1914
- </button>
1915
- </li>
1916
- </ul>
1917
- </section>
1918
- </div>
1919
- </nav>
1463
+ <i class="fas fa-th" aria-hidden="true"></i>
1464
+ </button>
1920
1465
  </div>
1921
1466
  <div class="pf-v5-c-toolbar__item">
1922
- <div class="pf-v5-c-dropdown">
1923
- <button
1924
- class="pf-v5-c-dropdown__toggle pf-m-plain"
1925
- id="masthead-advanced-with-menu-example-masthead-settings-button"
1926
- aria-expanded="false"
1927
- type="button"
1928
- aria-label="Settings"
1929
- >
1930
- <i class="fas fa-cog" aria-hidden="true"></i>
1931
- </button>
1932
- <ul
1933
- class="pf-v5-c-dropdown__menu pf-m-align-right"
1934
- aria-labelledby="masthead-advanced-with-menu-example-masthead-settings-button"
1935
- hidden
1936
- >
1937
- <li>
1938
- <button
1939
- class="pf-v5-c-dropdown__menu-item"
1940
- type="button"
1941
- >Settings</button>
1942
- </li>
1943
- <li>
1944
- <button
1945
- class="pf-v5-c-dropdown__menu-item"
1946
- type="button"
1947
- >Use the beta release</button>
1948
- </li>
1949
- </ul>
1950
- </div>
1467
+ <button
1468
+ class="pf-v5-c-menu-toggle pf-m-plain"
1469
+ type="button"
1470
+ aria-expanded="false"
1471
+ aria-label="Settings"
1472
+ >
1473
+ <i class="fas fa-cog" aria-hidden="true"></i>
1474
+ </button>
1951
1475
  </div>
1952
1476
  <div class="pf-v5-c-toolbar__item">
1953
- <div class="pf-v5-c-dropdown">
1954
- <button
1955
- class="pf-v5-c-dropdown__toggle pf-m-plain"
1956
- id="masthead-advanced-with-menu-example-masthead-help-button"
1957
- aria-expanded="false"
1958
- type="button"
1959
- aria-label="Help"
1960
- >
1961
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1962
- </button>
1963
- <ul
1964
- class="pf-v5-c-dropdown__menu pf-m-align-right"
1965
- aria-labelledby="masthead-advanced-with-menu-example-masthead-help-button"
1966
- hidden
1967
- >
1968
- <li>
1969
- <button
1970
- class="pf-v5-c-dropdown__menu-item"
1971
- type="button"
1972
- >Support options</button>
1973
- </li>
1974
- <li>
1975
- <button
1976
- class="pf-v5-c-dropdown__menu-item"
1977
- type="button"
1978
- >Open support case</button>
1979
- </li>
1980
- <li>
1981
- <button
1982
- class="pf-v5-c-dropdown__menu-item"
1983
- type="button"
1984
- >API documentation</button>
1985
- </li>
1986
- </ul>
1987
- </div>
1988
- </div>
1989
- </div>
1990
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
1991
- <div class="pf-v5-c-dropdown">
1992
1477
  <button
1993
1478
  class="pf-v5-c-menu-toggle pf-m-plain"
1994
1479
  type="button"
1995
1480
  aria-expanded="false"
1996
- aria-label="Actions"
1481
+ aria-label="Help"
1997
1482
  >
1998
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1483
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
1999
1484
  </button>
2000
- <div
2001
- class="pf-v5-c-menu pf-m-drilldown pf-m-align-right"
2002
- hidden
2003
- >
2004
- <div class="pf-v5-c-menu__content">
2005
- <section class="pf-v5-c-menu__group pf-m-hidden-on-sm">
2006
- <ul class="pf-v5-c-menu__list" role="menu">
2007
- <li
2008
- class="pf-v5-c-menu__list-item pf-m-disabled"
2009
- role="none"
2010
- >
2011
- <button
2012
- class="pf-v5-c-menu__item"
2013
- type="button"
2014
- disabled
2015
- role="menuitem"
2016
- >
2017
- <span class="pf-v5-c-menu__item-description">
2018
- <div class="pf-v5-u-font-size-sm">Username:</div>
2019
- <div class="pf-v5-u-font-size-md">ned_username</div>
2020
- </span>
2021
- </button>
2022
- </li>
2023
- <li
2024
- class="pf-v5-c-menu__list-item pf-m-disabled"
2025
- role="none"
2026
- >
2027
- <button
2028
- class="pf-v5-c-menu__item"
2029
- type="button"
2030
- disabled
2031
- role="menuitem"
2032
- >
2033
- <span class="pf-v5-c-menu__item-description">
2034
- <div
2035
- class="pf-v5-u-font-size-sm"
2036
- >Account number:</div>
2037
- <div class="pf-v5-u-font-size-md">123456789</div>
2038
- </span>
2039
- </button>
2040
- </li>
2041
- <li class="pf-v5-c-divider" role="separator"></li>
2042
- <li class="pf-v5-c-menu__list-item" role="none">
2043
- <button
2044
- class="pf-v5-c-menu__item"
2045
- type="button"
2046
- role="menuitem"
2047
- >
2048
- <span class="pf-v5-c-menu__item-main">
2049
- <span class="pf-v5-c-menu__item-text">My profile</span>
2050
- </span>
2051
- </button>
2052
- </li>
2053
- <li class="pf-v5-c-menu__list-item" role="none">
2054
- <button
2055
- class="pf-v5-c-menu__item"
2056
- type="button"
2057
- role="menuitem"
2058
- >
2059
- <span class="pf-v5-c-menu__item-main">
2060
- <span
2061
- class="pf-v5-c-menu__item-text"
2062
- >User management</span>
2063
- </span>
2064
- </button>
2065
- </li>
2066
- <li class="pf-v5-c-menu__list-item" role="none">
2067
- <button
2068
- class="pf-v5-c-menu__item"
2069
- type="button"
2070
- role="menuitem"
2071
- >
2072
- <span class="pf-v5-c-menu__item-main">
2073
- <span class="pf-v5-c-menu__item-text">Logout</span>
2074
- </span>
2075
- </button>
2076
- </li>
2077
- </ul>
2078
- </section>
2079
- <hr class="pf-v5-c-divider pf-m-hidden-on-sm" />
2080
- <section class="pf-v5-c-menu__group">
2081
- <ul class="pf-v5-c-menu__list" role="menu">
2082
- <li class="pf-v5-c-menu__list-item" role="none">
2083
- <button
2084
- class="pf-v5-c-menu__item"
2085
- type="button"
2086
- role="menuitem"
2087
- aria-expanded="false"
2088
- >
2089
- <span class="pf-v5-c-menu__item-main">
2090
- <span class="pf-v5-c-menu__item-icon">
2091
- <i
2092
- class="fas fa-fw fa-cog"
2093
- aria-hidden="true"
2094
- ></i>
2095
- </span>
2096
- <span class="pf-v5-c-menu__item-text">Settings</span>
2097
- <span class="pf-v5-c-menu__item-toggle-icon">
2098
- <i class="fas fa-angle-right"></i>
2099
- </span>
2100
- </span>
2101
- </button>
2102
- <div class="pf-v5-c-menu" hidden>
2103
- <div class="pf-v5-c-menu__content">
2104
- <ul class="pf-v5-c-menu__list" role="menu">
2105
- <li
2106
- class="pf-v5-c-menu__list-item pf-m-drill-up"
2107
- role="none"
2108
- >
2109
- <button
2110
- class="pf-v5-c-menu__item"
2111
- type="button"
2112
- role="menuitem"
2113
- >
2114
- <span class="pf-v5-c-menu__item-main">
2115
- <span
2116
- class="pf-v5-c-menu__item-toggle-icon"
2117
- >
2118
- <i class="fas fa-angle-left"></i>
2119
- </span>
2120
- <span class="pf-v5-c-menu__item-icon">
2121
- <i
2122
- class="fas fa-fw fa-cog"
2123
- aria-hidden="true"
2124
- ></i>
2125
- </span>
2126
- <span
2127
- class="pf-v5-c-menu__item-text"
2128
- >Settings</span>
2129
- </span>
2130
- </button>
2131
- </li>
2132
- <li class="pf-v5-c-divider" role="separator"></li>
2133
- <li
2134
- class="pf-v5-c-menu__list-item"
2135
- role="none"
2136
- >
2137
- <a
2138
- class="pf-v5-c-menu__item"
2139
- href="#"
2140
- role="menuitem"
2141
- >
2142
- <span class="pf-v5-c-menu__item-main">
2143
- <span
2144
- class="pf-v5-c-menu__item-text"
2145
- >Customer support</span>
2146
- </span>
2147
- </a>
2148
- </li>
2149
- <li
2150
- class="pf-v5-c-menu__list-item"
2151
- role="none"
2152
- >
2153
- <a
2154
- class="pf-v5-c-menu__item"
2155
- href="#"
2156
- role="menuitem"
2157
- >
2158
- <span class="pf-v5-c-menu__item-main">
2159
- <span
2160
- class="pf-v5-c-menu__item-text"
2161
- >About</span>
2162
- </span>
2163
- </a>
2164
- </li>
2165
- </ul>
2166
- </div>
2167
- </div>
2168
- </li>
2169
-
2170
- <li class="pf-v5-c-menu__list-item" role="none">
2171
- <button
2172
- class="pf-v5-c-menu__item"
2173
- type="button"
2174
- role="menuitem"
2175
- aria-expanded="false"
2176
- >
2177
- <span class="pf-v5-c-menu__item-main">
2178
- <span class="pf-v5-c-menu__item-icon">
2179
- <i
2180
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
2181
- aria-hidden="true"
2182
- ></i>
2183
- </span>
2184
- <span class="pf-v5-c-menu__item-text">Help</span>
2185
- <span class="pf-v5-c-menu__item-toggle-icon">
2186
- <i class="fas fa-angle-right"></i>
2187
- </span>
2188
- </span>
2189
- </button>
2190
- <div class="pf-v5-c-menu" hidden>
2191
- <div class="pf-v5-c-menu__content">
2192
- <ul class="pf-v5-c-menu__list" role="menu">
2193
- <li
2194
- class="pf-v5-c-menu__list-item pf-m-drill-up"
2195
- role="none"
2196
- >
2197
- <button
2198
- class="pf-v5-c-menu__item"
2199
- type="button"
2200
- role="menuitem"
2201
- >
2202
- <span class="pf-v5-c-menu__item-main">
2203
- <span
2204
- class="pf-v5-c-menu__item-toggle-icon"
2205
- >
2206
- <i class="fas fa-angle-left"></i>
2207
- </span>
2208
- <span class="pf-v5-c-menu__item-icon">
2209
- <i
2210
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
2211
- aria-hidden="true"
2212
- ></i>
2213
- </span>
2214
- <span
2215
- class="pf-v5-c-menu__item-text"
2216
- >Help</span>
2217
- </span>
2218
- </button>
2219
- </li>
2220
- <li class="pf-v5-c-divider" role="separator"></li>
2221
- <li
2222
- class="pf-v5-c-menu__list-item"
2223
- role="none"
2224
- >
2225
- <a
2226
- class="pf-v5-c-menu__item"
2227
- href="#"
2228
- role="menuitem"
2229
- >
2230
- <span class="pf-v5-c-menu__item-main">
2231
- <span
2232
- class="pf-v5-c-menu__item-text"
2233
- >Support options</span>
2234
- </span>
2235
- </a>
2236
- </li>
2237
- <li
2238
- class="pf-v5-c-menu__list-item"
2239
- role="none"
2240
- >
2241
- <a
2242
- class="pf-v5-c-menu__item"
2243
- href="#"
2244
- role="menuitem"
2245
- >
2246
- <span class="pf-v5-c-menu__item-main">
2247
- <span
2248
- class="pf-v5-c-menu__item-text"
2249
- >Open support case</span>
2250
- </span>
2251
- </a>
2252
- </li>
2253
- <li
2254
- class="pf-v5-c-menu__list-item"
2255
- role="none"
2256
- >
2257
- <a
2258
- class="pf-v5-c-menu__item"
2259
- href="#"
2260
- role="menuitem"
2261
- >
2262
- <span class="pf-v5-c-menu__item-main">
2263
- <span
2264
- class="pf-v5-c-menu__item-text"
2265
- >API documentation</span>
2266
- </span>
2267
- </a>
2268
- </li>
2269
- </ul>
2270
- </div>
2271
- </div>
2272
- </li>
2273
-
2274
- <li class="pf-v5-c-menu__list-item" role="none">
2275
- <button
2276
- class="pf-v5-c-menu__item"
2277
- type="button"
2278
- role="menuitem"
2279
- >
2280
- <span class="pf-v5-c-menu__item-main">
2281
- <span class="pf-v5-c-menu__item-icon">
2282
- <i class="fas fa-fw fa-th" aria-hidden="true"></i>
2283
- </span>
2284
- <span
2285
- class="pf-v5-c-menu__item-text"
2286
- >Application launcher</span>
2287
- <span class="pf-v5-c-menu__item-toggle-icon">
2288
- <i class="fas fa-angle-right"></i>
2289
- </span>
2290
- </span>
2291
- </button>
2292
- <div class="pf-v5-c-menu" hidden>
2293
- <div class="pf-v5-c-menu__header">
2294
- <button
2295
- class="pf-v5-c-menu__item"
2296
- type="button"
2297
- role="menuitem"
2298
- >
2299
- <span class="pf-v5-c-menu__item-main">
2300
- <span
2301
- class="pf-v5-c-menu__item-toggle-icon"
2302
- >
2303
- <i class="fas fa-angle-left"></i>
2304
- </span>
2305
- <span class="pf-v5-c-menu__item-icon">
2306
- <i
2307
- class="fas fa-fw fa-th"
2308
- aria-hidden="true"
2309
- ></i>
2310
- </span>
2311
- <span
2312
- class="pf-v5-c-menu__item-text"
2313
- >Application launcher</span>
2314
- </span>
2315
- </button>
2316
- </div>
2317
- <div class="pf-v5-c-menu__search">
2318
- <div class="pf-v5-c-menu__search-input">
2319
- <div class="pf-v5-c-text-input-group">
2320
- <div
2321
- class="pf-v5-c-text-input-group__main pf-m-icon"
2322
- >
2323
- <span
2324
- class="pf-v5-c-text-input-group__text"
2325
- >
2326
- <span
2327
- class="pf-v5-c-text-input-group__icon"
2328
- >
2329
- <i class="fas fa-fw fa-search"></i>
2330
- </span>
2331
- <input
2332
- class="pf-v5-c-text-input-group__text-input"
2333
- type="text"
2334
- placeholder="Search"
2335
- value
2336
- aria-label="Search input"
2337
- />
2338
- </span>
2339
- </div>
2340
- </div>
2341
- </div>
2342
- </div>
2343
- <hr class="pf-v5-c-divider" />
2344
- <section class="pf-v5-c-menu__group">
2345
- <h1 class="pf-v5-c-menu__group-title">Favorites</h1>
2346
- <ul class="pf-v5-c-menu__list" role="menu">
2347
- <li
2348
- class="pf-v5-c-menu__list-item"
2349
- role="none"
2350
- >
2351
- <a
2352
- class="pf-v5-c-menu__item"
2353
- href="#"
2354
- role="menuitem"
2355
- >
2356
- <span class="pf-v5-c-menu__item-main">
2357
- <span
2358
- class="pf-v5-c-menu__item-text"
2359
- >Link 1</span>
2360
- </span>
2361
- </a>
2362
- <button
2363
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
2364
- type="button"
2365
- aria-label="Starred"
2366
- >
2367
- <span
2368
- class="pf-v5-c-menu__item-action-icon"
2369
- >
2370
- <i
2371
- class="fas fa-star"
2372
- aria-hidden="true"
2373
- ></i>
2374
- </span>
2375
- </button>
2376
- </li>
2377
- <li
2378
- class="pf-v5-c-menu__list-item"
2379
- role="none"
2380
- >
2381
- <a
2382
- class="pf-v5-c-menu__item"
2383
- href="#"
2384
- role="menuitem"
2385
- target="_blank"
2386
- >
2387
- <span class="pf-v5-c-menu__item-main">
2388
- <span
2389
- class="pf-v5-c-menu__item-text"
2390
- >Link 2</span>
2391
- <span
2392
- class="pf-v5-c-menu__item-external-icon"
2393
- >
2394
- <i
2395
- class="fas fa-external-link-alt"
2396
- aria-hidden="true"
2397
- ></i>
2398
- </span>
2399
- <span
2400
- class="pf-v5-screen-reader"
2401
- >(opens new window)</span>
2402
- </span>
2403
- </a>
2404
- <button
2405
- class="pf-v5-c-menu__item-action pf-m-favorite"
2406
- type="button"
2407
- aria-label="Not starred"
2408
- >
2409
- <span
2410
- class="pf-v5-c-menu__item-action-icon"
2411
- >
2412
- <i
2413
- class="fas fa-star"
2414
- aria-hidden="true"
2415
- ></i>
2416
- </span>
2417
- </button>
2418
- </li>
2419
- </ul>
2420
- </section>
2421
- <hr class="pf-v5-c-divider" />
2422
- <section class="pf-v5-c-menu__group">
2423
- <h1 class="pf-v5-c-menu__group-title">Group 1</h1>
2424
- <ul class="pf-v5-c-menu__list" role="menu">
2425
- <li
2426
- class="pf-v5-c-menu__list-item"
2427
- role="none"
2428
- >
2429
- <a
2430
- class="pf-v5-c-menu__item"
2431
- href="#"
2432
- role="menuitem"
2433
- >
2434
- <span class="pf-v5-c-menu__item-main">
2435
- <span
2436
- class="pf-v5-c-menu__item-text"
2437
- >Link 1</span>
2438
- </span>
2439
- </a>
2440
- <button
2441
- class="pf-v5-c-menu__item-action pf-m-favorite"
2442
- type="button"
2443
- aria-label="Not starred"
2444
- >
2445
- <span
2446
- class="pf-v5-c-menu__item-action-icon"
2447
- >
2448
- <i
2449
- class="fas fa-star"
2450
- aria-hidden="true"
2451
- ></i>
2452
- </span>
2453
- </button>
2454
- </li>
2455
- <li
2456
- class="pf-v5-c-menu__list-item"
2457
- role="none"
2458
- >
2459
- <a
2460
- class="pf-v5-c-menu__item"
2461
- href="#"
2462
- role="menuitem"
2463
- target="_blank"
2464
- >
2465
- <span class="pf-v5-c-menu__item-main">
2466
- <span
2467
- class="pf-v5-c-menu__item-text"
2468
- >Link 2</span>
2469
- <span
2470
- class="pf-v5-c-menu__item-external-icon"
2471
- >
2472
- <i
2473
- class="fas fa-external-link-alt"
2474
- aria-hidden="true"
2475
- ></i>
2476
- </span>
2477
- <span
2478
- class="pf-v5-screen-reader"
2479
- >(opens new window)</span>
2480
- </span>
2481
- </a>
2482
- <button
2483
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
2484
- type="button"
2485
- aria-label="Starred"
2486
- >
2487
- <span
2488
- class="pf-v5-c-menu__item-action-icon"
2489
- >
2490
- <i
2491
- class="fas fa-star"
2492
- aria-hidden="true"
2493
- ></i>
2494
- </span>
2495
- </button>
2496
- </li>
2497
- </ul>
2498
- </section>
2499
- </div>
2500
- </li>
2501
- </ul>
2502
- </section>
2503
- </div>
2504
- </div>
2505
1485
  </div>
2506
1486
  </div>
2507
- </div>
2508
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
2509
- <div
2510
- class="pf-v5-c-dropdown pf-m-full-height"
2511
- style="--pf-v5-c-dropdown--MaxWidth: 20ch;"
2512
- >
1487
+ <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
2513
1488
  <button
2514
- class="pf-v5-c-dropdown__toggle"
2515
- id="masthead-advanced-with-menu-example-masthead-profile-button"
2516
- aria-expanded="false"
1489
+ class="pf-v5-c-menu-toggle pf-m-plain"
2517
1490
  type="button"
1491
+ aria-expanded="false"
1492
+ aria-label="Actions"
2518
1493
  >
2519
- <span class="pf-v5-c-dropdown__toggle-image">
2520
- <img
2521
- class="pf-v5-c-avatar"
2522
- alt="Avatar image"
2523
- src="/assets/images/img_avatar-light.svg"
2524
- />
2525
- </span>
2526
- <span class="pf-v5-c-dropdown__toggle-text">Ned Username</span>
2527
- <span class="pf-v5-c-dropdown__toggle-icon">
2528
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2529
- </span>
1494
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2530
1495
  </button>
2531
- <div class="pf-v5-c-dropdown__menu" hidden>
2532
- <section class="pf-v5-c-dropdown__group">
2533
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
2534
- <div class="pf-v5-u-font-size-sm">Account number:</div>
2535
- <div>123456789</div>
2536
- </div>
2537
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
2538
- <div class="pf-v5-u-font-size-sm">Username:</div>
2539
- <div>mshaksho@redhat.com</div>
2540
- </div>
2541
- </section>
2542
- <hr class="pf-v5-c-divider" />
2543
- <section class="pf-v5-c-dropdown__group">
2544
- <ul>
2545
- <li>
2546
- <a
2547
- class="pf-v5-c-dropdown__menu-item"
2548
- href="#"
2549
- >My profile</a>
2550
- </li>
2551
- <li>
2552
- <a
2553
- class="pf-v5-c-dropdown__menu-item"
2554
- href="#"
2555
- >User management</a>
2556
- </li>
2557
- <li>
2558
- <a class="pf-v5-c-dropdown__menu-item" href="#">Logout</a>
2559
- </li>
2560
- </ul>
2561
- </section>
2562
- </div>
2563
1496
  </div>
2564
1497
  </div>
1498
+ <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1499
+ <button
1500
+ class="pf-v5-c-menu-toggle pf-m-full-height"
1501
+ type="button"
1502
+ aria-expanded="false"
1503
+ >
1504
+ <span class="pf-v5-c-menu-toggle__icon">
1505
+ <img
1506
+ class="pf-v5-c-avatar"
1507
+ alt="Avatar image"
1508
+ src="/assets/images/img_avatar-light.svg"
1509
+ />
1510
+ </span>
1511
+ <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1512
+ <span class="pf-v5-c-menu-toggle__controls">
1513
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1514
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1515
+ </span>
1516
+ </span>
1517
+ </button>
1518
+ </div>
2565
1519
  </div>
2566
1520
  </div>
2567
1521
  </div>
@@ -2776,800 +1730,68 @@ wrapperTag: div
2776
1730
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
2777
1731
  >
2778
1732
  <div class="pf-v5-c-toolbar__item">
2779
- <nav
2780
- class="pf-v5-c-app-launcher"
1733
+ <button
1734
+ class="pf-v5-c-menu-toggle pf-m-plain"
1735
+ type="button"
1736
+ aria-expanded="false"
2781
1737
  aria-label="Application launcher"
2782
- id="masthead-horizontal-nav-masthead-application-launcher"
2783
1738
  >
2784
- <button
2785
- class="pf-v5-c-app-launcher__toggle"
2786
- type="button"
2787
- id="masthead-horizontal-nav-masthead-application-launcher-button"
2788
- aria-expanded="false"
2789
- aria-label="Application launcher"
2790
- >
2791
- <i class="fas fa-th" aria-hidden="true"></i>
2792
- </button>
2793
- <div
2794
- class="pf-v5-c-app-launcher__menu pf-m-align-right"
2795
- hidden
2796
- >
2797
- <div class="pf-v5-c-app-launcher__menu-search">
2798
- <div class="pf-v5-c-text-input-group">
2799
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
2800
- <span class="pf-v5-c-text-input-group__text">
2801
- <span class="pf-v5-c-text-input-group__icon">
2802
- <i class="fas fa-fw fa-search"></i>
2803
- </span>
2804
- <input
2805
- class="pf-v5-c-text-input-group__text-input"
2806
- type="text"
2807
- placeholder="Filer by name"
2808
- value
2809
- aria-label="Search input"
2810
- />
2811
- </span>
2812
- </div>
2813
- </div>
2814
- </div>
2815
- <section class="pf-v5-c-app-launcher__group">
2816
- <h1 class="pf-v5-c-app-launcher__group-title">Favorites</h1>
2817
- <ul role="list">
2818
- <li
2819
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
2820
- >
2821
- <a class="pf-v5-c-app-launcher__menu-item">
2822
- Link 1
2823
- <span
2824
- class="pf-v5-c-app-launcher__menu-item-external-icon"
2825
- >
2826
- <i
2827
- class="fas fa-external-link-alt"
2828
- aria-hidden="true"
2829
- ></i>
2830
- </span>
2831
- <span
2832
- class="pf-v5-screen-reader"
2833
- >(opens new window)</span>
2834
- </a>
2835
- <button
2836
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
2837
- type="button"
2838
- aria-label="Favorite"
2839
- >
2840
- <i class="fas fa-star" aria-hidden="true"></i>
2841
- </button>
2842
- </li>
2843
- <li
2844
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
2845
- >
2846
- <a class="pf-v5-c-app-launcher__menu-item">
2847
- Link 2
2848
- <span
2849
- class="pf-v5-c-app-launcher__menu-item-external-icon"
2850
- >
2851
- <i
2852
- class="fas fa-external-link-alt"
2853
- aria-hidden="true"
2854
- ></i>
2855
- </span>
2856
- <span
2857
- class="pf-v5-screen-reader"
2858
- >(opens new window)</span>
2859
- </a>
2860
- <button
2861
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
2862
- type="button"
2863
- aria-label="Favorite"
2864
- >
2865
- <i class="fas fa-star" aria-hidden="true"></i>
2866
- </button>
2867
- </li>
2868
- </ul>
2869
- </section>
2870
- <hr class="pf-v5-c-divider" />
2871
- <section class="pf-v5-c-app-launcher__group">
2872
- <h1 class="pf-v5-c-app-launcher__group-title">Group 1</h1>
2873
- <ul role="list">
2874
- <li
2875
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
2876
- >
2877
- <a class="pf-v5-c-app-launcher__menu-item">
2878
- Link 1
2879
- <span
2880
- class="pf-v5-c-app-launcher__menu-item-external-icon"
2881
- >
2882
- <i
2883
- class="fas fa-external-link-alt"
2884
- aria-hidden="true"
2885
- ></i>
2886
- </span>
2887
- <span
2888
- class="pf-v5-screen-reader"
2889
- >(opens new window)</span>
2890
- </a>
2891
- <button
2892
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
2893
- type="button"
2894
- aria-label="Favorite"
2895
- >
2896
- <i class="fas fa-star" aria-hidden="true"></i>
2897
- </button>
2898
- </li>
2899
- <li
2900
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
2901
- >
2902
- <a class="pf-v5-c-app-launcher__menu-item">
2903
- Link 2
2904
- <span
2905
- class="pf-v5-c-app-launcher__menu-item-external-icon"
2906
- >
2907
- <i
2908
- class="fas fa-external-link-alt"
2909
- aria-hidden="true"
2910
- ></i>
2911
- </span>
2912
- <span
2913
- class="pf-v5-screen-reader"
2914
- >(opens new window)</span>
2915
- </a>
2916
- <button
2917
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
2918
- type="button"
2919
- aria-label="Favorite"
2920
- >
2921
- <i class="fas fa-star" aria-hidden="true"></i>
2922
- </button>
2923
- </li>
2924
- </ul>
2925
- </section>
2926
- </div>
2927
- </nav>
1739
+ <i class="fas fa-th" aria-hidden="true"></i>
1740
+ </button>
2928
1741
  </div>
2929
1742
  <div class="pf-v5-c-toolbar__item">
2930
- <div class="pf-v5-c-dropdown">
2931
- <button
2932
- class="pf-v5-c-dropdown__toggle pf-m-plain"
2933
- id="masthead-horizontal-nav-masthead-settings-button"
2934
- aria-expanded="false"
2935
- type="button"
2936
- aria-label="Settings"
2937
- >
2938
- <i class="fas fa-cog" aria-hidden="true"></i>
2939
- </button>
2940
- <ul
2941
- class="pf-v5-c-dropdown__menu pf-m-align-right"
2942
- aria-labelledby="masthead-horizontal-nav-masthead-settings-button"
2943
- hidden
2944
- >
2945
- <li>
2946
- <button
2947
- class="pf-v5-c-dropdown__menu-item"
2948
- type="button"
2949
- >Settings</button>
2950
- </li>
2951
- <li>
2952
- <button
2953
- class="pf-v5-c-dropdown__menu-item"
2954
- type="button"
2955
- >Use the beta release</button>
2956
- </li>
2957
- </ul>
2958
- </div>
1743
+ <button
1744
+ class="pf-v5-c-menu-toggle pf-m-plain"
1745
+ type="button"
1746
+ aria-expanded="false"
1747
+ aria-label="Settings"
1748
+ >
1749
+ <i class="fas fa-cog" aria-hidden="true"></i>
1750
+ </button>
2959
1751
  </div>
2960
1752
  <div class="pf-v5-c-toolbar__item">
2961
- <div class="pf-v5-c-dropdown">
2962
- <button
2963
- class="pf-v5-c-dropdown__toggle pf-m-plain"
2964
- id="masthead-horizontal-nav-masthead-help-button"
2965
- aria-expanded="false"
2966
- type="button"
2967
- aria-label="Help"
2968
- >
2969
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2970
- </button>
2971
- <ul
2972
- class="pf-v5-c-dropdown__menu pf-m-align-right"
2973
- aria-labelledby="masthead-horizontal-nav-masthead-help-button"
2974
- hidden
2975
- >
2976
- <li>
2977
- <button
2978
- class="pf-v5-c-dropdown__menu-item"
2979
- type="button"
2980
- >Support options</button>
2981
- </li>
2982
- <li>
2983
- <button
2984
- class="pf-v5-c-dropdown__menu-item"
2985
- type="button"
2986
- >Open support case</button>
2987
- </li>
2988
- <li>
2989
- <button
2990
- class="pf-v5-c-dropdown__menu-item"
2991
- type="button"
2992
- >API documentation</button>
2993
- </li>
2994
- </ul>
2995
- </div>
2996
- </div>
2997
- </div>
2998
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
2999
- <div class="pf-v5-c-dropdown">
3000
1753
  <button
3001
1754
  class="pf-v5-c-menu-toggle pf-m-plain"
3002
1755
  type="button"
3003
1756
  aria-expanded="false"
3004
- aria-label="Actions"
1757
+ aria-label="Help"
3005
1758
  >
3006
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1759
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
3007
1760
  </button>
3008
- <div
3009
- class="pf-v5-c-menu pf-m-drilldown pf-m-align-right"
3010
- hidden
3011
- >
3012
- <div class="pf-v5-c-menu__content">
3013
- <section class="pf-v5-c-menu__group pf-m-hidden-on-sm">
3014
- <ul class="pf-v5-c-menu__list" role="menu">
3015
- <li
3016
- class="pf-v5-c-menu__list-item pf-m-disabled"
3017
- role="none"
3018
- >
3019
- <button
3020
- class="pf-v5-c-menu__item"
3021
- type="button"
3022
- disabled
3023
- role="menuitem"
3024
- >
3025
- <span class="pf-v5-c-menu__item-description">
3026
- <div class="pf-v5-u-font-size-sm">Username:</div>
3027
- <div class="pf-v5-u-font-size-md">ned_username</div>
3028
- </span>
3029
- </button>
3030
- </li>
3031
- <li
3032
- class="pf-v5-c-menu__list-item pf-m-disabled"
3033
- role="none"
3034
- >
3035
- <button
3036
- class="pf-v5-c-menu__item"
3037
- type="button"
3038
- disabled
3039
- role="menuitem"
3040
- >
3041
- <span class="pf-v5-c-menu__item-description">
3042
- <div
3043
- class="pf-v5-u-font-size-sm"
3044
- >Account number:</div>
3045
- <div class="pf-v5-u-font-size-md">123456789</div>
3046
- </span>
3047
- </button>
3048
- </li>
3049
- <li class="pf-v5-c-divider" role="separator"></li>
3050
- <li class="pf-v5-c-menu__list-item" role="none">
3051
- <button
3052
- class="pf-v5-c-menu__item"
3053
- type="button"
3054
- role="menuitem"
3055
- >
3056
- <span class="pf-v5-c-menu__item-main">
3057
- <span class="pf-v5-c-menu__item-text">My profile</span>
3058
- </span>
3059
- </button>
3060
- </li>
3061
- <li class="pf-v5-c-menu__list-item" role="none">
3062
- <button
3063
- class="pf-v5-c-menu__item"
3064
- type="button"
3065
- role="menuitem"
3066
- >
3067
- <span class="pf-v5-c-menu__item-main">
3068
- <span
3069
- class="pf-v5-c-menu__item-text"
3070
- >User management</span>
3071
- </span>
3072
- </button>
3073
- </li>
3074
- <li class="pf-v5-c-menu__list-item" role="none">
3075
- <button
3076
- class="pf-v5-c-menu__item"
3077
- type="button"
3078
- role="menuitem"
3079
- >
3080
- <span class="pf-v5-c-menu__item-main">
3081
- <span class="pf-v5-c-menu__item-text">Logout</span>
3082
- </span>
3083
- </button>
3084
- </li>
3085
- </ul>
3086
- </section>
3087
- <hr class="pf-v5-c-divider pf-m-hidden-on-sm" />
3088
- <section class="pf-v5-c-menu__group">
3089
- <ul class="pf-v5-c-menu__list" role="menu">
3090
- <li class="pf-v5-c-menu__list-item" role="none">
3091
- <button
3092
- class="pf-v5-c-menu__item"
3093
- type="button"
3094
- role="menuitem"
3095
- aria-expanded="false"
3096
- >
3097
- <span class="pf-v5-c-menu__item-main">
3098
- <span class="pf-v5-c-menu__item-icon">
3099
- <i
3100
- class="fas fa-fw fa-cog"
3101
- aria-hidden="true"
3102
- ></i>
3103
- </span>
3104
- <span class="pf-v5-c-menu__item-text">Settings</span>
3105
- <span class="pf-v5-c-menu__item-toggle-icon">
3106
- <i class="fas fa-angle-right"></i>
3107
- </span>
3108
- </span>
3109
- </button>
3110
- <div class="pf-v5-c-menu" hidden>
3111
- <div class="pf-v5-c-menu__content">
3112
- <ul class="pf-v5-c-menu__list" role="menu">
3113
- <li
3114
- class="pf-v5-c-menu__list-item pf-m-drill-up"
3115
- role="none"
3116
- >
3117
- <button
3118
- class="pf-v5-c-menu__item"
3119
- type="button"
3120
- role="menuitem"
3121
- >
3122
- <span class="pf-v5-c-menu__item-main">
3123
- <span
3124
- class="pf-v5-c-menu__item-toggle-icon"
3125
- >
3126
- <i class="fas fa-angle-left"></i>
3127
- </span>
3128
- <span class="pf-v5-c-menu__item-icon">
3129
- <i
3130
- class="fas fa-fw fa-cog"
3131
- aria-hidden="true"
3132
- ></i>
3133
- </span>
3134
- <span
3135
- class="pf-v5-c-menu__item-text"
3136
- >Settings</span>
3137
- </span>
3138
- </button>
3139
- </li>
3140
- <li class="pf-v5-c-divider" role="separator"></li>
3141
- <li
3142
- class="pf-v5-c-menu__list-item"
3143
- role="none"
3144
- >
3145
- <a
3146
- class="pf-v5-c-menu__item"
3147
- href="#"
3148
- role="menuitem"
3149
- >
3150
- <span class="pf-v5-c-menu__item-main">
3151
- <span
3152
- class="pf-v5-c-menu__item-text"
3153
- >Customer support</span>
3154
- </span>
3155
- </a>
3156
- </li>
3157
- <li
3158
- class="pf-v5-c-menu__list-item"
3159
- role="none"
3160
- >
3161
- <a
3162
- class="pf-v5-c-menu__item"
3163
- href="#"
3164
- role="menuitem"
3165
- >
3166
- <span class="pf-v5-c-menu__item-main">
3167
- <span
3168
- class="pf-v5-c-menu__item-text"
3169
- >About</span>
3170
- </span>
3171
- </a>
3172
- </li>
3173
- </ul>
3174
- </div>
3175
- </div>
3176
- </li>
3177
-
3178
- <li class="pf-v5-c-menu__list-item" role="none">
3179
- <button
3180
- class="pf-v5-c-menu__item"
3181
- type="button"
3182
- role="menuitem"
3183
- aria-expanded="false"
3184
- >
3185
- <span class="pf-v5-c-menu__item-main">
3186
- <span class="pf-v5-c-menu__item-icon">
3187
- <i
3188
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
3189
- aria-hidden="true"
3190
- ></i>
3191
- </span>
3192
- <span class="pf-v5-c-menu__item-text">Help</span>
3193
- <span class="pf-v5-c-menu__item-toggle-icon">
3194
- <i class="fas fa-angle-right"></i>
3195
- </span>
3196
- </span>
3197
- </button>
3198
- <div class="pf-v5-c-menu" hidden>
3199
- <div class="pf-v5-c-menu__content">
3200
- <ul class="pf-v5-c-menu__list" role="menu">
3201
- <li
3202
- class="pf-v5-c-menu__list-item pf-m-drill-up"
3203
- role="none"
3204
- >
3205
- <button
3206
- class="pf-v5-c-menu__item"
3207
- type="button"
3208
- role="menuitem"
3209
- >
3210
- <span class="pf-v5-c-menu__item-main">
3211
- <span
3212
- class="pf-v5-c-menu__item-toggle-icon"
3213
- >
3214
- <i class="fas fa-angle-left"></i>
3215
- </span>
3216
- <span class="pf-v5-c-menu__item-icon">
3217
- <i
3218
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
3219
- aria-hidden="true"
3220
- ></i>
3221
- </span>
3222
- <span
3223
- class="pf-v5-c-menu__item-text"
3224
- >Help</span>
3225
- </span>
3226
- </button>
3227
- </li>
3228
- <li class="pf-v5-c-divider" role="separator"></li>
3229
- <li
3230
- class="pf-v5-c-menu__list-item"
3231
- role="none"
3232
- >
3233
- <a
3234
- class="pf-v5-c-menu__item"
3235
- href="#"
3236
- role="menuitem"
3237
- >
3238
- <span class="pf-v5-c-menu__item-main">
3239
- <span
3240
- class="pf-v5-c-menu__item-text"
3241
- >Support options</span>
3242
- </span>
3243
- </a>
3244
- </li>
3245
- <li
3246
- class="pf-v5-c-menu__list-item"
3247
- role="none"
3248
- >
3249
- <a
3250
- class="pf-v5-c-menu__item"
3251
- href="#"
3252
- role="menuitem"
3253
- >
3254
- <span class="pf-v5-c-menu__item-main">
3255
- <span
3256
- class="pf-v5-c-menu__item-text"
3257
- >Open support case</span>
3258
- </span>
3259
- </a>
3260
- </li>
3261
- <li
3262
- class="pf-v5-c-menu__list-item"
3263
- role="none"
3264
- >
3265
- <a
3266
- class="pf-v5-c-menu__item"
3267
- href="#"
3268
- role="menuitem"
3269
- >
3270
- <span class="pf-v5-c-menu__item-main">
3271
- <span
3272
- class="pf-v5-c-menu__item-text"
3273
- >API documentation</span>
3274
- </span>
3275
- </a>
3276
- </li>
3277
- </ul>
3278
- </div>
3279
- </div>
3280
- </li>
3281
-
3282
- <li class="pf-v5-c-menu__list-item" role="none">
3283
- <button
3284
- class="pf-v5-c-menu__item"
3285
- type="button"
3286
- role="menuitem"
3287
- >
3288
- <span class="pf-v5-c-menu__item-main">
3289
- <span class="pf-v5-c-menu__item-icon">
3290
- <i class="fas fa-fw fa-th" aria-hidden="true"></i>
3291
- </span>
3292
- <span
3293
- class="pf-v5-c-menu__item-text"
3294
- >Application launcher</span>
3295
- <span class="pf-v5-c-menu__item-toggle-icon">
3296
- <i class="fas fa-angle-right"></i>
3297
- </span>
3298
- </span>
3299
- </button>
3300
- <div class="pf-v5-c-menu" hidden>
3301
- <div class="pf-v5-c-menu__header">
3302
- <button
3303
- class="pf-v5-c-menu__item"
3304
- type="button"
3305
- role="menuitem"
3306
- >
3307
- <span class="pf-v5-c-menu__item-main">
3308
- <span
3309
- class="pf-v5-c-menu__item-toggle-icon"
3310
- >
3311
- <i class="fas fa-angle-left"></i>
3312
- </span>
3313
- <span class="pf-v5-c-menu__item-icon">
3314
- <i
3315
- class="fas fa-fw fa-th"
3316
- aria-hidden="true"
3317
- ></i>
3318
- </span>
3319
- <span
3320
- class="pf-v5-c-menu__item-text"
3321
- >Application launcher</span>
3322
- </span>
3323
- </button>
3324
- </div>
3325
- <div class="pf-v5-c-menu__search">
3326
- <div class="pf-v5-c-menu__search-input">
3327
- <div class="pf-v5-c-text-input-group">
3328
- <div
3329
- class="pf-v5-c-text-input-group__main pf-m-icon"
3330
- >
3331
- <span
3332
- class="pf-v5-c-text-input-group__text"
3333
- >
3334
- <span
3335
- class="pf-v5-c-text-input-group__icon"
3336
- >
3337
- <i class="fas fa-fw fa-search"></i>
3338
- </span>
3339
- <input
3340
- class="pf-v5-c-text-input-group__text-input"
3341
- type="text"
3342
- placeholder="Search"
3343
- value
3344
- aria-label="Search input"
3345
- />
3346
- </span>
3347
- </div>
3348
- </div>
3349
- </div>
3350
- </div>
3351
- <hr class="pf-v5-c-divider" />
3352
- <section class="pf-v5-c-menu__group">
3353
- <h1 class="pf-v5-c-menu__group-title">Favorites</h1>
3354
- <ul class="pf-v5-c-menu__list" role="menu">
3355
- <li
3356
- class="pf-v5-c-menu__list-item"
3357
- role="none"
3358
- >
3359
- <a
3360
- class="pf-v5-c-menu__item"
3361
- href="#"
3362
- role="menuitem"
3363
- >
3364
- <span class="pf-v5-c-menu__item-main">
3365
- <span
3366
- class="pf-v5-c-menu__item-text"
3367
- >Link 1</span>
3368
- </span>
3369
- </a>
3370
- <button
3371
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
3372
- type="button"
3373
- aria-label="Starred"
3374
- >
3375
- <span
3376
- class="pf-v5-c-menu__item-action-icon"
3377
- >
3378
- <i
3379
- class="fas fa-star"
3380
- aria-hidden="true"
3381
- ></i>
3382
- </span>
3383
- </button>
3384
- </li>
3385
- <li
3386
- class="pf-v5-c-menu__list-item"
3387
- role="none"
3388
- >
3389
- <a
3390
- class="pf-v5-c-menu__item"
3391
- href="#"
3392
- role="menuitem"
3393
- target="_blank"
3394
- >
3395
- <span class="pf-v5-c-menu__item-main">
3396
- <span
3397
- class="pf-v5-c-menu__item-text"
3398
- >Link 2</span>
3399
- <span
3400
- class="pf-v5-c-menu__item-external-icon"
3401
- >
3402
- <i
3403
- class="fas fa-external-link-alt"
3404
- aria-hidden="true"
3405
- ></i>
3406
- </span>
3407
- <span
3408
- class="pf-v5-screen-reader"
3409
- >(opens new window)</span>
3410
- </span>
3411
- </a>
3412
- <button
3413
- class="pf-v5-c-menu__item-action pf-m-favorite"
3414
- type="button"
3415
- aria-label="Not starred"
3416
- >
3417
- <span
3418
- class="pf-v5-c-menu__item-action-icon"
3419
- >
3420
- <i
3421
- class="fas fa-star"
3422
- aria-hidden="true"
3423
- ></i>
3424
- </span>
3425
- </button>
3426
- </li>
3427
- </ul>
3428
- </section>
3429
- <hr class="pf-v5-c-divider" />
3430
- <section class="pf-v5-c-menu__group">
3431
- <h1 class="pf-v5-c-menu__group-title">Group 1</h1>
3432
- <ul class="pf-v5-c-menu__list" role="menu">
3433
- <li
3434
- class="pf-v5-c-menu__list-item"
3435
- role="none"
3436
- >
3437
- <a
3438
- class="pf-v5-c-menu__item"
3439
- href="#"
3440
- role="menuitem"
3441
- >
3442
- <span class="pf-v5-c-menu__item-main">
3443
- <span
3444
- class="pf-v5-c-menu__item-text"
3445
- >Link 1</span>
3446
- </span>
3447
- </a>
3448
- <button
3449
- class="pf-v5-c-menu__item-action pf-m-favorite"
3450
- type="button"
3451
- aria-label="Not starred"
3452
- >
3453
- <span
3454
- class="pf-v5-c-menu__item-action-icon"
3455
- >
3456
- <i
3457
- class="fas fa-star"
3458
- aria-hidden="true"
3459
- ></i>
3460
- </span>
3461
- </button>
3462
- </li>
3463
- <li
3464
- class="pf-v5-c-menu__list-item"
3465
- role="none"
3466
- >
3467
- <a
3468
- class="pf-v5-c-menu__item"
3469
- href="#"
3470
- role="menuitem"
3471
- target="_blank"
3472
- >
3473
- <span class="pf-v5-c-menu__item-main">
3474
- <span
3475
- class="pf-v5-c-menu__item-text"
3476
- >Link 2</span>
3477
- <span
3478
- class="pf-v5-c-menu__item-external-icon"
3479
- >
3480
- <i
3481
- class="fas fa-external-link-alt"
3482
- aria-hidden="true"
3483
- ></i>
3484
- </span>
3485
- <span
3486
- class="pf-v5-screen-reader"
3487
- >(opens new window)</span>
3488
- </span>
3489
- </a>
3490
- <button
3491
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
3492
- type="button"
3493
- aria-label="Starred"
3494
- >
3495
- <span
3496
- class="pf-v5-c-menu__item-action-icon"
3497
- >
3498
- <i
3499
- class="fas fa-star"
3500
- aria-hidden="true"
3501
- ></i>
3502
- </span>
3503
- </button>
3504
- </li>
3505
- </ul>
3506
- </section>
3507
- </div>
3508
- </li>
3509
- </ul>
3510
- </section>
3511
- </div>
3512
- </div>
3513
1761
  </div>
3514
1762
  </div>
3515
- </div>
3516
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
3517
- <div
3518
- class="pf-v5-c-dropdown pf-m-full-height"
3519
- style="--pf-v5-c-dropdown--MaxWidth: 20ch;"
3520
- >
1763
+ <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
3521
1764
  <button
3522
- class="pf-v5-c-dropdown__toggle"
3523
- id="masthead-horizontal-nav-masthead-profile-button"
3524
- aria-expanded="false"
1765
+ class="pf-v5-c-menu-toggle pf-m-plain"
3525
1766
  type="button"
1767
+ aria-expanded="false"
1768
+ aria-label="Actions"
3526
1769
  >
3527
- <span class="pf-v5-c-dropdown__toggle-image">
3528
- <img
3529
- class="pf-v5-c-avatar"
3530
- alt="Avatar image"
3531
- src="/assets/images/img_avatar-light.svg"
3532
- />
3533
- </span>
3534
- <span class="pf-v5-c-dropdown__toggle-text">Ned Username</span>
3535
- <span class="pf-v5-c-dropdown__toggle-icon">
3536
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3537
- </span>
1770
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3538
1771
  </button>
3539
- <div class="pf-v5-c-dropdown__menu" hidden>
3540
- <section class="pf-v5-c-dropdown__group">
3541
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
3542
- <div class="pf-v5-u-font-size-sm">Account number:</div>
3543
- <div>123456789</div>
3544
- </div>
3545
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
3546
- <div class="pf-v5-u-font-size-sm">Username:</div>
3547
- <div>mshaksho@redhat.com</div>
3548
- </div>
3549
- </section>
3550
- <hr class="pf-v5-c-divider" />
3551
- <section class="pf-v5-c-dropdown__group">
3552
- <ul>
3553
- <li>
3554
- <a
3555
- class="pf-v5-c-dropdown__menu-item"
3556
- href="#"
3557
- >My profile</a>
3558
- </li>
3559
- <li>
3560
- <a
3561
- class="pf-v5-c-dropdown__menu-item"
3562
- href="#"
3563
- >User management</a>
3564
- </li>
3565
- <li>
3566
- <a class="pf-v5-c-dropdown__menu-item" href="#">Logout</a>
3567
- </li>
3568
- </ul>
3569
- </section>
3570
- </div>
3571
1772
  </div>
3572
1773
  </div>
1774
+ <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1775
+ <button
1776
+ class="pf-v5-c-menu-toggle pf-m-full-height"
1777
+ type="button"
1778
+ aria-expanded="false"
1779
+ >
1780
+ <span class="pf-v5-c-menu-toggle__icon">
1781
+ <img
1782
+ class="pf-v5-c-avatar"
1783
+ alt="Avatar image"
1784
+ src="/assets/images/img_avatar-light.svg"
1785
+ />
1786
+ </span>
1787
+ <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1788
+ <span class="pf-v5-c-menu-toggle__controls">
1789
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1790
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1791
+ </span>
1792
+ </span>
1793
+ </button>
1794
+ </div>
3573
1795
  </div>
3574
1796
  </div>
3575
1797
  </div>
@@ -3734,54 +1956,14 @@ wrapperTag: div
3734
1956
  </div>
3735
1957
  </div>
3736
1958
  <div class="pf-v5-c-toolbar__item">
3737
- <div class="pf-v5-c-dropdown">
3738
- <button
3739
- class="pf-v5-c-dropdown__toggle pf-m-plain"
3740
- id="masthead-toggle-group-filters-expanded-mobile-example-masthead-header-action-button"
3741
- aria-expanded="false"
3742
- type="button"
3743
- aria-label="Actions"
3744
- >
3745
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3746
- </button>
3747
- <ul
3748
- class="pf-v5-c-dropdown__menu pf-m-align-right"
3749
- aria-labelledby="masthead-toggle-group-filters-expanded-mobile-example-masthead-header-action-button"
3750
- hidden
3751
- >
3752
- <li>
3753
- <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
3754
- </li>
3755
- <li>
3756
- <button
3757
- class="pf-v5-c-dropdown__menu-item"
3758
- type="button"
3759
- >Action</button>
3760
- </li>
3761
- <li>
3762
- <a
3763
- class="pf-v5-c-dropdown__menu-item pf-m-disabled"
3764
- href="#"
3765
- aria-disabled="true"
3766
- tabindex="-1"
3767
- >Disabled link</a>
3768
- </li>
3769
- <li>
3770
- <button
3771
- class="pf-v5-c-dropdown__menu-item"
3772
- type="button"
3773
- disabled
3774
- >Disabled action</button>
3775
- </li>
3776
- <li class="pf-v5-c-divider" role="separator"></li>
3777
- <li>
3778
- <a
3779
- class="pf-v5-c-dropdown__menu-item"
3780
- href="#"
3781
- >Separated link</a>
3782
- </li>
3783
- </ul>
3784
- </div>
1959
+ <button
1960
+ class="pf-v5-c-menu-toggle pf-m-plain"
1961
+ type="button"
1962
+ aria-expanded="false"
1963
+ aria-label="Actions"
1964
+ >
1965
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1966
+ </button>
3785
1967
  </div>
3786
1968
  </div>
3787
1969
  <div