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

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 (259) hide show
  1. package/base/patternfly-common.css +10 -10
  2. package/base/patternfly-globals.css +3 -3
  3. package/base/patternfly-icons.css +1 -1
  4. package/base/patternfly-themes.css +53 -53
  5. package/base/patternfly-variables.css +236 -245
  6. package/base/tokens/_tokens-font.scss +0 -11
  7. package/components/AboutModalBox/about-modal-box.css +102 -102
  8. package/components/Accordion/accordion.css +118 -118
  9. package/components/ActionList/action-list.css +16 -16
  10. package/components/Alert/alert-group.css +50 -50
  11. package/components/Alert/alert.css +161 -161
  12. package/components/AppLauncher/app-launcher.css +167 -167
  13. package/components/Avatar/avatar.css +116 -116
  14. package/components/BackToTop/back-to-top.css +21 -21
  15. package/components/Backdrop/backdrop.css +9 -9
  16. package/components/BackgroundImage/background-image.css +15 -15
  17. package/components/Badge/badge.css +35 -35
  18. package/components/Banner/banner.css +114 -114
  19. package/components/Brand/brand.css +28 -28
  20. package/components/Breadcrumb/breadcrumb.css +62 -62
  21. package/components/Button/button.css +514 -514
  22. package/components/CalendarMonth/calendar-month.css +144 -144
  23. package/components/Card/card.css +230 -230
  24. package/components/Check/check.css +43 -43
  25. package/components/Chip/chip-group.css +60 -60
  26. package/components/Chip/chip.css +83 -83
  27. package/components/ClipboardCopy/clipboard-copy.css +71 -71
  28. package/components/CodeBlock/code-block.css +35 -35
  29. package/components/CodeEditor/code-editor.css +121 -121
  30. package/components/Content/content.css +216 -216
  31. package/components/ContextSelector/context-selector.css +251 -251
  32. package/components/DataList/data-list-grid.css +182 -182
  33. package/components/DataList/data-list.css +468 -468
  34. package/components/DatePicker/date-picker.css +35 -35
  35. package/components/DescriptionList/description-list-order.css +90 -90
  36. package/components/DescriptionList/description-list.css +193 -193
  37. package/components/Divider/divider.css +143 -143
  38. package/components/DragDrop/drag-drop.css +46 -46
  39. package/components/Drawer/drawer.css +474 -474
  40. package/components/Dropdown/dropdown.css +457 -457
  41. package/components/DualListSelector/dual-list-selector.css +199 -199
  42. package/components/EmptyState/empty-state.css +104 -104
  43. package/components/ExpandableSection/expandable-section.css +113 -113
  44. package/components/FileUpload/file-upload.css +32 -32
  45. package/components/Form/form.css +281 -281
  46. package/components/FormControl/form-control.css +197 -197
  47. package/components/HelperText/helper-text.css +51 -51
  48. package/components/Hint/hint.css +46 -46
  49. package/components/Icon/icon.css +218 -218
  50. package/components/InlineEdit/inline-edit.css +43 -43
  51. package/components/InputGroup/input-group.css +52 -52
  52. package/components/JumpLinks/jump-links.css +183 -183
  53. package/components/Label/label-group.css +86 -86
  54. package/components/Label/label.css +438 -438
  55. package/components/List/list.css +53 -53
  56. package/components/LogViewer/log-viewer.css +138 -138
  57. package/components/Login/login.css +139 -139
  58. package/components/Masthead/masthead.css +319 -319
  59. package/components/Menu/menu.css +415 -415
  60. package/components/MenuToggle/menu-toggle.css +275 -275
  61. package/components/ModalBox/modal-box.css +121 -121
  62. package/components/MultipleFileUpload/multiple-file-upload.css +163 -163
  63. package/components/Nav/nav.css +225 -225
  64. package/components/NotificationBadge/notification-badge.css +66 -66
  65. package/components/NotificationDrawer/notification-drawer.css +179 -179
  66. package/components/NumberInput/number-input.css +20 -20
  67. package/components/OptionsMenu/options-menu.css +190 -190
  68. package/components/OverflowMenu/overflow-menu.css +19 -19
  69. package/components/Page/page.css +598 -598
  70. package/components/Pagination/pagination.css +220 -220
  71. package/components/Panel/panel.css +72 -72
  72. package/components/Popover/popover.css +148 -148
  73. package/components/Progress/progress.css +80 -80
  74. package/components/ProgressStepper/progress-stepper.css +514 -514
  75. package/components/Radio/radio.css +44 -44
  76. package/components/Select/select.css +423 -423
  77. package/components/Sidebar/sidebar.css +166 -166
  78. package/components/SimpleList/simple-list.css +53 -53
  79. package/components/Skeleton/skeleton.css +112 -112
  80. package/components/SkipToContent/skip-to-content.css +8 -8
  81. package/components/Slider/slider.css +144 -144
  82. package/components/Spinner/spinner.css +36 -36
  83. package/components/Switch/switch.css +89 -89
  84. package/components/TabContent/tab-content.css +34 -34
  85. package/components/Table/table-grid.css +911 -911
  86. package/components/Table/table-scrollable.css +38 -38
  87. package/components/Table/table-tree-view.css +497 -497
  88. package/components/Table/table.css +660 -660
  89. package/components/Tabs/tabs.css +616 -616
  90. package/components/TextInputGroup/text-input-group.css +88 -88
  91. package/components/Tile/tile.css +68 -68
  92. package/components/Timestamp/timestamp.css +29 -29
  93. package/components/Title/title.css +87 -87
  94. package/components/ToggleGroup/toggle-group.css +86 -86
  95. package/components/Toolbar/toolbar.css +2279 -2279
  96. package/components/Tooltip/tooltip.css +85 -85
  97. package/components/TreeView/tree-view.css +363 -363
  98. package/components/Truncate/truncate.css +15 -15
  99. package/components/Wizard/wizard.css +272 -272
  100. package/docs/components/AboutModalBox/examples/AboutModalBox.md +11 -11
  101. package/docs/components/Accordion/examples/Accordion.md +188 -188
  102. package/docs/components/ActionList/examples/ActionList.md +55 -55
  103. package/docs/components/Alert/examples/Alert.md +222 -222
  104. package/docs/components/AppLauncher/deprecated/application-launcher.md +146 -146
  105. package/docs/components/Avatar/examples/Avatar.md +6 -6
  106. package/docs/components/BackToTop/examples/BackToTop.md +3 -3
  107. package/docs/components/Backdrop/examples/Backdrop.md +1 -1
  108. package/docs/components/BackgroundImage/examples/BackgroundImage.md +2 -2
  109. package/docs/components/Badge/examples/Badge.md +17 -17
  110. package/docs/components/Banner/examples/Banner.md +42 -42
  111. package/docs/components/Brand/examples/Brand.md +4 -4
  112. package/docs/components/Breadcrumb/examples/Breadcrumb.md +90 -90
  113. package/docs/components/Button/examples/Button.md +364 -364
  114. package/docs/components/CalendarMonth/examples/CalendarMonth.md +436 -436
  115. package/docs/components/Card/examples/Card.md +515 -515
  116. package/docs/components/Check/examples/Check.md +37 -37
  117. package/docs/components/Chip/examples/Chip.md +216 -216
  118. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +82 -82
  119. package/docs/components/CodeBlock/examples/CodeBlock.md +39 -39
  120. package/docs/components/CodeEditor/examples/CodeEditor.md +85 -85
  121. package/docs/components/Content/examples/Content.md +1 -1
  122. package/docs/components/ContextSelector/deprecated/context-selector.md +160 -160
  123. package/docs/components/DataList/examples/DataList.md +666 -666
  124. package/docs/components/DatePicker/examples/DatePicker.md +54 -54
  125. package/docs/components/DescriptionList/examples/DescriptionList.md +737 -737
  126. package/docs/components/Divider/examples/Divider.md +18 -18
  127. package/docs/components/DragDrop/examples/DragDrop.md +27 -27
  128. package/docs/components/Drawer/examples/Drawer.md +225 -225
  129. package/docs/components/Dropdown/deprecated/Dropdown.md +541 -541
  130. package/docs/components/DualListSelector/examples/DualListSelector.md +1012 -1012
  131. package/docs/components/EmptyState/examples/EmptyState.md +100 -100
  132. package/docs/components/ExpandableSection/examples/ExpandableSection.md +47 -47
  133. package/docs/components/FileUpload/examples/FileUpload.md +94 -94
  134. package/docs/components/Form/examples/Form.md +226 -226
  135. package/docs/components/FormControl/examples/FormControl.md +65 -65
  136. package/docs/components/HelperText/examples/HelperText.md +72 -72
  137. package/docs/components/Hint/examples/Hint.md +44 -44
  138. package/docs/components/Icon/examples/Icon.md +85 -85
  139. package/docs/components/InlineEdit/examples/InlineEdit.md +209 -209
  140. package/docs/components/InputGroup/examples/InputGroup.md +73 -73
  141. package/docs/components/JumpLinks/examples/JumpLinks.md +285 -285
  142. package/docs/components/Label/examples/Label.md +1717 -1717
  143. package/docs/components/List/examples/List.md +30 -30
  144. package/docs/components/LogViewer/examples/LogViewer.md +1785 -1785
  145. package/docs/components/Login/examples/Login.md +287 -287
  146. package/docs/components/Masthead/examples/masthead.md +39 -39
  147. package/docs/components/Menu/examples/Menu.md +2377 -2377
  148. package/docs/components/MenuToggle/examples/MenuToggle.md +242 -242
  149. package/docs/components/ModalBox/examples/ModalBox.md +119 -119
  150. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +192 -192
  151. package/docs/components/Nav/examples/Navigation.md +856 -856
  152. package/docs/components/NotificationBadge/examples/NotificationBadge.md +42 -42
  153. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +659 -659
  154. package/docs/components/NumberInput/examples/NumberInput.md +127 -127
  155. package/docs/components/OptionsMenu/deprecated/options-menu.md +178 -178
  156. package/docs/components/OverflowMenu/examples/overflow-menu.md +97 -97
  157. package/docs/components/Page/deprecated/PageHeader.md +85 -85
  158. package/docs/components/Page/examples/Page.md +90 -90
  159. package/docs/components/Pagination/examples/Pagination.md +285 -285
  160. package/docs/components/Panel/examples/Panel.md +38 -38
  161. package/docs/components/Popover/examples/Popover.md +169 -169
  162. package/docs/components/Progress/examples/Progress.md +145 -145
  163. package/docs/components/ProgressStepper/examples/ProgressStepper.md +295 -295
  164. package/docs/components/Radio/examples/Radio.md +33 -33
  165. package/docs/components/Select/deprecated/Select.md +736 -736
  166. package/docs/components/Sidebar/examples/Sidebar.md +65 -65
  167. package/docs/components/SimpleList/examples/SimpleList.md +39 -39
  168. package/docs/components/Skeleton/examples/Skeleton.md +29 -29
  169. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -3
  170. package/docs/components/Slider/examples/Slider.md +213 -213
  171. package/docs/components/Spinner/examples/Spinner.md +14 -14
  172. package/docs/components/Switch/examples/Switch.md +58 -58
  173. package/docs/components/TabContent/examples/TabContent.md +24 -24
  174. package/docs/components/Table/examples/Table.md +6982 -6982
  175. package/docs/components/Tabs/examples/Tabs.md +2114 -2114
  176. package/docs/components/TextInputGroup/examples/TextInputGroup.md +373 -373
  177. package/docs/components/Tile/examples/Tile.md +131 -131
  178. package/docs/components/Timestamp/examples/Timestamp.md +10 -10
  179. package/docs/components/Title/examples/Title.md +12 -12
  180. package/docs/components/ToggleGroup/examples/toggle-group.md +116 -116
  181. package/docs/components/Toolbar/examples/Toolbar.md +611 -611
  182. package/docs/components/Tooltip/examples/Tooltip.md +27 -27
  183. package/docs/components/TreeView/examples/TreeView.md +1166 -1166
  184. package/docs/components/Truncate/examples/Truncate.md +7 -7
  185. package/docs/components/Wizard/examples/Wizard.md +522 -522
  186. package/docs/demos/AboutModal/examples/AboutModal.md +106 -106
  187. package/docs/demos/Alert/examples/Alert.md +391 -391
  188. package/docs/demos/BackToTop/examples/BackToTop.md +175 -175
  189. package/docs/demos/Banner/examples/Banner.md +364 -364
  190. package/docs/demos/Button/examples/Button.md +50 -50
  191. package/docs/demos/Card/examples/Card.md +1054 -1054
  192. package/docs/demos/CardView/examples/CardView.md +378 -378
  193. package/docs/demos/ContextSelector/examples/ContextSelector.md +449 -449
  194. package/docs/demos/Dashboard/examples/Dashboard.md +541 -541
  195. package/docs/demos/DataList/examples/DataList.md +1148 -1148
  196. package/docs/demos/DescriptionList/examples/DescriptionList.md +544 -544
  197. package/docs/demos/Drawer/examples/Drawer.md +531 -531
  198. package/docs/demos/Form/examples/BasicForms.md +444 -444
  199. package/docs/demos/HelperText/examples/HelperText.md +51 -51
  200. package/docs/demos/JumpLinks/examples/JumpLinks.md +596 -596
  201. package/docs/demos/Masthead/examples/Masthead.md +763 -763
  202. package/docs/demos/Modal/examples/Modal.md +645 -645
  203. package/docs/demos/Nav/examples/Nav.md +649 -649
  204. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1570 -1570
  205. package/docs/demos/Page/examples/Page.md +1330 -1330
  206. package/docs/demos/Page/examples/Penta.md +217 -217
  207. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +23 -23
  208. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +108 -108
  209. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1890 -1890
  210. package/docs/demos/Skeleton/examples/Skeleton.md +176 -176
  211. package/docs/demos/Table/examples/Table.md +4580 -4580
  212. package/docs/demos/Tabs/examples/Tabs.md +1040 -1040
  213. package/docs/demos/Toolbar/examples/Toolbar.md +961 -961
  214. package/docs/demos/Wizard/examples/Wizard.md +1574 -1574
  215. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -2
  216. package/docs/layouts/Flex/examples/Flex.md +290 -290
  217. package/docs/layouts/Gallery/examples/Gallery.md +48 -48
  218. package/docs/layouts/Grid/examples/Grid.md +121 -121
  219. package/docs/layouts/Level/examples/Level.md +11 -11
  220. package/docs/layouts/Split/examples/Split.md +23 -23
  221. package/docs/layouts/Stack/examples/Stack.md +8 -8
  222. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -3
  223. package/docs/utilities/Alignment/examples/Alignment.md +4 -4
  224. package/docs/utilities/Display/examples/Display.md +16 -16
  225. package/docs/utilities/Flex/examples/Flex.md +53 -53
  226. package/docs/utilities/Float/examples/Float.md +2 -2
  227. package/docs/utilities/Spacing/examples/Spacing.md +16 -16
  228. package/layouts/Bullseye/bullseye.css +3 -3
  229. package/layouts/Flex/flex.css +1276 -1276
  230. package/layouts/Gallery/gallery.css +34 -34
  231. package/layouts/Grid/grid.css +531 -531
  232. package/layouts/Level/level.css +4 -4
  233. package/layouts/Split/split.css +6 -6
  234. package/layouts/Stack/stack.css +5 -5
  235. package/package.json +1 -1
  236. package/patternfly-addons.css +2989 -2989
  237. package/patternfly-base-no-globals-theme-dark-unversioned.css +269 -278
  238. package/patternfly-base-no-globals.css +284 -293
  239. package/patternfly-base-theme-dark-unversioned.css +271 -280
  240. package/patternfly-base.css +286 -295
  241. package/patternfly-charts-theme-dark-unversioned.css +66 -66
  242. package/patternfly-charts-theme-dark.css +66 -66
  243. package/patternfly-charts.css +320 -320
  244. package/patternfly-no-globals.css +20217 -20226
  245. package/patternfly-theme-dark-unversioned.css +20209 -20218
  246. package/patternfly.css +20219 -20228
  247. package/patternfly.min.css +1 -1
  248. package/patternfly.min.css.map +1 -1
  249. package/sass-utilities/_init.scss +1 -1
  250. package/utilities/Accessibility/accessibility.css +18 -18
  251. package/utilities/Alignment/alignment.css +24 -24
  252. package/utilities/BackgroundColor/BackgroundColor.css +252 -252
  253. package/utilities/BoxShadow/box-shadow.css +42 -42
  254. package/utilities/Display/display.css +54 -54
  255. package/utilities/Flex/flex.css +228 -228
  256. package/utilities/Float/float.css +12 -12
  257. package/utilities/Sizing/sizing.css +216 -216
  258. package/utilities/Spacing/spacing.css +1512 -1512
  259. package/utilities/Text/text.css +631 -631
package/docs/components/Nav/examples/Navigation.md CHANGED
@@ -9,23 +9,23 @@ cssPrefix: pf-v5-c-nav
9
9
  ### Default
10
10
 
11
11
  ```html
12
- <nav class="pf-v5-c-nav" aria-label="Global">
13
- <ul class="pf-v5-c-nav__list" role="list">
14
- <li class="pf-v5-c-nav__item">
15
- <a href="#" class="pf-v5-c-nav__link">Link 1</a>
12
+ <nav class="pf-v6-c-nav" aria-label="Global">
13
+ <ul class="pf-v6-c-nav__list" role="list">
14
+ <li class="pf-v6-c-nav__item">
15
+ <a href="#" class="pf-v6-c-nav__link">Link 1</a>
16
16
  </li>
17
- <li class="pf-v5-c-nav__item">
17
+ <li class="pf-v6-c-nav__item">
18
18
  <a
19
19
  href="#"
20
- class="pf-v5-c-nav__link pf-m-current"
20
+ class="pf-v6-c-nav__link pf-m-current"
21
21
  aria-current="page"
22
22
  >Current link</a>
23
23
  </li>
24
- <li class="pf-v5-c-nav__item">
25
- <a href="#" class="pf-v5-c-nav__link">Link 3</a>
24
+ <li class="pf-v6-c-nav__item">
25
+ <a href="#" class="pf-v6-c-nav__link">Link 3</a>
26
26
  </li>
27
- <li class="pf-v5-c-nav__item">
28
- <a href="#" class="pf-v5-c-nav__link">Link 4</a>
27
+ <li class="pf-v6-c-nav__item">
28
+ <a href="#" class="pf-v6-c-nav__link">Link 4</a>
29
29
  </li>
30
30
  </ul>
31
31
  </nav>
@@ -35,37 +35,37 @@ cssPrefix: pf-v5-c-nav
35
35
  ### Grouped nav
36
36
 
37
37
  ```html
38
- <nav class="pf-v5-c-nav" aria-label="Global">
39
- <section class="pf-v5-c-nav__section" aria-labelledby="grouped-title1">
40
- <h2 class="pf-v5-c-nav__section-title" id="grouped-title1">Section title 1</h2>
41
- <ul class="pf-v5-c-nav__list" role="list">
42
- <li class="pf-v5-c-nav__item">
43
- <a href="#" class="pf-v5-c-nav__link">Link 1</a>
38
+ <nav class="pf-v6-c-nav" aria-label="Global">
39
+ <section class="pf-v6-c-nav__section" aria-labelledby="grouped-title1">
40
+ <h2 class="pf-v6-c-nav__section-title" id="grouped-title1">Section title 1</h2>
41
+ <ul class="pf-v6-c-nav__list" role="list">
42
+ <li class="pf-v6-c-nav__item">
43
+ <a href="#" class="pf-v6-c-nav__link">Link 1</a>
44
44
  </li>
45
- <li class="pf-v5-c-nav__item">
46
- <a href="#" class="pf-v5-c-nav__link">Link 2</a>
45
+ <li class="pf-v6-c-nav__item">
46
+ <a href="#" class="pf-v6-c-nav__link">Link 2</a>
47
47
  </li>
48
- <li class="pf-v5-c-nav__item">
49
- <a href="#" class="pf-v5-c-nav__link">Link 3</a>
48
+ <li class="pf-v6-c-nav__item">
49
+ <a href="#" class="pf-v6-c-nav__link">Link 3</a>
50
50
  </li>
51
51
  </ul>
52
52
  </section>
53
53
 
54
- <section class="pf-v5-c-nav__section" aria-labelledby="grouped-title2">
55
- <h2 class="pf-v5-c-nav__section-title" id="grouped-title2">Section title 2</h2>
56
- <ul class="pf-v5-c-nav__list" role="list">
57
- <li class="pf-v5-c-nav__item">
58
- <a href="#" class="pf-v5-c-nav__link">Link 1</a>
54
+ <section class="pf-v6-c-nav__section" aria-labelledby="grouped-title2">
55
+ <h2 class="pf-v6-c-nav__section-title" id="grouped-title2">Section title 2</h2>
56
+ <ul class="pf-v6-c-nav__list" role="list">
57
+ <li class="pf-v6-c-nav__item">
58
+ <a href="#" class="pf-v6-c-nav__link">Link 1</a>
59
59
  </li>
