@patternfly/patternfly 6.0.0-alpha.9 → 6.0.0-alpha.90

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 (341) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/assets/images/PF-Backdrop.svg +1 -0
  3. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  4. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  5. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  6. package/assets/images/PF-IconLogo-color.svg +17 -0
  7. package/assets/images/PF-IconLogo.svg +17 -0
  8. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  9. package/assets/images/pf-background.svg +22 -0
  10. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  11. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  12. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  13. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  14. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  15. package/assets/images/pf_logo_white.hbs +35 -0
  16. package/assets/images/pf_logo_white.svg +38 -0
  17. package/base/_common.scss +8 -4
  18. package/base/_globals.scss +4 -6
  19. package/base/_variables.scss +2 -7
  20. package/base/patternfly-common.css +8 -4
  21. package/base/patternfly-globals.css +4 -3
  22. package/base/patternfly-variables.css +1005 -856
  23. package/base/tokens/_tokens-charts.scss +159 -0
  24. package/base/tokens/_tokens-dark.scss +319 -290
  25. package/base/tokens/_tokens-default.scss +485 -329
  26. package/base/tokens/_tokens-font.scss +122 -58
  27. package/base/tokens/_tokens-palette.scss +71 -71
  28. package/base/tokens/_workspace-overrides.scss +7 -0
  29. package/components/AboutModalBox/about-modal-box.css +57 -94
  30. package/components/AboutModalBox/about-modal-box.scss +37 -62
  31. package/components/Accordion/accordion.css +85 -177
  32. package/components/Accordion/accordion.scss +96 -195
  33. package/components/ActionList/action-list.css +18 -17
  34. package/components/ActionList/action-list.scss +26 -16
  35. package/components/Alert/alert-group.css +20 -16
  36. package/components/Alert/alert-group.scss +20 -16
  37. package/components/Alert/alert.css +59 -84
  38. package/components/Alert/alert.scss +62 -78
  39. package/components/Avatar/avatar.css +10 -13
  40. package/components/Avatar/avatar.scss +10 -17
  41. package/components/BackToTop/back-to-top.css +17 -16
  42. package/components/BackToTop/back-to-top.scss +12 -12
  43. package/components/Backdrop/backdrop.css +6 -2
  44. package/components/Backdrop/backdrop.scss +5 -2
  45. package/components/BackgroundImage/background-image.css +5 -1
  46. package/components/BackgroundImage/background-image.scss +5 -1
  47. package/components/Badge/badge.css +23 -15
  48. package/components/Badge/badge.scss +25 -17
  49. package/components/Banner/banner.css +90 -64
  50. package/components/Banner/banner.scss +95 -32
  51. package/components/Breadcrumb/breadcrumb.css +27 -16
  52. package/components/Breadcrumb/breadcrumb.scss +27 -18
  53. package/components/Button/button.css +398 -354
  54. package/components/Button/button.scss +455 -477
  55. package/components/CalendarMonth/calendar-month.css +61 -92
  56. package/components/CalendarMonth/calendar-month.scss +68 -63
  57. package/components/Card/card.css +100 -194
  58. package/components/Card/card.scss +121 -237
  59. package/components/Check/check.css +24 -21
  60. package/components/Check/check.scss +25 -23
  61. package/components/ClipboardCopy/clipboard-copy.css +30 -33
  62. package/components/ClipboardCopy/clipboard-copy.scss +34 -26
  63. package/components/CodeBlock/code-block.css +22 -9
  64. package/components/CodeBlock/code-block.scss +22 -10
  65. package/components/CodeEditor/code-editor.css +94 -72
  66. package/components/CodeEditor/code-editor.scss +104 -82
  67. package/components/Content/content.css +7 -7
  68. package/components/Content/content.scss +7 -7
  69. package/components/DataList/data-list.css +101 -158
  70. package/components/DataList/data-list.scss +95 -154
  71. package/components/DatePicker/date-picker.css +13 -14
  72. package/components/DatePicker/date-picker.scss +12 -16
  73. package/components/DescriptionList/description-list.css +39 -34
  74. package/components/DescriptionList/description-list.scss +25 -25
  75. package/components/Divider/divider.css +91 -169
  76. package/components/Divider/divider.scss +60 -77
  77. package/components/DragDrop/drag-drop.css +18 -14
  78. package/components/DragDrop/drag-drop.scss +18 -17
  79. package/components/Drawer/drawer.css +112 -113
  80. package/components/Drawer/drawer.scss +134 -134
  81. package/components/Dropdown/dropdown.css +1 -3
  82. package/components/Dropdown/dropdown.scss +2 -6
  83. package/components/DualListSelector/dual-list-selector.css +54 -51
  84. package/components/DualListSelector/dual-list-selector.scss +55 -54
  85. package/components/EmptyState/empty-state.css +57 -34
  86. package/components/EmptyState/empty-state.scss +63 -34
  87. package/components/ExpandableSection/expandable-section.css +64 -62
  88. package/components/ExpandableSection/expandable-section.scss +73 -76
  89. package/components/FileUpload/file-upload.css +28 -34
  90. package/components/FileUpload/file-upload.scss +30 -42
  91. package/components/Form/form.css +66 -116
  92. package/components/Form/form.scss +63 -128
  93. package/components/FormControl/form-control.css +86 -111
  94. package/components/FormControl/form-control.scss +88 -92
  95. package/components/HelperText/helper-text.css +28 -34
  96. package/components/HelperText/helper-text.scss +30 -40
  97. package/components/Hint/hint.css +28 -21
  98. package/components/Hint/hint.scss +28 -24
  99. package/components/Icon/icon.css +154 -18
  100. package/components/Icon/icon.scss +187 -20
  101. package/components/InlineEdit/inline-edit.css +8 -7
  102. package/components/InlineEdit/inline-edit.scss +8 -7
  103. package/components/InputGroup/input-group.css +22 -38
  104. package/components/InputGroup/input-group.scss +21 -29
  105. package/components/JumpLinks/jump-links.css +34 -34
  106. package/components/JumpLinks/jump-links.scss +35 -36
  107. package/components/Label/label-group.css +39 -44
  108. package/components/Label/label-group.scss +39 -45
  109. package/components/Label/label.css +378 -355
  110. package/components/Label/label.scss +431 -348
  111. package/components/List/list.css +16 -16
  112. package/components/List/list.scss +17 -17
  113. package/components/Login/login.css +68 -112
  114. package/components/Login/login.scss +54 -82
  115. package/components/Masthead/masthead.css +261 -502
  116. package/components/Masthead/masthead.scss +123 -286
  117. package/components/Menu/menu.css +388 -417
  118. package/components/Menu/menu.scss +370 -525
  119. package/components/MenuToggle/menu-toggle.css +223 -276
  120. package/components/MenuToggle/menu-toggle.scss +322 -390
  121. package/components/ModalBox/modal-box.css +59 -52
  122. package/components/ModalBox/modal-box.scss +57 -53
  123. package/components/MultipleFileUpload/multiple-file-upload.css +77 -50
  124. package/components/MultipleFileUpload/multiple-file-upload.scss +82 -53
  125. package/components/Nav/nav.css +240 -918
  126. package/components/Nav/nav.scss +300 -1082
  127. package/components/NotificationBadge/notification-badge.css +4 -4
  128. package/components/NotificationBadge/notification-badge.scss +4 -4
  129. package/components/NotificationDrawer/notification-drawer.css +104 -115
  130. package/components/NotificationDrawer/notification-drawer.scss +106 -116
  131. package/components/NumberInput/number-input.css +8 -8
  132. package/components/NumberInput/number-input.scss +7 -12
  133. package/components/OverflowMenu/overflow-menu.css +17 -47
  134. package/components/OverflowMenu/overflow-menu.scss +27 -65
  135. package/components/Page/page.css +56 -164
  136. package/components/Page/page.scss +60 -154
  137. package/components/Pagination/pagination.css +57 -124
  138. package/components/Pagination/pagination.scss +40 -128
  139. package/components/Panel/panel.css +27 -23
  140. package/components/Panel/panel.scss +29 -26
  141. package/components/Popover/popover.css +42 -53
  142. package/components/Popover/popover.scss +46 -55
  143. package/components/Progress/progress.css +31 -45
  144. package/components/Progress/progress.scss +36 -55
  145. package/components/ProgressStepper/progress-stepper.css +72 -69
  146. package/components/ProgressStepper/progress-stepper.scss +65 -65
  147. package/components/Radio/radio.css +27 -20
  148. package/components/Radio/radio.scss +28 -22
  149. package/components/Sidebar/sidebar.css +20 -9
  150. package/components/Sidebar/sidebar.scss +23 -11
  151. package/components/SimpleList/simple-list.css +32 -52
  152. package/components/SimpleList/simple-list.scss +37 -51
  153. package/components/Skeleton/skeleton.css +18 -20
  154. package/components/Skeleton/skeleton.scss +17 -21
  155. package/components/SkipToContent/skip-to-content.css +6 -3
  156. package/components/SkipToContent/skip-to-content.scss +8 -6
  157. package/components/Slider/slider.css +34 -30
  158. package/components/Slider/slider.scss +46 -43
  159. package/components/Spinner/spinner.css +17 -34
  160. package/components/Spinner/spinner.scss +19 -47
  161. package/components/Switch/switch.css +42 -38
  162. package/components/Switch/switch.scss +48 -43
  163. package/components/TabContent/tab-content.css +17 -11
  164. package/components/TabContent/tab-content.scss +18 -14
  165. package/components/Table/table-grid.css +31 -47
  166. package/components/Table/table-grid.scss +42 -55
  167. package/components/Table/table-scrollable.css +6 -6
  168. package/components/Table/table-scrollable.scss +8 -8
  169. package/components/Table/table-tree-view.css +81 -74
  170. package/components/Table/table-tree-view.scss +53 -39
  171. package/components/Table/table.css +159 -264
  172. package/components/Table/table.scss +216 -351
  173. package/components/Tabs/tabs.css +142 -175
  174. package/components/Tabs/tabs.scss +158 -218
  175. package/components/TextInputGroup/text-input-group.css +0 -14
  176. package/components/TextInputGroup/text-input-group.scss +3 -16
  177. package/components/Tile/tile.css +40 -81
  178. package/components/Tile/tile.scss +38 -84
  179. package/components/Timestamp/timestamp.css +12 -9
  180. package/components/Timestamp/timestamp.scss +11 -10
  181. package/components/Title/title.css +70 -19
  182. package/components/Title/title.scss +90 -20
  183. package/components/ToggleGroup/toggle-group.css +54 -48
  184. package/components/ToggleGroup/toggle-group.scss +62 -50
  185. package/components/Toolbar/toolbar.css +2527 -1031
  186. package/components/Toolbar/toolbar.scss +233 -520
  187. package/components/Tooltip/tooltip.css +16 -18
  188. package/components/Tooltip/tooltip.scss +20 -24
  189. package/components/TreeView/tree-view.css +76 -97
  190. package/components/TreeView/tree-view.scss +82 -113
  191. package/components/Truncate/truncate.css +4 -0
  192. package/components/Truncate/truncate.scss +3 -0
  193. package/components/Wizard/wizard.css +122 -205
  194. package/components/Wizard/wizard.scss +121 -181
  195. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  196. package/docs/components/Accordion/examples/Accordion.md +614 -416
  197. package/docs/components/ActionList/examples/ActionList.md +73 -22
  198. package/docs/components/Alert/examples/Alert.md +3 -3
  199. package/docs/components/Avatar/examples/Avatar.md +5 -19
  200. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  201. package/docs/components/Badge/examples/Badge.md +21 -0
  202. package/docs/components/Banner/examples/Banner.md +48 -25
  203. package/docs/components/Brand/examples/Brand.css +12 -0
  204. package/docs/components/Brand/examples/Brand.md +51 -32
  205. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  206. package/docs/components/Button/examples/Button.css +4 -0
  207. package/docs/components/Button/examples/Button.md +1439 -113
  208. package/docs/components/CalendarMonth/examples/CalendarMonth.md +44 -220
  209. package/docs/components/Card/examples/Card.md +550 -133
  210. package/docs/components/Check/examples/Check.md +1 -0
  211. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  212. package/docs/components/CodeEditor/examples/CodeEditor.md +144 -132
  213. package/docs/components/Content/examples/Content.md +5 -5
  214. package/docs/components/DatePicker/examples/DatePicker.md +5 -2
  215. package/docs/components/Divider/examples/Divider.css +3 -1
  216. package/docs/components/Divider/examples/Divider.md +30 -5
  217. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  218. package/docs/components/Drawer/examples/Drawer.md +294 -256
  219. package/docs/components/DualListSelector/examples/DualListSelector.md +18 -18
  220. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  221. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  222. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  223. package/docs/components/Form/examples/Form.md +134 -89
  224. package/docs/components/Icon/examples/Icon.md +82 -11
  225. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  226. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  227. package/docs/components/Label/examples/Label.css +4 -0
  228. package/docs/components/Label/examples/Label.md +3090 -703
  229. package/docs/components/LogViewer/examples/LogViewer.md +100 -80
  230. package/docs/components/Login/examples/Login.md +160 -105
  231. package/docs/components/Masthead/examples/masthead.md +443 -65
  232. package/docs/components/Menu/examples/Menu.css +7 -11
  233. package/docs/components/Menu/examples/Menu.md +213 -486
  234. package/docs/components/MenuToggle/examples/MenuToggle.md +253 -224
  235. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +9 -9
  236. package/docs/components/Nav/examples/Navigation.css +1 -23
  237. package/docs/components/Nav/examples/Navigation.md +69 -243
  238. package/docs/components/Page/examples/Page.css +0 -8
  239. package/docs/components/Page/examples/Page.md +22 -21
  240. package/docs/components/Pagination/examples/Pagination.md +663 -637
  241. package/docs/components/Panel/examples/Panel.md +12 -0
  242. package/docs/components/Popover/examples/Popover.md +1 -1
  243. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -14
  244. package/docs/components/Radio/examples/Radio.md +1 -1
  245. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  246. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  247. package/docs/components/TabContent/examples/TabContent.md +10 -10
  248. package/docs/components/Table/examples/Table.md +8 -8
  249. package/docs/components/Tabs/examples/Tabs.css +1 -1
  250. package/docs/components/Tabs/examples/Tabs.md +1025 -826
  251. package/docs/components/Tile/examples/Tile.md +264 -144
  252. package/docs/components/Title/examples/Title.md +18 -0
  253. package/docs/components/Toolbar/examples/Toolbar.css +20 -15
  254. package/docs/components/Toolbar/examples/Toolbar.md +985 -3341
  255. package/docs/components/TreeView/examples/TreeView.md +7 -57
  256. package/docs/components/Truncate/examples/Truncate.css +2 -2
  257. package/docs/components/Wizard/examples/Wizard.md +31 -7
  258. package/docs/demos/AboutModal/examples/AboutModal.md +116 -35
  259. package/docs/demos/Alert/examples/Alert.md +366 -99
  260. package/docs/demos/BackToTop/examples/BackToTop.md +114 -33
  261. package/docs/demos/Banner/examples/Banner.md +235 -68
  262. package/docs/demos/Button/examples/Button.md +1 -1
  263. package/docs/demos/Card/examples/Card.md +2 -2
  264. package/docs/demos/CardView/examples/CardView.md +256 -192
  265. package/docs/demos/ContextSelector/examples/ContextSelector.md +414 -107
  266. package/docs/demos/Dashboard/examples/Dashboard.md +114 -33
  267. package/docs/demos/DataList/examples/DataList.md +1049 -950
  268. package/docs/demos/DescriptionList/examples/DescriptionList.md +342 -99
  269. package/docs/demos/Drawer/examples/Drawer.md +700 -271
  270. package/docs/demos/Form/examples/BasicForms.md +138 -84
  271. package/docs/demos/JumpLinks/examples/JumpLinks.md +989 -409
  272. package/docs/demos/Masthead/examples/Masthead.md +833 -357
  273. package/docs/demos/Modal/examples/Modal.md +717 -222
  274. package/docs/demos/Nav/examples/Nav.md +763 -926
  275. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +575 -165
  276. package/docs/demos/Page/examples/Page.md +1050 -309
  277. package/docs/demos/Page/examples/Penta.md +73 -31
  278. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +20 -16
  279. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  280. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1276 -861
  281. package/docs/demos/Skeleton/examples/Skeleton.md +114 -33
  282. package/docs/demos/Table/examples/Table.md +4002 -3503
  283. package/docs/demos/Tabs/examples/Tabs.md +711 -219
  284. package/docs/demos/Toolbar/examples/Toolbar.css +10 -0
  285. package/docs/demos/Toolbar/examples/Toolbar.md +1350 -1480
  286. package/docs/demos/Wizard/examples/Wizard.md +1134 -315
  287. package/docs/layouts/Flex/examples/Flex.md +11 -11
  288. package/package.json +32 -32
  289. package/patternfly-base-no-globals-theme-dark-unversioned.css +1021 -868
  290. package/patternfly-base-no-globals.css +1021 -868
  291. package/patternfly-base-theme-dark-unversioned.css +1027 -873
  292. package/patternfly-base.css +1027 -873
  293. package/patternfly-no-globals.css +9048 -8979
  294. package/patternfly-theme-dark-unversioned.css +9051 -8981
  295. package/patternfly.css +9051 -8981
  296. package/patternfly.min.css +1 -1
  297. package/patternfly.min.css.map +1 -1
  298. package/sass-utilities/mixins.scss +18 -0
  299. package/base/themes/dark/_variables.scss +0 -102
  300. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  301. package/components/Accordion/themes/dark/accordion.scss +0 -9
  302. package/components/Alert/themes/dark/alert.scss +0 -17
  303. package/components/Badge/themes/dark/badge.scss +0 -9
  304. package/components/Banner/themes/dark/banner.scss +0 -14
  305. package/components/Button/themes/dark/button.scss +0 -51
  306. package/components/CalendarMonth/themes/dark/calendar-month.scss +0 -37
  307. package/components/Card/themes/dark/card.scss +0 -20
  308. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
  309. package/components/CodeEditor/themes/dark/code-editor.scss +0 -14
  310. package/components/DataList/themes/dark/data-list.scss +0 -10
  311. package/components/DatePicker/themes/dark/date-picker.scss +0 -8
  312. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
  313. package/components/Drawer/themes/dark/drawer.scss +0 -13
  314. package/components/DualListSelector/themes/dark/dual-list-selector.scss +0 -9
  315. package/components/Form/themes/dark/form.scss +0 -7
  316. package/components/FormControl/themes/dark/form-control.scss +0 -24
  317. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  318. package/components/Hint/themes/dark/hint.scss +0 -8
  319. package/components/InputGroup/themes/dark/input-group.scss +0 -22
  320. package/components/Label/themes/dark/label.scss +0 -53
  321. package/components/Login/themes/dark/login.scss +0 -12
  322. package/components/Masthead/themes/dark/masthead.scss +0 -14
  323. package/components/MenuToggle/themes/dark/menu-toggle.scss +0 -27
  324. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  325. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  326. package/components/Page/themes/dark/page.scss +0 -69
  327. package/components/Pagination/themes/dark/pagination.scss +0 -7
  328. package/components/Panel/themes/dark/panel.scss +0 -7
  329. package/components/Popover/themes/dark/popover.scss +0 -11
  330. package/components/Progress/themes/dark/progress.scss +0 -9
  331. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  332. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  333. package/components/Switch/themes/dark/switch.scss +0 -11
  334. package/components/Tabs/themes/dark/tabs.scss +0 -10
  335. package/components/TextInputGroup/themes/dark/text-input-group.scss +0 -11
  336. package/components/Tile/themes/dark/tile.scss +0 -10
  337. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
  338. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  339. package/components/TreeView/themes/dark/tree-view.scss +0 -8
  340. package/components/Wizard/themes/dark/wizard.scss +0 -12
  341. package/docs/components/Avatar/examples/Avatar.css +0 -3