60
- <li class="pf-v5-c-nav__item">
60
+ <li class="pf-v6-c-nav__item">
61
61
  <a
62
62
  href="#"
63
- class="pf-v5-c-nav__link pf-m-current"
63
+ class="pf-v6-c-nav__link pf-m-current"
64
64
  aria-current="page"
65
65
  >Current link</a>
66
66
  </li>
67
- <li class="pf-v5-c-nav__item">
68
- <a href="#" class="pf-v5-c-nav__link">Link 3</a>
67
+ <li class="pf-v6-c-nav__item">
68
+ <a href="#" class="pf-v6-c-nav__link">Link 3</a>
69
69
  </li>
70
70
  </ul>
71
71
  </section>
@@ -76,36 +76,36 @@ cssPrefix: pf-v5-c-nav
76
76
  ### Grouped nav, no titles
77
77
 
78
78
  ```html
79
- <nav class="pf-v5-c-nav" aria-label="Global">
80
- <section class="pf-v5-c-nav__section" aria-label="Section one">
81
- <ul class="pf-v5-c-nav__list" role="list">
82
- <li class="pf-v5-c-nav__item">
83
- <a href="#" class="pf-v5-c-nav__link">Link 1</a>
79
+ <nav class="pf-v6-c-nav" aria-label="Global">
80
+ <section class="pf-v6-c-nav__section" aria-label="Section one">
81
+ <ul class="pf-v6-c-nav__list" role="list">
82
+ <li class="pf-v6-c-nav__item">
83
+ <a href="#" class="pf-v6-c-nav__link">Link 1</a>
84
84
  </li>
85
- <li class="pf-v5-c-nav__item">
86
- <a href="#" class="pf-v5-c-nav__link">Link 2</a>
85
+ <li class="pf-v6-c-nav__item">
86
+ <a href="#" class="pf-v6-c-nav__link">Link 2</a>
87
87
  </li>
88
- <li class="pf-v5-c-nav__item">
89
- <a href="#" class="pf-v5-c-nav__link">Link 3</a>
88
+ <li class="pf-v6-c-nav__item">
89
+ <a href="#" class="pf-v6-c-nav__link">Link 3</a>
90
90
  </li>
91
91
  </ul>
92
92
  </section>
93
- <hr class="pf-v5-c-divider" />
93
+ <hr class="pf-v6-c-divider" />
94
94
 
95
- <section class="pf-v5-c-nav__section" aria-label="Section two">
96
- <ul class="pf-v5-c-nav__list" role="list">
97
- <li class="pf-v5-c-nav__item">
98
- <a href="#" class="pf-v5-c-nav__link">Section 2, link 1</a>
95
+ <section class="pf-v6-c-nav__section" aria-label="Section two">
96
+ <ul class="pf-v6-c-nav__list" role="list">
97
+ <li class="pf-v6-c-nav__item">
98
+ <a href="#" class="pf-v6-c-nav__link">Section 2, link 1</a>
99
99
  </li>
100
- <li class="pf-v5-c-nav__item">
100
+ <li class="pf-v6-c-nav__item">
101
101
  <a
102
102
  href="#"
103
- class="pf-v5-c-nav__link pf-m-current"
103
+ class="pf-v6-c-nav__link pf-m-current"
104
104
  aria-current="page"
105
105
  >Current link</a>
106
106
  </li>
107
- <li class="pf-v5-c-nav__item">
108
- <a href="#" class="pf-v5-c-nav__link">Link 3</a>
107
+ <li class="pf-v6-c-nav__item">
108
+ <a href="#" class="pf-v6-c-nav__link">Link 3</a>
109
109
  </li>
110
110
  </ul>
111
111
  </section>
@@ -116,95 +116,95 @@ cssPrefix: pf-v5-c-nav
116
116
  ### Expanded
117
117
 
118
118
  ```html
119
- <nav class="pf-v5-c-nav" aria-label="Global">
120
- <ul class="pf-v5-c-nav__list" role="list">
121
- <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
119
+ <nav class="pf-v6-c-nav" aria-label="Global">
120
+ <ul class="pf-v6-c-nav__list" role="list">
121
+ <li class="pf-v6-c-nav__item pf-m-expandable pf-m-expanded">
122
122
  <button
123
- class="pf-v5-c-nav__link"
123
+ class="pf-v6-c-nav__link"
124
124
  aria-expanded="true"
125
125
  id="expandable-example1"
126
126
  >
127
127
  Link 1 (current and expanded example)
128
- <span class="pf-v5-c-nav__toggle">
129
- <span class="pf-v5-c-nav__toggle-icon">
128
+ <span class="pf-v6-c-nav__toggle">
129
+ <span class="pf-v6-c-nav__toggle-icon">
130
130
  <i class="fas fa-angle-right" aria-hidden="true"></i>
131
131
  </span>
132
132
  </span>
133
133
  </button>
134
134
  <section
135
- class="pf-v5-c-nav__subnav"
135
+ class="pf-v6-c-nav__subnav"
136
136
  aria-labelledby="expandable-example1"
137
137
  >
138
- <ul class="pf-v5-c-nav__list" role="list">
139
- <li class="pf-v5-c-nav__item">
140
- <a href="#" class="pf-v5-c-nav__link">Current link</a>
138
+ <ul class="pf-v6-c-nav__list" role="list">
139
+ <li class="pf-v6-c-nav__item">
140
+ <a href="#" class="pf-v6-c-nav__link">Current link</a>
141
141
  </li>
142
- <li class="pf-v5-c-nav__item">
143
- <a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
142
+ <li class="pf-v6-c-nav__item">
143
+ <a href="#" class="pf-v6-c-nav__link">Subnav link 2</a>
144
144
  </li>
145
- <li class="pf-v5-c-nav__item">
145
+ <li class="pf-v6-c-nav__item">
146
146
  <a
147
147
  href="#"
148
- class="pf-v5-c-nav__link pf-m-current"
148
+ class="pf-v6-c-nav__link pf-m-current"
149
149
  aria-current="page"
150
150
  >Subnav link 3</a>
151
151
  </li>
152
152
  </ul>
153
153
  </section>
154
154
  </li>
155
- <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
155
+ <li class="pf-v6-c-nav__item pf-m-expandable pf-m-expanded">
156
156
  <button
157
- class="pf-v5-c-nav__link"
157
+ class="pf-v6-c-nav__link"
158
158
  aria-expanded="true"
159
159
  id="expandable-example2"
160
160
  >
161
161
  Link 2 (expanded, but not current example)
162
162
  <span
163
- class="pf-v5-c-nav__toggle"
163
+ class="pf-v6-c-nav__toggle"
164
164
  >
165
- <span class="pf-v5-c-nav__toggle-icon">
165
+ <span class="pf-v6-c-nav__toggle-icon">
166
166
  <i class="fas fa-angle-right" aria-hidden="true"></i>
167
167
  </span>
168
168
  </span>
169
169
  </button>
170
170
  <section
171
- class="pf-v5-c-nav__subnav"
171
+ class="pf-v6-c-nav__subnav"
172
172
  aria-labelledby="expandable-example2"
173
173
  >
174
- <ul class="pf-v5-c-nav__list" role="list">
175
- <li class="pf-v5-c-nav__item">
176
- <a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
174
+ <ul class="pf-v6-c-nav__list" role="list">
175
+ <li class="pf-v6-c-nav__item">
176
+ <a href="#" class="pf-v6-c-nav__link">Subnav link 1</a>
177
177
  </li>
178
- <li class="pf-v5-c-nav__item">
179
- <a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
178
+ <li class="pf-v6-c-nav__item">
179
+ <a href="#" class="pf-v6-c-nav__link">Subnav link 2</a>
180
180
  </li>
181
181
  </ul>
182
182
  </section>
183
183
  </li>
184
- <li class="pf-v5-c-nav__item pf-m-expandable">
184
+ <li class="pf-v6-c-nav__item pf-m-expandable">
185
185
  <button
186
- class="pf-v5-c-nav__link"
186
+ class="pf-v6-c-nav__link"
187
187
  aria-expanded="false"
188
188
  id="expandable-example3"
189
189
  >
190
190
  Link 3
191
- <span class="pf-v5-c-nav__toggle">
192
- <span class="pf-v5-c-nav__toggle-icon">
191
+ <span class="pf-v6-c-nav__toggle">
192
+ <span class="pf-v6-c-nav__toggle-icon">
193
193
  <i class="fas fa-angle-right" aria-hidden="true"></i>
194
194
  </span>
195
195
  </span>
196
196
  </button>
197
197
  <section
198
- class="pf-v5-c-nav__subnav"
198
+ class="pf-v6-c-nav__subnav"
199
199
  aria-labelledby="expandable-example3"
200
200
  hidden
201
201
  >
202
- <ul class="pf-v5-c-nav__list" role="list">
203
- <li class="pf-v5-c-nav__item">
204
- <a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
202
+ <ul class="pf-v6-c-nav__list" role="list">
203
+ <li class="pf-v6-c-nav__item">
204
+ <a href="#" class="pf-v6-c-nav__link">Subnav link 1</a>
205
205
  </li>
206
- <li class="pf-v5-c-nav__item">
207
- <a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
206
+ <li class="pf-v6-c-nav__item">
207
+ <a href="#" class="pf-v6-c-nav__link">Subnav link 2</a>
208
208
  </li>
209
209
  </ul>
210
210
  </section>
@@ -217,51 +217,51 @@ cssPrefix: pf-v5-c-nav
217
217
  ### Expanded with subnav titles
218
218
 
219
219
  ```html
220
- <nav class="pf-v5-c-nav" aria-label="Global">
221
- <ul class="pf-v5-c-nav__list" role="list">
222
- <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
223
- <button class="pf-v5-c-nav__link" aria-expanded="true">
220
+ <nav class="pf-v6-c-nav" aria-label="Global">
221
+ <ul class="pf-v6-c-nav__list" role="list">
222
+ <li class="pf-v6-c-nav__item pf-m-expandable pf-m-expanded">
223
+ <button class="pf-v6-c-nav__link" aria-expanded="true">
224
224
  Link 1
225
- <span class="pf-v5-c-nav__toggle">
226
- <span class="pf-v5-c-nav__toggle-icon">
225
+ <span class="pf-v6-c-nav__toggle">
226
+ <span class="pf-v6-c-nav__toggle-icon">
227
227
  <i class="fas fa-angle-right" aria-hidden="true"></i>
228
228
  </span>
229
229
  </span>
230
230
  </button>
231
- <section class="pf-v5-c-nav__subnav" aria-labelledby="subnav-title1">
232
- <ul class="pf-v5-c-nav__list" role="list">
233
- <li class="pf-v5-c-nav__item">
234
- <a href="#" class="pf-v5-c-nav__link">Current link</a>
231
+ <section class="pf-v6-c-nav__subnav" aria-labelledby="subnav-title1">
232
+ <ul class="pf-v6-c-nav__list" role="list">
233
+ <li class="pf-v6-c-nav__item">
234
+ <a href="#" class="pf-v6-c-nav__link">Current link</a>
235
235
  </li>
236
- <li class="pf-v5-c-nav__item">
236
+ <li class="pf-v6-c-nav__item">
237
237
  <a
238
238
  href="#"
239
- class="pf-v5-c-nav__link pf-m-current"
239
+ class="pf-v6-c-nav__link pf-m-current"
240
240
  aria-current="page"
241
241
  >Subnav link 2</a>
242
242
  </li>
243
- <li class="pf-v5-c-nav__item">
244
- <a href="#" class="pf-v5-c-nav__link">Subnav link 3</a>
243
+ <li class="pf-v6-c-nav__item">
244
+ <a href="#" class="pf-v6-c-nav__link">Subnav link 3</a>
245
245
  </li>
246
246
  </ul>
247
247
  </section>
248
248
  </li>
249
- <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
250
- <button class="pf-v5-c-nav__link" aria-expanded="true">
249
+ <li class="pf-v6-c-nav__item pf-m-expandable pf-m-expanded">
250
+ <button class="pf-v6-c-nav__link" aria-expanded="true">
251
251
  Link 2
252
- <span class="pf-v5-c-nav__toggle">
253
- <span class="pf-v5-c-nav__toggle-icon">
252
+ <span class="pf-v6-c-nav__toggle">
253
+ <span class="pf-v6-c-nav__toggle-icon">
254
254
  <i class="fas fa-angle-right" aria-hidden="true"></i>
255
255
  </span>
256
256
  </span>
257
257
  </button>
258
- <section class="pf-v5-c-nav__subnav" aria-labelledby="subnav-title2">
259
- <ul class="pf-v5-c-nav__list" role="list">
260
- <li class="pf-v5-c-nav__item">
261
- <a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
258
+ <section class="pf-v6-c-nav__subnav" aria-labelledby="subnav-title2">
259
+ <ul class="pf-v6-c-nav__list" role="list">
260
+ <li class="pf-v6-c-nav__item">
261
+ <a href="#" class="pf-v6-c-nav__link">Subnav link 1</a>
262
262
  </li>
263
- <li class="pf-v5-c-nav__item">
264
- <a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
263
+ <li class="pf-v6-c-nav__item">
264
+ <a href="#" class="pf-v6-c-nav__link">Subnav link 2</a>
265
265
  </li>
266
266
  </ul>
267
267
  </section>
@@ -274,70 +274,70 @@ cssPrefix: pf-v5-c-nav
274
274
  ### Mixed
275
275
 
276
276
  ```html
277
- <nav class="pf-v5-c-nav" aria-label="Global">
278
- <ul class="pf-v5-c-nav__list" role="list">
279
- <li class="pf-v5-c-nav__item">
280
- <a href="#" class="pf-v5-c-nav__link">Link 1 (not expandable)</a>
277
+ <nav class="pf-v6-c-nav" aria-label="Global">
278
+ <ul class="pf-v6-c-nav__list" role="list">
279
+ <li class="pf-v6-c-nav__item">
280
+ <a href="#" class="pf-v6-c-nav__link">Link 1 (not expandable)</a>
281
281
  </li>
282
- <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
282
+ <li class="pf-v6-c-nav__item pf-m-expandable pf-m-expanded">
283
283
  <button
284
- class="pf-v5-c-nav__link"
284
+ class="pf-v6-c-nav__link"
285
285
  aria-expanded="true"
286
286
  id="nav-mixed-link2"
287
287
  >
288
288
  Link 2 (expanded, but not current example)
289
289
  <span
290
- class="pf-v5-c-nav__toggle"
290
+ class="pf-v6-c-nav__toggle"
291
291
  >
292
- <span class="pf-v5-c-nav__toggle-icon">
292
+ <span class="pf-v6-c-nav__toggle-icon">
293
293
  <i class="fas fa-angle-right" aria-hidden="true"></i>
294
294
  </span>
295
295
  </span>
296
296
  </button>
297
- <section class="pf-v5-c-nav__subnav" aria-labelledby="nav-mixed-link2">
298
- <ul class="pf-v5-c-nav__list" role="list">
299
- <li class="pf-v5-c-nav__item">
300
- <a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
297
+ <section class="pf-v6-c-nav__subnav" aria-labelledby="nav-mixed-link2">
298
+ <ul class="pf-v6-c-nav__list" role="list">
299
+ <li class="pf-v6-c-nav__item">
300
+ <a href="#" class="pf-v6-c-nav__link">Subnav link 1</a>
301
301
  </li>
302
- <li class="pf-v5-c-nav__item">
303
- <a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
302
+ <li class="pf-v6-c-nav__item">
303
+ <a href="#" class="pf-v6-c-nav__link">Subnav link 2</a>
304
304
  </li>
305
305
  </ul>
306
306
  </section>
307
307
  </li>
308
- <li class="pf-v5-c-nav__item pf-m-expandable">
308
+ <li class="pf-v6-c-nav__item pf-m-expandable">
309
309
  <button
310
- class="pf-v5-c-nav__link"
310
+ class="pf-v6-c-nav__link"
311
311
  aria-expanded="false"
312
312
  id="nav-mixed-link4"
313
313
  >
314
314
  Link 3 (current, but not expanded example)
315
315
  <span
316
- class="pf-v5-c-nav__toggle"
316
+ class="pf-v6-c-nav__toggle"
317
317
  >
318
- <span class="pf-v5-c-nav__toggle-icon">
318
+ <span class="pf-v6-c-nav__toggle-icon">
319
319
  <i class="fas fa-angle-right" aria-hidden="true"></i>
320
320
  </span>
321
321
  </span>
322
322
  </button>
323
323
  <section
324
- class="pf-v5-c-nav__subnav"
324
+ class="pf-v6-c-nav__subnav"
325
325
  aria-labelledby="nav-mixed-link4"
326
326
  hidden
327
327
  >
328
- <ul class="pf-v5-c-nav__list" role="list">
329
- <li class="pf-v5-c-nav__item">
330
- <a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
328
+ <ul class="pf-v6-c-nav__list" role="list">
329
+ <li class="pf-v6-c-nav__item">
330
+ <a href="#" class="pf-v6-c-nav__link">Subnav link 1</a>
331
331
  </li>
332
- <li class="pf-v5-c-nav__item">
332
+ <li class="pf-v6-c-nav__item">
333
333
  <a
334
334
  href="#"
335
- class="pf-v5-c-nav__link pf-m-current"
335
+ class="pf-v6-c-nav__link pf-m-current"
336
336
  aria-current="page"
337
337
  >Subnav link 2</a>
338
338
  </li>
339
- <li class="pf-v5-c-nav__item">
340
- <a href="#" class="pf-v5-c-nav__link">Subnav link 3</a>
339
+ <li class="pf-v6-c-nav__item">
340
+ <a href="#" class="pf-v6-c-nav__link">Subnav link 3</a>
341
341
  </li>
342
342
  </ul>
343
343
  </section>
@@ -350,110 +350,110 @@ cssPrefix: pf-v5-c-nav
350
350
  ### Expandable, third level
351
351
 
352
352
  ```html
353
- <nav class="pf-v5-c-nav" aria-label="Global">
354
- <ul class="pf-v5-c-nav__list" role="list">
355
- <li class="pf-v5-c-nav__item">
356
- <a href="#" class="pf-v5-c-nav__link">Clusters</a>
353
+ <nav class="pf-v6-c-nav" aria-label="Global">
354
+ <ul class="pf-v6-c-nav__list" role="list">
355
+ <li class="pf-v6-c-nav__item">
356
+ <a href="#" class="pf-v6-c-nav__link">Clusters</a>
357
357
  </li>
358
- <li class="pf-v5-c-nav__item">
359
- <a href="#" class="pf-v5-c-nav__link">Overview</a>
358
+ <li class="pf-v6-c-nav__item">
359
+ <a href="#" class="pf-v6-c-nav__link">Overview</a>
360
360
  </li>
361
- <li class="pf-v5-c-nav__item">
362
- <a href="#" class="pf-v5-c-nav__link">Releases</a>
361
+ <li class="pf-v6-c-nav__item">
362
+ <a href="#" class="pf-v6-c-nav__link">Releases</a>
363
363
  </li>
364
- <li class="pf-v5-c-nav__item pf-m-expandable">
364
+ <li class="pf-v6-c-nav__item pf-m-expandable">
365
365
  <button
366
- class="pf-v5-c-nav__link"
366
+ class="pf-v6-c-nav__link"
367
367
  aria-expanded="false"
368
368
  id="expandable-third-level-example-example-1"
369
369
  >
370
370
  Subscriptions
371
- <span class="pf-v5-c-nav__toggle">
372
- <span class="pf-v5-c-nav__toggle-icon">
371
+ <span class="pf-v6-c-nav__toggle">
372
+ <span class="pf-v6-c-nav__toggle-icon">
373
373
  <i class="fas fa-angle-right" aria-hidden="true"></i>
374
374
  </span>
375
375
  </span>
376
376
  </button>
377
377
  <section
378
- class="pf-v5-c-nav__subnav"
378
+ class="pf-v6-c-nav__subnav"
379
379
  aria-labelledby="expandable-third-level-example-example-1"
380
380
  hidden
381
381
  >
382
- <ul class="pf-v5-c-nav__list" role="list">
383
- <li class="pf-v5-c-nav__item">
384
- <a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
382
+ <ul class="pf-v6-c-nav__list" role="list">
383
+ <li class="pf-v6-c-nav__item">
384
+ <a href="#" class="pf-v6-c-nav__link">Subnav link 1</a>
385
385
  </li>
386
- <li class="pf-v5-c-nav__item">
387
- <a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
386
+ <li class="pf-v6-c-nav__item">
387
+ <a href="#" class="pf-v6-c-nav__link">Subnav link 2</a>
388
388
  </li>
389
389
  </ul>
390
390
  </section>
391
391
  </li>
392
- <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
392
+ <li class="pf-v6-c-nav__item pf-m-expandable pf-m-expanded">
393
393
  <button
394
- class="pf-v5-c-nav__link"
394
+ class="pf-v6-c-nav__link"
395
395
  aria-expanded="true"
396
396
  id="expandable-third-level-example-example-2"
397
397
  >
398
398
  Cost management
399
- <span class="pf-v5-c-nav__toggle">
400
- <span class="pf-v5-c-nav__toggle-icon">
399
+ <span class="pf-v6-c-nav__toggle">
400
+ <span class="pf-v6-c-nav__toggle-icon">
401
401
  <i class="fas fa-angle-right" aria-hidden="true"></i>
402
402
  </span>
403
403
  </span>
404
404
  </button>
405
405
  <section
406
- class="pf-v5-c-nav__subnav"
406
+ class="pf-v6-c-nav__subnav"
407
407
  aria-labelledby="expandable-third-level-example-example-2"
408
408
  >
409
- <ul class="pf-v5-c-nav__list" role="list">
410
- <li class="pf-v5-c-nav__item">
411
- <a href="#" class="pf-v5-c-nav__link">Overview</a>
409
+ <ul class="pf-v6-c-nav__list" role="list">
410
+ <li class="pf-v6-c-nav__item">
411
+ <a href="#" class="pf-v6-c-nav__link">Overview</a>
412
412
  </li>
413
- <li class="pf-v5-c-nav__item">
414
- <a href="#" class="pf-v5-c-nav__link">Openshift</a>
413
+ <li class="pf-v6-c-nav__item">
414
+ <a href="#" class="pf-v6-c-nav__link">Openshift</a>
415
415
  </li>
416
- <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
416
+ <li class="pf-v6-c-nav__item pf-m-expandable pf-m-expanded">
417
417
  <button
418
- class="pf-v5-c-nav__link"
418
+ class="pf-v6-c-nav__link"
419
419
  aria-expanded="true"
420
420
  id="-sub-example-1"
421
421
  >
422
422
  Public clouds
423
- <span class="pf-v5-c-nav__toggle">
424
- <span class="pf-v5-c-nav__toggle-icon">
423
+ <span class="pf-v6-c-nav__toggle">
424
+ <span class="pf-v6-c-nav__toggle-icon">
425
425
  <i class="fas fa-angle-right" aria-hidden="true"></i>
426
426
  </span>
427
427
  </span>
428
428
  </button>
429
429
  <section
430
- class="pf-v5-c-nav__subnav"
430
+ class="pf-v6-c-nav__subnav"
431
431
  aria-labelledby="-sub-example-1"
432
432
  >
433
- <ul class="pf-v5-c-nav__list" role="list">
434
- <li class="pf-v5-c-nav__item">
435
- <a href="#" class="pf-v5-c-nav__link">Amazon Web Services</a>
433
+ <ul class="pf-v6-c-nav__list" role="list">
434
+ <li class="pf-v6-c-nav__item">
435
+ <a href="#" class="pf-v6-c-nav__link">Amazon Web Services</a>
436
436
  </li>
437
- <li class="pf-v5-c-nav__item">
438
- <a href="#" class="pf-v5-c-nav__link">Microsoft Azure</a>
437
+ <li class="pf-v6-c-nav__item">
438
+ <a href="#" class="pf-v6-c-nav__link">Microsoft Azure</a>
439
439
  </li>
440
- <li class="pf-v5-c-nav__item">
441
- <a href="#" class="pf-v5-c-nav__link">Google Cloud Services</a>
440
+ <li class="pf-v6-c-nav__item">
441
+ <a href="#" class="pf-v6-c-nav__link">Google Cloud Services</a>
442
442
  </li>
443
443
  </ul>
444
444
  </section>
445
445
  </li>
446
- <li class="pf-v5-c-nav__item">
447
- <a href="#" class="pf-v5-c-nav__link">Cost Models</a>
446
+ <li class="pf-v6-c-nav__item">
447
+ <a href="#" class="pf-v6-c-nav__link">Cost Models</a>
448
448
  </li>
449
- <li class="pf-v5-c-nav__item">
450
- <a href="#" class="pf-v5-c-nav__link">Cost Explorer</a>
449
+ <li class="pf-v6-c-nav__item">
450
+ <a href="#" class="pf-v6-c-nav__link">Cost Explorer</a>
451
451
  </li>
452
452
  </ul>
453
453
  </section>
454
454
  </li>
455
- <li class="pf-v5-c-nav__item">
456
- <a href="#" class="pf-v5-c-nav__link">Support Cases</a>
455
+ <li class="pf-v6-c-nav__item">
456
+ <a href="#" class="pf-v6-c-nav__link">Support Cases</a>
457
457
  </li>
458
458
  </ul>
459
459
  </nav>
@@ -463,20 +463,20 @@ cssPrefix: pf-v5-c-nav
463
463
  ### Horizontal
464
464
 
465
465
  ```html
466
- <nav class="pf-v5-c-nav pf-m-horizontal" aria-label="Global">
467
- <ul class="pf-v5-c-nav__list" role="list">
468
- <li class="pf-v5-c-nav__item">
466
+ <nav class="pf-v6-c-nav pf-m-horizontal" aria-label="Global">
467
+ <ul class="pf-v6-c-nav__list" role="list">
468
+ <li class="pf-v6-c-nav__item">
469
469
  <a
470
470
  href="#"
471
- class="pf-v5-c-nav__link pf-m-current"
471
+ class="pf-v6-c-nav__link pf-m-current"
472
472
  aria-current="page"
473
473
  >Item 1</a>
474
474
  </li>
475
- <li class="pf-v5-c-nav__item">
476
- <a href="#" class="pf-v5-c-nav__link">Item 2</a>
475
+ <li class="pf-v6-c-nav__item">
476
+ <a href="#" class="pf-v6-c-nav__link">Item 2</a>
477
477
  </li>
478
- <li class="pf-v5-c-nav__item">
479
- <a href="#" class="pf-v5-c-nav__link">Item 3</a>
478
+ <li class="pf-v6-c-nav__item">
479
+ <a href="#" class="pf-v6-c-nav__link">Item 3</a>
480
480
  </li>
481
481
  </ul>
482
482
  </nav>
@@ -486,46 +486,46 @@ cssPrefix: pf-v5-c-nav
486
486
  ### Horizontal overflow
487
487
 
488
488
  ```html
489
- <nav class="pf-v5-c-nav pf-m-scrollable pf-m-horizontal" aria-label="Global">
490
- <div class="pf-v5-c-nav__scroll-button">
489
+ <nav class="pf-v6-c-nav pf-m-scrollable pf-m-horizontal" aria-label="Global">
490
+ <div class="pf-v6-c-nav__scroll-button">
491
491
  <button
492
- class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
492
+ class="pf-v6-c-button pf-m-plain pf-m-RTL-icon-static"
493
493
  type="button"
494
494
  aria-label="Scroll start"
495
495
  >
496
- <span class="pf-v5-c-button__icon">
496
+ <span class="pf-v6-c-button__icon">
497
497
  <i class="fas fa-angle-left" aria-hidden="true"></i>
498
498
  </span>
499
499
  </button>
500
500
  </div>
501
- <ul class="pf-v5-c-nav__list" role="list">
502
- <li class="pf-v5-c-nav__item">
503
- <a href="#" class="pf-v5-c-nav__link">Horizontal nav item 1</a>
501
+ <ul class="pf-v6-c-nav__list" role="list">
502
+ <li class="pf-v6-c-nav__item">
503
+ <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 1</a>
504
504
  </li>
505
- <li class="pf-v5-c-nav__item">
506
- <a href="#" class="pf-v5-c-nav__link">Horizontal nav item 2</a>
505
+ <li class="pf-v6-c-nav__item">
506
+ <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 2</a>
507
507
  </li>
508
- <li class="pf-v5-c-nav__item">
509
- <a href="#" class="pf-v5-c-nav__link">Horizontal nav item 3</a>
508
+ <li class="pf-v6-c-nav__item">
509
+ <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 3</a>
510
510
  </li>
511
- <li class="pf-v5-c-nav__item">
512
- <a href="#" class="pf-v5-c-nav__link">Horizontal nav item 4</a>
511
+ <li class="pf-v6-c-nav__item">
512
+ <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 4</a>
513
513
  </li>
514
- <li class="pf-v5-c-nav__item">
514
+ <li class="pf-v6-c-nav__item">
515
515
  <a
516
516
  href="#"
517
- class="pf-v5-c-nav__link pf-m-current"
517
+ class="pf-v6-c-nav__link pf-m-current"
518
518
  aria-current="page"
519
519
  >Horizontal nav item 5</a>
520
520
  </li>
521
521
  </ul>
522
- <div class="pf-v5-c-nav__scroll-button">
522
+ <div class="pf-v6-c-nav__scroll-button">
523
523
  <button
524
- class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
524
+ class="pf-v6-c-button pf-m-plain pf-m-RTL-icon-static"
525
525
  type="button"
526
526
  aria-label="Scroll end"
527
527
  >
528
- <span class="pf-v5-c-button__icon">
528
+ <span class="pf-v6-c-button__icon">
529
529
  <i class="fas fa-angle-right" aria-hidden="true"></i>
530
530
  </span>
531
531
  </button>
@@ -537,20 +537,20 @@ cssPrefix: pf-v5-c-nav
537
537
  ### Horizontal subnav
538
538
 
539
539
  ```html
540
- <nav class="pf-v5-c-nav pf-m-horizontal pf-m-subnav" aria-label="Local">
541
- <ul class="pf-v5-c-nav__list" role="list">
542
- <li class="pf-v5-c-nav__item">
540
+ <nav class="pf-v6-c-nav pf-m-horizontal pf-m-subnav" aria-label="Local">
541
+ <ul class="pf-v6-c-nav__list" role="list">
542
+ <li class="pf-v6-c-nav__item">
543
543
  <a
544
544
  href="#"
545
- class="pf-v5-c-nav__link pf-m-current"
545
+ class="pf-v6-c-nav__link pf-m-current"
546
546
  aria-current="page"
547
547
  >Item 1</a>
548
548
  </li>
549
- <li class="pf-v5-c-nav__item">
550
- <a href="#" class="pf-v5-c-nav__link">Item 2</a>
549
+ <li class="pf-v6-c-nav__item">
550
+ <a href="#" class="pf-v6-c-nav__link">Item 2</a>
551
551
  </li>
552
- <li class="pf-v5-c-nav__item">
553
- <a href="#" class="pf-v5-c-nav__link">Item 3</a>
552
+ <li class="pf-v6-c-nav__item">
553
+ <a href="#" class="pf-v6-c-nav__link">Item 3</a>
554
554
  </li>
555
555
  </ul>
556
556
  </nav>
@@ -561,48 +561,48 @@ cssPrefix: pf-v5-c-nav
561
561
 
562
562
  ```html
563
563
  <nav
564
- class="pf-v5-c-nav pf-m-scrollable pf-m-horizontal pf-m-subnav"
564
+ class="pf-v6-c-nav pf-m-scrollable pf-m-horizontal pf-m-subnav"
565
565
  aria-label="Global"
566
566
  >
567
- <div class="pf-v5-c-nav__scroll-button">
567
+ <div class="pf-v6-c-nav__scroll-button">
568
568
  <button
569
- class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
569
+ class="pf-v6-c-button pf-m-plain pf-m-RTL-icon-static"
570
570
  type="button"
571
571
  aria-label="Scroll start"
572
572
  >
573
- <span class="pf-v5-c-button__icon">
573
+ <span class="pf-v6-c-button__icon">
574
574
  <i class="fas fa-angle-left" aria-hidden="true"></i>
575
575
  </span>
576
576
  </button>
577
577
  </div>
578
- <ul class="pf-v5-c-nav__list" role="list">
579
- <li class="pf-v5-c-nav__item">
580
- <a href="#" class="pf-v5-c-nav__link">Horizontal nav item 1</a>
578
+ <ul class="pf-v6-c-nav__list" role="list">
579
+ <li class="pf-v6-c-nav__item">
580
+ <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 1</a>
581
581
  </li>
582
- <li class="pf-v5-c-nav__item">
583
- <a href="#" class="pf-v5-c-nav__link">Horizontal nav item 2</a>
582
+ <li class="pf-v6-c-nav__item">
583
+ <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 2</a>
584
584
  </li>
585
- <li class="pf-v5-c-nav__item">
586
- <a href="#" class="pf-v5-c-nav__link">Horizontal nav item 3</a>
585
+ <li class="pf-v6-c-nav__item">
586
+ <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 3</a>
587
587
  </li>
588
- <li class="pf-v5-c-nav__item">
589
- <a href="#" class="pf-v5-c-nav__link">Horizontal nav item 4</a>
588
+ <li class="pf-v6-c-nav__item">
589
+ <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 4</a>
590
590
  </li>
591
- <li class="pf-v5-c-nav__item">
591
+ <li class="pf-v6-c-nav__item">
592
592
  <a
593
593
  href="#"
594
- class="pf-v5-c-nav__link pf-m-current"
594
+ class="pf-v6-c-nav__link pf-m-current"
595
595
  aria-current="page"
596
596
  >Horizontal nav item 5</a>
597
597
  </li>
598
598
  </ul>
599
- <div class="pf-v5-c-nav__scroll-button">
599
+ <div class="pf-v6-c-nav__scroll-button">
600
600
  <button
601
- class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
601
+ class="pf-v6-c-button pf-m-plain pf-m-RTL-icon-static"
602
602
  type="button"
603
603
  aria-label="Scroll end"
604
604
  >
605
- <span class="pf-v5-c-button__icon">
605
+ <span class="pf-v6-c-button__icon">
606
606
  <i class="fas fa-angle-right" aria-hidden="true"></i>
607
607
  </span>
608
608
  </button>
@@ -614,93 +614,93 @@ cssPrefix: pf-v5-c-nav
614
614
  ### Nav with flyout
615
615
 
616
616
  ```html isBeta
617
- <nav class="pf-v5-c-nav" aria-label="Global">
618
- <ul class="pf-v5-c-nav__list" role="list">
619
- <li class="pf-v5-c-nav__item">
620
- <a href="#" class="pf-v5-c-nav__link">Clusters</a>
617
+ <nav class="pf-v6-c-nav" aria-label="Global">
618
+ <ul class="pf-v6-c-nav__list" role="list">
619
+ <li class="pf-v6-c-nav__item">
620
+ <a href="#" class="pf-v6-c-nav__link">Clusters</a>
621
621
  </li>
622
- <li class="pf-v5-c-nav__item">
623
- <a href="#" class="pf-v5-c-nav__link">Overview</a>
622
+ <li class="pf-v6-c-nav__item">
623
+ <a href="#" class="pf-v6-c-nav__link">Overview</a>
624
624
  </li>
625
- <li class="pf-v5-c-nav__item">
626
- <a href="#" class="pf-v5-c-nav__link">Releases</a>
625
+ <li class="pf-v6-c-nav__item">
626
+ <a href="#" class="pf-v6-c-nav__link">Releases</a>
627
627
  </li>
628
- <li class="pf-v5-c-nav__item pf-m-flyout">
628
+ <li class="pf-v6-c-nav__item pf-m-flyout">
629
629
  <a
630
630
  href="#"
631
- class="pf-v5-c-nav__link pf-m-current"
631
+ class="pf-v6-c-nav__link pf-m-current"
632
632
  aria-current="page"
633
633
  aria-haspopup="true"
634
634
  aria-expanded="true"
635
635
  >
636
636
  Subscriptions
637
- <span class="pf-v5-c-nav__toggle">
638
- <span class="pf-v5-c-nav__toggle-icon">
637
+ <span class="pf-v6-c-nav__toggle">
638
+ <span class="pf-v6-c-nav__toggle-icon">
639
639
  <i class="fas fa-angle-right" aria-hidden="true"></i>
640
640
  </span>
641
641
  </span>
642
642
  </a>
643
643
  </li>
644
- <li class="pf-v5-c-nav__item">
645
- <a href="#" class="pf-v5-c-nav__link">Support cases</a>
644
+ <li class="pf-v6-c-nav__item">
645
+ <a href="#" class="pf-v6-c-nav__link">Support cases</a>
646
646
  </li>
647
- <li class="pf-v5-c-nav__item">
648
- <a href="#" class="pf-v5-c-nav__link">Cluster manager feedback</a>
647
+ <li class="pf-v6-c-nav__item">
648
+ <a href="#" class="pf-v6-c-nav__link">Cluster manager feedback</a>
649
649
  </li>
650
- <li class="pf-v5-c-nav__item">
651
- <a href="#" class="pf-v5-c-nav__link">Red Hat Marketplace</a>
650
+ <li class="pf-v6-c-nav__item">
651
+ <a href="#" class="pf-v6-c-nav__link">Red Hat Marketplace</a>
652
652
  </li>
653
- <li class="pf-v5-c-nav__item">
654
- <a href="#" class="pf-v5-c-nav__link">Documentation</a>
653
+ <li class="pf-v6-c-nav__item">
654
+ <a href="#" class="pf-v6-c-nav__link">Documentation</a>
655
655
  </li>
656
656
  </ul>
657
657
  </nav>
658
- <div class="pf-v5-c-menu pf-m-flyout pf-m-nav">
659
- <div class="pf-v5-c-menu__content">
660
- <ul class="pf-v5-c-menu__list" role="menu">
661
- <li class="pf-v5-c-menu__list-item" role="none">
662
- <a class="pf-v5-c-menu__item" href="#" role="menuitem">
663
- <span class="pf-v5-c-menu__item-main">
664
- <span class="pf-v5-c-menu__item-text">Container platform</span>
658
+ <div class="pf-v6-c-menu pf-m-flyout pf-m-nav">
659
+ <div class="pf-v6-c-menu__content">
660
+ <ul class="pf-v6-c-menu__list" role="menu">
661
+ <li class="pf-v6-c-menu__list-item" role="none">
662
+ <a class="pf-v6-c-menu__item" href="#" role="menuitem">
663
+ <span class="pf-v6-c-menu__item-main">
664
+ <span class="pf-v6-c-menu__item-text">Container platform</span>
665
665
  </span>
666
666
  </a>
667
667
  </li>
668
- <li class="pf-v5-c-menu__list-item" role="none">
668
+ <li class="pf-v6-c-menu__list-item" role="none">
669
669
  <button
670
- class="pf-v5-c-menu__item"
670
+ class="pf-v6-c-menu__item"
671
671
  type="button"
672
672
  role="menuitem"
673
673
  aria-expanded="true"
674
674
  >
675
- <span class="pf-v5-c-menu__item-main">
676
- <span class="pf-v5-c-menu__item-text">Dedicated</span>
677
- <span class="pf-v5-c-menu__item-toggle-icon">
675
+ <span class="pf-v6-c-menu__item-main">
676
+ <span class="pf-v6-c-menu__item-text">Dedicated</span>
677
+ <span class="pf-v6-c-menu__item-toggle-icon">
678
678
  <i class="fas fa-angle-right"></i>
679
679
  </span>
680
680
  </span>
681
681
  </button>
682
- <div class="pf-v5-c-menu">
683
- <div class="pf-v5-c-menu__content">
684
- <ul class="pf-v5-c-menu__list" role="menu">
685
- <li class="pf-v5-c-menu__list-item" role="none">
686
- <a class="pf-v5-c-menu__item" href="#" role="menuitem">
687
- <span class="pf-v5-c-menu__item-main">
688
- <span class="pf-v5-c-menu__item-text">Dedicated (Annual)</span>
682
+ <div class="pf-v6-c-menu">
683
+ <div class="pf-v6-c-menu__content">
684
+ <ul class="pf-v6-c-menu__list" role="menu">
685
+ <li class="pf-v6-c-menu__list-item" role="none">
686
+ <a class="pf-v6-c-menu__item" href="#" role="menuitem">
687
+ <span class="pf-v6-c-menu__item-main">
688
+ <span class="pf-v6-c-menu__item-text">Dedicated (Annual)</span>
689
689
  </span>
690
690
  </a>
691
691
  </li>
692
- <li class="pf-v5-c-menu__list-item" role="none">
693
- <a class="pf-v5-c-menu__item" href="#" role="menuitem">
694
- <span class="pf-v5-c-menu__item-main">
695
- <span class="pf-v5-c-menu__item-text">Dedicated (On-Demand)</span>
692
+ <li class="pf-v6-c-menu__list-item" role="none">
693
+ <a class="pf-v6-c-menu__item" href="#" role="menuitem">
694
+ <span class="pf-v6-c-menu__item-main">
695
+ <span class="pf-v6-c-menu__item-text">Dedicated (On-Demand)</span>
696
696
  </span>
697
697
  </a>
698
698
  </li>
699
- <li class="pf-v5-c-menu__list-item" role="none">
700
- <a class="pf-v5-c-menu__item" href="#" role="menuitem">
701
- <span class="pf-v5-c-menu__item-main">
699
+ <li class="pf-v6-c-menu__list-item" role="none">
700
+ <a class="pf-v6-c-menu__item" href="#" role="menuitem">
701
+ <span class="pf-v6-c-menu__item-main">
702
702
  <span
703
- class="pf-v5-c-menu__item-text"
703
+ class="pf-v6-c-menu__item-text"
704
704
  >Dedicated (On-Demand limits)</span>
705
705
  </span>
706
706
  </a>