package/docs/demos/Nav/examples/Nav.md CHANGED
@@ -25,23 +25,117 @@ section: components
25
25
  </span>
26
26
  <div class="pf-v5-c-masthead__main">
27
27
  <a class="pf-v5-c-masthead__brand" href="#">
28
- <img
29
- class="pf-v5-c-brand"
30
- src="/assets/images/pf-logo.svg"
31
- alt="PatternFly logo"
32
- style="--pf-v5-c-brand--Height:36px"
33
- />
28
+ <svg height="40px" viewBox="0 0 679 158">
29
+ <title>PF-HorizontalLogo-Color</title>
30
+ <defs>
31
+ <linearGradient
32
+ x1="68%"
33
+ y1="2.25860997e-13%"
34
+ x2="32%"
35
+ y2="100%"
36
+ id="linearGradient-nav-basic-example-masthead"
37
+ >
38
+ <stop stop-color="#2B9AF3" offset="0%" />
39
+ <stop
40
+ stop-color="#73BCF7"
41
+ stop-opacity="0.502212631"
42
+ offset="100%"
43
+ />
44
+ </linearGradient>
45
+ </defs>
46
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
47
+ <g
48
+ transform="translate(206.000000, 45.750000)"
49
+ fill="var(--pf-t--global--text--color--regular)"
50
+ fill-rule="nonzero"
51
+ >
52
+ <path
53
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
54
+ />
55
+ <path
56
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
57
+ />
58
+ <path
59
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
60
+ />
61
+ <path
62
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
63
+ />
64
+ <path
65
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
66
+ />
67
+ <path
68
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
69
+ />
70
+ <path
71
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
72
+ />
73
+ <polygon
74
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
75
+ />
76
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
77
+ <path
78
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
79
+ />
80
+ </g>
81
+ <g transform="translate(0.000000, 0.000000)">
82
+ <path
83
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
84
+ fill="#0066CC"
85
+ />
86
+ <path
87
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
88
+ fill="url(#linearGradient-nav-basic-example-masthead)"
89
+ />
90
+ <path
91
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
92
+ fill="url(#linearGradient-nav-basic-example-masthead)"
93
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
94
+ />
95
+ </g>
96
+ </g>
97
+ </svg>
34
98
  </a>
35
99
  </div>
36
100
  <div class="pf-v5-c-masthead__content">
37
101
  <div
38
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
102
+ class="pf-v5-c-toolbar pf-m-static"
39
103
  id="nav-basic-example-masthead-toolbar"
40
104
  >
41
105
  <div class="pf-v5-c-toolbar__content">
42
106
  <div class="pf-v5-c-toolbar__content-section">