@@ -718,218 +718,218 @@ cssPrefix: pf-v5-c-nav
718
718
  ### Nav with drilldown menu
719
719
 
720
720
  ```html isBeta
721
- <nav class="pf-v5-c-nav" aria-label="Drilldown menu example">
722
- <div class="pf-v5-c-menu pf-m-drilldown">
723
- <div class="pf-v5-c-menu__content">
724
- <ul class="pf-v5-c-menu__list" role="menu">
725
- <li class="pf-v5-c-menu__list-item" role="none">
726
- <button class="pf-v5-c-menu__item" type="button" role="menuitem">
727
- <span class="pf-v5-c-menu__item-main">
728
- <span class="pf-v5-c-menu__item-text">Start rollout</span>
721
+ <nav class="pf-v6-c-nav" aria-label="Drilldown menu example">
722
+ <div class="pf-v6-c-menu pf-m-drilldown">
723
+ <div class="pf-v6-c-menu__content">
724
+ <ul class="pf-v6-c-menu__list" role="menu">
725
+ <li class="pf-v6-c-menu__list-item" role="none">
726
+ <button class="pf-v6-c-menu__item" type="button" role="menuitem">
727
+ <span class="pf-v6-c-menu__item-main">
728
+ <span class="pf-v6-c-menu__item-text">Start rollout</span>
729
729
  </span>
730
730
  </button>
731
731
  </li>
732
- <li class="pf-v5-c-menu__list-item" role="none">
733
- <button class="pf-v5-c-menu__item" type="button" role="menuitem">
734
- <span class="pf-v5-c-menu__item-main">
735
- <span class="pf-v5-c-menu__item-text">Pause rollout</span>
732
+ <li class="pf-v6-c-menu__list-item" role="none">
733
+ <button class="pf-v6-c-menu__item" type="button" role="menuitem">
734
+ <span class="pf-v6-c-menu__item-main">
735
+ <span class="pf-v6-c-menu__item-text">Pause rollout</span>
736
736
  </span>
737
737
  </button>
738
738
  </li>
739
- <li class="pf-v5-c-menu__list-item" role="none">
739
+ <li class="pf-v6-c-menu__list-item" role="none">
740
740
  <button
741
- class="pf-v5-c-menu__item pf-m-current"
741
+ class="pf-v6-c-menu__item pf-m-current"
742
742
  type="button"
743
743
  role="menuitem"
744
744
  >
745
- <span class="pf-v5-c-menu__item-main">
746
- <span class="pf-v5-c-menu__item-text">Current link</span>
745
+ <span class="pf-v6-c-menu__item-main">
746
+ <span class="pf-v6-c-menu__item-text">Current link</span>
747
747
  </span>
748
748
  </button>
749
749
  </li>
750
- <li class="pf-v5-c-menu__list-item" role="none">
751
- <button class="pf-v5-c-menu__item" type="button" role="menuitem">
752
- <span class="pf-v5-c-menu__item-main">
753
- <span class="pf-v5-c-menu__item-text">Add storage</span>
750
+ <li class="pf-v6-c-menu__list-item" role="none">
751
+ <button class="pf-v6-c-menu__item" type="button" role="menuitem">
752
+ <span class="pf-v6-c-menu__item-main">
753
+ <span class="pf-v6-c-menu__item-text">Add storage</span>
754
754
  </span>
755
755
  </button>
756
756
  </li>
757
- <li class="pf-v5-c-menu__list-item" role="none">
757
+ <li class="pf-v6-c-menu__list-item" role="none">
758
758
  <button
759
- class="pf-v5-c-menu__item"
759
+ class="pf-v6-c-menu__item"
760
760
  type="button"
761
761
  role="menuitem"
762
762
  aria-expanded="false"
763
763
  >
764
- <span class="pf-v5-c-menu__item-main">
765
- <span class="pf-v5-c-menu__item-text">Edit</span>
766
- <span class="pf-v5-c-menu__item-toggle-icon">
764
+ <span class="pf-v6-c-menu__item-main">
765
+ <span class="pf-v6-c-menu__item-text">Edit</span>
766
+ <span class="pf-v6-c-menu__item-toggle-icon">
767
767
  <i class="fas fa-angle-right"></i>
768
768
  </span>
769
769
  </span>
770
770
  </button>
771
- <div class="pf-v5-c-menu">
772
- <div class="pf-v5-c-menu__content">
773
- <ul class="pf-v5-c-menu__list" role="menu">
774
- <li class="pf-v5-c-menu__list-item pf-m-drill-up" role="none">
771
+ <div class="pf-v6-c-menu">
772
+ <div class="pf-v6-c-menu__content">
773
+ <ul class="pf-v6-c-menu__list" role="menu">
774
+ <li class="pf-v6-c-menu__list-item pf-m-drill-up" role="none">
775
775
  <button
776
- class="pf-v5-c-menu__item"
776
+ class="pf-v6-c-menu__item"
777
777
  type="button"
778
778
  role="menuitem"
779
779
  tabindex="0"
780
780
  >
781
- <span class="pf-v5-c-menu__item-main">
782
- <span class="pf-v5-c-menu__item-toggle-icon">
781
+ <span class="pf-v6-c-menu__item-main">
782
+ <span class="pf-v6-c-menu__item-toggle-icon">
783
783
  <i class="fas fa-angle-left"></i>
784
784
  </span>
785
- <span class="pf-v5-c-menu__item-text">Edit</span>
785
+ <span class="pf-v6-c-menu__item-text">Edit</span>
786
786
  </span>
787
787
  </button>
788
788
  </li>
789
- <li class="pf-v5-c-menu__list-item" role="none">
789
+ <li class="pf-v6-c-menu__list-item" role="none">
790
790
  <button
791
- class="pf-v5-c-menu__item"
791
+ class="pf-v6-c-menu__item"
792
792
  type="button"
793
793
  role="menuitem"
794
794
  aria-expanded="false"
795
795
  >
796
- <span class="pf-v5-c-menu__item-main">
797
- <span class="pf-v5-c-menu__item-text">Deployment</span>
798
- <span class="pf-v5-c-menu__item-toggle-icon">
796
+ <span class="pf-v6-c-menu__item-main">
797
+ <span class="pf-v6-c-menu__item-text">Deployment</span>
798
+ <span class="pf-v6-c-menu__item-toggle-icon">
799
799
  <i class="fas fa-angle-right"></i>
800
800
  </span>
801
801
  </span>
802
802
  </button>
803
- <div class="pf-v5-c-menu">
804
- <div class="pf-v5-c-menu__content">
805
- <ul class="pf-v5-c-menu__list" role="menu">
803
+ <div class="pf-v6-c-menu">
804
+ <div class="pf-v6-c-menu__content">
805
+ <ul class="pf-v6-c-menu__list" role="menu">
806
806
  <li
807
- class="pf-v5-c-menu__list-item pf-m-drill-up"
807
+ class="pf-v6-c-menu__list-item pf-m-drill-up"
808
808
  role="none"
809
809
  >
810
810
  <button
811
- class="pf-v5-c-menu__item"
811
+ class="pf-v6-c-menu__item"
812
812
  type="button"
813
813
  role="menuitem"
814
814
  tabindex="0"
815
815
  >
816
- <span class="pf-v5-c-menu__item-main">
817
- <span class="pf-v5-c-menu__item-toggle-icon">
816
+ <span class="pf-v6-c-menu__item-main">
817
+ <span class="pf-v6-c-menu__item-toggle-icon">
818
818
  <i class="fas fa-angle-left"></i>
819
819
  </span>
820
- <span class="pf-v5-c-menu__item-text">Deployment</span>
820
+ <span class="pf-v6-c-menu__item-text">Deployment</span>
821
821
  </span>
822
822
  </button>
823
823
  </li>
824
- <li class="pf-v5-c-menu__list-item" role="none">
824
+ <li class="pf-v6-c-menu__list-item" role="none">
825
825
  <button
826
- class="pf-v5-c-menu__item"
826
+ class="pf-v6-c-menu__item"
827
827
  type="button"
828
828
  role="menuitem"
829
829
  >
830
- <span class="pf-v5-c-menu__item-main">
831
- <span class="pf-v5-c-menu__item-text">Routes</span>
830
+ <span class="pf-v6-c-menu__item-main">
831
+ <span class="pf-v6-c-menu__item-text">Routes</span>
832
832
  </span>
833
833
  </button>
834
834
  </li>
835
- <li class="pf-v5-c-menu__list-item" role="none">
835
+ <li class="pf-v6-c-menu__list-item" role="none">
836
836
  <button
837
- class="pf-v5-c-menu__item"
837
+ class="pf-v6-c-menu__item"
838
838
  type="button"
839
839
  role="menuitem"
840
840
  >
841
- <span class="pf-v5-c-menu__item-main">
842
- <span class="pf-v5-c-menu__item-text">Nodes</span>
841
+ <span class="pf-v6-c-menu__item-main">
842
+ <span class="pf-v6-c-menu__item-text">Nodes</span>
843
843
  </span>
844
844
  </button>
845
845
  </li>
846
- <li class="pf-v5-c-menu__list-item" role="none">
846
+ <li class="pf-v6-c-menu__list-item" role="none">
847
847
  <button
848
- class="pf-v5-c-menu__item"
848
+ class="pf-v6-c-menu__item"
849
849
  type="button"
850
850
  role="menuitem"
851
851
  >
852
- <span class="pf-v5-c-menu__item-main">
853
- <span class="pf-v5-c-menu__item-text">URLs</span>
852
+ <span class="pf-v6-c-menu__item-main">
853
+ <span class="pf-v6-c-menu__item-text">URLs</span>
854
854
  </span>
855
855
  </button>
856
856
  </li>
857
- <li class="pf-v5-c-menu__list-item" role="none">
857
+ <li class="pf-v6-c-menu__list-item" role="none">
858
858
  <button
859
- class="pf-v5-c-menu__item"
859
+ class="pf-v6-c-menu__item"
860
860
  type="button"
861
861
  role="menuitem"
862
862
  aria-expanded="false"
863
863
  >
864
- <span class="pf-v5-c-menu__item-main">
864
+ <span class="pf-v6-c-menu__item-main">
865
865
  <span
866
- class="pf-v5-c-menu__item-text"
866
+ class="pf-v6-c-menu__item-text"
867
867
  >Advanced settings</span>
868
- <span class="pf-v5-c-menu__item-toggle-icon">
868
+ <span class="pf-v6-c-menu__item-toggle-icon">
869
869
  <i class="fas fa-angle-right"></i>
870
870
  </span>
871
871
  </span>
872
872
  </button>
873
- <div class="pf-v5-c-menu">
874
- <div class="pf-v5-c-menu__content">
875
- <ul class="pf-v5-c-menu__list" role="menu">
873
+ <div class="pf-v6-c-menu">
874
+ <div class="pf-v6-c-menu__content">
875
+ <ul class="pf-v6-c-menu__list" role="menu">
876
876
  <li
877
- class="pf-v5-c-menu__list-item pf-m-drill-up"
877
+ class="pf-v6-c-menu__list-item pf-m-drill-up"
878
878
  role="none"
879
879
  >
880
880
  <button
881
- class="pf-v5-c-menu__item"
881
+ class="pf-v6-c-menu__item"
882
882
  type="button"
883
883
  role="menuitem"
884
884
  tabindex="0"
885
885
  >
886
- <span class="pf-v5-c-menu__item-main">
886
+ <span class="pf-v6-c-menu__item-main">
887
887
  <span
888
- class="pf-v5-c-menu__item-toggle-icon"
888
+ class="pf-v6-c-menu__item-toggle-icon"
889
889
  >
890
890
  <i class="fas fa-angle-left"></i>
891
891
  </span>
892
892
  <span
893
- class="pf-v5-c-menu__item-text"
893
+ class="pf-v6-c-menu__item-text"
894
894
  >Advanced settings</span>
895
895
  </span>
896
896
  </button>
897
897
  </li>
898
- <li class="pf-v5-c-menu__list-item" role="none">
898
+ <li class="pf-v6-c-menu__list-item" role="none">
899
899
  <button
900
- class="pf-v5-c-menu__item"
900
+ class="pf-v6-c-menu__item"
901
901
  type="button"
902
902
  role="menuitem"
903
903
  >
904
- <span class="pf-v5-c-menu__item-main">
904
+ <span class="pf-v6-c-menu__item-main">
905
905
  <span
906
- class="pf-v5-c-menu__item-text"
906
+ class="pf-v6-c-menu__item-text"
907
907
  >Reports</span>
908
908
  </span>
909
909
  </button>
910
910
  </li>
911
- <li class="pf-v5-c-menu__list-item" role="none">
911
+ <li class="pf-v6-c-menu__list-item" role="none">
912
912
  <button
913
- class="pf-v5-c-menu__item"
913
+ class="pf-v6-c-menu__item"
914
914
  type="button"
915
915
  role="menuitem"
916
916
  >
917
- <span class="pf-v5-c-menu__item-main">
917
+ <span class="pf-v6-c-menu__item-main">
918
918
  <span
919
- class="pf-v5-c-menu__item-text"
919
+ class="pf-v6-c-menu__item-text"
920
920
  >Policies</span>
921
921
  </span>
922
922
  </button>
923
923
  </li>
924
- <li class="pf-v5-c-menu__list-item" role="none">
924
+ <li class="pf-v6-c-menu__list-item" role="none">
925
925
  <button
926
- class="pf-v5-c-menu__item"
926
+ class="pf-v6-c-menu__item"
927
927
  type="button"
928
928
  role="menuitem"
929
929
  >
930
- <span class="pf-v5-c-menu__item-main">
930
+ <span class="pf-v6-c-menu__item-main">
931
931
  <span
932
- class="pf-v5-c-menu__item-text"
932
+ class="pf-v6-c-menu__item-text"
933
933
  >Systems</span>
934
934
  </span>
935
935
  </button>
@@ -942,70 +942,70 @@ cssPrefix: pf-v5-c-nav
942
942
  </div>
943
943
  </div>
944
944
  </li>
945
- <li class="pf-v5-c-menu__list-item" role="none">
945
+ <li class="pf-v6-c-menu__list-item" role="none">
946
946
  <button
947
- class="pf-v5-c-menu__item"
947
+ class="pf-v6-c-menu__item"
948
948
  type="button"
949
949
  role="menuitem"
950
950
  aria-expanded="false"
951
951
  >
952
- <span class="pf-v5-c-menu__item-main">
953
- <span class="pf-v5-c-menu__item-text">RBAC</span>
954
- <span class="pf-v5-c-menu__item-toggle-icon">
952
+ <span class="pf-v6-c-menu__item-main">
953
+ <span class="pf-v6-c-menu__item-text">RBAC</span>
954
+ <span class="pf-v6-c-menu__item-toggle-icon">
955
955
  <i class="fas fa-angle-right"></i>
956
956
  </span>
957
957
  </span>
958
958
  </button>
959
- <div class="pf-v5-c-menu">
960
- <div class="pf-v5-c-menu__content">
961
- <ul class="pf-v5-c-menu__list" role="menu">
959
+ <div class="pf-v6-c-menu">
960
+ <div class="pf-v6-c-menu__content">
961
+ <ul class="pf-v6-c-menu__list" role="menu">
962
962
  <li
963
- class="pf-v5-c-menu__list-item pf-m-drill-up"
963
+ class="pf-v6-c-menu__list-item pf-m-drill-up"
964
964
  role="none"
965
965
  >
966
966
  <button
967
- class="pf-v5-c-menu__item"
967
+ class="pf-v6-c-menu__item"
968
968
  type="button"
969
969
  role="menuitem"
970
970
  >
971
- <span class="pf-v5-c-menu__item-main">
972
- <span class="pf-v5-c-menu__item-toggle-icon">
971
+ <span class="pf-v6-c-menu__item-main">
972
+ <span class="pf-v6-c-menu__item-toggle-icon">
973
973
  <i class="fas fa-angle-left"></i>
974
974
  </span>
975
- <span class="pf-v5-c-menu__item-text">RBAC</span>
975
+ <span class="pf-v6-c-menu__item-text">RBAC</span>
976
976
  </span>
977
977
  </button>
978
978
  </li>
979
- <li class="pf-v5-c-menu__list-item" role="none">
979
+ <li class="pf-v6-c-menu__list-item" role="none">
980
980
  <button
981
- class="pf-v5-c-menu__item"
981
+ class="pf-v6-c-menu__item"
982
982
  type="button"
983
983
  role="menuitem"
984
984
  >
985
- <span class="pf-v5-c-menu__item-main">
986
- <span class="pf-v5-c-menu__item-text">Reports</span>
985
+ <span class="pf-v6-c-menu__item-main">
986
+ <span class="pf-v6-c-menu__item-text">Reports</span>
987
987
  </span>
988
988
  </button>
989
989
  </li>
990
- <li class="pf-v5-c-menu__list-item" role="none">
990
+ <li class="pf-v6-c-menu__list-item" role="none">
991
991
  <button
992
- class="pf-v5-c-menu__item"
992
+ class="pf-v6-c-menu__item"
993
993
  type="button"
994
994
  role="menuitem"
995
995
  >
996
- <span class="pf-v5-c-menu__item-main">
997
- <span class="pf-v5-c-menu__item-text">Policies</span>
996
+ <span class="pf-v6-c-menu__item-main">
997
+ <span class="pf-v6-c-menu__item-text">Policies</span>
998
998
  </span>
999
999
  </button>
1000
1000
  </li>
1001
- <li class="pf-v5-c-menu__list-item" role="none">
1001
+ <li class="pf-v6-c-menu__list-item" role="none">
1002
1002
  <button
1003
- class="pf-v5-c-menu__item"
1003
+ class="pf-v6-c-menu__item"
1004
1004
  type="button"
1005
1005
  role="menuitem"
1006
1006
  >
1007
- <span class="pf-v5-c-menu__item-main">
1008
- <span class="pf-v5-c-menu__item-text">Systems</span>
1007
+ <span class="pf-v6-c-menu__item-main">
1008
+ <span class="pf-v6-c-menu__item-text">Systems</span>
1009
1009
  </span>
1010
1010
  </button>
1011
1011
  </li>
@@ -1013,15 +1013,15 @@ cssPrefix: pf-v5-c-nav
1013
1013
  </div>
1014
1014
  </div>
1015
1015
  </li>
1016
- <li class="pf-v5-c-menu__list-item" role="none">
1016
+ <li class="pf-v6-c-menu__list-item" role="none">
1017
1017
  <button
1018
- class="pf-v5-c-menu__item"
1018
+ class="pf-v6-c-menu__item"
1019
1019
  type="button"
1020
1020
  role="menuitem"
1021
1021
  >
1022
- <span class="pf-v5-c-menu__item-main">
1022
+ <span class="pf-v6-c-menu__item-main">
1023
1023
  <span
1024
- class="pf-v5-c-menu__item-text"
1024
+ class="pf-v6-c-menu__item-text"
1025
1025
  >Thing with a longer label</span>
1026
1026
  </span>
1027
1027
  </button>
@@ -1030,101 +1030,101 @@ cssPrefix: pf-v5-c-nav
1030
1030
  </div>
1031
1031
  </div>
1032
1032
  </li>
1033
- <li class="pf-v5-c-menu__list-item" role="none">
1033
+ <li class="pf-v6-c-menu__list-item" role="none">
1034
1034
  <button
1035
- class="pf-v5-c-menu__item"
1035
+ class="pf-v6-c-menu__item"
1036
1036
  type="button"
1037
1037
  role="menuitem"
1038
1038
  aria-expanded="false"
1039
1039
  >
1040
- <span class="pf-v5-c-menu__item-main">
1041
- <span class="pf-v5-c-menu__item-text">Configuration</span>
1042
- <span class="pf-v5-c-menu__item-toggle-icon">
1040
+ <span class="pf-v6-c-menu__item-main">
1041
+ <span class="pf-v6-c-menu__item-text">Configuration</span>
1042
+ <span class="pf-v6-c-menu__item-toggle-icon">
1043
1043
  <i class="fas fa-angle-right"></i>
1044
1044
  </span>
1045
1045
  </span>
1046
1046
  </button>
1047
- <div class="pf-v5-c-menu">
1048
- <div class="pf-v5-c-menu__content">
1049
- <ul class="pf-v5-c-menu__list" role="menu">
1050
- <li class="pf-v5-c-menu__list-item pf-m-drill-up" role="none">
1047
+ <div class="pf-v6-c-menu">
1048
+ <div class="pf-v6-c-menu__content">
1049
+ <ul class="pf-v6-c-menu__list" role="menu">
1050
+ <li class="pf-v6-c-menu__list-item pf-m-drill-up" role="none">
1051
1051
  <button
1052
- class="pf-v5-c-menu__item"
1052
+ class="pf-v6-c-menu__item"
1053
1053
  type="button"
1054
1054
  role="menuitem"
1055
1055
  >
1056
- <span class="pf-v5-c-menu__item-main">
1057
- <span class="pf-v5-c-menu__item-toggle-icon">
1056
+ <span class="pf-v6-c-menu__item-main">
1057
+ <span class="pf-v6-c-menu__item-toggle-icon">
1058
1058
  <i class="fas fa-angle-left"></i>
1059
1059
  </span>
1060
- <span class="pf-v5-c-menu__item-text">Configuration</span>
1060
+ <span class="pf-v6-c-menu__item-text">Configuration</span>
1061
1061
  </span>
1062
1062
  </button>
1063
1063
  </li>
1064
- <li class="pf-v5-c-menu__list-item" role="none">
1064
+ <li class="pf-v6-c-menu__list-item" role="none">
1065
1065
  <button
1066
- class="pf-v5-c-menu__item"
1066
+ class="pf-v6-c-menu__item"
1067
1067
  type="button"
1068
1068
  role="menuitem"
1069
1069
  aria-expanded="false"
1070
1070
  >
1071
- <span class="pf-v5-c-menu__item-main">
1072
- <span class="pf-v5-c-menu__item-text">Profile</span>
1073
- <span class="pf-v5-c-menu__item-toggle-icon">
1071
+ <span class="pf-v6-c-menu__item-main">
1072
+ <span class="pf-v6-c-menu__item-text">Profile</span>
1073
+ <span class="pf-v6-c-menu__item-toggle-icon">
1074
1074
  <i class="fas fa-angle-right"></i>
1075
1075
  </span>
1076
1076
  </span>
1077
1077
  </button>
1078
- <div class="pf-v5-c-menu">
1079
- <div class="pf-v5-c-menu__content">
1080
- <ul class="pf-v5-c-menu__list" role="menu">
1078
+ <div class="pf-v6-c-menu">
1079
+ <div class="pf-v6-c-menu__content">
1080
+ <ul class="pf-v6-c-menu__list" role="menu">
1081
1081
  <li
1082
- class="pf-v5-c-menu__list-item pf-m-drill-up"
1082
+ class="pf-v6-c-menu__list-item pf-m-drill-up"
1083
1083
  role="none"
1084
1084
  >
1085
1085
  <button
1086
- class="pf-v5-c-menu__item"
1086
+ class="pf-v6-c-menu__item"
1087
1087
  type="button"
1088
1088
  role="menuitem"
1089
1089
  >
1090
- <span class="pf-v5-c-menu__item-main">
1091
- <span class="pf-v5-c-menu__item-toggle-icon">
1090
+ <span class="pf-v6-c-menu__item-main">
1091
+ <span class="pf-v6-c-menu__item-toggle-icon">
1092
1092
  <i class="fas fa-angle-left"></i>
1093
1093
  </span>
1094
- <span class="pf-v5-c-menu__item-text">Profile</span>
1094
+ <span class="pf-v6-c-menu__item-text">Profile</span>
1095
1095
  </span>
1096
1096
  </button>
1097
1097
  </li>
1098
- <li class="pf-v5-c-menu__list-item" role="none">
1098
+ <li class="pf-v6-c-menu__list-item" role="none">
1099
1099
  <button
1100
- class="pf-v5-c-menu__item"
1100
+ class="pf-v6-c-menu__item"
1101
1101
  type="button"
1102
1102
  role="menuitem"
1103
1103
  >
1104
- <span class="pf-v5-c-menu__item-main">
1105
- <span class="pf-v5-c-menu__item-text">Avatar</span>
1104
+ <span class="pf-v6-c-menu__item-main">
1105
+ <span class="pf-v6-c-menu__item-text">Avatar</span>
1106
1106
  </span>
1107
1107
  </button>
1108
1108
  </li>
1109
- <li class="pf-v5-c-menu__list-item" role="none">
1109
+ <li class="pf-v6-c-menu__list-item" role="none">
1110
1110
  <button
1111
- class="pf-v5-c-menu__item"
1111
+ class="pf-v6-c-menu__item"
1112
1112
  type="button"
1113
1113
  role="menuitem"
1114
1114
  >
1115
- <span class="pf-v5-c-menu__item-main">
1116
- <span class="pf-v5-c-menu__item-text">Name</span>
1115
+ <span class="pf-v6-c-menu__item-main">
1116
+ <span class="pf-v6-c-menu__item-text">Name</span>
1117
1117
  </span>
1118
1118
  </button>
1119
1119
  </li>
1120
- <li class="pf-v5-c-menu__list-item" role="none">
1120
+ <li class="pf-v6-c-menu__list-item" role="none">
1121
1121
  <button
1122
- class="pf-v5-c-menu__item"
1122
+ class="pf-v6-c-menu__item"
1123
1123
  type="button"
1124
1124
  role="menuitem"
1125
1125
  >
1126
- <span class="pf-v5-c-menu__item-main">
1127
- <span class="pf-v5-c-menu__item-text">Title</span>
1126
+ <span class="pf-v6-c-menu__item-main">
1127
+ <span class="pf-v6-c-menu__item-text">Title</span>
1128
1128
  </span>
1129
1129
  </button>
1130
1130
  </li>
@@ -1132,99 +1132,99 @@ cssPrefix: pf-v5-c-nav
1132
1132
  </div>
1133
1133
  </div>
1134
1134
  </li>
1135
- <li class="pf-v5-c-menu__list-item" role="none">
1135
+ <li class="pf-v6-c-menu__list-item" role="none">
1136
1136
  <button
1137
- class="pf-v5-c-menu__item"
1137
+ class="pf-v6-c-menu__item"
1138
1138
  type="button"
1139
1139
  role="menuitem"
1140
1140
  >
1141
- <span class="pf-v5-c-menu__item-main">
1142
- <span class="pf-v5-c-menu__item-text">Time zone</span>
1141
+ <span class="pf-v6-c-menu__item-main">
1142
+ <span class="pf-v6-c-menu__item-text">Time zone</span>
1143
1143
  </span>
1144
1144
  </button>
1145
1145
  </li>
1146
- <li class="pf-v5-c-menu__list-item" role="none">
1146
+ <li class="pf-v6-c-menu__list-item" role="none">
1147
1147
  <button
1148
- class="pf-v5-c-menu__item"
1148
+ class="pf-v6-c-menu__item"
1149
1149
  type="button"
1150
1150
  role="menuitem"
1151
1151
  >
1152
- <span class="pf-v5-c-menu__item-main">
1153
- <span class="pf-v5-c-menu__item-text">Account settings</span>
1152
+ <span class="pf-v6-c-menu__item-main">
1153
+ <span class="pf-v6-c-menu__item-text">Account settings</span>
1154
1154
  </span>
1155
1155
  </button>
1156
1156
  </li>
1157
- <li class="pf-v5-c-menu__list-item" role="none">
1157
+ <li class="pf-v6-c-menu__list-item" role="none">
1158
1158
  <button
1159
- class="pf-v5-c-menu__item"
1159
+ class="pf-v6-c-menu__item"
1160
1160
  type="button"
1161
1161
  role="menuitem"
1162
1162
  >
1163
- <span class="pf-v5-c-menu__item-main">
1163
+ <span class="pf-v6-c-menu__item-main">
1164
1164
  <span
1165
- class="pf-v5-c-menu__item-text"
1165
+ class="pf-v6-c-menu__item-text"
1166
1166
  >Thing with a longer label</span>
1167
1167
  </span>
1168
1168
  </button>
1169
1169
  </li>
1170
- <li class="pf-v5-c-menu__list-item" role="none">
1170
+ <li class="pf-v6-c-menu__list-item" role="none">
1171
1171
  <button
1172
- class="pf-v5-c-menu__item"
1172
+ class="pf-v6-c-menu__item"
1173
1173
  type="button"
1174
1174
  role="menuitem"
1175
1175
  aria-expanded="false"
1176
1176
  >
1177
- <span class="pf-v5-c-menu__item-main">
1178
- <span class="pf-v5-c-menu__item-text">Edit access settings</span>
1179
- <span class="pf-v5-c-menu__item-toggle-icon">
1177
+ <span class="pf-v6-c-menu__item-main">
1178
+ <span class="pf-v6-c-menu__item-text">Edit access settings</span>
1179
+ <span class="pf-v6-c-menu__item-toggle-icon">
1180
1180
  <i class="fas fa-angle-right"></i>
1181
1181
  </span>
1182
1182
  </span>
1183
1183
  </button>
1184
- <div class="pf-v5-c-menu">
1185
- <div class="pf-v5-c-menu__content">
1186
- <ul class="pf-v5-c-menu__list" role="menu">
1184
+ <div class="pf-v6-c-menu">
1185
+ <div class="pf-v6-c-menu__content">
1186
+ <ul class="pf-v6-c-menu__list" role="menu">
1187
1187
  <li
1188
- class="pf-v5-c-menu__list-item pf-m-drill-up"
1188
+ class="pf-v6-c-menu__list-item pf-m-drill-up"
1189
1189
  role="none"
1190
1190
  >
1191
1191
  <button
1192
- class="pf-v5-c-menu__item"
1192
+ class="pf-v6-c-menu__item"
1193
1193
  type="button"
1194
1194
  role="menuitem"
1195
1195
  >
1196
- <span class="pf-v5-c-menu__item-main">
1197
- <span class="pf-v5-c-menu__item-toggle-icon">
1196
+ <span class="pf-v6-c-menu__item-main">
1197
+ <span class="pf-v6-c-menu__item-toggle-icon">
1198
1198
  <i class="fas fa-angle-left"></i>
1199
1199
  </span>
1200
1200
  <span
1201
- class="pf-v5-c-menu__item-text"
1201
+ class="pf-v6-c-menu__item-text"
1202
1202
  >Edit access settings</span>
1203
1203
  </span>
1204
1204
  </button>
1205
1205
  </li>
1206
- <li class="pf-v5-c-menu__list-item" role="none">
1206
+ <li class="pf-v6-c-menu__list-item" role="none">
1207
1207
  <button
1208
- class="pf-v5-c-menu__item"
1208
+ class="pf-v6-c-menu__item"
1209
1209
  type="button"
1210
1210
  role="menuitem"
1211
1211
  >
1212
- <span class="pf-v5-c-menu__item-main">
1212
+ <span class="pf-v6-c-menu__item-main">
1213
1213
  <span
1214
- class="pf-v5-c-menu__item-text"
1214
+ class="pf-v6-c-menu__item-text"
1215
1215
  >Global access</span>
1216
1216
  </span>
1217
1217
  </button>
1218
1218
  </li>
1219
- <li class="pf-v5-c-menu__list-item" role="none">
1219
+ <li class="pf-v6-c-menu__list-item" role="none">
1220
1220
  <button
1221
- class="pf-v5-c-menu__item"
1221
+ class="pf-v6-c-menu__item"
1222
1222
  type="button"
1223
1223
  role="menuitem"
1224
1224
  >
1225
- <span class="pf-v5-c-menu__item-main">
1225
+ <span class="pf-v6-c-menu__item-main">
1226
1226
  <span
1227
- class="pf-v5-c-menu__item-text"
1227
+ class="pf-v6-c-menu__item-text"
1228
1228
  >Account access</span>
1229
1229
  </span>
1230
1230
  </button>
@@ -1247,221 +1247,221 @@ cssPrefix: pf-v5-c-nav
1247
1247
  ### Nav with drilldown menu level two
1248
1248
 
1249
1249
  ```html isBeta
1250
- <nav class="pf-v5-c-nav" aria-label="Drilldown menu example">
1251
- <div class="pf-v5-c-menu pf-m-drilldown pf-m-drilled-in">
1250
+ <nav class="pf-v6-c-nav" aria-label="Drilldown menu example">
1251
+ <div class="pf-v6-c-menu pf-m-drilldown pf-m-drilled-in">
1252
1252
  <div
1253
- class="pf-v5-c-menu__content"
1253
+ class="pf-v6-c-menu__content"
1254
1254
  style="--pf-v5-c-menu__content--Height: 228px;"
1255
1255
  >
1256
- <ul class="pf-v5-c-menu__list" role="menu">
1257
- <li class="pf-v5-c-menu__list-item" role="none">
1258
- <button class="pf-v5-c-menu__item" type="button" role="menuitem">
1259
- <span class="pf-v5-c-menu__item-main">
1260
- <span class="pf-v5-c-menu__item-text">Start rollout</span>
1256
+ <ul class="pf-v6-c-menu__list" role="menu">
1257
+ <li class="pf-v6-c-menu__list-item" role="none">
1258
+ <button class="pf-v6-c-menu__item" type="button" role="menuitem">
1259
+ <span class="pf-v6-c-menu__item-main">
1260
+ <span class="pf-v6-c-menu__item-text">Start rollout</span>
1261
1261
  </span>
1262
1262
  </button>
1263
1263
  </li>
1264
- <li class="pf-v5-c-menu__list-item" role="none">
1265
- <button class="pf-v5-c-menu__item" type="button" role="menuitem">
1266
- <span class="pf-v5-c-menu__item-main">
1267
- <span class="pf-v5-c-menu__item-text">Pause rollout</span>
1264
+ <li class="pf-v6-c-menu__list-item" role="none">
1265
+ <button class="pf-v6-c-menu__item" type="button" role="menuitem">
1266
+ <span class="pf-v6-c-menu__item-main">
1267
+ <span class="pf-v6-c-menu__item-text">Pause rollout</span>
1268
1268
  </span>
1269
1269
  </button>
1270
1270
  </li>
1271
- <li class="pf-v5-c-menu__list-item" role="none">
1271
+ <li class="pf-v6-c-menu__list-item" role="none">
1272
1272
  <button
1273
- class="pf-v5-c-menu__item pf-m-current"
1273
+ class="pf-v6-c-menu__item pf-m-current"
1274
1274
  type="button"
1275
1275
  role="menuitem"
1276
1276
  >
1277
- <span class="pf-v5-c-menu__item-main">
1278
- <span class="pf-v5-c-menu__item-text">Current link</span>
1277
+ <span class="pf-v6-c-menu__item-main">
1278
+ <span class="pf-v6-c-menu__item-text">Current link</span>
1279
1279
  </span>
1280
1280
  </button>
1281
1281
  </li>
1282
- <li class="pf-v5-c-menu__list-item" role="none">
1283
- <button class="pf-v5-c-menu__item" type="button" role="menuitem">
1284
- <span class="pf-v5-c-menu__item-main">
1285
- <span class="pf-v5-c-menu__item-text">Add storage</span>
1282
+ <li class="pf-v6-c-menu__list-item" role="none">
1283
+ <button class="pf-v6-c-menu__item" type="button" role="menuitem">
1284
+ <span class="pf-v6-c-menu__item-main">
1285
+ <span class="pf-v6-c-menu__item-text">Add storage</span>
1286
1286
  </span>
1287
1287
  </button>
1288
1288
  </li>
1289
- <li class="pf-v5-c-menu__list-item pf-m-current-path" role="none">
1289
+ <li class="pf-v6-c-menu__list-item pf-m-current-path" role="none">
1290
1290
  <button
1291
- class="pf-v5-c-menu__item"
1291
+ class="pf-v6-c-menu__item"
1292
1292
  type="button"
1293
1293
  role="menuitem"
1294
1294
  aria-expanded="true"
1295
1295
  >
1296
- <span class="pf-v5-c-menu__item-main">
1297
- <span class="pf-v5-c-menu__item-text">Edit</span>
1298
- <span class="pf-v5-c-menu__item-toggle-icon">
1296
+ <span class="pf-v6-c-menu__item-main">
1297
+ <span class="pf-v6-c-menu__item-text">Edit</span>
1298
+ <span class="pf-v6-c-menu__item-toggle-icon">
1299
1299
  <i class="fas fa-angle-right"></i>
1300
1300
  </span>
1301
1301
  </span>
1302
1302
  </button>
1303
- <div class="pf-v5-c-menu">
1304
- <div class="pf-v5-c-menu__content">
1305
- <ul class="pf-v5-c-menu__list" role="menu">
1306
- <li class="pf-v5-c-menu__list-item pf-m-drill-up" role="none">
1303
+ <div class="pf-v6-c-menu">
1304
+ <div class="pf-v6-c-menu__content">
1305
+ <ul class="pf-v6-c-menu__list" role="menu">
1306
+ <li class="pf-v6-c-menu__list-item pf-m-drill-up" role="none">
1307
1307
  <button
1308
- class="pf-v5-c-menu__item"
1308
+ class="pf-v6-c-menu__item"
1309
1309
  type="button"
1310
1310
  role="menuitem"
1311
1311
  tabindex="0"
1312
1312
  >
1313
- <span class="pf-v5-c-menu__item-main">
1314
- <span class="pf-v5-c-menu__item-toggle-icon">
1313
+ <span class="pf-v6-c-menu__item-main">
1314
+ <span class="pf-v6-c-menu__item-toggle-icon">
1315
1315
  <i class="fas fa-angle-left"></i>
1316
1316
  </span>
1317
- <span class="pf-v5-c-menu__item-text">Edit</span>
1317
+ <span class="pf-v6-c-menu__item-text">Edit</span>
1318
1318
  </span>
1319
1319
  </button>
1320
1320
  </li>
1321
- <li class="pf-v5-c-menu__list-item" role="none">
1321
+ <li class="pf-v6-c-menu__list-item" role="none">
1322
1322
  <button
1323
- class="pf-v5-c-menu__item"
1323
+ class="pf-v6-c-menu__item"
1324
1324
  type="button"
1325
1325
  role="menuitem"
1326
1326
  aria-expanded="false"
1327
1327
  >
1328
- <span class="pf-v5-c-menu__item-main">
1329
- <span class="pf-v5-c-menu__item-text">Deployment</span>
1330
- <span class="pf-v5-c-menu__item-toggle-icon">
1328
+ <span class="pf-v6-c-menu__item-main">
1329
+ <span class="pf-v6-c-menu__item-text">Deployment</span>
1330
+ <span class="pf-v6-c-menu__item-toggle-icon">
1331
1331
  <i class="fas fa-angle-right"></i>
1332
1332
  </span>
1333
1333
  </span>
1334
1334
  </button>
1335
- <div class="pf-v5-c-menu">
1336
- <div class="pf-v5-c-menu__content">
1337
- <ul class="pf-v5-c-menu__list" role="menu">
1335
+ <div class="pf-v6-c-menu">
1336
+ <div class="pf-v6-c-menu__content">
1337
+ <ul class="pf-v6-c-menu__list" role="menu">
1338
1338
  <li
1339
- class="pf-v5-c-menu__list-item pf-m-drill-up"
1339
+ class="pf-v6-c-menu__list-item pf-m-drill-up"
1340
1340
  role="none"
1341
1341
  >
1342
1342
  <button
1343
- class="pf-v5-c-menu__item"
1343
+ class="pf-v6-c-menu__item"
1344
1344
  type="button"
1345
1345
  role="menuitem"
1346
1346
  tabindex="0"
1347
1347
  >
1348
- <span class="pf-v5-c-menu__item-main">
1349
- <span class="pf-v5-c-menu__item-toggle-icon">
1348
+ <span class="pf-v6-c-menu__item-main">
1349
+ <span class="pf-v6-c-menu__item-toggle-icon">
1350
1350
  <i class="fas fa-angle-left"></i>
1351
1351
  </span>
1352
- <span class="pf-v5-c-menu__item-text">Deployment</span>
1352
+ <span class="pf-v6-c-menu__item-text">Deployment</span>
1353
1353
  </span>
1354
1354
  </button>
1355
1355
  </li>
1356
- <li class="pf-v5-c-menu__list-item" role="none">
1356
+ <li class="pf-v6-c-menu__list-item" role="none">
1357
1357
  <button
1358
- class="pf-v5-c-menu__item"
1358
+ class="pf-v6-c-menu__item"
1359
1359
  type="button"
1360
1360
  role="menuitem"
1361
1361
  >
1362
- <span class="pf-v5-c-menu__item-main">
1363
- <span class="pf-v5-c-menu__item-text">Routes</span>
1362
+ <span class="pf-v6-c-menu__item-main">
1363
+ <span class="pf-v6-c-menu__item-text">Routes</span>
1364
1364
  </span>
1365
1365
  </button>
1366
1366
  </li>
1367
- <li class="pf-v5-c-menu__list-item" role="none">
1367
+ <li class="pf-v6-c-menu__list-item" role="none">
1368
1368
  <button
1369
- class="pf-v5-c-menu__item"
1369
+ class="pf-v6-c-menu__item"
1370
1370
  type="button"
1371
1371
  role="menuitem"
1372
1372
  >
1373
- <span class="pf-v5-c-menu__item-main">
1374
- <span class="pf-v5-c-menu__item-text">Nodes</span>
1373
+ <span class="pf-v6-c-menu__item-main">
1374
+ <span class="pf-v6-c-menu__item-text">Nodes</span>
1375
1375
  </span>
1376
1376
  </button>
1377
1377
  </li>
1378
- <li class="pf-v5-c-menu__list-item" role="none">
1378
+ <li class="pf-v6-c-menu__list-item" role="none">
1379
1379
  <button
1380
- class="pf-v5-c-menu__item"
1380
+ class="pf-v6-c-menu__item"
1381
1381
  type="button"