107
+ <div class="pf-v5-c-toolbar__item">
108
+ <button
109
+ class="pf-v5-c-menu-toggle"
110
+ type="button"
111
+ aria-expanded="false"
112
+ >
113
+ <span class="pf-v5-c-menu-toggle__text">Overview</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>
121
+
122
+ <div class="pf-v5-c-toolbar__item">
123
+ <button
124
+ class="pf-v5-c-menu-toggle"
125
+ type="button"
126
+ aria-expanded="false"
127
+ >
128
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
129
+ <span class="pf-v5-c-menu-toggle__controls">
130
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
131
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
132
+ </span>
133
+ </span>
134
+ </button>
135
+ </div>
136
+
43
137
  <div
44
- 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"
138
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
45
139
  >
46
140
  <div
47
141
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -53,7 +147,9 @@ section: components
53
147
  aria-expanded="false"
54
148
  aria-label="Application launcher"
55
149
  >
56
- <i class="fas fa-th" aria-hidden="true"></i>
150
+ <span class="pf-v5-c-menu-toggle__icon">
151
+ <i class="fas fa-th" aria-hidden="true"></i>
152
+ </span>
57
153
  </button>
58
154
  </div>
59
155
  <div class="pf-v5-c-toolbar__item">
@@ -63,7 +159,9 @@ section: components
63
159
  aria-expanded="false"
64
160
  aria-label="Settings"
65
161
  >
66
- <i class="fas fa-cog" aria-hidden="true"></i>
162
+ <span class="pf-v5-c-menu-toggle__icon">
163
+ <i class="fas fa-cog" aria-hidden="true"></i>
164
+ </span>
67
165
  </button>
68
166
  </div>
69
167
  <div class="pf-v5-c-toolbar__item">
@@ -73,7 +171,9 @@ section: components
73
171
  aria-expanded="false"
74
172
  aria-label="Help"
75
173
  >
76
- <i class="fas fa-question-circle" aria-hidden="true"></i>
174
+ <span class="pf-v5-c-menu-toggle__icon">
175
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
176
+ </span>
77
177
  </button>
78
178
  </div>
79
179
  </div>
@@ -84,31 +184,12 @@ section: components
84
184
  aria-expanded="false"
85
185
  aria-label="Actions"
86
186
  >
87
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
187
+ <span class="pf-v5-c-menu-toggle__icon">
188
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
189
+ </span>
88
190
  </button>
89
191
  </div>
90
192
  </div>
91
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
92
- <button
93
- class="pf-v5-c-menu-toggle pf-m-full-height"
94
- type="button"
95
- aria-expanded="false"
96
- >
97
- <span class="pf-v5-c-menu-toggle__icon">
98
- <img
99
- class="pf-v5-c-avatar"
100
- alt="Avatar image"
101
- src="/assets/images/img_avatar-light.svg"
102
- />
103
- </span>
104
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
105
- <span class="pf-v5-c-menu-toggle__controls">
106
- <span class="pf-v5-c-menu-toggle__toggle-icon">
107
- <i class="fas fa-angle-down" aria-hidden="true"></i>
108
- </span>
109
- </span>
110
- </button>
111
- </div>
112
193
  </div>
113
194
  </div>
114
195
  </div>
@@ -257,23 +338,117 @@ section: components
257
338
  </span>
258
339
  <div class="pf-v5-c-masthead__main">
259
340
  <a class="pf-v5-c-masthead__brand" href="#">
260
- <img
261
- class="pf-v5-c-brand"
262
- src="/assets/images/pf-logo.svg"
263
- alt="PatternFly logo"
264
- style="--pf-v5-c-brand--Height:36px"
265
- />
341
+ <svg height="40px" viewBox="0 0 679 158">
342
+ <title>PF-HorizontalLogo-Color</title>
343
+ <defs>
344
+ <linearGradient
345
+ x1="68%"
346
+ y1="2.25860997e-13%"
347
+ x2="32%"
348
+ y2="100%"
349
+ id="linearGradient-nav-grouped-nav-example-masthead"
350
+ >
351
+ <stop stop-color="#2B9AF3" offset="0%" />
352
+ <stop
353
+ stop-color="#73BCF7"
354
+ stop-opacity="0.502212631"
355
+ offset="100%"
356
+ />
357
+ </linearGradient>
358
+ </defs>
359
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
360
+ <g
361
+ transform="translate(206.000000, 45.750000)"
362
+ fill="var(--pf-t--global--text--color--regular)"
363
+ fill-rule="nonzero"
364
+ >
365
+ <path
366
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
367
+ />
368
+ <path
369
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
370
+ />
371
+ <path
372
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
373
+ />
374
+ <path
375
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
376
+ />
377
+ <path
378
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
379
+ />
380
+ <path
381
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
382
+ />
383
+ <path
384
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
385
+ />
386
+ <polygon
387
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
388
+ />
389
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
390
+ <path
391
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
392
+ />
393
+ </g>
394
+ <g transform="translate(0.000000, 0.000000)">
395
+ <path
396
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
397
+ fill="#0066CC"
398
+ />
399
+ <path
400
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
401
+ fill="url(#linearGradient-nav-grouped-nav-example-masthead)"
402
+ />
403
+ <path
404
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
405
+ fill="url(#linearGradient-nav-grouped-nav-example-masthead)"
406
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
407
+ />
408
+ </g>
409
+ </g>
410
+ </svg>
266
411
  </a>
267
412
  </div>
268
413
  <div class="pf-v5-c-masthead__content">
269
414
  <div
270
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
415
+ class="pf-v5-c-toolbar pf-m-static"
271
416
  id="nav-grouped-nav-example-masthead-toolbar"
272
417
  >
273
418
  <div class="pf-v5-c-toolbar__content">
274
419
  <div class="pf-v5-c-toolbar__content-section">
420
+ <div class="pf-v5-c-toolbar__item">
421
+ <button
422
+ class="pf-v5-c-menu-toggle"
423
+ type="button"
424
+ aria-expanded="false"
425
+ >
426
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
427
+ <span class="pf-v5-c-menu-toggle__controls">
428
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
429
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
430
+ </span>
431
+ </span>
432
+ </button>
433
+ </div>
434
+
435
+ <div class="pf-v5-c-toolbar__item">
436
+ <button
437
+ class="pf-v5-c-menu-toggle"
438
+ type="button"
439
+ aria-expanded="false"
440
+ >
441
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
442
+ <span class="pf-v5-c-menu-toggle__controls">
443
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
444
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
445
+ </span>
446
+ </span>
447
+ </button>
448
+ </div>
449
+
275
450
  <div
276
- 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"
451
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
277
452
  >
278
453
  <div
279
454
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -285,7 +460,9 @@ section: components
285
460
  aria-expanded="false"
286
461
  aria-label="Application launcher"
287
462
  >
288
- <i class="fas fa-th" aria-hidden="true"></i>
463
+ <span class="pf-v5-c-menu-toggle__icon">
464
+ <i class="fas fa-th" aria-hidden="true"></i>
465
+ </span>
289
466
  </button>
290
467
  </div>
291
468
  <div class="pf-v5-c-toolbar__item">
@@ -295,7 +472,9 @@ section: components
295
472
  aria-expanded="false"
296
473
  aria-label="Settings"
297
474
  >
298
- <i class="fas fa-cog" aria-hidden="true"></i>
475
+ <span class="pf-v5-c-menu-toggle__icon">
476
+ <i class="fas fa-cog" aria-hidden="true"></i>
477
+ </span>
299
478
  </button>
300
479
  </div>
301
480
  <div class="pf-v5-c-toolbar__item">
@@ -305,7 +484,9 @@ section: components
305
484
  aria-expanded="false"
306
485
  aria-label="Help"
307
486
  >
308
- <i class="fas fa-question-circle" aria-hidden="true"></i>
487
+ <span class="pf-v5-c-menu-toggle__icon">
488
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
489
+ </span>
309
490
  </button>
310
491
  </div>
311
492
  </div>
@@ -316,31 +497,12 @@ section: components
316
497
  aria-expanded="false"
317
498
  aria-label="Actions"
318
499
  >
319
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
500
+ <span class="pf-v5-c-menu-toggle__icon">
501
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
502
+ </span>
320
503
  </button>
321
504
  </div>
322
505
  </div>
323
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
324
- <button
325
- class="pf-v5-c-menu-toggle pf-m-full-height"
326
- type="button"
327
- aria-expanded="false"
328
- >
329
- <span class="pf-v5-c-menu-toggle__icon">
330
- <img
331
- class="pf-v5-c-avatar"
332
- alt="Avatar image"
333
- src="/assets/images/img_avatar-light.svg"
334
- />
335
- </span>
336
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
337
- <span class="pf-v5-c-menu-toggle__controls">
338
- <span class="pf-v5-c-menu-toggle__toggle-icon">
339
- <i class="fas fa-angle-down" aria-hidden="true"></i>
340
- </span>
341
- </span>
342
- </button>
343
- </div>
344
506
  </div>
345
507
  </div>
346
508
  </div>
@@ -383,6 +545,7 @@ section: components
383
545
  </li>
384
546
  </ul>
385
547
  </section>
548
+
386
549
  <section class="pf-v5-c-nav__section" aria-labelledby="grouped-title2">
387
550
  <h2 class="pf-v5-c-nav__section-title" id="grouped-title2">Policy</h2>
388
551
  <ul class="pf-v5-c-nav__list" role="list">
@@ -512,23 +675,117 @@ section: components
512
675
  </span>
513
676
  <div class="pf-v5-c-masthead__main">
514
677
  <a class="pf-v5-c-masthead__brand" href="#">
515
- <img
516
- class="pf-v5-c-brand"
517
- src="/assets/images/pf-logo.svg"
518
- alt="PatternFly logo"
519
- style="--pf-v5-c-brand--Height:36px"
520
- />
678
+ <svg height="40px" viewBox="0 0 679 158">
679
+ <title>PF-HorizontalLogo-Color</title>
680
+ <defs>
681
+ <linearGradient
682
+ x1="68%"
683
+ y1="2.25860997e-13%"
684
+ x2="32%"
685
+ y2="100%"
686
+ id="linearGradient-nav-expandable-example-masthead"
687
+ >
688
+ <stop stop-color="#2B9AF3" offset="0%" />
689
+ <stop
690
+ stop-color="#73BCF7"
691
+ stop-opacity="0.502212631"
692
+ offset="100%"
693
+ />
694
+ </linearGradient>
695
+ </defs>
696
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
697
+ <g
698
+ transform="translate(206.000000, 45.750000)"
699
+ fill="var(--pf-t--global--text--color--regular)"
700
+ fill-rule="nonzero"
701
+ >
702
+ <path
703
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
704
+ />
705
+ <path
706
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
707
+ />
708
+ <path
709
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
710
+ />
711
+ <path
712
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
713
+ />
714
+ <path
715
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
716
+ />
717
+ <path
718
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
719
+ />
720
+ <path
721
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
722
+ />
723
+ <polygon
724
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
725
+ />
726
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
727
+ <path
728
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
729
+ />
730
+ </g>
731
+ <g transform="translate(0.000000, 0.000000)">
732
+ <path
733
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
734
+ fill="#0066CC"
735
+ />
736
+ <path
737
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
738
+ fill="url(#linearGradient-nav-expandable-example-masthead)"
739
+ />
740
+ <path
741
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
742
+ fill="url(#linearGradient-nav-expandable-example-masthead)"
743
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
744
+ />
745
+ </g>
746
+ </g>
747
+ </svg>
521
748
  </a>
522
749
  </div>
523
750
  <div class="pf-v5-c-masthead__content">
524
751
  <div
525
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
752
+ class="pf-v5-c-toolbar pf-m-static"
526
753
  id="nav-expandable-example-masthead-toolbar"
527
754
  >
528
755
  <div class="pf-v5-c-toolbar__content">
529
756
  <div class="pf-v5-c-toolbar__content-section">
757
+ <div class="pf-v5-c-toolbar__item">
758
+ <button
759
+ class="pf-v5-c-menu-toggle"
760
+ type="button"
761
+ aria-expanded="false"
762
+ >
763
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
764
+ <span class="pf-v5-c-menu-toggle__controls">
765
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
766
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
767
+ </span>
768
+ </span>
769
+ </button>
770
+ </div>
771
+
772
+ <div class="pf-v5-c-toolbar__item">
773
+ <button
774
+ class="pf-v5-c-menu-toggle"
775
+ type="button"
776
+ aria-expanded="false"
777
+ >
778
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
779
+ <span class="pf-v5-c-menu-toggle__controls">
780
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
781
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
782
+ </span>
783
+ </span>
784
+ </button>
785
+ </div>
786
+
530
787
  <div
531
- 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"
788
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
532
789
  >
533
790
  <div
534
791
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -540,7 +797,9 @@ section: components
540
797
  aria-expanded="false"
541
798
  aria-label="Application launcher"
542
799
  >
543
- <i class="fas fa-th" aria-hidden="true"></i>
800
+ <span class="pf-v5-c-menu-toggle__icon">
801
+ <i class="fas fa-th" aria-hidden="true"></i>
802
+ </span>
544
803
  </button>
545
804
  </div>
546
805
  <div class="pf-v5-c-toolbar__item">
@@ -550,7 +809,9 @@ section: components
550
809
  aria-expanded="false"
551
810
  aria-label="Settings"
552
811
  >
553
- <i class="fas fa-cog" aria-hidden="true"></i>
812
+ <span class="pf-v5-c-menu-toggle__icon">
813
+ <i class="fas fa-cog" aria-hidden="true"></i>
814
+ </span>
554
815
  </button>
555
816
  </div>
556
817
  <div class="pf-v5-c-toolbar__item">
@@ -560,7 +821,9 @@ section: components
560
821
  aria-expanded="false"
561
822
  aria-label="Help"
562
823
  >
563
- <i class="fas fa-question-circle" aria-hidden="true"></i>
824
+ <span class="pf-v5-c-menu-toggle__icon">
825
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
826
+ </span>
564
827
  </button>
565
828
  </div>
566
829
  </div>
@@ -571,31 +834,12 @@ section: components
571
834
  aria-expanded="false"
572
835
  aria-label="Actions"
573
836
  >
574
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
837
+ <span class="pf-v5-c-menu-toggle__icon">
838
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
839
+ </span>
575
840
  </button>
576
841
  </div>
577
842
  </div>
578
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
579
- <button
580
- class="pf-v5-c-menu-toggle pf-m-full-height"
581
- type="button"
582
- aria-expanded="false"
583
- >
584
- <span class="pf-v5-c-menu-toggle__icon">
585
- <img
586
- class="pf-v5-c-avatar"
587
- alt="Avatar image"
588
- src="/assets/images/img_avatar-light.svg"
589
- />
590
- </span>
591
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
592
- <span class="pf-v5-c-menu-toggle__controls">
593
- <span class="pf-v5-c-menu-toggle__toggle-icon">
594
- <i class="fas fa-angle-down" aria-hidden="true"></i>
595
- </span>
596
- </span>
597
- </button>
598
- </div>
599
843
  </div>
600
844
  </div>
601
845
  </div>
@@ -609,13 +853,11 @@ section: components
609
853
  aria-label="Global"
610
854
  >
611
855
  <ul class="pf-v5-c-nav__list" role="list">
612
- <li
613
- class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded pf-m-current"
614
- >
856
+ <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
615
857
  <button
616
858
  class="pf-v5-c-nav__link"
617
- id="nav-expandable-example-expandable-nav-link1"
618
859
  aria-expanded="true"
860
+ id="nav-expandable-example-expandable-nav-link1"
619
861
  >
620
862
  System panel
621
863
  <span class="pf-v5-c-nav__toggle">
@@ -642,8 +884,6 @@ section: components
642
884
  <li class="pf-v5-c-nav__item">
643
885
  <a href="#" class="pf-v5-c-nav__link">Hypervisors</a>
644
886
  </li>
645
- <li class="pf-v5-c-divider" role="separator"></li>
646
-
647
887
  <li class="pf-v5-c-nav__item">
648
888
  <a href="#" class="pf-v5-c-nav__link">Instances</a>
649
889
  </li>
@@ -659,8 +899,8 @@ section: components
659
899
  <li class="pf-v5-c-nav__item pf-m-expandable">
660
900
  <button
661
901
  class="pf-v5-c-nav__link"
662
- id="nav-expandable-example-expandable-nav-link2"
663
902
  aria-expanded="false"
903
+ id="nav-expandable-example-expandable-nav-link2"
664
904
  >
665
905
  Policy
666
906
  <span class="pf-v5-c-nav__toggle">
@@ -687,8 +927,8 @@ section: components
687
927
  <li class="pf-v5-c-nav__item pf-m-expandable">
688
928
  <button
689
929
  class="pf-v5-c-nav__link"
690
- id="nav-expandable-example-expandable-nav-link3"
691
930
  aria-expanded="false"
931
+ id="nav-expandable-example-expandable-nav-link3"
692
932
  >
693
933
  Authentication
694
934
  <span class="pf-v5-c-nav__toggle">
@@ -819,37 +1059,135 @@ section: components
819
1059
  <header class="pf-v5-c-masthead" id="nav-horizontal-example-masthead">
820
1060
  <div class="pf-v5-c-masthead__main">
821
1061
  <a class="pf-v5-c-masthead__brand" href="#">
822
- <img
823
- class="pf-v5-c-brand"
824
- src="/assets/images/pf-logo.svg"
825
- alt="PatternFly logo"
826
- style="--pf-v5-c-brand--Height:36px"
827
- />
1062
+ <svg height="40px" viewBox="0 0 679 158">
1063
+ <title>PF-HorizontalLogo-Color</title>
1064
+ <defs>
1065
+ <linearGradient
1066
+ x1="68%"
1067
+ y1="2.25860997e-13%"
1068
+ x2="32%"
1069
+ y2="100%"
1070
+ id="linearGradient-nav-horizontal-example-masthead"
1071
+ >
1072
+ <stop stop-color="#2B9AF3" offset="0%" />
1073
+ <stop
1074
+ stop-color="#73BCF7"
1075
+ stop-opacity="0.502212631"
1076
+ offset="100%"
1077
+ />
1078
+ </linearGradient>
1079
+ </defs>
1080
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1081
+ <g
1082
+ transform="translate(206.000000, 45.750000)"
1083
+ fill="var(--pf-t--global--text--color--regular)"
1084
+ fill-rule="nonzero"
1085
+ >
1086
+ <path
1087
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
1088
+ />
1089
+ <path
1090
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
1091
+ />
1092
+ <path
1093
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
1094
+ />
1095
+ <path
1096
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
1097
+ />
1098
+ <path
1099
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
1100
+ />
1101
+ <path
1102
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
1103
+ />
1104
+ <path
1105
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
1106
+ />
1107
+ <polygon
1108
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
1109
+ />
1110
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1111
+ <path
1112
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
1113
+ />
1114
+ </g>
1115
+ <g transform="translate(0.000000, 0.000000)">
1116
+ <path
1117
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
1118
+ fill="#0066CC"
1119
+ />
1120
+ <path
1121
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1122
+ fill="url(#linearGradient-nav-horizontal-example-masthead)"
1123
+ />
1124
+ <path
1125
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1126
+ fill="url(#linearGradient-nav-horizontal-example-masthead)"
1127
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1128
+ />
1129
+ </g>
1130
+ </g>
1131
+ </svg>
828
1132
  </a>
829
1133
  </div>
830
1134
  <div class="pf-v5-c-masthead__content">
831
1135
  <div
832
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
1136
+ class="pf-v5-c-toolbar pf-m-static"
833
1137
  id="nav-horizontal-example-masthead-toolbar"
834
1138
  >
835
1139
  <div class="pf-v5-c-toolbar__content">
836
1140
  <div class="pf-v5-c-toolbar__content-section">
1141
+ <div class="pf-v5-c-toolbar__item">
1142
+ <button
1143
+ class="pf-v5-c-menu-toggle"
1144
+ type="button"
1145
+ aria-expanded="false"
1146
+ >
1147
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1148
+ <span class="pf-v5-c-menu-toggle__controls">
1149
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1150
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1151
+ </span>
1152
+ </span>
1153
+ </button>
1154
+ </div>
1155
+
1156
+ <div class="pf-v5-c-toolbar__item">
1157
+ <button
1158
+ class="pf-v5-c-menu-toggle"
1159
+ type="button"
1160
+ aria-expanded="false"
1161
+ >
1162
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1163
+ <span class="pf-v5-c-menu-toggle__controls">
1164
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1165
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1166
+ </span>
1167
+ </span>
1168
+ </button>
1169
+ </div>
1170
+
837
1171
  <div
838
1172
  class="pf-v5-c-toolbar__item pf-m-overflow-container"
839
1173
  style="--pf-v5-c-toolbar__item--MinWidth: 18ch;"
840
1174
  >
841
1175
  <nav
842
- class="pf-v5-c-nav pf-m-horizontal pf-m-scrollable"
843
- id="-horizontal-nav"
1176
+ class="pf-v5-c-nav pf-m-scrollable pf-m-horizontal"
1177
+ id="nav-horizontal-example-masthead-horizontal-nav"
844
1178
  aria-label="Global"
845
1179
  >
846
- <button
847
- class="pf-v5-c-nav__scroll-button"
848
- disabled
849
- aria-label="Scroll left"
850
- >
851
- <i class="fas fa-angle-left" aria-hidden="true"></i>
852
- </button>
1180
+ <div class="pf-v5-c-nav__scroll-button">
1181
+ <button
1182
+ class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
1183
+ type="button"
1184
+ aria-label="Scroll start"
1185
+ >
1186
+ <span class="pf-v5-c-button__icon">
1187
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1188
+ </span>
1189
+ </button>
1190
+ </div>
853
1191
  <ul class="pf-v5-c-nav__list" role="list">
854
1192
  <li class="pf-v5-c-nav__item">
855
1193
  <a href="#" class="pf-v5-c-nav__link">Horizontal nav item 1</a>
@@ -871,16 +1209,21 @@ section: components
871
1209
  >Horizontal nav item 5</a>
872
1210
  </li>
873
1211
  </ul>
874
- <button
875
- class="pf-v5-c-nav__scroll-button"
876
- aria-label="Scroll right"
877
- >
878
- <i class="fas fa-angle-right" aria-hidden="true"></i>
879
- </button>
1212
+ <div class="pf-v5-c-nav__scroll-button">
1213
+ <button
1214
+ class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
1215
+ type="button"
1216
+ aria-label="Scroll end"
1217
+ >
1218
+ <span class="pf-v5-c-button__icon">
1219
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1220
+ </span>
1221
+ </button>
1222
+ </div>
880
1223
  </nav>
881
1224
  </div>
882
1225
  <div
883
- 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"
1226
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
884
1227
  >
885
1228
  <div