1382
1382
  role="menuitem"
1383
1383
  >
1384
- <span class="pf-v5-c-menu__item-main">
1385
- <span class="pf-v5-c-menu__item-text">URLs</span>
1384
+ <span class="pf-v6-c-menu__item-main">
1385
+ <span class="pf-v6-c-menu__item-text">URLs</span>
1386
1386
  </span>
1387
1387
  </button>
1388
1388
  </li>
1389
- <li class="pf-v5-c-menu__list-item" role="none">
1389
+ <li class="pf-v6-c-menu__list-item" role="none">
1390
1390
  <button
1391
- class="pf-v5-c-menu__item"
1391
+ class="pf-v6-c-menu__item"
1392
1392
  type="button"
1393
1393
  role="menuitem"
1394
1394
  aria-expanded="false"
1395
1395
  >
1396
- <span class="pf-v5-c-menu__item-main">
1396
+ <span class="pf-v6-c-menu__item-main">
1397
1397
  <span
1398
- class="pf-v5-c-menu__item-text"
1398
+ class="pf-v6-c-menu__item-text"
1399
1399
  >Advanced settings</span>
1400
- <span class="pf-v5-c-menu__item-toggle-icon">
1400
+ <span class="pf-v6-c-menu__item-toggle-icon">
1401
1401
  <i class="fas fa-angle-right"></i>
1402
1402
  </span>
1403
1403
  </span>
1404
1404
  </button>
1405
- <div class="pf-v5-c-menu">
1406
- <div class="pf-v5-c-menu__content">
1407
- <ul class="pf-v5-c-menu__list" role="menu">
1405
+ <div class="pf-v6-c-menu">
1406
+ <div class="pf-v6-c-menu__content">
1407
+ <ul class="pf-v6-c-menu__list" role="menu">
1408
1408
  <li
1409
- class="pf-v5-c-menu__list-item pf-m-drill-up"
1409
+ class="pf-v6-c-menu__list-item pf-m-drill-up"
1410
1410
  role="none"
1411
1411
  >
1412
1412
  <button
1413
- class="pf-v5-c-menu__item"
1413
+ class="pf-v6-c-menu__item"
1414
1414
  type="button"
1415
1415
  role="menuitem"
1416
1416
  tabindex="0"
1417
1417
  >
1418
- <span class="pf-v5-c-menu__item-main">
1418
+ <span class="pf-v6-c-menu__item-main">
1419
1419
  <span
1420
- class="pf-v5-c-menu__item-toggle-icon"
1420
+ class="pf-v6-c-menu__item-toggle-icon"
1421
1421
  >
1422
1422
  <i class="fas fa-angle-left"></i>
1423
1423
  </span>
1424
1424
  <span
1425
- class="pf-v5-c-menu__item-text"
1425
+ class="pf-v6-c-menu__item-text"
1426
1426
  >Advanced settings</span>
1427
1427
  </span>
1428
1428
  </button>
1429
1429
  </li>
1430
- <li class="pf-v5-c-menu__list-item" role="none">
1430
+ <li class="pf-v6-c-menu__list-item" role="none">
1431
1431
  <button
1432
- class="pf-v5-c-menu__item"
1432
+ class="pf-v6-c-menu__item"
1433
1433
  type="button"
1434
1434
  role="menuitem"
1435
1435
  >
1436
- <span class="pf-v5-c-menu__item-main">
1436
+ <span class="pf-v6-c-menu__item-main">
1437
1437
  <span
1438
- class="pf-v5-c-menu__item-text"
1438
+ class="pf-v6-c-menu__item-text"
1439
1439
  >Reports</span>
1440
1440
  </span>
1441
1441
  </button>
1442
1442
  </li>
1443
- <li class="pf-v5-c-menu__list-item" role="none">
1443
+ <li class="pf-v6-c-menu__list-item" role="none">
1444
1444
  <button
1445
- class="pf-v5-c-menu__item"
1445
+ class="pf-v6-c-menu__item"
1446
1446
  type="button"
1447
1447
  role="menuitem"
1448
1448
  >
1449
- <span class="pf-v5-c-menu__item-main">
1449
+ <span class="pf-v6-c-menu__item-main">
1450
1450
  <span
1451
- class="pf-v5-c-menu__item-text"
1451
+ class="pf-v6-c-menu__item-text"
1452
1452
  >Policies</span>
1453
1453
  </span>
1454
1454
  </button>
1455
1455
  </li>
1456
- <li class="pf-v5-c-menu__list-item" role="none">
1456
+ <li class="pf-v6-c-menu__list-item" role="none">
1457
1457
  <button
1458
- class="pf-v5-c-menu__item"
1458
+ class="pf-v6-c-menu__item"
1459
1459
  type="button"
1460
1460
  role="menuitem"
1461
1461
  >
1462
- <span class="pf-v5-c-menu__item-main">
1462
+ <span class="pf-v6-c-menu__item-main">
1463
1463
  <span
1464
- class="pf-v5-c-menu__item-text"
1464
+ class="pf-v6-c-menu__item-text"
1465
1465
  >Systems</span>
1466
1466
  </span>
1467
1467
  </button>
@@ -1474,70 +1474,70 @@ cssPrefix: pf-v5-c-nav
1474
1474
  </div>
1475
1475
  </div>
1476
1476
  </li>
1477
- <li class="pf-v5-c-menu__list-item" role="none">
1477
+ <li class="pf-v6-c-menu__list-item" role="none">
1478
1478
  <button
1479
- class="pf-v5-c-menu__item"
1479
+ class="pf-v6-c-menu__item"
1480
1480
  type="button"
1481
1481
  role="menuitem"
1482
1482
  aria-expanded="false"
1483
1483
  >
1484
- <span class="pf-v5-c-menu__item-main">
1485
- <span class="pf-v5-c-menu__item-text">RBAC</span>
1486
- <span class="pf-v5-c-menu__item-toggle-icon">
1484
+ <span class="pf-v6-c-menu__item-main">
1485
+ <span class="pf-v6-c-menu__item-text">RBAC</span>
1486
+ <span class="pf-v6-c-menu__item-toggle-icon">
1487
1487
  <i class="fas fa-angle-right"></i>
1488
1488
  </span>
1489
1489
  </span>
1490
1490
  </button>
1491
- <div class="pf-v5-c-menu">
1492
- <div class="pf-v5-c-menu__content">
1493
- <ul class="pf-v5-c-menu__list" role="menu">
1491
+ <div class="pf-v6-c-menu">
1492
+ <div class="pf-v6-c-menu__content">
1493
+ <ul class="pf-v6-c-menu__list" role="menu">
1494
1494
  <li
1495
- class="pf-v5-c-menu__list-item pf-m-drill-up"
1495
+ class="pf-v6-c-menu__list-item pf-m-drill-up"
1496
1496
  role="none"
1497
1497
  >
1498
1498
  <button
1499
- class="pf-v5-c-menu__item"
1499
+ class="pf-v6-c-menu__item"
1500
1500
  type="button"
1501
1501
  role="menuitem"
1502
1502
  >
1503
- <span class="pf-v5-c-menu__item-main">
1504
- <span class="pf-v5-c-menu__item-toggle-icon">
1503
+ <span class="pf-v6-c-menu__item-main">
1504
+ <span class="pf-v6-c-menu__item-toggle-icon">
1505
1505
  <i class="fas fa-angle-left"></i>
1506
1506
  </span>
1507
- <span class="pf-v5-c-menu__item-text">RBAC</span>
1507
+ <span class="pf-v6-c-menu__item-text">RBAC</span>
1508
1508
  </span>
1509
1509
  </button>
1510
1510
  </li>
1511
- <li class="pf-v5-c-menu__list-item" role="none">
1511
+ <li class="pf-v6-c-menu__list-item" role="none">
1512
1512
  <button
1513
- class="pf-v5-c-menu__item"
1513
+ class="pf-v6-c-menu__item"
1514
1514
  type="button"
1515
1515
  role="menuitem"
1516
1516
  >
1517
- <span class="pf-v5-c-menu__item-main">
1518
- <span class="pf-v5-c-menu__item-text">Reports</span>
1517
+ <span class="pf-v6-c-menu__item-main">
1518
+ <span class="pf-v6-c-menu__item-text">Reports</span>
1519
1519
  </span>
1520
1520
  </button>
1521
1521
  </li>
1522
- <li class="pf-v5-c-menu__list-item" role="none">
1522
+ <li class="pf-v6-c-menu__list-item" role="none">
1523
1523
  <button
1524
- class="pf-v5-c-menu__item"
1524
+ class="pf-v6-c-menu__item"
1525
1525
  type="button"
1526
1526
  role="menuitem"
1527
1527
  >
1528
- <span class="pf-v5-c-menu__item-main">
1529
- <span class="pf-v5-c-menu__item-text">Policies</span>
1528
+ <span class="pf-v6-c-menu__item-main">
1529
+ <span class="pf-v6-c-menu__item-text">Policies</span>
1530
1530
  </span>
1531
1531
  </button>
1532
1532
  </li>
1533
- <li class="pf-v5-c-menu__list-item" role="none">
1533
+ <li class="pf-v6-c-menu__list-item" role="none">
1534
1534
  <button
1535
- class="pf-v5-c-menu__item"
1535
+ class="pf-v6-c-menu__item"
1536
1536
  type="button"
1537
1537
  role="menuitem"
1538
1538
  >
1539
- <span class="pf-v5-c-menu__item-main">
1540
- <span class="pf-v5-c-menu__item-text">Systems</span>
1539
+ <span class="pf-v6-c-menu__item-main">
1540
+ <span class="pf-v6-c-menu__item-text">Systems</span>
1541
1541
  </span>
1542
1542
  </button>
1543
1543
  </li>
@@ -1545,15 +1545,15 @@ cssPrefix: pf-v5-c-nav
1545
1545
  </div>
1546
1546
  </div>
1547
1547
  </li>
1548
- <li class="pf-v5-c-menu__list-item" role="none">
1548
+ <li class="pf-v6-c-menu__list-item" role="none">
1549
1549
  <button
1550
- class="pf-v5-c-menu__item"
1550
+ class="pf-v6-c-menu__item"
1551
1551
  type="button"
1552
1552
  role="menuitem"
1553
1553
  >
1554
- <span class="pf-v5-c-menu__item-main">
1554
+ <span class="pf-v6-c-menu__item-main">
1555
1555
  <span
1556
- class="pf-v5-c-menu__item-text"
1556
+ class="pf-v6-c-menu__item-text"
1557
1557
  >Thing with a longer label</span>
1558
1558
  </span>
1559
1559
  </button>
@@ -1562,101 +1562,101 @@ cssPrefix: pf-v5-c-nav
1562
1562
  </div>
1563
1563
  </div>
1564
1564
  </li>
1565
- <li class="pf-v5-c-menu__list-item" role="none">
1565
+ <li class="pf-v6-c-menu__list-item" role="none">
1566
1566
  <button
1567
- class="pf-v5-c-menu__item"
1567
+ class="pf-v6-c-menu__item"
1568
1568
  type="button"
1569
1569
  role="menuitem"
1570
1570
  aria-expanded="false"
1571
1571
  >
1572
- <span class="pf-v5-c-menu__item-main">
1573
- <span class="pf-v5-c-menu__item-text">Configuration</span>
1574
- <span class="pf-v5-c-menu__item-toggle-icon">
1572
+ <span class="pf-v6-c-menu__item-main">
1573
+ <span class="pf-v6-c-menu__item-text">Configuration</span>
1574
+ <span class="pf-v6-c-menu__item-toggle-icon">
1575
1575
  <i class="fas fa-angle-right"></i>
1576
1576
  </span>
1577
1577
  </span>
1578
1578
  </button>
1579
- <div class="pf-v5-c-menu">
1580
- <div class="pf-v5-c-menu__content">
1581
- <ul class="pf-v5-c-menu__list" role="menu">
1582
- <li class="pf-v5-c-menu__list-item pf-m-drill-up" role="none">
1579
+ <div class="pf-v6-c-menu">
1580
+ <div class="pf-v6-c-menu__content">
1581
+ <ul class="pf-v6-c-menu__list" role="menu">
1582
+ <li class="pf-v6-c-menu__list-item pf-m-drill-up" role="none">
1583
1583
  <button
1584
- class="pf-v5-c-menu__item"
1584
+ class="pf-v6-c-menu__item"
1585
1585
  type="button"
1586
1586
  role="menuitem"
1587
1587
  >
1588
- <span class="pf-v5-c-menu__item-main">
1589
- <span class="pf-v5-c-menu__item-toggle-icon">
1588
+ <span class="pf-v6-c-menu__item-main">
1589
+ <span class="pf-v6-c-menu__item-toggle-icon">
1590
1590
  <i class="fas fa-angle-left"></i>
1591
1591
  </span>
1592
- <span class="pf-v5-c-menu__item-text">Configuration</span>
1592
+ <span class="pf-v6-c-menu__item-text">Configuration</span>
1593
1593
  </span>
1594
1594
  </button>
1595
1595
  </li>
1596
- <li class="pf-v5-c-menu__list-item" role="none">
1596
+ <li class="pf-v6-c-menu__list-item" role="none">
1597
1597
  <button
1598
- class="pf-v5-c-menu__item"
1598
+ class="pf-v6-c-menu__item"
1599
1599
  type="button"
1600
1600
  role="menuitem"
1601
1601
  aria-expanded="false"
1602
1602
  >
1603
- <span class="pf-v5-c-menu__item-main">
1604
- <span class="pf-v5-c-menu__item-text">Profile</span>
1605
- <span class="pf-v5-c-menu__item-toggle-icon">
1603
+ <span class="pf-v6-c-menu__item-main">
1604
+ <span class="pf-v6-c-menu__item-text">Profile</span>
1605
+ <span class="pf-v6-c-menu__item-toggle-icon">
1606
1606
  <i class="fas fa-angle-right"></i>
1607
1607
  </span>
1608
1608
  </span>
1609
1609
  </button>
1610
- <div class="pf-v5-c-menu">
1611
- <div class="pf-v5-c-menu__content">
1612
- <ul class="pf-v5-c-menu__list" role="menu">
1610
+ <div class="pf-v6-c-menu">
1611
+ <div class="pf-v6-c-menu__content">
1612
+ <ul class="pf-v6-c-menu__list" role="menu">
1613
1613
  <li
1614
- class="pf-v5-c-menu__list-item pf-m-drill-up"
1614
+ class="pf-v6-c-menu__list-item pf-m-drill-up"
1615
1615
  role="none"
1616
1616
  >
1617
1617
  <button
1618
- class="pf-v5-c-menu__item"
1618
+ class="pf-v6-c-menu__item"
1619
1619
  type="button"
1620
1620
  role="menuitem"
1621
1621
  >
1622
- <span class="pf-v5-c-menu__item-main">
1623
- <span class="pf-v5-c-menu__item-toggle-icon">
1622
+ <span class="pf-v6-c-menu__item-main">
1623
+ <span class="pf-v6-c-menu__item-toggle-icon">
1624
1624
  <i class="fas fa-angle-left"></i>
1625
1625
  </span>
1626
- <span class="pf-v5-c-menu__item-text">Profile</span>
1626
+ <span class="pf-v6-c-menu__item-text">Profile</span>
1627
1627
  </span>
1628
1628
  </button>
1629
1629
  </li>
1630
- <li class="pf-v5-c-menu__list-item" role="none">
1630
+ <li class="pf-v6-c-menu__list-item" role="none">
1631
1631
  <button
1632
- class="pf-v5-c-menu__item"
1632
+ class="pf-v6-c-menu__item"
1633
1633
  type="button"
1634
1634
  role="menuitem"
1635
1635
  >
1636
- <span class="pf-v5-c-menu__item-main">
1637
- <span class="pf-v5-c-menu__item-text">Avatar</span>
1636
+ <span class="pf-v6-c-menu__item-main">
1637
+ <span class="pf-v6-c-menu__item-text">Avatar</span>
1638
1638
  </span>
1639
1639
  </button>
1640
1640
  </li>
1641
- <li class="pf-v5-c-menu__list-item" role="none">
1641
+ <li class="pf-v6-c-menu__list-item" role="none">
1642
1642
  <button
1643
- class="pf-v5-c-menu__item"
1643
+ class="pf-v6-c-menu__item"
1644
1644
  type="button"
1645
1645
  role="menuitem"
1646
1646
  >
1647
- <span class="pf-v5-c-menu__item-main">
1648
- <span class="pf-v5-c-menu__item-text">Name</span>
1647
+ <span class="pf-v6-c-menu__item-main">
1648
+ <span class="pf-v6-c-menu__item-text">Name</span>
1649
1649
  </span>
1650
1650
  </button>
1651
1651
  </li>
1652
- <li class="pf-v5-c-menu__list-item" role="none">
1652
+ <li class="pf-v6-c-menu__list-item" role="none">
1653
1653
  <button
1654
- class="pf-v5-c-menu__item"
1654
+ class="pf-v6-c-menu__item"
1655
1655
  type="button"
1656
1656
  role="menuitem"
1657
1657
  >
1658
- <span class="pf-v5-c-menu__item-main">
1659
- <span class="pf-v5-c-menu__item-text">Title</span>
1658
+ <span class="pf-v6-c-menu__item-main">
1659
+ <span class="pf-v6-c-menu__item-text">Title</span>
1660
1660
  </span>
1661
1661
  </button>
1662
1662
  </li>
@@ -1664,99 +1664,99 @@ cssPrefix: pf-v5-c-nav
1664
1664
  </div>
1665
1665
  </div>
1666
1666
  </li>
1667
- <li class="pf-v5-c-menu__list-item" role="none">
1667
+ <li class="pf-v6-c-menu__list-item" role="none">
1668
1668
  <button
1669
- class="pf-v5-c-menu__item"
1669
+ class="pf-v6-c-menu__item"
1670
1670
  type="button"
1671
1671
  role="menuitem"
1672
1672
  >
1673
- <span class="pf-v5-c-menu__item-main">
1674
- <span class="pf-v5-c-menu__item-text">Time zone</span>
1673
+ <span class="pf-v6-c-menu__item-main">
1674
+ <span class="pf-v6-c-menu__item-text">Time zone</span>
1675
1675
  </span>
1676
1676
  </button>
1677
1677
  </li>
1678
- <li class="pf-v5-c-menu__list-item" role="none">
1678
+ <li class="pf-v6-c-menu__list-item" role="none">
1679
1679
  <button
1680
- class="pf-v5-c-menu__item"
1680
+ class="pf-v6-c-menu__item"
1681
1681
  type="button"
1682
1682
  role="menuitem"
1683
1683
  >
1684
- <span class="pf-v5-c-menu__item-main">
1685
- <span class="pf-v5-c-menu__item-text">Account settings</span>
1684
+ <span class="pf-v6-c-menu__item-main">
1685
+ <span class="pf-v6-c-menu__item-text">Account settings</span>
1686
1686
  </span>
1687
1687
  </button>
1688
1688
  </li>
1689
- <li class="pf-v5-c-menu__list-item" role="none">
1689
+ <li class="pf-v6-c-menu__list-item" role="none">
1690
1690
  <button
1691
- class="pf-v5-c-menu__item"
1691
+ class="pf-v6-c-menu__item"
1692
1692
  type="button"
1693
1693
  role="menuitem"
1694
1694
  >
1695
- <span class="pf-v5-c-menu__item-main">
1695
+ <span class="pf-v6-c-menu__item-main">
1696
1696
  <span
1697
- class="pf-v5-c-menu__item-text"
1697
+ class="pf-v6-c-menu__item-text"
1698
1698
  >Thing with a longer label</span>
1699
1699
  </span>
1700
1700
  </button>
1701
1701
  </li>
1702
- <li class="pf-v5-c-menu__list-item" role="none">
1702
+ <li class="pf-v6-c-menu__list-item" role="none">
1703
1703
  <button
1704
- class="pf-v5-c-menu__item"
1704
+ class="pf-v6-c-menu__item"
1705
1705
  type="button"
1706
1706
  role="menuitem"
1707
1707
  aria-expanded="false"
1708
1708
  >
1709
- <span class="pf-v5-c-menu__item-main">
1710
- <span class="pf-v5-c-menu__item-text">Edit access settings</span>
1711
- <span class="pf-v5-c-menu__item-toggle-icon">
1709
+ <span class="pf-v6-c-menu__item-main">
1710
+ <span class="pf-v6-c-menu__item-text">Edit access settings</span>
1711
+ <span class="pf-v6-c-menu__item-toggle-icon">
1712
1712
  <i class="fas fa-angle-right"></i>
1713
1713
  </span>
1714
1714
  </span>
1715
1715
  </button>
1716
- <div class="pf-v5-c-menu">
1717
- <div class="pf-v5-c-menu__content">
1718
- <ul class="pf-v5-c-menu__list" role="menu">
1716
+ <div class="pf-v6-c-menu">
1717
+ <div class="pf-v6-c-menu__content">
1718
+ <ul class="pf-v6-c-menu__list" role="menu">
1719
1719
  <li