886
1229
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -892,7 +1235,9 @@ section: components
892
1235
  aria-expanded="false"
893
1236
  aria-label="Application launcher"
894
1237
  >
895
- <i class="fas fa-th" aria-hidden="true"></i>
1238
+ <span class="pf-v5-c-menu-toggle__icon">
1239
+ <i class="fas fa-th" aria-hidden="true"></i>
1240
+ </span>
896
1241
  </button>
897
1242
  </div>
898
1243
  <div class="pf-v5-c-toolbar__item">
@@ -902,7 +1247,9 @@ section: components
902
1247
  aria-expanded="false"
903
1248
  aria-label="Settings"
904
1249
  >
905
- <i class="fas fa-cog" aria-hidden="true"></i>
1250
+ <span class="pf-v5-c-menu-toggle__icon">
1251
+ <i class="fas fa-cog" aria-hidden="true"></i>
1252
+ </span>
906
1253
  </button>
907
1254
  </div>
908
1255
  <div class="pf-v5-c-toolbar__item">
@@ -912,7 +1259,9 @@ section: components
912
1259
  aria-expanded="false"
913
1260
  aria-label="Help"
914
1261
  >
915
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1262
+ <span class="pf-v5-c-menu-toggle__icon">
1263
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
1264
+ </span>
916
1265
  </button>
917
1266
  </div>
918
1267
  </div>
@@ -923,31 +1272,12 @@ section: components
923
1272
  aria-expanded="false"
924
1273
  aria-label="Actions"
925
1274
  >
926
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1275
+ <span class="pf-v5-c-menu-toggle__icon">
1276
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1277
+ </span>
927
1278
  </button>
928
1279
  </div>
929
1280
  </div>
930
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
931
- <button
932
- class="pf-v5-c-menu-toggle pf-m-full-height"
933
- type="button"
934
- aria-expanded="false"
935
- >
936
- <span class="pf-v5-c-menu-toggle__icon">
937
- <img
938
- class="pf-v5-c-avatar"
939
- alt="Avatar image"
940
- src="/assets/images/img_avatar-light.svg"
941
- />
942
- </span>
943
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
944
- <span class="pf-v5-c-menu-toggle__controls">
945
- <span class="pf-v5-c-menu-toggle__toggle-icon">
946
- <i class="fas fa-angle-down" aria-hidden="true"></i>
947
- </span>
948
- </span>
949
- </button>
950
- </div>
951
1281
  </div>
952
1282
  </div>
953
1283
  </div>
@@ -1065,23 +1395,117 @@ section: components
1065
1395
  </span>
1066
1396
  <div class="pf-v5-c-masthead__main">
1067
1397
  <a class="pf-v5-c-masthead__brand" href="#">
1068
- <img
1069
- class="pf-v5-c-brand"
1070
- src="/assets/images/pf-logo.svg"
1071
- alt="PatternFly logo"
1072
- style="--pf-v5-c-brand--Height:36px"
1073
- />
1398
+ <svg height="40px" viewBox="0 0 679 158">
1399
+ <title>PF-HorizontalLogo-Color</title>
1400
+ <defs>
1401
+ <linearGradient
1402
+ x1="68%"
1403
+ y1="2.25860997e-13%"
1404
+ x2="32%"
1405
+ y2="100%"
1406
+ id="linearGradient-nav-horizontal-subnav-example-masthead"
1407
+ >
1408
+ <stop stop-color="#2B9AF3" offset="0%" />
1409
+ <stop
1410
+ stop-color="#73BCF7"
1411
+ stop-opacity="0.502212631"
1412
+ offset="100%"
1413
+ />
1414
+ </linearGradient>
1415
+ </defs>
1416
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1417
+ <g
1418
+ transform="translate(206.000000, 45.750000)"
1419
+ fill="var(--pf-t--global--text--color--regular)"
1420
+ fill-rule="nonzero"
1421
+ >
1422
+ <path
1423
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
1424
+ />
1425
+ <path
1426
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
1427
+ />
1428
+ <path
1429
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
1430
+ />
1431
+ <path
1432
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
1433
+ />
1434
+ <path
1435
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
1436
+ />
1437
+ <path
1438
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
1439
+ />
1440
+ <path
1441
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
1442
+ />
1443
+ <polygon
1444
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
1445
+ />
1446
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1447
+ <path
1448
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
1449
+ />
1450
+ </g>
1451
+ <g transform="translate(0.000000, 0.000000)">
1452
+ <path
1453
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
1454
+ fill="#0066CC"
1455
+ />
1456
+ <path
1457
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1458
+ fill="url(#linearGradient-nav-horizontal-subnav-example-masthead)"
1459
+ />
1460
+ <path
1461
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1462
+ fill="url(#linearGradient-nav-horizontal-subnav-example-masthead)"
1463
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1464
+ />
1465
+ </g>
1466
+ </g>
1467
+ </svg>
1074
1468
  </a>
1075
1469
  </div>
1076
1470
  <div class="pf-v5-c-masthead__content">
1077
1471
  <div
1078
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
1472
+ class="pf-v5-c-toolbar pf-m-static"
1079
1473
  id="nav-horizontal-subnav-example-masthead-toolbar"
1080
1474
  >
1081
1475
  <div class="pf-v5-c-toolbar__content">
1082
1476
  <div class="pf-v5-c-toolbar__content-section">
1477
+ <div class="pf-v5-c-toolbar__item">
1478
+ <button
1479
+ class="pf-v5-c-menu-toggle"
1480
+ type="button"
1481
+ aria-expanded="false"
1482
+ >
1483
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1484
+ <span class="pf-v5-c-menu-toggle__controls">
1485
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1486
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1487
+ </span>
1488
+ </span>
1489
+ </button>
1490
+ </div>
1491
+
1492
+ <div class="pf-v5-c-toolbar__item">
1493
+ <button
1494
+ class="pf-v5-c-menu-toggle"
1495
+ type="button"
1496
+ aria-expanded="false"
1497
+ >
1498
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1499
+ <span class="pf-v5-c-menu-toggle__controls">
1500
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1501
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1502
+ </span>
1503
+ </span>
1504
+ </button>
1505
+ </div>
1506
+
1083
1507
  <div
1084
- 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"
1508
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
1085
1509
  >
1086
1510
  <div
1087
1511
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1093,7 +1517,9 @@ section: components
1093
1517
  aria-expanded="false"
1094
1518
  aria-label="Application launcher"
1095
1519
  >
1096
- <i class="fas fa-th" aria-hidden="true"></i>
1520
+ <span class="pf-v5-c-menu-toggle__icon">
1521
+ <i class="fas fa-th" aria-hidden="true"></i>
1522
+ </span>
1097
1523
  </button>
1098
1524
  </div>
1099
1525
  <div class="pf-v5-c-toolbar__item">
@@ -1103,7 +1529,9 @@ section: components
1103
1529
  aria-expanded="false"
1104
1530
  aria-label="Settings"
1105
1531
  >
1106
- <i class="fas fa-cog" aria-hidden="true"></i>
1532
+ <span class="pf-v5-c-menu-toggle__icon">
1533
+ <i class="fas fa-cog" aria-hidden="true"></i>
1534
+ </span>
1107
1535
  </button>
1108
1536
  </div>
1109
1537
  <div class="pf-v5-c-toolbar__item">
@@ -1113,7 +1541,9 @@ section: components
1113
1541
  aria-expanded="false"
1114
1542
  aria-label="Help"
1115
1543
  >
1116
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1544
+ <span class="pf-v5-c-menu-toggle__icon">
1545
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
1546
+ </span>
1117
1547
  </button>
1118
1548
  </div>
1119
1549
  </div>
@@ -1124,31 +1554,12 @@ section: components
1124
1554
  aria-expanded="false"
1125
1555
  aria-label="Actions"
1126
1556
  >
1127
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1557
+ <span class="pf-v5-c-menu-toggle__icon">
1558
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1559
+ </span>
1128
1560
  </button>
1129
1561
  </div>
1130
1562
  </div>
1131
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1132
- <button
1133
- class="pf-v5-c-menu-toggle pf-m-full-height"
1134
- type="button"
1135
- aria-expanded="false"
1136
- >
1137
- <span class="pf-v5-c-menu-toggle__icon">
1138
- <img
1139
- class="pf-v5-c-avatar"
1140
- alt="Avatar image"
1141
- src="/assets/images/img_avatar-light.svg"
1142
- />
1143
- </span>
1144
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1145
- <span class="pf-v5-c-menu-toggle__controls">
1146
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1147
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1148
- </span>
1149
- </span>
1150
- </button>
1151
- </div>
1152
1563
  </div>
1153
1564
  </div>
1154
1565
  </div>
@@ -1162,13 +1573,11 @@ section: components
1162
1573
  aria-label="Global"
1163
1574
  >
1164
1575
  <ul class="pf-v5-c-nav__list" role="list">
1165
- <li
1166
- class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded pf-m-current"
1167
- >
1576
+ <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
1168
1577
  <button
1169
1578
  class="pf-v5-c-nav__link"
1170
- id="nav-horizontal-subnav-example-expandable-nav-link1"
1171
1579
  aria-expanded="true"
1580
+ id="nav-horizontal-subnav-example-expandable-nav-link1"
1172
1581
  >
1173
1582
  System panel
1174
1583
  <span class="pf-v5-c-nav__toggle">
@@ -1195,8 +1604,6 @@ section: components
1195
1604
  <li class="pf-v5-c-nav__item">
1196
1605
  <a href="#" class="pf-v5-c-nav__link">Hypervisors</a>
1197
1606
  </li>
1198
- <li class="pf-v5-c-divider" role="separator"></li>
1199
-
1200
1607
  <li class="pf-v5-c-nav__item">
1201
1608
  <a href="#" class="pf-v5-c-nav__link">Instances</a>
1202
1609
  </li>
@@ -1212,8 +1619,8 @@ section: components
1212
1619
  <li class="pf-v5-c-nav__item pf-m-expandable">
1213
1620
  <button
1214
1621
  class="pf-v5-c-nav__link"
1215
- id="nav-horizontal-subnav-example-expandable-nav-link2"
1216
1622
  aria-expanded="false"
1623
+ id="nav-horizontal-subnav-example-expandable-nav-link2"
1217
1624
  >
1218
1625
  Policy
1219
1626
  <span class="pf-v5-c-nav__toggle">
@@ -1240,8 +1647,8 @@ section: components
1240
1647
  <li class="pf-v5-c-nav__item pf-m-expandable">
1241
1648
  <button
1242
1649
  class="pf-v5-c-nav__link"
1243
- id="nav-horizontal-subnav-example-expandable-nav-link3"
1244
1650
  aria-expanded="false"
1651
+ id="nav-horizontal-subnav-example-expandable-nav-link3"
1245
1652
  >
1246
1653
  Authentication
1247
1654
  <span class="pf-v5-c-nav__toggle">
@@ -1384,37 +1791,135 @@ section: components
1384
1791
  </span>
1385
1792
  <div class="pf-v5-c-masthead__main">
1386
1793
  <a class="pf-v5-c-masthead__brand" href="#">
1387
- <img
1388
- class="pf-v5-c-brand"
1389
- src="/assets/images/pf-logo.svg"
1390
- alt="PatternFly logo"
1391
- style="--pf-v5-c-brand--Height:36px"
1392
- />
1794
+ <svg height="40px" viewBox="0 0 679 158">
1795
+ <title>PF-HorizontalLogo-Color</title>
1796
+ <defs>
1797
+ <linearGradient
1798
+ x1="68%"
1799
+ y1="2.25860997e-13%"
1800
+ x2="32%"
1801
+ y2="100%"
1802
+ id="linearGradient-nav-horizontal-example-masthead"
1803
+ >
1804
+ <stop stop-color="#2B9AF3" offset="0%" />
1805
+ <stop
1806
+ stop-color="#73BCF7"
1807
+ stop-opacity="0.502212631"
1808
+ offset="100%"
1809
+ />
1810
+ </linearGradient>
1811
+ </defs>
1812
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1813
+ <g
1814
+ transform="translate(206.000000, 45.750000)"
1815
+ fill="var(--pf-t--global--text--color--regular)"
1816
+ fill-rule="nonzero"
1817
+ >
1818
+ <path
1819
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
1820
+ />
1821
+ <path
1822
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
1823
+ />
1824
+ <path
1825
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
1826
+ />
1827
+ <path
1828
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
1829
+ />
1830
+ <path
1831
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
1832
+ />
1833
+ <path
1834
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
1835
+ />
1836
+ <path
1837
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
1838
+ />
1839
+ <polygon
1840
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
1841
+ />
1842
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1843
+ <path
1844
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
1845
+ />
1846
+ </g>
1847
+ <g transform="translate(0.000000, 0.000000)">
1848
+ <path
1849
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
1850
+ fill="#0066CC"
1851
+ />
1852
+ <path
1853
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1854
+ fill="url(#linearGradient-nav-horizontal-example-masthead)"
1855
+ />
1856
+ <path
1857
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1858
+ fill="url(#linearGradient-nav-horizontal-example-masthead)"
1859
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1860
+ />
1861
+ </g>
1862
+ </g>
1863
+ </svg>
1393
1864
  </a>
1394
1865
  </div>
1395
1866
  <div class="pf-v5-c-masthead__content">
1396
1867
  <div
1397
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
1868
+ class="pf-v5-c-toolbar pf-m-static"
1398
1869
  id="nav-horizontal-example-masthead-toolbar"
1399
1870
  >
1400
1871
  <div class="pf-v5-c-toolbar__content">
1401
1872
  <div class="pf-v5-c-toolbar__content-section">
1873
+ <div class="pf-v5-c-toolbar__item">
1874
+ <button
1875
+ class="pf-v5-c-menu-toggle"
1876
+ type="button"
1877
+ aria-expanded="false"
1878
+ >
1879
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1880
+ <span class="pf-v5-c-menu-toggle__controls">
1881
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1882
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1883
+ </span>
1884
+ </span>
1885
+ </button>
1886
+ </div>
1887
+
1888
+ <div class="pf-v5-c-toolbar__item">
1889
+ <button
1890
+ class="pf-v5-c-menu-toggle"
1891
+ type="button"
1892
+ aria-expanded="false"
1893
+ >
1894
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1895
+ <span class="pf-v5-c-menu-toggle__controls">
1896
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1897
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1898
+ </span>
1899
+ </span>
1900
+ </button>
1901
+ </div>
1902
+
1402
1903
  <div
1403
1904
  class="pf-v5-c-toolbar__item pf-m-overflow-container"
1404
1905
  style="--pf-v5-c-toolbar__item--MinWidth: 18ch;"
1405
1906
  >
1406
1907
  <nav
1407
- class="pf-v5-c-nav pf-m-horizontal pf-m-scrollable"
1408
- id="-horizontal-nav"
1908
+ class="pf-v5-c-nav pf-m-scrollable pf-m-horizontal"
1909
+ id="nav-horizontal-example-masthead-horizontal-nav"
1409
1910
  aria-label="Global"
1410
1911
  >
1411
- <button
1412
- class="pf-v5-c-nav__scroll-button"
1413
- disabled
1414
- aria-label="Scroll left"
1415
- >
1416
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1417
- </button>
1912
+ <div class="pf-v5-c-nav__scroll-button">
1913
+ <button
1914
+ class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
1915
+ type="button"
1916
+ aria-label="Scroll start"
1917
+ >
1918
+ <span class="pf-v5-c-button__icon">
1919
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1920
+ </span>
1921
+ </button>
1922
+ </div>
1418
1923
  <ul class="pf-v5-c-nav__list" role="list">
1419
1924
  <li class="pf-v5-c-nav__item">
1420
1925
  <a href="#" class="pf-v5-c-nav__link">Horizontal nav item 1</a>
@@ -1436,16 +1941,21 @@ section: components
1436
1941
  >Horizontal nav item 5</a>
1437
1942
  </li>
1438
1943
  </ul>
1439
- <button
1440
- class="pf-v5-c-nav__scroll-button"
1441
- aria-label="Scroll right"
1442
- >
1443
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1444
- </button>
1944
+ <div class="pf-v5-c-nav__scroll-button">
1945
+ <button
1946
+ class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
1947
+ type="button"
1948
+ aria-label="Scroll end"
1949
+ >
1950
+ <span class="pf-v5-c-button__icon">
1951
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1952
+ </span>
1953
+ </button>
1954
+ </div>
1445
1955
  </nav>
1446
1956
  </div>
1447
1957
  <div
1448
- 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"
1958
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
1449
1959
  >
1450
1960
  <div
1451
1961
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1457,7 +1967,9 @@ section: components
1457
1967
  aria-expanded="false"
1458
1968
  aria-label="Application launcher"
1459
1969
  >
1460
- <i class="fas fa-th" aria-hidden="true"></i>
1970
+ <span class="pf-v5-c-menu-toggle__icon">
1971
+ <i class="fas fa-th" aria-hidden="true"></i>
1972
+ </span>
1461
1973
  </button>
1462
1974
  </div>
1463
1975
  <div class="pf-v5-c-toolbar__item">
@@ -1467,7 +1979,9 @@ section: components
1467
1979
  aria-expanded="false"
1468
1980
  aria-label="Settings"
1469
1981
  >
1470
- <i class="fas fa-cog" aria-hidden="true"></i>
1982
+ <span class="pf-v5-c-menu-toggle__icon">
1983
+ <i class="fas fa-cog" aria-hidden="true"></i>
1984
+ </span>
1471
1985
  </button>
1472
1986
  </div>
1473
1987
  <div class="pf-v5-c-toolbar__item">
@@ -1477,7 +1991,9 @@ section: components
1477
1991
  aria-expanded="false"
1478
1992
  aria-label="Help"
1479
1993
  >
1480
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1994
+ <span class="pf-v5-c-menu-toggle__icon">
1995
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
1996
+ </span>
1481
1997
  </button>
1482
1998
  </div>
1483
1999
  </div>
@@ -1488,31 +2004,12 @@ section: components
1488
2004
  aria-expanded="false"
1489
2005
  aria-label="Actions"
1490
2006
  >
1491
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2007
+ <span class="pf-v5-c-menu-toggle__icon">
2008
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2009
+ </span>
1492
2010
  </button>
1493
2011
  </div>
1494
2012
  </div>
1495
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1496
- <button
1497
- class="pf-v5-c-menu-toggle pf-m-full-height"
1498
- type="button"
1499
- aria-expanded="false"
1500
- >
1501
- <span class="pf-v5-c-menu-toggle__icon">
1502
- <img
1503
- class="pf-v5-c-avatar"
1504
- alt="Avatar image"
1505
- src="/assets/images/img_avatar-light.svg"
1506
- />
1507
- </span>
1508
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1509
- <span class="pf-v5-c-menu-toggle__controls">
1510
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1511
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1512
- </span>
1513
- </span>
1514
- </button>
1515
- </div>
1516
2013
  </div>
1517
2014
  </div>
1518
2015
  </div>
@@ -1523,19 +2020,23 @@ section: components
1523
2020
  tabindex="-1"
1524
2021
  id="main-content-nav-horizontal-example"
1525
2022
  >
1526
- <section class="pf-v5-c-page__main-subnav pf-m-limit-width">
2023
+ <section class="pf-v5-c-page__main-nav pf-m-limit-width">
1527
2024
  <div class="pf-v5-c-page__main-body">
1528
2025
  <nav
1529
- class="pf-v5-c-nav pf-m-horizontal-subnav pf-m-scrollable"
2026
+ class="pf-v5-c-nav pf-m-scrollable pf-m-horizontal pf-m-subnav"
1530
2027
  aria-label="Local"
1531
2028
  >
1532
- <button
1533
- class="pf-v5-c-nav__scroll-button"
1534
- disabled
1535
- aria-label="Scroll left"
1536
- >
1537
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1538
- </button>
2029
+ <div class="pf-v5-c-nav__scroll-button">
2030
+ <button
2031
+ class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
2032
+ type="button"
2033
+ aria-label="Scroll start"
2034
+ >
2035
+ <span class="pf-v5-c-button__icon">
2036
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
2037
+ </span>
2038
+ </button>
2039
+ </div>
1539
2040
  <ul class="pf-v5-c-nav__list" role="list">
1540
2041
  <li class="pf-v5-c-nav__item">
1541
2042
  <a
@@ -1557,684 +2058,20 @@ section: components
1557
2058
  <a href="#" class="pf-v5-c-nav__link">Horizontal subnav item 5</a>
1558
2059
  </li>
1559
2060
  </ul>
1560
- <button class="pf-v5-c-nav__scroll-button" aria-label="Scroll right">
1561
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1562
- </button>
1563
- </nav>
1564
- </div>
1565
- </section>
1566
- <section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
1567
- <div class="pf-v5-c-page__main-body">
1568
- <nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
1569
- <ol class="pf-v5-c-breadcrumb__list" role="list">
1570
- <li class="pf-v5-c-breadcrumb__item">
1571
- <a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
1572
- </li>
1573
- <li class="pf-v5-c-breadcrumb__item">
1574
- <span class="pf-v5-c-breadcrumb__item-divider">
1575
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1576
- </span>
1577
-
1578
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
1579
- </li>
1580
- <li class="pf-v5-c-breadcrumb__item">
1581
- <span class="pf-v5-c-breadcrumb__item-divider">
1582
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1583
- </span>
1584
-
1585
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
1586
- </li>
1587
- <li class="pf-v5-c-breadcrumb__item">
1588
- <span class="pf-v5-c-breadcrumb__item-divider">
2061
+ <div class="pf-v5-c-nav__scroll-button">
2062
+ <button
2063
+ class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
2064
+ type="button"
2065
+ aria-label="Scroll end"
2066
+ >
2067
+ <span class="pf-v5-c-button__icon">
1589
2068
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1590
2069
  </span>