1720
- class="pf-v5-c-menu__list-item pf-m-drill-up"
1720
+ class="pf-v6-c-menu__list-item pf-m-drill-up"
1721
1721
  role="none"
1722
1722
  >
1723
1723
  <button
1724
- class="pf-v5-c-menu__item"
1724
+ class="pf-v6-c-menu__item"
1725
1725
  type="button"
1726
1726
  role="menuitem"
1727
1727
  >
1728
- <span class="pf-v5-c-menu__item-main">
1729
- <span class="pf-v5-c-menu__item-toggle-icon">
1728
+ <span class="pf-v6-c-menu__item-main">
1729
+ <span class="pf-v6-c-menu__item-toggle-icon">
1730
1730
  <i class="fas fa-angle-left"></i>
1731
1731
  </span>
1732
1732
  <span
1733
- class="pf-v5-c-menu__item-text"
1733
+ class="pf-v6-c-menu__item-text"
1734
1734
  >Edit access settings</span>
1735
1735
  </span>
1736
1736
  </button>
1737
1737
  </li>
1738
- <li class="pf-v5-c-menu__list-item" role="none">
1738
+ <li class="pf-v6-c-menu__list-item" role="none">
1739
1739
  <button
1740
- class="pf-v5-c-menu__item"
1740
+ class="pf-v6-c-menu__item"
1741
1741
  type="button"
1742
1742
  role="menuitem"
1743
1743
  >
1744
- <span class="pf-v5-c-menu__item-main">
1744
+ <span class="pf-v6-c-menu__item-main">
1745
1745
  <span
1746
- class="pf-v5-c-menu__item-text"
1746
+ class="pf-v6-c-menu__item-text"
1747
1747
  >Global access</span>
1748
1748
  </span>
1749
1749
  </button>
1750
1750
  </li>
1751
- <li class="pf-v5-c-menu__list-item" role="none">
1751
+ <li class="pf-v6-c-menu__list-item" role="none">
1752
1752
  <button
1753
- class="pf-v5-c-menu__item"
1753
+ class="pf-v6-c-menu__item"
1754
1754
  type="button"
1755
1755
  role="menuitem"
1756
1756
  >
1757
- <span class="pf-v5-c-menu__item-main">
1757
+ <span class="pf-v6-c-menu__item-main">
1758
1758
  <span
1759
- class="pf-v5-c-menu__item-text"
1759
+ class="pf-v6-c-menu__item-text"
1760
1760
  >Account access</span>
1761
1761
  </span>
1762
1762
  </button>
@@ -1779,224 +1779,224 @@ cssPrefix: pf-v5-c-nav
1779
1779
  ### Nav with drilldown menu level three
1780
1780
 
1781
1781
  ```html isBeta
1782
- <nav class="pf-v5-c-nav" aria-label="Drilldown menu example">
1783
- <div class="pf-v5-c-menu pf-m-drilldown pf-m-drilled-in">
1782
+ <nav class="pf-v6-c-nav" aria-label="Drilldown menu example">
1783
+ <div class="pf-v6-c-menu pf-m-drilldown pf-m-drilled-in">
1784
1784
  <div
1785
- class="pf-v5-c-menu__content"
1785
+ class="pf-v6-c-menu__content"
1786
1786
  style="--pf-v5-c-menu__content--Height: 284px;"
1787
1787
  >
1788
- <ul class="pf-v5-c-menu__list" role="menu">
1789
- <li class="pf-v5-c-menu__list-item" role="none">
1790
- <button class="pf-v5-c-menu__item" type="button" role="menuitem">
1791
- <span class="pf-v5-c-menu__item-main">
1792
- <span class="pf-v5-c-menu__item-text">Start rollout</span>
1788
+ <ul class="pf-v6-c-menu__list" role="menu">
1789
+ <li class="pf-v6-c-menu__list-item" role="none">
1790
+ <button class="pf-v6-c-menu__item" type="button" role="menuitem">
1791
+ <span class="pf-v6-c-menu__item-main">
1792
+ <span class="pf-v6-c-menu__item-text">Start rollout</span>
1793
1793
  </span>
1794
1794
  </button>
1795
1795
  </li>
1796
- <li class="pf-v5-c-menu__list-item" role="none">
1797
- <button class="pf-v5-c-menu__item" type="button" role="menuitem">
1798
- <span class="pf-v5-c-menu__item-main">
1799
- <span class="pf-v5-c-menu__item-text">Pause rollout</span>
1796
+ <li class="pf-v6-c-menu__list-item" role="none">
1797
+ <button class="pf-v6-c-menu__item" type="button" role="menuitem">
1798
+ <span class="pf-v6-c-menu__item-main">
1799
+ <span class="pf-v6-c-menu__item-text">Pause rollout</span>
1800
1800
  </span>
1801
1801
  </button>
1802
1802
  </li>
1803
- <li class="pf-v5-c-menu__list-item" role="none">
1803
+ <li class="pf-v6-c-menu__list-item" role="none">
1804
1804
  <button
1805
- class="pf-v5-c-menu__item pf-m-current"
1805
+ class="pf-v6-c-menu__item pf-m-current"
1806
1806
  type="button"
1807
1807
  role="menuitem"
1808
1808
  >
1809
- <span class="pf-v5-c-menu__item-main">
1810
- <span class="pf-v5-c-menu__item-text">Current link</span>
1809
+ <span class="pf-v6-c-menu__item-main">
1810
+ <span class="pf-v6-c-menu__item-text">Current link</span>
1811
1811
  </span>
1812
1812
  </button>
1813
1813
  </li>
1814
- <li class="pf-v5-c-menu__list-item" role="none">
1815
- <button class="pf-v5-c-menu__item" type="button" role="menuitem">
1816
- <span class="pf-v5-c-menu__item-main">
1817
- <span class="pf-v5-c-menu__item-text">Add storage</span>
1814
+ <li class="pf-v6-c-menu__list-item" role="none">
1815
+ <button class="pf-v6-c-menu__item" type="button" role="menuitem">
1816
+ <span class="pf-v6-c-menu__item-main">
1817
+ <span class="pf-v6-c-menu__item-text">Add storage</span>
1818
1818
  </span>
1819
1819
  </button>
1820
1820
  </li>
1821
- <li class="pf-v5-c-menu__list-item pf-m-current-path" role="none">
1821
+ <li class="pf-v6-c-menu__list-item pf-m-current-path" role="none">
1822
1822
  <button
1823
- class="pf-v5-c-menu__item"
1823
+ class="pf-v6-c-menu__item"
1824
1824
  type="button"
1825
1825
  role="menuitem"
1826
1826
  aria-expanded="true"
1827
1827
  >
1828
- <span class="pf-v5-c-menu__item-main">
1829
- <span class="pf-v5-c-menu__item-text">Edit</span>
1830
- <span class="pf-v5-c-menu__item-toggle-icon">
1828
+ <span class="pf-v6-c-menu__item-main">
1829
+ <span class="pf-v6-c-menu__item-text">Edit</span>
1830
+ <span class="pf-v6-c-menu__item-toggle-icon">
1831
1831
  <i class="fas fa-angle-right"></i>
1832
1832
  </span>
1833
1833
  </span>
1834
1834
  </button>
1835
- <div class="pf-v5-c-menu pf-m-drilled-in">
1836
- <div class="pf-v5-c-menu__content">
1837
- <ul class="pf-v5-c-menu__list" role="menu">
1838
- <li class="pf-v5-c-menu__list-item pf-m-drill-up" role="none">
1835
+ <div class="pf-v6-c-menu pf-m-drilled-in">
1836
+ <div class="pf-v6-c-menu__content">
1837
+ <ul class="pf-v6-c-menu__list" role="menu">
1838
+ <li class="pf-v6-c-menu__list-item pf-m-drill-up" role="none">
1839
1839
  <button
1840
- class="pf-v5-c-menu__item"
1840
+ class="pf-v6-c-menu__item"
1841
1841
  type="button"
1842
1842
  role="menuitem"
1843
1843
  tabindex="0"
1844
1844
  >
1845
- <span class="pf-v5-c-menu__item-main">
1846
- <span class="pf-v5-c-menu__item-toggle-icon">
1845
+ <span class="pf-v6-c-menu__item-main">
1846
+ <span class="pf-v6-c-menu__item-toggle-icon">
1847
1847
  <i class="fas fa-angle-left"></i>
1848
1848
  </span>
1849
- <span class="pf-v5-c-menu__item-text">Edit</span>
1849
+ <span class="pf-v6-c-menu__item-text">Edit</span>
1850
1850
  </span>
1851
1851
  </button>
1852
1852
  </li>
1853
1853
  <li
1854
- class="pf-v5-c-menu__list-item pf-m-current-path"
1854
+ class="pf-v6-c-menu__list-item pf-m-current-path"
1855
1855
  role="none"
1856
1856
  >
1857
1857
  <button
1858
- class="pf-v5-c-menu__item"
1858
+ class="pf-v6-c-menu__item"
1859
1859
  type="button"
1860
1860
  role="menuitem"
1861
1861
  aria-expanded="true"
1862
1862
  >
1863
- <span class="pf-v5-c-menu__item-main">
1864
- <span class="pf-v5-c-menu__item-text">Deployment</span>
1865
- <span class="pf-v5-c-menu__item-toggle-icon">
1863
+ <span class="pf-v6-c-menu__item-main">
1864
+ <span class="pf-v6-c-menu__item-text">Deployment</span>
1865
+ <span class="pf-v6-c-menu__item-toggle-icon">
1866
1866
  <i class="fas fa-angle-right"></i>
1867
1867
  </span>
1868
1868
  </span>
1869
1869
  </button>
1870
- <div class="pf-v5-c-menu">
1871
- <div class="pf-v5-c-menu__content">
1872
- <ul class="pf-v5-c-menu__list" role="menu">
1870
+ <div class="pf-v6-c-menu">
1871
+ <div class="pf-v6-c-menu__content">
1872
+ <ul class="pf-v6-c-menu__list" role="menu">
1873
1873
  <li
1874
- class="pf-v5-c-menu__list-item pf-m-drill-up"
1874
+ class="pf-v6-c-menu__list-item pf-m-drill-up"
1875
1875
  role="none"
1876
1876
  >
1877
1877
  <button
1878
- class="pf-v5-c-menu__item"
1878
+ class="pf-v6-c-menu__item"
1879
1879
  type="button"
1880
1880
  role="menuitem"
1881
1881
  tabindex="0"
1882
1882
  >
1883
- <span class="pf-v5-c-menu__item-main">
1884
- <span class="pf-v5-c-menu__item-toggle-icon">
1883
+ <span class="pf-v6-c-menu__item-main">
1884
+ <span class="pf-v6-c-menu__item-toggle-icon">
1885
1885
  <i class="fas fa-angle-left"></i>
1886
1886
  </span>
1887
- <span class="pf-v5-c-menu__item-text">Deployment</span>
1887
+ <span class="pf-v6-c-menu__item-text">Deployment</span>
1888
1888
  </span>
1889
1889
  </button>
1890
1890
  </li>
1891
- <li class="pf-v5-c-menu__list-item" role="none">
1891
+ <li class="pf-v6-c-menu__list-item" role="none">
1892
1892
  <button
1893
- class="pf-v5-c-menu__item"
1893
+ class="pf-v6-c-menu__item"
1894
1894
  type="button"
1895
1895
  role="menuitem"
1896
1896
  >
1897
- <span class="pf-v5-c-menu__item-main">
1898
- <span class="pf-v5-c-menu__item-text">Routes</span>
1897
+ <span class="pf-v6-c-menu__item-main">
1898
+ <span class="pf-v6-c-menu__item-text">Routes</span>
1899
1899
  </span>
1900
1900
  </button>
1901
1901
  </li>
1902
- <li class="pf-v5-c-menu__list-item" role="none">
1902
+ <li class="pf-v6-c-menu__list-item" role="none">
1903
1903
  <button
1904
- class="pf-v5-c-menu__item"
1904
+ class="pf-v6-c-menu__item"
1905
1905
  type="button"
1906
1906
  role="menuitem"
1907
1907
  >
1908
- <span class="pf-v5-c-menu__item-main">
1909
- <span class="pf-v5-c-menu__item-text">Nodes</span>
1908
+ <span class="pf-v6-c-menu__item-main">
1909
+ <span class="pf-v6-c-menu__item-text">Nodes</span>
1910
1910
  </span>
1911
1911
  </button>
1912
1912
  </li>
1913
- <li class="pf-v5-c-menu__list-item" role="none">
1913
+ <li class="pf-v6-c-menu__list-item" role="none">
1914
1914
  <button
1915
- class="pf-v5-c-menu__item"
1915
+ class="pf-v6-c-menu__item"
1916
1916
  type="button"
1917
1917
  role="menuitem"
1918
1918
  >
1919
- <span class="pf-v5-c-menu__item-main">
1920
- <span class="pf-v5-c-menu__item-text">URLs</span>
1919
+ <span class="pf-v6-c-menu__item-main">
1920
+ <span class="pf-v6-c-menu__item-text">URLs</span>
1921
1921
  </span>
1922
1922
  </button>
1923
1923
  </li>
1924
- <li class="pf-v5-c-menu__list-item" role="none">
1924
+ <li class="pf-v6-c-menu__list-item" role="none">
1925
1925
  <button
1926
- class="pf-v5-c-menu__item"
1926
+ class="pf-v6-c-menu__item"
1927
1927
  type="button"
1928
1928
  role="menuitem"
1929
1929
  aria-expanded="false"
1930
1930
  >
1931
- <span class="pf-v5-c-menu__item-main">
1931
+ <span class="pf-v6-c-menu__item-main">
1932
1932
  <span
1933
- class="pf-v5-c-menu__item-text"
1933
+ class="pf-v6-c-menu__item-text"
1934
1934
  >Advanced settings</span>
1935
- <span class="pf-v5-c-menu__item-toggle-icon">
1935
+ <span class="pf-v6-c-menu__item-toggle-icon">
1936
1936
  <i class="fas fa-angle-right"></i>
1937
1937
  </span>
1938
1938
  </span>
1939
1939
  </button>
1940
- <div class="pf-v5-c-menu">
1941
- <div class="pf-v5-c-menu__content">
1942
- <ul class="pf-v5-c-menu__list" role="menu">
1940
+ <div class="pf-v6-c-menu">
1941
+ <div class="pf-v6-c-menu__content">
1942
+ <ul class="pf-v6-c-menu__list" role="menu">
1943
1943
  <li
1944
- class="pf-v5-c-menu__list-item pf-m-drill-up"
1944
+ class="pf-v6-c-menu__list-item pf-m-drill-up"
1945
1945
  role="none"
1946
1946
  >
1947
1947
  <button
1948
- class="pf-v5-c-menu__item"
1948
+ class="pf-v6-c-menu__item"
1949
1949
  type="button"
1950
1950
  role="menuitem"
1951
1951
  tabindex="0"
1952
1952
  >
1953
- <span class="pf-v5-c-menu__item-main">
1953
+ <span class="pf-v6-c-menu__item-main">
1954
1954
  <span
1955
- class="pf-v5-c-menu__item-toggle-icon"
1955
+ class="pf-v6-c-menu__item-toggle-icon"
1956
1956
  >
1957
1957
  <i class="fas fa-angle-left"></i>
1958
1958
  </span>
1959
1959
  <span
1960
- class="pf-v5-c-menu__item-text"
1960
+ class="pf-v6-c-menu__item-text"
1961
1961
  >Advanced settings</span>
1962
1962
  </span>
1963
1963
  </button>
1964
1964
  </li>
1965
- <li class="pf-v5-c-menu__list-item" role="none">
1965
+ <li class="pf-v6-c-menu__list-item" role="none">
1966
1966
  <button
1967
- class="pf-v5-c-menu__item"
1967
+ class="pf-v6-c-menu__item"
1968
1968
  type="button"
1969
1969
  role="menuitem"
1970
1970
  >
1971
- <span class="pf-v5-c-menu__item-main">
1971
+ <span class="pf-v6-c-menu__item-main">
1972
1972
  <span
1973
- class="pf-v5-c-menu__item-text"
1973
+ class="pf-v6-c-menu__item-text"
1974
1974
  >Reports</span>
1975
1975
  </span>
1976
1976
  </button>
1977
1977
  </li>
1978
- <li class="pf-v5-c-menu__list-item" role="none">
1978
+ <li class="pf-v6-c-menu__list-item" role="none">
1979
1979
  <button
1980
- class="pf-v5-c-menu__item"
1980
+ class="pf-v6-c-menu__item"
1981
1981
  type="button"
1982
1982
  role="menuitem"
1983
1983
  >
1984
- <span class="pf-v5-c-menu__item-main">
1984
+ <span class="pf-v6-c-menu__item-main">
1985
1985
  <span
1986
- class="pf-v5-c-menu__item-text"
1986
+ class="pf-v6-c-menu__item-text"
1987
1987
  >Policies</span>
1988
1988
  </span>
1989
1989
  </button>
1990
1990
  </li>
1991
- <li class="pf-v5-c-menu__list-item" role="none">
1991
+ <li class="pf-v6-c-menu__list-item" role="none">
1992
1992
  <button
1993
- class="pf-v5-c-menu__item"
1993
+ class="pf-v6-c-menu__item"
1994
1994
  type="button"
1995
1995
  role="menuitem"
1996
1996
  >
1997
- <span class="pf-v5-c-menu__item-main">
1997
+ <span class="pf-v6-c-menu__item-main">
1998
1998
  <span
1999
- class="pf-v5-c-menu__item-text"
1999
+ class="pf-v6-c-menu__item-text"
2000
2000
  >Systems</span>
2001
2001
  </span>
2002
2002
  </button>
@@ -2009,70 +2009,70 @@ cssPrefix: pf-v5-c-nav
2009
2009
  </div>
2010
2010
  </div>
2011
2011
  </li>
2012
- <li class="pf-v5-c-menu__list-item" role="none">
2012
+ <li class="pf-v6-c-menu__list-item" role="none">
2013
2013
  <button
2014
- class="pf-v5-c-menu__item"
2014
+ class="pf-v6-c-menu__item"
2015
2015
  type="button"
2016
2016
  role="menuitem"
2017
2017
  aria-expanded="false"
2018
2018
  >
2019
- <span class="pf-v5-c-menu__item-main">
2020
- <span class="pf-v5-c-menu__item-text">RBAC</span>
2021
- <span class="pf-v5-c-menu__item-toggle-icon">
2019
+ <span class="pf-v6-c-menu__item-main">
2020
+ <span class="pf-v6-c-menu__item-text">RBAC</span>
2021
+ <span class="pf-v6-c-menu__item-toggle-icon">
2022
2022
  <i class="fas fa-angle-right"></i>
2023
2023
  </span>
2024
2024
  </span>
2025
2025
  </button>
2026
- <div class="pf-v5-c-menu">
2027
- <div class="pf-v5-c-menu__content">
2028
- <ul class="pf-v5-c-menu__list" role="menu">
2026
+ <div class="pf-v6-c-menu">
2027
+ <div class="pf-v6-c-menu__content">
2028
+ <ul class="pf-v6-c-menu__list" role="menu">
2029
2029
  <li
2030
- class="pf-v5-c-menu__list-item pf-m-drill-up"
2030
+ class="pf-v6-c-menu__list-item pf-m-drill-up"
2031
2031
  role="none"
2032
2032
  >
2033
2033
  <button
2034
- class="pf-v5-c-menu__item"
2034
+ class="pf-v6-c-menu__item"
2035
2035
  type="button"
2036
2036
  role="menuitem"
2037
2037
  >
2038
- <span class="pf-v5-c-menu__item-main">
2039
- <span class="pf-v5-c-menu__item-toggle-icon">
2038
+ <span class="pf-v6-c-menu__item-main">
2039
+ <span class="pf-v6-c-menu__item-toggle-icon">
2040
2040
  <i class="fas fa-angle-left"></i>
2041
2041
  </span>
2042
- <span class="pf-v5-c-menu__item-text">RBAC</span>
2042
+ <span class="pf-v6-c-menu__item-text">RBAC</span>
2043
2043
  </span>
2044
2044
  </button>
2045
2045
  </li>
2046
- <li class="pf-v5-c-menu__list-item" role="none">
2046
+ <li class="pf-v6-c-menu__list-item" role="none">
2047
2047
  <button
2048
- class="pf-v5-c-menu__item"
2048
+ class="pf-v6-c-menu__item"
2049
2049
  type="button"
2050
2050
  role="menuitem"
2051
2051
  >
2052
- <span class="pf-v5-c-menu__item-main">
2053
- <span class="pf-v5-c-menu__item-text">Reports</span>
2052
+ <span class="pf-v6-c-menu__item-main">
2053
+ <span class="pf-v6-c-menu__item-text">Reports</span>
2054
2054
  </span>
2055
2055
  </button>
2056
2056
  </li>
2057
- <li class="pf-v5-c-menu__list-item" role="none">
2057
+ <li class="pf-v6-c-menu__list-item" role="none">
2058
2058
  <button
2059
- class="pf-v5-c-menu__item"
2059
+ class="pf-v6-c-menu__item"
2060
2060
  type="button"
2061
2061
  role="menuitem"
2062
2062
  >
2063
- <span class="pf-v5-c-menu__item-main">
2064
- <span class="pf-v5-c-menu__item-text">Policies</span>
2063
+ <span class="pf-v6-c-menu__item-main">
2064
+ <span class="pf-v6-c-menu__item-text">Policies</span>
2065
2065
  </span>
2066
2066
  </button>
2067
2067
  </li>
2068
- <li class="pf-v5-c-menu__list-item" role="none">
2068
+ <li class="pf-v6-c-menu__list-item" role="none">
2069
2069
  <button
2070
- class="pf-v5-c-menu__item"
2070
+ class="pf-v6-c-menu__item"
2071
2071
  type="button"
2072
2072
  role="menuitem"
2073
2073
  >
2074
- <span class="pf-v5-c-menu__item-main">
2075
- <span class="pf-v5-c-menu__item-text">Systems</span>
2074
+ <span class="pf-v6-c-menu__item-main">
2075
+ <span class="pf-v6-c-menu__item-text">Systems</span>
2076
2076
  </span>
2077
2077
  </button>
2078
2078
  </li>
@@ -2080,15 +2080,15 @@ cssPrefix: pf-v5-c-nav
2080
2080
  </div>
2081
2081
  </div>
2082
2082
  </li>
2083
- <li class="pf-v5-c-menu__list-item" role="none">
2083
+ <li class="pf-v6-c-menu__list-item" role="none">
2084
2084
  <button
2085
- class="pf-v5-c-menu__item"
2085
+ class="pf-v6-c-menu__item"
2086
2086
  type="button"
2087
2087
  role="menuitem"
2088
2088
  >
2089
- <span class="pf-v5-c-menu__item-main">
2089
+ <span class="pf-v6-c-menu__item-main">
2090
2090
  <span
2091
- class="pf-v5-c-menu__item-text"
2091
+ class="pf-v6-c-menu__item-text"
2092
2092
  >Thing with a longer label</span>
2093
2093
  </span>
2094
2094
  </button>
@@ -2097,101 +2097,101 @@ cssPrefix: pf-v5-c-nav
2097
2097
  </div>
2098
2098
  </div>
2099
2099
  </li>
2100
- <li class="pf-v5-c-menu__list-item" role="none">
2100
+ <li class="pf-v6-c-menu__list-item" role="none">
2101
2101
  <button
2102
- class="pf-v5-c-menu__item"
2102
+ class="pf-v6-c-menu__item"
2103
2103
  type="button"
2104
2104
  role="menuitem"
2105
2105
  aria-expanded="false"
2106
2106
  >
2107
- <span class="pf-v5-c-menu__item-main">
2108
- <span class="pf-v5-c-menu__item-text">Configuration</span>
2109
- <span class="pf-v5-c-menu__item-toggle-icon">
2107
+ <span class="pf-v6-c-menu__item-main">
2108
+ <span class="pf-v6-c-menu__item-text">Configuration</span>
2109
+ <span class="pf-v6-c-menu__item-toggle-icon">
2110
2110
  <i class="fas fa-angle-right"></i>
2111
2111
  </span>
2112
2112
  </span>
2113
2113
  </button>
2114
- <div class="pf-v5-c-menu">
2115
- <div class="pf-v5-c-menu__content">
2116
- <ul class="pf-v5-c-menu__list" role="menu">
2117
- <li class="pf-v5-c-menu__list-item pf-m-drill-up" role="none">
2114
+ <div class="pf-v6-c-menu">
2115
+ <div class="pf-v6-c-menu__content">
2116
+ <ul class="pf-v6-c-menu__list" role="menu">
2117
+ <li class="pf-v6-c-menu__list-item pf-m-drill-up" role="none">
2118
2118
  <button
2119
- class="pf-v5-c-menu__item"
2119
+ class="pf-v6-c-menu__item"
2120
2120
  type="button"
2121
2121
  role="menuitem"
2122
2122
  >
2123
- <span class="pf-v5-c-menu__item-main">
2124
- <span class="pf-v5-c-menu__item-toggle-icon">
2123
+ <span class="pf-v6-c-menu__item-main">
2124
+ <span class="pf-v6-c-menu__item-toggle-icon">
2125
2125
  <i class="fas fa-angle-left"></i>
2126
2126
  </span>
2127
- <span class="pf-v5-c-menu__item-text">Configuration</span>
2127
+ <span class="pf-v6-c-menu__item-text">Configuration</span>
2128
2128
  </span>
2129
2129
  </button>
2130
2130
  </li>
2131
- <li class="pf-v5-c-menu__list-item" role="none">
2131
+ <li class="pf-v6-c-menu__list-item" role="none">
2132
2132
  <button
2133
- class="pf-v5-c-menu__item"
2133
+ class="pf-v6-c-menu__item"
2134
2134
  type="button"
2135
2135
  role="menuitem"
2136
2136
  aria-expanded="false"
2137
2137
  >
2138
- <span class="pf-v5-c-menu__item-main">
2139
- <span class="pf-v5-c-menu__item-text">Profile</span>
2140
- <span class="pf-v5-c-menu__item-toggle-icon">
2138
+ <span class="pf-v6-c-menu__item-main">
2139
+ <span class="pf-v6-c-menu__item-text">Profile</span>
2140
+ <span class="pf-v6-c-menu__item-toggle-icon">
2141
2141
  <i class="fas fa-angle-right"></i>
2142
2142
  </span>
2143
2143
  </span>
2144
2144
  </button>
2145
- <div class="pf-v5-c-menu">
2146
- <div class="pf-v5-c-menu__content">
2147
- <ul class="pf-v5-c-menu__list" role="menu">
2145
+ <div class="pf-v6-c-menu">
2146
+ <div class="pf-v6-c-menu__content">
2147
+ <ul class="pf-v6-c-menu__list" role="menu">
2148
2148
  <li
2149
- class="pf-v5-c-menu__list-item pf-m-drill-up"
2149
+ class="pf-v6-c-menu__list-item pf-m-drill-up"
2150
2150
  role="none"
2151
2151
  >
2152
2152
  <button
2153
- class="pf-v5-c-menu__item"
2153
+ class="pf-v6-c-menu__item"
2154
2154
  type="button"
2155
2155
  role="menuitem"
2156
2156
  >
2157
- <span class="pf-v5-c-menu__item-main">
2158
- <span class="pf-v5-c-menu__item-toggle-icon">
2157
+ <span class="pf-v6-c-menu__item-main">
2158
+ <span class="pf-v6-c-menu__item-toggle-icon">
2159
2159
  <i class="fas fa-angle-left"></i>
2160
2160
  </span>
2161
- <span class="pf-v5-c-menu__item-text">Profile</span>
2161
+ <span class="pf-v6-c-menu__item-text">Profile</span>
2162
2162
  </span>
2163
2163
  </button>
2164
2164
  </li>
2165
- <li class="pf-v5-c-menu__list-item" role="none">
2165
+ <li class="pf-v6-c-menu__list-item" role="none">
2166
2166
  <button
2167
- class="pf-v5-c-menu__item"
2167
+ class="pf-v6-c-menu__item"
2168
2168
  type="button"
2169
2169
  role="menuitem"
2170
2170
  >
2171
- <span class="pf-v5-c-menu__item-main">
2172
- <span class="pf-v5-c-menu__item-text">Avatar</span>
2171
+ <span class="pf-v6-c-menu__item-main">
2172
+ <span class="pf-v6-c-menu__item-text">Avatar</span>
2173
2173
  </span>
2174
2174
  </button>
2175
2175
  </li>
2176
- <li class="pf-v5-c-menu__list-item" role="none">
2176
+ <li class="pf-v6-c-menu__list-item" role="none">
2177
2177
  <button
2178
- class="pf-v5-c-menu__item"
2178
+ class="pf-v6-c-menu__item"
2179
2179
  type="button"
2180
2180
  role="menuitem"
2181
2181
  >
2182
- <span class="pf-v5-c-menu__item-main">
2183
- <span class="pf-v5-c-menu__item-text">Name</span>
2182
+ <span class="pf-v6-c-menu__item-main">
2183
+ <span class="pf-v6-c-menu__item-text">Name</span>
2184
2184
  </span>
2185
2185
  </button>
2186
2186
  </li>
2187
- <li class="pf-v5-c-menu__list-item" role="none">
2187
+ <li class="pf-v6-c-menu__list-item" role="none">
2188
2188
  <button
2189
- class="pf-v5-c-menu__item"
2189
+ class="pf-v6-c-menu__item"
2190
2190
  type="button"
2191
2191
  role="menuitem"
2192
2192
  >
2193
- <span class="pf-v5-c-menu__item-main">
2194
- <span class="pf-v5-c-menu__item-text">Title</span>
2193
+ <span class="pf-v6-c-menu__item-main">
2194
+ <span class="pf-v6-c-menu__item-text">Title</span>
2195
2195
  </span>
2196
2196
  </button>
2197
2197
  </li>
@@ -2199,99 +2199,99 @@ cssPrefix: pf-v5-c-nav
2199
2199
  </div>
2200
2200
  </div>
2201
2201
  </li>
2202
- <li class="pf-v5-c-menu__list-item" role="none">
2202
+ <li class="pf-v6-c-menu__list-item" role="none">
2203
2203
  <button
2204
- class="pf-v5-c-menu__item"
2204
+ class="pf-v6-c-menu__item"
2205
2205
  type="button"
2206
2206
  role="menuitem"
2207
2207
  >
2208
- <span class="pf-v5-c-menu__item-main">
2209
- <span class="pf-v5-c-menu__item-text">Time zone</span>
2208
+ <span class="pf-v6-c-menu__item-main">
2209
+ <span class="pf-v6-c-menu__item-text">Time zone</span>
2210
2210
  </span>
2211
2211
  </button>
2212
2212
  </li>
2213
- <li class="pf-v5-c-menu__list-item" role="none">
2213
+ <li class="pf-v6-c-menu__list-item" role="none">
2214
2214
  <button
2215
- class="pf-v5-c-menu__item"
2215
+ class="pf-v6-c-menu__item"
2216
2216
  type="button"
2217
2217
  role="menuitem"
2218
2218
  >
2219
- <span class="pf-v5-c-menu__item-main">
2220
- <span class="pf-v5-c-menu__item-text">Account settings</span>
2219
+ <span class="pf-v6-c-menu__item-main">
2220
+ <span class="pf-v6-c-menu__item-text">Account settings</span>
2221
2221
  </span>
2222
2222
  </button>
2223
2223
  </li>
2224
- <li class="pf-v5-c-menu__list-item" role="none">
2224
+ <li class="pf-v6-c-menu__list-item" role="none">
2225
2225
  <button
2226
- class="pf-v5-c-menu__item"
2226
+ class="pf-v6-c-menu__item"
2227
2227
  type="button"
2228
2228
  role="menuitem"
2229
2229
  >
2230
- <span class="pf-v5-c-menu__item-main">
2230
+ <span class="pf-v6-c-menu__item-main">
2231
2231
  <span
2232
- class="pf-v5-c-menu__item-text"
2232
+ class="pf-v6-c-menu__item-text"
2233
2233
  >Thing with a longer label</span>
2234
2234
  </span>
2235
2235
  </button>
2236
2236
  </li>
2237
- <li class="pf-v5-c-menu__list-item" role="none">
2237
+ <li class="pf-v6-c-menu__list-item" role="none">
2238
2238
  <button
2239
- class="pf-v5-c-menu__item"
2239
+ class="pf-v6-c-menu__item"
2240
2240
  type="button"
2241
2241
  role="menuitem"
2242
2242
  aria-expanded="false"
2243
2243
  >
2244
- <span class="pf-v5-c-menu__item-main">
2245
- <span class="pf-v5-c-menu__item-text">Edit access settings</span>
2246
- <span class="pf-v5-c-menu__item-toggle-icon">
2244
+ <span class="pf-v6-c-menu__item-main">
2245
+ <span class="pf-v6-c-menu__item-text">Edit access settings</span>
2246
+ <span class="pf-v6-c-menu__item-toggle-icon">
2247
2247
  <i class="fas fa-angle-right"></i>
2248
2248
  </span>
2249
2249
  </span>
2250
2250
  </button>
2251
- <div class="pf-v5-c-menu">
2252
- <div class="pf-v5-c-menu__content">
2253
- <ul class="pf-v5-c-menu__list" role="menu">
2251
+ <div class="pf-v6-c-menu">
2252
+ <div class="pf-v6-c-menu__content">
2253
+ <ul class="pf-v6-c-menu__list" role="menu">
2254
2254
  <li
2255
- class="pf-v5-c-menu__list-item pf-m-drill-up"
2255
+ class="pf-v6-c-menu__list-item pf-m-drill-up"
2256
2256
  role="none"
2257
2257
  >
2258
2258
  <button
2259
- class="pf-v5-c-menu__item"
2259
+ class="pf-v6-c-menu__item"
2260
2260
  type="button"
2261
2261
  role="menuitem"
2262
2262
  >
2263
- <span class="pf-v5-c-menu__item-main">
2264
- <span class="pf-v5-c-menu__item-toggle-icon">
2263
+ <span class="pf-v6-c-menu__item-main">
2264
+ <span class="pf-v6-c-menu__item-toggle-icon">
2265
2265
  <i class="fas fa-angle-left"></i>
2266
2266
  </span>
2267
2267
  <span
2268
- class="pf-v5-c-menu__item-text"
2268
+ class="pf-v6-c-menu__item-text"
2269
2269
  >Edit access settings</span>
2270
2270
  </span>
2271
2271
  </button>
2272
2272
  </li>
2273
- <li class="pf-v5-c-menu__list-item" role="none">
2273
+ <li class="pf-v6-c-menu__list-item" role="none">
2274
2274
  <button
2275
- class="pf-v5-c-menu__item"
2275
+ class="pf-v6-c-menu__item"
2276
2276
  type="button"
2277
2277
  role="menuitem"
2278
2278
  >
2279
- <span class="pf-v5-c-menu__item-main">
2279
+ <span class="pf-v6-c-menu__item-main">
2280
2280
  <span
2281
- class="pf-v5-c-menu__item-text"
2281
+ class="pf-v6-c-menu__item-text"
2282
2282
  >Global access</span>
2283
2283
  </span>
2284
2284
  </button>
2285
2285
  </li>
2286
- <li class="pf-v5-c-menu__list-item" role="none">
2286
+ <li class="pf-v6-c-menu__list-item" role="none">
2287
2287
  <button
2288
- class="pf-v5-c-menu__item"
2288
+ class="pf-v6-c-menu__item"
2289
2289
  type="button"
2290
2290
  role="menuitem"
2291
2291
  >
2292
- <span class="pf-v5-c-menu__item-main">
2292
+ <span class="pf-v6-c-menu__item-main">
2293
2293
  <span
2294
- class="pf-v5-c-menu__item-text"
2294
+ class="pf-v6-c-menu__item-text"
2295
2295
  >Account access</span>
2296
2296
  </span>
2297
2297
  </button>
@@ -2316,48 +2316,48 @@ cssPrefix: pf-v5-c-nav
2316
2316
  When using anything other than a text node for the link text, wrap the link text in an element with `.pf-v5-c-nav__link-text`.
2317
2317
 
2318
2318
  ```html isBeta