1591
-
1592
- <a
1593
- href="#"
1594
- class="pf-v5-c-breadcrumb__link pf-m-current"
1595
- aria-current="page"
1596
- >Section landing</a>
1597
- </li>
1598
- </ol>
1599
- </nav>
1600
- </div>
1601
- </section>
1602
- <section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
1603
- <div class="pf-v5-c-page__main-body">
1604
- <div class="pf-v5-c-content">
1605
- <h1>Main title</h1>
1606
- <p>This is a full page demo.</p>
1607
- </div>
1608
- </div>
1609
- </section>
1610
- <section class="pf-v5-c-page__main-section pf-m-limit-width">
1611
- <div class="pf-v5-c-page__main-body">
1612
- <div class="pf-v5-l-gallery pf-m-gutter">
1613
- <div class="pf-v5-c-card">
1614
- <div class="pf-v5-c-card__body">This is a card</div>
1615
- </div>
1616
- <div class="pf-v5-c-card">
1617
- <div class="pf-v5-c-card__body">This is a card</div>
1618
- </div>
1619
- <div class="pf-v5-c-card">
1620
- <div class="pf-v5-c-card__body">This is a card</div>
1621
- </div>
1622
- <div class="pf-v5-c-card">
1623
- <div class="pf-v5-c-card__body">This is a card</div>
1624
- </div>
1625
- <div class="pf-v5-c-card">
1626
- <div class="pf-v5-c-card__body">This is a card</div>
1627
- </div>
1628
- <div class="pf-v5-c-card">
1629
- <div class="pf-v5-c-card__body">This is a card</div>
1630
- </div>
1631
- <div class="pf-v5-c-card">
1632
- <div class="pf-v5-c-card__body">This is a card</div>
1633
- </div>
1634
- <div class="pf-v5-c-card">
1635
- <div class="pf-v5-c-card__body">This is a card</div>
1636
- </div>
1637
- <div class="pf-v5-c-card">
1638
- <div class="pf-v5-c-card__body">This is a card</div>
1639
- </div>
1640
- <div class="pf-v5-c-card">
1641
- <div class="pf-v5-c-card__body">This is a card</div>
2070
+ </button>
1642
2071
  </div>
1643
- </div>
2072
+ </nav>
1644
2073
  </div>
1645
2074
  </section>