2319
- <nav class="pf-v5-c-nav" aria-label="Global">
2320
- <ul class="pf-v5-c-nav__list" role="list">
2321
- <li class="pf-v5-c-nav__item">
2322
- <a href="#" class="pf-v5-c-nav__link">
2323
- <span class="pf-v5-c-nav__link-text">
2319
+ <nav class="pf-v6-c-nav" aria-label="Global">
2320
+ <ul class="pf-v6-c-nav__list" role="list">
2321
+ <li class="pf-v6-c-nav__item">
2322
+ <a href="#" class="pf-v6-c-nav__link">
2323
+ <span class="pf-v6-c-nav__link-text">
2324
2324
  Link 1
2325
2325
  <i class="fas fa-arrow-right" aria-hidden="true"></i>
2326
2326
  </span>
2327
2327
  </a>
2328
2328
  </li>
2329
- <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
2329
+ <li class="pf-v6-c-nav__item pf-m-expandable pf-m-expanded">
2330
2330
  <button
2331
- class="pf-v5-c-nav__link"
2331
+ class="pf-v6-c-nav__link"
2332
2332
  aria-expanded="true"
2333
2333
  id="nav-link-text-link2"
2334
2334
  >
2335
- <span class="pf-v5-c-nav__link-text">
2335
+ <span class="pf-v6-c-nav__link-text">
2336
2336
  Link 2
2337
2337
  <small>(small text)</small>
2338
2338
  </span>
2339
- <span class="pf-v5-c-nav__toggle">
2340
- <span class="pf-v5-c-nav__toggle-icon">
2339
+ <span class="pf-v6-c-nav__toggle">
2340
+ <span class="pf-v6-c-nav__toggle-icon">
2341
2341
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2342
2342
  </span>
2343
2343
  </span>
2344
2344
  </button>
2345
2345
  <section
2346
- class="pf-v5-c-nav__subnav"
2346
+ class="pf-v6-c-nav__subnav"
2347
2347
  aria-labelledby="nav-link-text-link2"
2348
2348
  >
2349
- <ul class="pf-v5-c-nav__list" role="list">
2350
- <li class="pf-v5-c-nav__item">
2351
- <a href="#" class="pf-v5-c-nav__link">
2352
- <span class="pf-v5-c-nav__link-text">
2349
+ <ul class="pf-v6-c-nav__list" role="list">
2350
+ <li class="pf-v6-c-nav__item">
2351
+ <a href="#" class="pf-v6-c-nav__link">
2352
+ <span class="pf-v6-c-nav__link-text">
2353
2353
  <i class="fas fa-user" aria-hidden="true"></i>
2354
2354
  Subnav link 1
2355
2355
  </span>
2356
2356
  </a>
2357
2357
  </li>
2358
- <li class="pf-v5-c-nav__item">
2359
- <a href="#" class="pf-v5-c-nav__link">
2360
- <span class="pf-v5-c-nav__link-text">
2358
+ <li class="pf-v6-c-nav__item">
2359
+ <a href="#" class="pf-v6-c-nav__link">
2360
+ <span class="pf-v6-c-nav__link-text">
2361
2361
  <i class="fas fa-user" aria-hidden="true"></i>
2362
2362
  Subnav link 2
2363
2363
  </span>
@@ -2366,40 +2366,40 @@ When using anything other than a text node for the link text, wrap the link text
2366
2366
  </ul>
2367
2367
  </section>
2368
2368
  </li>
2369
- <li class="pf-v5-c-nav__item pf-m-expandable">
2369
+ <li class="pf-v6-c-nav__item pf-m-expandable">
2370
2370
  <button
2371
- class="pf-v5-c-nav__link"
2371
+ class="pf-v6-c-nav__link"
2372
2372
  aria-expanded="false"
2373
2373
  id="nav-link-text-link4"
2374
2374
  >
2375
- <span class="pf-v5-c-nav__link-text">
2375
+ <span class="pf-v6-c-nav__link-text">
2376
2376
  Link 3
2377
2377
  <strong>(strong text)</strong>
2378
2378
  </span>
2379
- <span class="pf-v5-c-nav__toggle">
2380
- <span class="pf-v5-c-nav__toggle-icon">
2379
+ <span class="pf-v6-c-nav__toggle">
2380
+ <span class="pf-v6-c-nav__toggle-icon">
2381
2381
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2382
2382
  </span>
2383
2383
  </span>
2384
2384
  </button>
2385
2385
  <section
2386
- class="pf-v5-c-nav__subnav"
2386
+ class="pf-v6-c-nav__subnav"
2387
2387
  aria-labelledby="nav-link-text-link4"
2388
2388
  hidden
2389
2389
  >
2390
- <ul class="pf-v5-c-nav__list" role="list">
2391
- <li class="pf-v5-c-nav__item">
2392
- <a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
2390
+ <ul class="pf-v6-c-nav__list" role="list">
2391
+ <li class="pf-v6-c-nav__item">
2392
+ <a href="#" class="pf-v6-c-nav__link">Subnav link 1</a>
2393
2393
  </li>
2394
- <li class="pf-v5-c-nav__item">
2394
+ <li class="pf-v6-c-nav__item">
2395
2395
  <a
2396
2396
  href="#"
2397
- class="pf-v5-c-nav__link pf-m-current"
2397
+ class="pf-v6-c-nav__link pf-m-current"
2398
2398
  aria-current="page"
2399
2399
  >Subnav link 2</a>
2400
2400
  </li>
2401
- <li class="pf-v5-c-nav__item">
2402
- <a href="#" class="pf-v5-c-nav__link">Subnav link 3</a>
2401
+ <li class="pf-v6-c-nav__item">
2402
+ <a href="#" class="pf-v6-c-nav__link">Subnav link 3</a>
2403
2403
  </li>
2404
2404
  </ul>
2405
2405
  </section>