1646
- </main>
1647
- </div>
1648
-
1649
- ```
1650
-
1651
- ### Tertiary nav
1652
-
1653
- ```html isFullscreen isDeprecated
1654
- <div class="pf-v5-c-page" id="nav-legacy-teriary-example">
1655
- <div class="pf-v5-c-skip-to-content">
1656
- <a
1657
- class="pf-v5-c-button pf-m-primary"
1658
- href="#main-content-nav-legacy-teriary-example"
1659
- >Skip to content</a>
1660
- </div>
1661
- <header class="pf-v5-c-masthead" id="nav-legacy-teriary-example-masthead">
1662
- <span class="pf-v5-c-masthead__toggle">
1663
- <button
1664
- class="pf-v5-c-button pf-m-plain"
1665
- type="button"
1666
- aria-label="Global navigation"
1667
- >
1668
- <i class="fas fa-bars" aria-hidden="true"></i>
1669
- </button>
1670
- </span>
1671
- <div class="pf-v5-c-masthead__main">
1672
- <a class="pf-v5-c-masthead__brand" href="#">
1673
- <img
1674
- class="pf-v5-c-brand"
1675
- src="/assets/images/pf-logo.svg"
1676
- alt="PatternFly logo"
1677
- style="--pf-v5-c-brand--Height:36px"
1678
- />
1679
- </a>
1680
- </div>
1681
- <div class="pf-v5-c-masthead__content">
1682
- <div
1683
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
1684
- id="nav-legacy-teriary-example-masthead-toolbar"
1685
- >
1686
- <div class="pf-v5-c-toolbar__content">
1687
- <div class="pf-v5-c-toolbar__content-section">
1688
- <div
1689
- 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"
1690
- >
1691
- <div
1692
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
1693
- >
1694
- <div class="pf-v5-c-toolbar__item">
1695
- <button
1696
- class="pf-v5-c-menu-toggle pf-m-plain"
1697
- type="button"
1698
- aria-expanded="false"
1699
- aria-label="Application launcher"
1700
- >
1701
- <i class="fas fa-th" aria-hidden="true"></i>
1702
- </button>
1703
- </div>
1704
- <div class="pf-v5-c-toolbar__item">
1705
- <button
1706
- class="pf-v5-c-menu-toggle pf-m-plain"
1707
- type="button"
1708
- aria-expanded="false"
1709
- aria-label="Settings"
1710
- >
1711
- <i class="fas fa-cog" aria-hidden="true"></i>
1712
- </button>
1713
- </div>
1714
- <div class="pf-v5-c-toolbar__item">
1715
- <button
1716
- class="pf-v5-c-menu-toggle pf-m-plain"
1717
- type="button"
1718
- aria-expanded="false"
1719
- aria-label="Help"
1720
- >
1721
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1722
- </button>
1723
- </div>
1724
- </div>
1725
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
1726
- <button
1727
- class="pf-v5-c-menu-toggle pf-m-plain"
1728
- type="button"
1729
- aria-expanded="false"
1730
- aria-label="Actions"
1731
- >
1732
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1733
- </button>
1734
- </div>
1735
- </div>
1736
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1737
- <button
1738
- class="pf-v5-c-menu-toggle pf-m-full-height"
1739
- type="button"
1740
- aria-expanded="false"
1741
- >
1742
- <span class="pf-v5-c-menu-toggle__icon">
1743
- <img
1744
- class="pf-v5-c-avatar"
1745
- alt="Avatar image"
1746
- src="/assets/images/img_avatar-light.svg"
1747
- />
1748
- </span>
1749
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1750
- <span class="pf-v5-c-menu-toggle__controls">
1751
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1752
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1753
- </span>
1754
- </span>
1755
- </button>
1756
- </div>
1757
- </div>
1758
- </div>
1759
- </div>
1760
- </div>
1761
- </header>
1762
- <div class="pf-v5-c-page__sidebar">
1763
- <div class="pf-v5-c-page__sidebar-body">
1764
- <nav
1765
- class="pf-v5-c-nav"
1766
- id="nav-legacy-teriary-example-expandable-nav"
1767
- aria-label="Global"
1768
- >
1769
- <ul class="pf-v5-c-nav__list" role="list">
1770
- <li
1771
- class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded pf-m-current"
1772
- >
1773
- <button
1774
- class="pf-v5-c-nav__link"
1775
- id="nav-legacy-teriary-example-expandable-nav-link1"
1776
- aria-expanded="true"
1777
- >
1778
- System panel
1779
- <span class="pf-v5-c-nav__toggle">
1780
- <span class="pf-v5-c-nav__toggle-icon">
1781
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1782
- </span>
1783
- </span>
1784
- </button>
1785
- <section
1786
- class="pf-v5-c-nav__subnav"
1787
- aria-labelledby="nav-legacy-teriary-example-expandable-nav-link1"
1788
- >
1789
- <ul class="pf-v5-c-nav__list" role="list">
1790
- <li class="pf-v5-c-nav__item">
1791
- <a href="#" class="pf-v5-c-nav__link">Overview</a>
1792
- </li>
1793
- <li class="pf-v5-c-nav__item">
1794
- <a
1795
- href="#"
1796
- class="pf-v5-c-nav__link pf-m-current"
1797
- aria-current="page"
1798
- >Resource usage</a>
1799
- </li>
1800
- <li class="pf-v5-c-nav__item">
1801
- <a href="#" class="pf-v5-c-nav__link">Hypervisors</a>
1802
- </li>
1803
- <li class="pf-v5-c-divider" role="separator"></li>
1804
-
1805
- <li class="pf-v5-c-nav__item">
1806
- <a href="#" class="pf-v5-c-nav__link">Instances</a>
1807
- </li>
1808
- <li class="pf-v5-c-nav__item">
1809
- <a href="#" class="pf-v5-c-nav__link">Volumes</a>
1810
- </li>
1811
- <li class="pf-v5-c-nav__item">
1812
- <a href="#" class="pf-v5-c-nav__link">Networks</a>
1813
- </li>
1814
- </ul>
1815
- </section>
1816
- </li>
1817
- <li class="pf-v5-c-nav__item pf-m-expandable">
1818
- <button
1819
- class="pf-v5-c-nav__link"
1820
- id="nav-legacy-teriary-example-expandable-nav-link2"
1821
- aria-expanded="false"
1822
- >
1823
- Policy
1824
- <span class="pf-v5-c-nav__toggle">
1825
- <span class="pf-v5-c-nav__toggle-icon">
1826
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1827
- </span>
1828
- </span>
1829
- </button>
1830
- <section
1831
- class="pf-v5-c-nav__subnav"
1832
- aria-labelledby="nav-legacy-teriary-example-expandable-nav-link2"
1833
- hidden
1834
- >
1835
- <ul class="pf-v5-c-nav__list" role="list">
1836
- <li class="pf-v5-c-nav__item">
1837
- <a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
1838
- </li>
1839
- <li class="pf-v5-c-nav__item">
1840
- <a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
1841
- </li>
1842
- </ul>
1843
- </section>
1844
- </li>
1845
- <li class="pf-v5-c-nav__item pf-m-expandable">
1846
- <button
1847
- class="pf-v5-c-nav__link"
1848
- id="nav-legacy-teriary-example-expandable-nav-link3"
1849
- aria-expanded="false"
1850
- >
1851
- Authentication
1852
- <span class="pf-v5-c-nav__toggle">
1853
- <span class="pf-v5-c-nav__toggle-icon">
1854
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1855
- </span>
1856
- </span>
1857
- </button>
1858
- <section
1859
- class="pf-v5-c-nav__subnav"
1860
- aria-labelledby="nav-legacy-teriary-example-expandable-nav-link3"
1861
- hidden
1862
- >
1863
- <ul class="pf-v5-c-nav__list" role="list">
1864
- <li class="pf-v5-c-nav__item">
1865
- <a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
1866
- </li>
1867
- <li class="pf-v5-c-nav__item">
1868
- <a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
1869
- </li>
1870
- </ul>
1871
- </section>
1872
- </li>
1873
- </ul>
1874
- </nav>
1875
- </div>
1876
- </div>
1877
- <main
1878
- class="pf-v5-c-page__main"
1879
- tabindex="-1"
1880
- id="main-content-nav-legacy-teriary-example"
1881
- >
1882
- <section class="pf-v5-c-page__main-nav pf-m-limit-width">
1883
- <div class="pf-v5-c-page__main-body">
1884
- <nav
1885
- class="pf-v5-c-nav pf-m-horizontal pf-m-tertiary pf-m-scrollable"
1886
- aria-label="Local"
1887
- >
1888
- <button
1889
- class="pf-v5-c-nav__scroll-button"
1890
- disabled
1891
- aria-label="Scroll left"
1892
- >
1893
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1894
- </button>
1895
- <ul class="pf-v5-c-nav__list" role="list">
1896
- <li class="pf-v5-c-nav__item">
1897
- <a
1898
- href="#"
1899
- class="pf-v5-c-nav__link pf-m-current"
1900
- aria-current="page"
1901
- >Tertiary nav item 1</a>
1902
- </li>
1903
- <li class="pf-v5-c-nav__item">
1904
- <a href="#" class="pf-v5-c-nav__link">Tertiary nav item 2</a>
1905
- </li>
1906
- <li class="pf-v5-c-nav__item">
1907
- <a href="#" class="pf-v5-c-nav__link">Tertiary nav item 3</a>
1908
- </li>
1909
- <li class="pf-v5-c-nav__item">
1910
- <a href="#" class="pf-v5-c-nav__link">Tertiary nav item 4</a>
1911
- </li>
1912
- <li class="pf-v5-c-nav__item">
1913
- <a href="#" class="pf-v5-c-nav__link">Tertiary nav item 5</a>
1914
- </li>
1915
- </ul>
1916
- <button class="pf-v5-c-nav__scroll-button" aria-label="Scroll right">
1917
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1918
- </button>
1919
- </nav>
1920
- </div>
1921
- </section>
1922
- <section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
1923
- <div class="pf-v5-c-page__main-body">
1924
- <nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
1925
- <ol class="pf-v5-c-breadcrumb__list" role="list">
1926
- <li class="pf-v5-c-breadcrumb__item">
1927
- <a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
1928
- </li>
1929
- <li class="pf-v5-c-breadcrumb__item">
1930
- <span class="pf-v5-c-breadcrumb__item-divider">
1931
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1932
- </span>
1933
-
1934
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
1935
- </li>
1936
- <li class="pf-v5-c-breadcrumb__item">
1937
- <span class="pf-v5-c-breadcrumb__item-divider">
1938
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1939
- </span>
1940
-
1941
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
1942
- </li>
1943
- <li class="pf-v5-c-breadcrumb__item">
1944
- <span class="pf-v5-c-breadcrumb__item-divider">
1945
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1946
- </span>
1947
-
1948
- <a
1949
- href="#"
1950
- class="pf-v5-c-breadcrumb__link pf-m-current"
1951
- aria-current="page"
1952
- >Section landing</a>
1953
- </li>
1954
- </ol>
1955
- </nav>
1956
- </div>
1957
- </section>
1958
- <section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
1959
- <div class="pf-v5-c-page__main-body">
1960
- <div class="pf-v5-c-content">
1961
- <h1>Main title</h1>
1962
- <p>This is a full page demo.</p>
1963
- </div>
1964
- </div>
1965
- </section>
1966
- <section class="pf-v5-c-page__main-section pf-m-limit-width">
1967
- <div class="pf-v5-c-page__main-body">
1968
- <div class="pf-v5-l-gallery pf-m-gutter">
1969
- <div class="pf-v5-c-card">
1970
- <div class="pf-v5-c-card__body">This is a card</div>
1971
- </div>
1972
- <div class="pf-v5-c-card">
1973
- <div class="pf-v5-c-card__body">This is a card</div>
1974
- </div>
1975
- <div class="pf-v5-c-card">
1976
- <div class="pf-v5-c-card__body">This is a card</div>
1977
- </div>
1978
- <div class="pf-v5-c-card">
1979
- <div class="pf-v5-c-card__body">This is a card</div>
1980
- </div>
1981
- <div class="pf-v5-c-card">
1982
- <div class="pf-v5-c-card__body">This is a card</div>
1983
- </div>
1984
- <div class="pf-v5-c-card">
1985
- <div class="pf-v5-c-card__body">This is a card</div>
1986
- </div>
1987
- <div class="pf-v5-c-card">
1988
- <div class="pf-v5-c-card__body">This is a card</div>
1989
- </div>
1990
- <div class="pf-v5-c-card">
1991
- <div class="pf-v5-c-card__body">This is a card</div>
1992
- </div>
1993
- <div class="pf-v5-c-card">
1994
- <div class="pf-v5-c-card__body">This is a card</div>
1995
- </div>
1996
- <div class="pf-v5-c-card">
1997
- <div class="pf-v5-c-card__body">This is a card</div>
1998
- </div>
1999
- </div>
2000
- </div>
2001
- </section>
2002
- </main>
2003
- </div>
2004
-
2005
- ```
2006
-
2007
- ### Light theme sidebar and nav
2008
-
2009
- ```html isFullscreen isDeprecated
2010
- <div class="pf-v5-c-page" id="nav-light-theme-example">
2011
- <div class="pf-v5-c-skip-to-content">
2012
- <a
2013
- class="pf-v5-c-button pf-m-primary"
2014
- href="#main-content-nav-light-theme-example"
2015
- >Skip to content</a>
2016
- </div>
2017
- <header class="pf-v5-c-masthead" id="nav-light-theme-example-masthead">
2018
- <span class="pf-v5-c-masthead__toggle">
2019
- <button
2020
- class="pf-v5-c-button pf-m-plain"
2021
- type="button"
2022
- aria-label="Global navigation"
2023
- >
2024
- <i class="fas fa-bars" aria-hidden="true"></i>
2025
- </button>
2026
- </span>
2027
- <div class="pf-v5-c-masthead__main">
2028
- <a class="pf-v5-c-masthead__brand" href="#">
2029
- <img
2030
- class="pf-v5-c-brand"
2031
- src="/assets/images/pf-logo.svg"
2032
- alt="PatternFly logo"
2033
- style="--pf-v5-c-brand--Height:36px"
2034
- />
2035
- </a>
2036
- </div>
2037
- <div class="pf-v5-c-masthead__content">
2038
- <div
2039
- class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
2040
- id="nav-light-theme-example-masthead-toolbar"
2041
- >
2042
- <div class="pf-v5-c-toolbar__content">
2043
- <div class="pf-v5-c-toolbar__content-section">
2044
- <div
2045
- 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"
2046
- >
2047
- <div
2048
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
2049
- >
2050
- <div class="pf-v5-c-toolbar__item">
2051
- <button
2052
- class="pf-v5-c-menu-toggle pf-m-plain"
2053
- type="button"
2054
- aria-expanded="false"
2055
- aria-label="Application launcher"
2056
- >
2057
- <i class="fas fa-th" aria-hidden="true"></i>
2058
- </button>
2059
- </div>
2060
- <div class="pf-v5-c-toolbar__item">
2061
- <button
2062
- class="pf-v5-c-menu-toggle pf-m-plain"
2063
- type="button"
2064
- aria-expanded="false"
2065
- aria-label="Settings"
2066
- >
2067
- <i class="fas fa-cog" aria-hidden="true"></i>
2068
- </button>
2069
- </div>
2070
- <div class="pf-v5-c-toolbar__item">
2071
- <button
2072
- class="pf-v5-c-menu-toggle pf-m-plain"
2073
- type="button"
2074
- aria-expanded="false"
2075
- aria-label="Help"
2076
- >
2077
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2078
- </button>
2079
- </div>
2080
- </div>
2081
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
2082
- <button
2083
- class="pf-v5-c-menu-toggle pf-m-plain"
2084
- type="button"
2085
- aria-expanded="false"
2086
- aria-label="Actions"
2087
- >
2088
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2089
- </button>
2090
- </div>
2091
- </div>
2092
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
2093
- <button
2094
- class="pf-v5-c-menu-toggle pf-m-full-height"
2095
- type="button"
2096
- aria-expanded="false"
2097
- >
2098
- <span class="pf-v5-c-menu-toggle__icon">
2099
- <img
2100
- class="pf-v5-c-avatar"
2101
- alt="Avatar image"
2102
- src="/assets/images/img_avatar-light.svg"
2103
- />
2104
- </span>
2105
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
2106
- <span class="pf-v5-c-menu-toggle__controls">
2107
- <span class="pf-v5-c-menu-toggle__toggle-icon">
2108
- <i class="fas fa-angle-down" aria-hidden="true"></i>
2109
- </span>
2110
- </span>
2111
- </button>
2112
- </div>
2113
- </div>
2114
- </div>
2115
- </div>
2116
- </div>
2117
- </header>
2118
- <div class="pf-v5-c-page__sidebar pf-m-light">
2119
- <div class="pf-v5-c-page__sidebar-body">
2120
- <nav
2121
- class="pf-v5-c-nav pf-m-light"
2122
- id="nav-light-theme-example-expandable-nav"
2123
- aria-label="Global"
2124
- >
2125
- <ul class="pf-v5-c-nav__list" role="list">
2126
- <li
2127
- class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded pf-m-current"
2128
- >
2129
- <button
2130
- class="pf-v5-c-nav__link"
2131
- id="nav-light-theme-example-expandable-nav-link1"
2132
- aria-expanded="true"
2133
- >
2134
- System panel
2135
- <span class="pf-v5-c-nav__toggle">
2136
- <span class="pf-v5-c-nav__toggle-icon">
2137
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2138
- </span>
2139
- </span>
2140
- </button>
2141
- <section
2142
- class="pf-v5-c-nav__subnav"
2143
- aria-labelledby="nav-light-theme-example-expandable-nav-link1"
2144
- >
2145
- <ul class="pf-v5-c-nav__list" role="list">
2146
- <li class="pf-v5-c-nav__item">
2147
- <a href="#" class="pf-v5-c-nav__link">Overview</a>
2148
- </li>
2149
- <li class="pf-v5-c-nav__item">
2150
- <a
2151
- href="#"
2152
- class="pf-v5-c-nav__link pf-m-current"
2153
- aria-current="page"
2154
- >Resource usage</a>
2155
- </li>
2156
- <li class="pf-v5-c-nav__item">
2157
- <a href="#" class="pf-v5-c-nav__link">Hypervisors</a>
2158
- </li>
2159
- <li class="pf-v5-c-divider" role="separator"></li>
2160
-
2161
- <li class="pf-v5-c-nav__item">
2162
- <a href="#" class="pf-v5-c-nav__link">Instances</a>
2163
- </li>
2164
- <li class="pf-v5-c-nav__item">
2165
- <a href="#" class="pf-v5-c-nav__link">Volumes</a>
2166
- </li>
2167
- <li class="pf-v5-c-nav__item">
2168
- <a href="#" class="pf-v5-c-nav__link">Networks</a>
2169
- </li>
2170
- </ul>
2171
- </section>
2172
- </li>
2173
- <li class="pf-v5-c-nav__item pf-m-expandable">
2174
- <button
2175
- class="pf-v5-c-nav__link"
2176
- id="nav-light-theme-example-expandable-nav-link2"
2177
- aria-expanded="false"
2178
- >
2179
- Policy
2180
- <span class="pf-v5-c-nav__toggle">
2181
- <span class="pf-v5-c-nav__toggle-icon">
2182
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2183
- </span>
2184
- </span>
2185
- </button>
2186
- <section
2187
- class="pf-v5-c-nav__subnav"
2188
- aria-labelledby="nav-light-theme-example-expandable-nav-link2"
2189
- hidden
2190
- >
2191
- <ul class="pf-v5-c-nav__list" role="list">
2192
- <li class="pf-v5-c-nav__item">
2193
- <a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
2194
- </li>
2195
- <li class="pf-v5-c-nav__item">
2196
- <a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
2197
- </li>
2198
- </ul>
2199
- </section>
2200
- </li>
2201
- <li class="pf-v5-c-nav__item pf-m-expandable">
2202
- <button
2203
- class="pf-v5-c-nav__link"
2204
- id="nav-light-theme-example-expandable-nav-link3"
2205
- aria-expanded="false"
2206
- >
2207
- Authentication
2208
- <span class="pf-v5-c-nav__toggle">
2209
- <span class="pf-v5-c-nav__toggle-icon">
2210
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2211
- </span>
2212
- </span>
2213
- </button>
2214
- <section
2215
- class="pf-v5-c-nav__subnav"
2216
- aria-labelledby="nav-light-theme-example-expandable-nav-link3"
2217
- hidden
2218
- >
2219
- <ul class="pf-v5-c-nav__list" role="list">
2220
- <li class="pf-v5-c-nav__item">
2221
- <a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
2222
- </li>
2223
- <li class="pf-v5-c-nav__item">
2224
- <a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
2225
- </li>
2226
- </ul>
2227
- </section>
2228
- </li>
2229
- </ul>
2230
- </nav>
2231
- </div>
2232
- </div>
2233
- <main
2234
- class="pf-v5-c-page__main"
2235
- tabindex="-1"
2236
- id="main-content-nav-light-theme-example"
2237
- >
2238
2075
  <section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
2239
2076
  <div class="pf-v5-c-page__main-body">
2240
2077
  <nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">