@patternfly/patternfly 4.222.4 → 5.0.0-alpha.2

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 (172) hide show
  1. package/README.md +3 -3
  2. package/RELEASE-NOTES.md +0 -30
  3. package/base/_fonts.scss +0 -188
  4. package/base/_globals.scss +0 -6
  5. package/base/_icons.scss +28 -0
  6. package/base/_variables.scss +0 -14
  7. package/base/patternfly-fonts.css +0 -120
  8. package/base/patternfly-globals.css +0 -4
  9. package/base/patternfly-icons.scss +0 -28
  10. package/base/patternfly-variables.css +6 -19
  11. package/components/AboutModalBox/about-modal-box.css +1 -28
  12. package/components/AboutModalBox/about-modal-box.scss +1 -27
  13. package/components/Accordion/accordion.css +64 -62
  14. package/components/Accordion/accordion.scss +62 -64
  15. package/components/Alert/alert.css +0 -4
  16. package/components/Alert/alert.scss +0 -7
  17. package/components/Banner/banner.css +1 -1
  18. package/components/Banner/banner.scss +1 -1
  19. package/components/Breadcrumb/breadcrumb.css +0 -6
  20. package/components/Breadcrumb/breadcrumb.scss +0 -9
  21. package/components/Button/button.css +0 -4
  22. package/components/Button/button.scss +0 -7
  23. package/components/Card/card.css +0 -4
  24. package/components/Card/card.scss +0 -7
  25. package/components/Check/check.css +4 -2
  26. package/components/Check/check.scss +2 -2
  27. package/components/Content/content.css +1 -11
  28. package/components/Content/content.scss +1 -15
  29. package/components/DataList/data-list.css +0 -15
  30. package/components/Divider/divider.css +0 -16
  31. package/components/Divider/divider.scss +0 -1
  32. package/components/Drawer/drawer.css +0 -14
  33. package/components/Drawer/drawer.scss +0 -5
  34. package/components/Dropdown/dropdown.css +0 -15
  35. package/components/Dropdown/dropdown.scss +0 -20
  36. package/components/EmptyState/empty-state.css +0 -4
  37. package/components/EmptyState/empty-state.scss +0 -9
  38. package/components/ExpandableSection/expandable-section.css +0 -4
  39. package/components/ExpandableSection/expandable-section.scss +0 -7
  40. package/components/Form/form.css +0 -1
  41. package/components/Form/form.scss +0 -1
  42. package/components/FormControl/form-control.css +1 -1
  43. package/components/FormControl/themes/dark/form-control.scss +1 -1
  44. package/components/InlineEdit/inline-edit.css +1 -12
  45. package/components/InlineEdit/inline-edit.scss +1 -10
  46. package/components/InputGroup/input-group.css +0 -14
  47. package/components/InputGroup/input-group.scss +0 -9
  48. package/components/InputGroup/themes/dark/input-group.scss +0 -8
  49. package/components/JumpLinks/jump-links.css +0 -43
  50. package/components/JumpLinks/jump-links.scss +0 -13
  51. package/components/Label/label.css +0 -3
  52. package/components/Label/label.scss +0 -4
  53. package/components/Menu/menu.css +0 -20
  54. package/components/Menu/menu.scss +0 -6
  55. package/components/NotificationDrawer/notification-drawer.css +1 -0
  56. package/components/NotificationDrawer/notification-drawer.scss +1 -0
  57. package/components/Page/page.css +0 -15
  58. package/components/Pagination/pagination.css +0 -175
  59. package/components/Pagination/pagination.scss +1 -49
  60. package/components/Progress/progress.css +0 -1
  61. package/components/Progress/progress.scss +0 -1
  62. package/components/Radio/radio.css +4 -2
  63. package/components/Radio/radio.scss +2 -2
  64. package/components/SimpleList/simple-list.css +1 -1
  65. package/components/SimpleList/simple-list.scss +1 -1
  66. package/components/SkipToContent/skip-to-content.css +1 -1
  67. package/components/SkipToContent/skip-to-content.scss +1 -1
  68. package/components/Slider/slider.css +7 -0
  69. package/components/Slider/slider.scss +9 -0
  70. package/components/Switch/switch.css +0 -1
  71. package/components/Switch/switch.scss +0 -1
  72. package/components/Table/table-grid.css +0 -10
  73. package/components/Table/table-grid.scss +0 -2
  74. package/components/Table/table-tree-view.css +0 -16
  75. package/components/Table/table-tree-view.scss +0 -4
  76. package/components/Table/table.css +0 -16
  77. package/components/Table/table.scss +0 -1
  78. package/components/Tabs/tabs.css +1 -34
  79. package/components/Tabs/tabs.scss +0 -15
  80. package/components/Title/title.css +0 -5
  81. package/components/Title/title.scss +0 -8
  82. package/components/Toolbar/toolbar.css +0 -31
  83. package/components/Toolbar/toolbar.scss +0 -6
  84. package/components/Wizard/wizard.css +0 -9
  85. package/components/Wizard/wizard.scss +0 -9
  86. package/docs/components/AboutModalBox/examples/AboutModalBox.md +4 -15
  87. package/docs/components/Accordion/examples/Accordion.md +67 -67
  88. package/docs/components/Dropdown/examples/Dropdown.md +0 -216
  89. package/docs/components/InputGroup/examples/InputGroup.md +0 -1
  90. package/docs/components/Pagination/examples/Pagination.md +30 -129
  91. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -5
  92. package/docs/components/Slider/examples/Slider.md +6 -6
  93. package/docs/components/Tabs/examples/Tabs.md +1 -2
  94. package/docs/components/Wizard/examples/Wizard.md +6 -6
  95. package/docs/demos/AboutModal/examples/AboutModal.md +53 -49
  96. package/docs/demos/Alert/examples/Alert.md +18 -12
  97. package/docs/demos/BackToTop/examples/BackToTop.md +6 -4
  98. package/docs/demos/Banner/examples/Banner.md +14 -10
  99. package/docs/demos/Card/examples/Card.md +4 -4
  100. package/docs/demos/CardView/examples/CardView.md +6 -4
  101. package/docs/demos/ContextSelector/examples/ContextSelector.md +24 -16
  102. package/docs/demos/Dashboard/examples/Dashboard.md +7 -4
  103. package/docs/demos/DataList/examples/DataList.md +24 -16
  104. package/docs/demos/DescriptionList/examples/DescriptionList.md +18 -12
  105. package/docs/demos/Drawer/examples/Drawer.md +30 -20
  106. package/docs/demos/JumpLinks/examples/JumpLinks.md +36 -24
  107. package/docs/demos/Masthead/examples/Masthead.md +54 -36
  108. package/docs/demos/Modal/examples/Modal.md +36 -24
  109. package/docs/demos/Nav/examples/Nav.md +784 -721
  110. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +30 -20
  111. package/docs/demos/Page/examples/Page.md +54 -36
  112. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +44 -28
  113. package/docs/demos/Skeleton/examples/Skeleton.md +6 -4
  114. package/docs/demos/Table/examples/Table.md +84 -56
  115. package/docs/demos/Tabs/examples/Tabs.md +579 -70
  116. package/docs/demos/Toolbar/examples/Toolbar.md +6 -4
  117. package/docs/demos/Wizard/examples/Wizard.md +67 -45
  118. package/package.json +7 -6
  119. package/patternfly-base-no-reset.css +30 -139
  120. package/patternfly-base.css +30 -143
  121. package/patternfly-charts.css +1 -1
  122. package/patternfly-no-reset.css +118 -665
  123. package/patternfly.css +118 -669
  124. package/patternfly.min.css +1 -1
  125. package/patternfly.min.css.map +1 -1
  126. package/sass-utilities/mixins.scss +0 -6
  127. package/sass-utilities/placeholders.scss +0 -7
  128. package/sass-utilities/scss-variables.scss +6 -12
  129. package/assets/fonts/overpass-mono-webfont/example.html +0 -15
  130. package/assets/fonts/overpass-mono-webfont/overpass-mono-bold.woff +0 -0
  131. package/assets/fonts/overpass-mono-webfont/overpass-mono-bold.woff2 +0 -0
  132. package/assets/fonts/overpass-mono-webfont/overpass-mono-light.woff +0 -0
  133. package/assets/fonts/overpass-mono-webfont/overpass-mono-light.woff2 +0 -0
  134. package/assets/fonts/overpass-mono-webfont/overpass-mono-regular.woff +0 -0
  135. package/assets/fonts/overpass-mono-webfont/overpass-mono-regular.woff2 +0 -0
  136. package/assets/fonts/overpass-mono-webfont/overpass-mono-semibold.woff +0 -0
  137. package/assets/fonts/overpass-mono-webfont/overpass-mono-semibold.woff2 +0 -0
  138. package/assets/fonts/overpass-mono-webfont/overpass-mono.css +0 -39
  139. package/assets/fonts/overpass-webfont/example.html +0 -18
  140. package/assets/fonts/overpass-webfont/overpass-bold-italic.woff +0 -0
  141. package/assets/fonts/overpass-webfont/overpass-bold-italic.woff2 +0 -0
  142. package/assets/fonts/overpass-webfont/overpass-bold.woff +0 -0
  143. package/assets/fonts/overpass-webfont/overpass-bold.woff2 +0 -0
  144. package/assets/fonts/overpass-webfont/overpass-extrabold-italic.woff +0 -0
  145. package/assets/fonts/overpass-webfont/overpass-extrabold-italic.woff2 +0 -0
  146. package/assets/fonts/overpass-webfont/overpass-extrabold.woff +0 -0
  147. package/assets/fonts/overpass-webfont/overpass-extrabold.woff2 +0 -0
  148. package/assets/fonts/overpass-webfont/overpass-extralight-italic.woff +0 -0
  149. package/assets/fonts/overpass-webfont/overpass-extralight-italic.woff2 +0 -0
  150. package/assets/fonts/overpass-webfont/overpass-extralight.woff +0 -0
  151. package/assets/fonts/overpass-webfont/overpass-extralight.woff2 +0 -0
  152. package/assets/fonts/overpass-webfont/overpass-heavy-italic.woff +0 -0
  153. package/assets/fonts/overpass-webfont/overpass-heavy-italic.woff2 +0 -0
  154. package/assets/fonts/overpass-webfont/overpass-heavy.woff +0 -0
  155. package/assets/fonts/overpass-webfont/overpass-heavy.woff2 +0 -0
  156. package/assets/fonts/overpass-webfont/overpass-italic.woff +0 -0
  157. package/assets/fonts/overpass-webfont/overpass-italic.woff2 +0 -0
  158. package/assets/fonts/overpass-webfont/overpass-light-italic.woff +0 -0
  159. package/assets/fonts/overpass-webfont/overpass-light-italic.woff2 +0 -0
  160. package/assets/fonts/overpass-webfont/overpass-light.woff +0 -0
  161. package/assets/fonts/overpass-webfont/overpass-light.woff2 +0 -0
  162. package/assets/fonts/overpass-webfont/overpass-regular.woff +0 -0
  163. package/assets/fonts/overpass-webfont/overpass-regular.woff2 +0 -0
  164. package/assets/fonts/overpass-webfont/overpass-semibold-italic.woff +0 -0
  165. package/assets/fonts/overpass-webfont/overpass-semibold-italic.woff2 +0 -0
  166. package/assets/fonts/overpass-webfont/overpass-semibold.woff +0 -0
  167. package/assets/fonts/overpass-webfont/overpass-semibold.woff2 +0 -0
  168. package/assets/fonts/overpass-webfont/overpass-thin-italic.woff +0 -0
  169. package/assets/fonts/overpass-webfont/overpass-thin-italic.woff2 +0 -0
  170. package/assets/fonts/overpass-webfont/overpass-thin.woff +0 -0
  171. package/assets/fonts/overpass-webfont/overpass-thin.woff2 +0 -0
  172. package/assets/fonts/overpass-webfont/overpass.css +0 -141
package/docs/demos/Nav/examples/Nav.md CHANGED
@@ -7,10 +7,12 @@ section: components
7
7
 
8
8
  ```html isFullscreen
9
9
  <div class="pf-c-page" id="nav-basic-example">
10
- <a
11
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
12
- href="#main-content-nav-basic-example"
13
- >Skip to content</a>
10
+ <div class="pf-c-skip-to-content">
11
+ <a
12
+ class="pf-c-button pf-m-primary"
13
+ href="#main-content-nav-basic-example"
14
+ >Skip to content</a>
15
+ </div>
14
16
  <header class="pf-c-masthead" id="nav-basic-example-masthead">
15
17
  <span class="pf-c-masthead__toggle">
16
18
  <button
@@ -914,15 +916,17 @@ section: components
914
916
 
915
917
  ```
916
918
 
917
- ### Grouped nav
919
+ ### Expandable nav
918
920
 
919
921
  ```html isFullscreen
920
- <div class="pf-c-page" id="nav-grouped-nav-example">
921
- <a
922
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
923
- href="#main-content-nav-grouped-nav-example"
924
- >Skip to content</a>
925
- <header class="pf-c-masthead" id="nav-grouped-nav-example-masthead">
922
+ <div class="pf-c-page" id="nav-expandable-example">
923
+ <div class="pf-c-skip-to-content">
924
+ <a
925
+ class="pf-c-button pf-m-primary"
926
+ href="#main-content-nav-expandable-example"
927
+ >Skip to content</a>
928
+ </div>
929
+ <header class="pf-c-masthead" id="nav-expandable-example-masthead">
926
930
  <span class="pf-c-masthead__toggle">
927
931
  <button
928
932
  class="pf-c-button pf-m-plain"
@@ -953,7 +957,7 @@ section: components
953
957
  <div class="pf-c-masthead__content">
954
958
  <div
955
959
  class="pf-c-toolbar pf-m-full-height pf-m-static"
956
- id="nav-grouped-nav-example-masthead-toolbar"
960
+ id="nav-expandable-example-masthead-toolbar"
957
961
  >
958
962
  <div class="pf-c-toolbar__content">
959
963
  <div class="pf-c-toolbar__content-section">
@@ -967,12 +971,12 @@ section: components
967
971
  <nav
968
972
  class="pf-c-app-launcher"
969
973
  aria-label="Application launcher"
970
- id="nav-grouped-nav-example-masthead-application-launcher"
974
+ id="nav-expandable-example-masthead-application-launcher"
971
975
  >
972
976
  <button
973
977
  class="pf-c-app-launcher__toggle"
974
978
  type="button"
975
- id="nav-grouped-nav-example-masthead-application-launcher-button"
979
+ id="nav-expandable-example-masthead-application-launcher-button"
976
980
  aria-expanded="false"
977
981
  aria-label="Application launcher"
978
982
  >
@@ -1112,7 +1116,7 @@ section: components
1112
1116
  <div class="pf-c-dropdown">
1113
1117
  <button
1114
1118
  class="pf-c-dropdown__toggle pf-m-plain"
1115
- id="nav-grouped-nav-example-masthead-settings-button"
1119
+ id="nav-expandable-example-masthead-settings-button"
1116
1120
  aria-expanded="false"
1117
1121
  type="button"
1118
1122
  aria-label="Settings"
@@ -1121,7 +1125,7 @@ section: components
1121
1125
  </button>
1122
1126
  <ul
1123
1127
  class="pf-c-dropdown__menu pf-m-align-right"
1124
- aria-labelledby="nav-grouped-nav-example-masthead-settings-button"
1128
+ aria-labelledby="nav-expandable-example-masthead-settings-button"
1125
1129
  hidden
1126
1130
  >
1127
1131
  <li>
@@ -1143,7 +1147,7 @@ section: components
1143
1147
  <div class="pf-c-dropdown">
1144
1148
  <button
1145
1149
  class="pf-c-dropdown__toggle pf-m-plain"
1146
- id="nav-grouped-nav-example-masthead-help-button"
1150
+ id="nav-expandable-example-masthead-help-button"
1147
1151
  aria-expanded="false"
1148
1152
  type="button"
1149
1153
  aria-label="Help"
@@ -1152,7 +1156,7 @@ section: components
1152
1156
  </button>
1153
1157
  <ul
1154
1158
  class="pf-c-dropdown__menu pf-m-align-right"
1155
- aria-labelledby="nav-grouped-nav-example-masthead-help-button"
1159
+ aria-labelledby="nav-expandable-example-masthead-help-button"
1156
1160
  hidden
1157
1161
  >
1158
1162
  <li>
@@ -1652,7 +1656,7 @@ section: components
1652
1656
  >
1653
1657
  <button
1654
1658
  class="pf-c-dropdown__toggle"
1655
- id="nav-grouped-nav-example-masthead-profile-button"
1659
+ id="nav-expandable-example-masthead-profile-button"
1656
1660
  aria-expanded="false"
1657
1661
  type="button"
1658
1662
  >
@@ -1708,57 +1712,119 @@ section: components
1708
1712
  <div class="pf-c-page__sidebar-body">
1709
1713
  <nav
1710
1714
  class="pf-c-nav"
1711
- id="nav-grouped-nav-example-grouped-nav"
1715
+ id="nav-expandable-example-expandable-nav"
1712
1716
  aria-label="Global"
1713
1717
  >
1714
- <section class="pf-c-nav__section" aria-labelledby="grouped-title1">
1715
- <h2 class="pf-c-nav__section-title" id="grouped-title1">System panel</h2>
1716
- <ul class="pf-c-nav__list">
1717
- <li class="pf-c-nav__item">
1718
- <a href="#" class="pf-c-nav__link">Overview</a>
1719
- </li>
1720
- <li class="pf-c-nav__item">
1721
- <a href="#" class="pf-c-nav__link">Resource usage</a>
1722
- </li>
1723
- <li class="pf-c-nav__item">
1724
- <a
1725
- href="#"
1726
- class="pf-c-nav__link pf-m-current"
1727
- aria-current="page"
1728
- >Hypervisors</a>
1729
- </li>
1730
- <li class="pf-c-nav__item">
1731
- <a href="#" class="pf-c-nav__link">Instances</a>
1732
- </li>
1733
- <li class="pf-c-nav__item">
1734
- <a href="#" class="pf-c-nav__link">Volumes</a>
1735
- </li>
1736
- <li class="pf-c-nav__item">
1737
- <a href="#" class="pf-c-nav__link">Networks</a>
1738
- </li>
1739
- </ul>
1740
- </section>
1741
- <section class="pf-c-nav__section" aria-labelledby="grouped-title2">
1742
- <h2 class="pf-c-nav__section-title" id="grouped-title2">Policy</h2>
1743
- <ul class="pf-c-nav__list">
1744
- <li class="pf-c-nav__item">
1745
- <a href="#" class="pf-c-nav__link">Hosts</a>
1746
- </li>
1747
- <li class="pf-c-nav__item">
1748
- <a href="#" class="pf-c-nav__link">Virtual machines</a>
1749
- </li>
1750
- <li class="pf-c-nav__item">
1751
- <a href="#" class="pf-c-nav__link">Storage</a>
1752
- </li>
1753
- </ul>
1754
- </section>
1718
+ <ul class="pf-c-nav__list">
1719
+ <li class="pf-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
1720
+ <button
1721
+ class="pf-c-nav__link"
1722
+ id="nav-expandable-example-expandable-nav-link1"
1723
+ aria-expanded="true"
1724
+ >
1725
+ System panel
1726
+ <span class="pf-c-nav__toggle">
1727
+ <span class="pf-c-nav__toggle-icon">
1728
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1729
+ </span>
1730
+ </span>
1731
+ </button>
1732
+ <section
1733
+ class="pf-c-nav__subnav"
1734
+ aria-labelledby="nav-expandable-example-expandable-nav-link1"
1735
+ >
1736
+ <ul class="pf-c-nav__list">
1737
+ <li class="pf-c-nav__item">
1738
+ <a href="#" class="pf-c-nav__link">Overview</a>
1739
+ </li>
1740
+ <li class="pf-c-nav__item">
1741
+ <a
1742
+ href="#"
1743
+ class="pf-c-nav__link pf-m-current"
1744
+ aria-current="page"
1745
+ >Resource usage</a>
1746
+ </li>
1747
+ <li class="pf-c-nav__item">
1748
+ <a href="#" class="pf-c-nav__link">Hypervisors</a>
1749
+ </li>
1750
+ <li class="pf-c-divider" role="separator"></li>
1751
+
1752
+ <li class="pf-c-nav__item">
1753
+ <a href="#" class="pf-c-nav__link">Instances</a>
1754
+ </li>
1755
+ <li class="pf-c-nav__item">
1756
+ <a href="#" class="pf-c-nav__link">Volumes</a>
1757
+ </li>
1758
+ <li class="pf-c-nav__item">
1759
+ <a href="#" class="pf-c-nav__link">Networks</a>
1760
+ </li>
1761
+ </ul>
1762
+ </section>
1763
+ </li>
1764
+ <li class="pf-c-nav__item pf-m-expandable">
1765
+ <button
1766
+ class="pf-c-nav__link"
1767
+ id="nav-expandable-example-expandable-nav-link2"
1768
+ aria-expanded="false"
1769
+ >
1770
+ Policy
1771
+ <span class="pf-c-nav__toggle">
1772
+ <span class="pf-c-nav__toggle-icon">
1773
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1774
+ </span>
1775
+ </span>
1776
+ </button>
1777
+ <section
1778
+ class="pf-c-nav__subnav"
1779
+ aria-labelledby="nav-expandable-example-expandable-nav-link2"
1780
+ hidden
1781
+ >
1782
+ <ul class="pf-c-nav__list">
1783
+ <li class="pf-c-nav__item">
1784
+ <a href="#" class="pf-c-nav__link">Subnav link 1</a>
1785
+ </li>
1786
+ <li class="pf-c-nav__item">
1787
+ <a href="#" class="pf-c-nav__link">Subnav link 2</a>
1788
+ </li>
1789
+ </ul>
1790
+ </section>
1791
+ </li>
1792
+ <li class="pf-c-nav__item pf-m-expandable">
1793
+ <button
1794
+ class="pf-c-nav__link"
1795
+ id="nav-expandable-example-expandable-nav-link3"
1796
+ aria-expanded="false"
1797
+ >
1798
+ Authentication
1799
+ <span class="pf-c-nav__toggle">
1800
+ <span class="pf-c-nav__toggle-icon">
1801
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1802
+ </span>
1803
+ </span>
1804
+ </button>
1805
+ <section
1806
+ class="pf-c-nav__subnav"
1807
+ aria-labelledby="nav-expandable-example-expandable-nav-link3"
1808
+ hidden
1809
+ >
1810
+ <ul class="pf-c-nav__list">
1811
+ <li class="pf-c-nav__item">
1812
+ <a href="#" class="pf-c-nav__link">Subnav link 1</a>
1813
+ </li>
1814
+ <li class="pf-c-nav__item">
1815
+ <a href="#" class="pf-c-nav__link">Subnav link 2</a>
1816
+ </li>
1817
+ </ul>
1818
+ </section>
1819
+ </li>
1820
+ </ul>
1755
1821
  </nav>
1756
1822
  </div>
1757
1823
  </div>
1758
1824
  <main
1759
1825
  class="pf-c-page__main"
1760
1826
  tabindex="-1"
1761
- id="main-content-nav-grouped-nav-example"
1827
+ id="main-content-nav-expandable-example"
1762
1828
  >
1763
1829
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
1764
1830
  <div class="pf-c-page__main-body">
@@ -1845,24 +1911,17 @@ section: components
1845
1911
 
1846
1912
  ```
1847
1913
 
1848
- ### Expandable nav
1914
+ ### Horizontal nav
1849
1915
 
1850
1916
  ```html isFullscreen
1851
- <div class="pf-c-page" id="nav-expandable-example">
1852
- <a
1853
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
1854
- href="#main-content-nav-expandable-example"
1855
- >Skip to content</a>
1856
- <header class="pf-c-masthead" id="nav-expandable-example-masthead">
1857
- <span class="pf-c-masthead__toggle">
1858
- <button
1859
- class="pf-c-button pf-m-plain"
1860
- type="button"
1861
- aria-label="Global navigation"
1862
- >
1863
- <i class="fas fa-bars" aria-hidden="true"></i>
1864
- </button>
1865
- </span>
1917
+ <div class="pf-c-page" id="nav-horizontal-example">
1918
+ <div class="pf-c-skip-to-content">
1919
+ <a
1920
+ class="pf-c-button pf-m-primary"
1921
+ href="#main-content-nav-horizontal-example"
1922
+ >Skip to content</a>
1923
+ </div>
1924
+ <header class="pf-c-masthead" id="nav-horizontal-example-masthead">
1866
1925
  <div class="pf-c-masthead__main">
1867
1926
  <a class="pf-c-masthead__brand" href="#">
1868
1927
  <picture
@@ -1884,10 +1943,55 @@ section: components
1884
1943
  <div class="pf-c-masthead__content">
1885
1944
  <div
1886
1945
  class="pf-c-toolbar pf-m-full-height pf-m-static"
1887
- id="nav-expandable-example-masthead-toolbar"
1946
+ id="nav-horizontal-example-masthead-toolbar"
1888
1947
  >
1889
1948
  <div class="pf-c-toolbar__content">
1890
1949
  <div class="pf-c-toolbar__content-section">
1950
+ <div
1951
+ class="pf-c-toolbar__item pf-m-overflow-container"
1952
+ style="--pf-c-toolbar__item--MinWidth: 18ch;"
1953
+ >
1954
+ <nav
1955
+ class="pf-c-nav pf-m-horizontal pf-m-scrollable"
1956
+ id="-horizontal-nav"
1957
+ aria-label="Global"
1958
+ >
1959
+ <button
1960
+ class="pf-c-nav__scroll-button"
1961
+ disabled
1962
+ aria-label="Scroll left"
1963
+ >
1964
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1965
+ </button>
1966
+ <ul class="pf-c-nav__list">
1967
+ <li class="pf-c-nav__item">
1968
+ <a href="#" class="pf-c-nav__link">Horizontal nav item 1</a>
1969
+ </li>
1970
+ <li class="pf-c-nav__item">
1971
+ <a href="#" class="pf-c-nav__link">Horizontal nav item 2</a>
1972
+ </li>
1973
+ <li class="pf-c-nav__item">
1974
+ <a href="#" class="pf-c-nav__link">Horizontal nav item 3</a>
1975
+ </li>
1976
+ <li class="pf-c-nav__item">
1977
+ <a href="#" class="pf-c-nav__link">Horizontal nav item 4</a>
1978
+ </li>
1979
+ <li class="pf-c-nav__item">
1980
+ <a
1981
+ href="#"
1982
+ class="pf-c-nav__link pf-m-current"
1983
+ aria-current="page"
1984
+ >Horizontal nav item 5</a>
1985
+ </li>
1986
+ </ul>
1987
+ <button
1988
+ class="pf-c-nav__scroll-button"
1989
+ aria-label="Scroll right"
1990
+ >
1991
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1992
+ </button>
1993
+ </nav>
1994
+ </div>
1891
1995
  <div
1892
1996
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1893
1997
  >
@@ -1898,12 +2002,12 @@ section: components
1898
2002
  <nav
1899
2003
  class="pf-c-app-launcher"
1900
2004
  aria-label="Application launcher"
1901
- id="nav-expandable-example-masthead-application-launcher"
2005
+ id="nav-horizontal-example-masthead-application-launcher"
1902
2006
  >
1903
2007
  <button
1904
2008
  class="pf-c-app-launcher__toggle"
1905
2009
  type="button"
1906
- id="nav-expandable-example-masthead-application-launcher-button"
2010
+ id="nav-horizontal-example-masthead-application-launcher-button"
1907
2011
  aria-expanded="false"
1908
2012
  aria-label="Application launcher"
1909
2013
  >
@@ -2043,7 +2147,7 @@ section: components
2043
2147
  <div class="pf-c-dropdown">
2044
2148
  <button
2045
2149
  class="pf-c-dropdown__toggle pf-m-plain"
2046
- id="nav-expandable-example-masthead-settings-button"
2150
+ id="nav-horizontal-example-masthead-settings-button"
2047
2151
  aria-expanded="false"
2048
2152
  type="button"
2049
2153
  aria-label="Settings"
@@ -2052,7 +2156,7 @@ section: components
2052
2156
  </button>
2053
2157
  <ul
2054
2158
  class="pf-c-dropdown__menu pf-m-align-right"
2055
- aria-labelledby="nav-expandable-example-masthead-settings-button"
2159
+ aria-labelledby="nav-horizontal-example-masthead-settings-button"
2056
2160
  hidden
2057
2161
  >
2058
2162
  <li>
@@ -2074,7 +2178,7 @@ section: components
2074
2178
  <div class="pf-c-dropdown">
2075
2179
  <button
2076
2180
  class="pf-c-dropdown__toggle pf-m-plain"
2077
- id="nav-expandable-example-masthead-help-button"
2181
+ id="nav-horizontal-example-masthead-help-button"
2078
2182
  aria-expanded="false"
2079
2183
  type="button"
2080
2184
  aria-label="Help"
@@ -2083,7 +2187,7 @@ section: components
2083
2187
  </button>
2084
2188
  <ul
2085
2189
  class="pf-c-dropdown__menu pf-m-align-right"
2086
- aria-labelledby="nav-expandable-example-masthead-help-button"
2190
+ aria-labelledby="nav-horizontal-example-masthead-help-button"
2087
2191
  hidden
2088
2192
  >
2089
2193
  <li>
@@ -2583,7 +2687,7 @@ section: components
2583
2687
  >
2584
2688
  <button
2585
2689
  class="pf-c-dropdown__toggle"
2586
- id="nav-expandable-example-masthead-profile-button"
2690
+ id="nav-horizontal-example-masthead-profile-button"
2587
2691
  aria-expanded="false"
2588
2692
  type="button"
2589
2693
  >
@@ -2635,123 +2739,10 @@ section: components
2635
2739
  </div>
2636
2740
  </div>
2637
2741
  </header>
2638
- <div class="pf-c-page__sidebar">
2639
- <div class="pf-c-page__sidebar-body">
2640
- <nav
2641
- class="pf-c-nav"
2642
- id="nav-expandable-example-expandable-nav"
2643
- aria-label="Global"
2644
- >
2645
- <ul class="pf-c-nav__list">
2646
- <li class="pf-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
2647
- <button
2648
- class="pf-c-nav__link"
2649
- id="nav-expandable-example-expandable-nav-link1"
2650
- aria-expanded="true"
2651
- >
2652
- System panel
2653
- <span class="pf-c-nav__toggle">
2654
- <span class="pf-c-nav__toggle-icon">
2655
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2656
- </span>
2657
- </span>
2658
- </button>
2659
- <section
2660
- class="pf-c-nav__subnav"
2661
- aria-labelledby="nav-expandable-example-expandable-nav-link1"
2662
- >
2663
- <ul class="pf-c-nav__list">
2664
- <li class="pf-c-nav__item">
2665
- <a href="#" class="pf-c-nav__link">Overview</a>
2666
- </li>
2667
- <li class="pf-c-nav__item">
2668
- <a
2669
- href="#"
2670
- class="pf-c-nav__link pf-m-current"
2671
- aria-current="page"
2672
- >Resource usage</a>
2673
- </li>
2674
- <li class="pf-c-nav__item">
2675
- <a href="#" class="pf-c-nav__link">Hypervisors</a>
2676
- </li>
2677
- <li class="pf-c-divider" role="separator"></li>
2678
-
2679
- <li class="pf-c-nav__item">
2680
- <a href="#" class="pf-c-nav__link">Instances</a>
2681
- </li>
2682
- <li class="pf-c-nav__item">
2683
- <a href="#" class="pf-c-nav__link">Volumes</a>
2684
- </li>
2685
- <li class="pf-c-nav__item">
2686
- <a href="#" class="pf-c-nav__link">Networks</a>
2687
- </li>
2688
- </ul>
2689
- </section>
2690
- </li>
2691
- <li class="pf-c-nav__item pf-m-expandable">
2692
- <button
2693
- class="pf-c-nav__link"
2694
- id="nav-expandable-example-expandable-nav-link2"
2695
- aria-expanded="false"
2696
- >
2697
- Policy
2698
- <span class="pf-c-nav__toggle">
2699
- <span class="pf-c-nav__toggle-icon">
2700
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2701
- </span>
2702
- </span>
2703
- </button>
2704
- <section
2705
- class="pf-c-nav__subnav"
2706
- aria-labelledby="nav-expandable-example-expandable-nav-link2"
2707
- hidden
2708
- >
2709
- <ul class="pf-c-nav__list">
2710
- <li class="pf-c-nav__item">
2711
- <a href="#" class="pf-c-nav__link">Subnav link 1</a>
2712
- </li>
2713
- <li class="pf-c-nav__item">
2714
- <a href="#" class="pf-c-nav__link">Subnav link 2</a>
2715
- </li>
2716
- </ul>
2717
- </section>
2718
- </li>
2719
- <li class="pf-c-nav__item pf-m-expandable">
2720
- <button
2721
- class="pf-c-nav__link"
2722
- id="nav-expandable-example-expandable-nav-link3"
2723
- aria-expanded="false"
2724
- >
2725
- Authentication
2726
- <span class="pf-c-nav__toggle">
2727
- <span class="pf-c-nav__toggle-icon">
2728
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2729
- </span>
2730
- </span>
2731
- </button>
2732
- <section
2733
- class="pf-c-nav__subnav"
2734
- aria-labelledby="nav-expandable-example-expandable-nav-link3"
2735
- hidden
2736
- >
2737
- <ul class="pf-c-nav__list">
2738
- <li class="pf-c-nav__item">
2739
- <a href="#" class="pf-c-nav__link">Subnav link 1</a>
2740
- </li>
2741
- <li class="pf-c-nav__item">
2742
- <a href="#" class="pf-c-nav__link">Subnav link 2</a>
2743
- </li>
2744
- </ul>
2745
- </section>
2746
- </li>
2747
- </ul>
2748
- </nav>
2749
- </div>
2750
- </div>
2751
2742
  <main
2752
2743
  class="pf-c-page__main"
2753
2744
  tabindex="-1"
2754
- id="main-content-nav-expandable-example"
2745
+ id="main-content-nav-horizontal-example"
2755
2746
  >
2756
2747
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
2757
2748
  <div class="pf-c-page__main-body">
@@ -2838,15 +2829,26 @@ section: components
2838
2829
 
2839
2830
  ```
2840
2831
 
2841
- ### Horizontal nav
2832
+ ### Horizontal subnav
2842
2833
 
2843
2834
  ```html isFullscreen
2844
- <div class="pf-c-page" id="nav-horizontal-example">
2845
- <a
2846
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
2847
- href="#main-content-nav-horizontal-example"
2848
- >Skip to content</a>
2849
- <header class="pf-c-masthead" id="nav-horizontal-example-masthead">
2835
+ <div class="pf-c-page" id="nav-horizontal-subnav-example">
2836
+ <div class="pf-c-skip-to-content">
2837
+ <a
2838
+ class="pf-c-button pf-m-primary"
2839
+ href="#main-content-nav-horizontal-subnav-example"
2840
+ >Skip to content</a>
2841
+ </div>
2842
+ <header class="pf-c-masthead" id="nav-horizontal-subnav-example-masthead">
2843
+ <span class="pf-c-masthead__toggle">
2844
+ <button
2845
+ class="pf-c-button pf-m-plain"
2846
+ type="button"
2847
+ aria-label="Global navigation"
2848
+ >
2849
+ <i class="fas fa-bars" aria-hidden="true"></i>
2850
+ </button>
2851
+ </span>
2850
2852
  <div class="pf-c-masthead__main">
2851
2853
  <a class="pf-c-masthead__brand" href="#">
2852
2854
  <picture
@@ -2868,55 +2870,10 @@ section: components
2868
2870
  <div class="pf-c-masthead__content">
2869
2871
  <div
2870
2872
  class="pf-c-toolbar pf-m-full-height pf-m-static"
2871
- id="nav-horizontal-example-masthead-toolbar"
2873
+ id="nav-horizontal-subnav-example-masthead-toolbar"
2872
2874
  >
2873
2875
  <div class="pf-c-toolbar__content">
2874
2876
  <div class="pf-c-toolbar__content-section">
2875
- <div
2876
- class="pf-c-toolbar__item pf-m-overflow-container"
2877
- style="--pf-c-toolbar__item--MinWidth: 18ch;"
2878
- >
2879
- <nav
2880
- class="pf-c-nav pf-m-horizontal pf-m-scrollable"
2881
- id="-horizontal-nav"
2882
- aria-label="Global"
2883
- >
2884
- <button
2885
- class="pf-c-nav__scroll-button"
2886
- disabled
2887
- aria-label="Scroll left"
2888
- >
2889
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2890
- </button>
2891
- <ul class="pf-c-nav__list">
2892
- <li class="pf-c-nav__item">
2893
- <a href="#" class="pf-c-nav__link">Horizontal nav item 1</a>
2894
- </li>
2895
- <li class="pf-c-nav__item">
2896
- <a href="#" class="pf-c-nav__link">Horizontal nav item 2</a>
2897
- </li>
2898
- <li class="pf-c-nav__item">
2899
- <a href="#" class="pf-c-nav__link">Horizontal nav item 3</a>
2900
- </li>
2901
- <li class="pf-c-nav__item">
2902
- <a href="#" class="pf-c-nav__link">Horizontal nav item 4</a>
2903
- </li>
2904
- <li class="pf-c-nav__item">
2905
- <a
2906
- href="#"
2907
- class="pf-c-nav__link pf-m-current"
2908
- aria-current="page"
2909
- >Horizontal nav item 5</a>
2910
- </li>
2911
- </ul>
2912
- <button
2913
- class="pf-c-nav__scroll-button"
2914
- aria-label="Scroll right"
2915
- >
2916
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2917
- </button>
2918
- </nav>
2919
- </div>
2920
2877
  <div
2921
2878
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
2922
2879
  >
@@ -2927,12 +2884,12 @@ section: components
2927
2884
  <nav
2928
2885
  class="pf-c-app-launcher"
2929
2886
  aria-label="Application launcher"
2930
- id="nav-horizontal-example-masthead-application-launcher"
2887
+ id="nav-horizontal-subnav-example-masthead-application-launcher"
2931
2888
  >
2932
2889
  <button
2933
2890
  class="pf-c-app-launcher__toggle"
2934
2891
  type="button"
2935
- id="nav-horizontal-example-masthead-application-launcher-button"
2892
+ id="nav-horizontal-subnav-example-masthead-application-launcher-button"
2936
2893
  aria-expanded="false"
2937
2894
  aria-label="Application launcher"
2938
2895
  >
@@ -3072,7 +3029,7 @@ section: components
3072
3029
  <div class="pf-c-dropdown">
3073
3030
  <button
3074
3031
  class="pf-c-dropdown__toggle pf-m-plain"
3075
- id="nav-horizontal-example-masthead-settings-button"
3032
+ id="nav-horizontal-subnav-example-masthead-settings-button"
3076
3033
  aria-expanded="false"
3077
3034
  type="button"
3078
3035
  aria-label="Settings"
@@ -3081,7 +3038,7 @@ section: components
3081
3038
  </button>
3082
3039
  <ul
3083
3040
  class="pf-c-dropdown__menu pf-m-align-right"
3084
- aria-labelledby="nav-horizontal-example-masthead-settings-button"
3041
+ aria-labelledby="nav-horizontal-subnav-example-masthead-settings-button"
3085
3042
  hidden
3086
3043
  >
3087
3044
  <li>
@@ -3103,7 +3060,7 @@ section: components
3103
3060
  <div class="pf-c-dropdown">
3104
3061
  <button
3105
3062
  class="pf-c-dropdown__toggle pf-m-plain"
3106
- id="nav-horizontal-example-masthead-help-button"
3063
+ id="nav-horizontal-subnav-example-masthead-help-button"
3107
3064
  aria-expanded="false"
3108
3065
  type="button"
3109
3066
  aria-label="Help"
@@ -3112,7 +3069,7 @@ section: components
3112
3069
  </button>
3113
3070
  <ul
3114
3071
  class="pf-c-dropdown__menu pf-m-align-right"
3115
- aria-labelledby="nav-horizontal-example-masthead-help-button"
3072
+ aria-labelledby="nav-horizontal-subnav-example-masthead-help-button"
3116
3073
  hidden
3117
3074
  >
3118
3075
  <li>
@@ -3612,7 +3569,7 @@ section: components
3612
3569
  >
3613
3570
  <button
3614
3571
  class="pf-c-dropdown__toggle"
3615
- id="nav-horizontal-example-masthead-profile-button"
3572
+ id="nav-horizontal-subnav-example-masthead-profile-button"
3616
3573
  aria-expanded="false"
3617
3574
  type="button"
3618
3575
  >
@@ -3664,40 +3621,193 @@ section: components
3664
3621
  </div>
3665
3622
  </div>
3666
3623
  </header>
3667
- <main
3668
- class="pf-c-page__main"
3669
- tabindex="-1"
3670
- id="main-content-nav-horizontal-example"
3671
- >
3672
- <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
3673
- <div class="pf-c-page__main-body">
3674
- <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
3675
- <ol class="pf-c-breadcrumb__list">
3676
- <li class="pf-c-breadcrumb__item">
3677
- <a href="#" class="pf-c-breadcrumb__link">Section home</a>
3678
- </li>
3679
- <li class="pf-c-breadcrumb__item">
3680
- <span class="pf-c-breadcrumb__item-divider">
3681
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3682
- </span>
3683
-
3684
- <a href="#" class="pf-c-breadcrumb__link">Section title</a>
3685
- </li>
3686
- <li class="pf-c-breadcrumb__item">
3687
- <span class="pf-c-breadcrumb__item-divider">
3688
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3689
- </span>
3690
-
3691
- <a href="#" class="pf-c-breadcrumb__link">Section title</a>
3692
- </li>
3693
- <li class="pf-c-breadcrumb__item">
3694
- <span class="pf-c-breadcrumb__item-divider">
3695
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3624
+ <div class="pf-c-page__sidebar">
3625
+ <div class="pf-c-page__sidebar-body">
3626
+ <nav
3627
+ class="pf-c-nav"
3628
+ id="nav-horizontal-subnav-example-expandable-nav"
3629
+ aria-label="Global"
3630
+ >
3631
+ <ul class="pf-c-nav__list">
3632
+ <li class="pf-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
3633
+ <button
3634
+ class="pf-c-nav__link"
3635
+ id="nav-horizontal-subnav-example-expandable-nav-link1"
3636
+ aria-expanded="true"
3637
+ >
3638
+ System panel
3639
+ <span class="pf-c-nav__toggle">
3640
+ <span class="pf-c-nav__toggle-icon">
3641
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3642
+ </span>
3696
3643
  </span>
3644
+ </button>
3645
+ <section
3646
+ class="pf-c-nav__subnav"
3647
+ aria-labelledby="nav-horizontal-subnav-example-expandable-nav-link1"
3648
+ >
3649
+ <ul class="pf-c-nav__list">
3650
+ <li class="pf-c-nav__item">
3651
+ <a href="#" class="pf-c-nav__link">Overview</a>
3652
+ </li>
3653
+ <li class="pf-c-nav__item">
3654
+ <a
3655
+ href="#"
3656
+ class="pf-c-nav__link pf-m-current"
3657
+ aria-current="page"
3658
+ >Resource usage</a>
3659
+ </li>
3660
+ <li class="pf-c-nav__item">
3661
+ <a href="#" class="pf-c-nav__link">Hypervisors</a>
3662
+ </li>
3663
+ <li class="pf-c-divider" role="separator"></li>
3697
3664
 
3698
- <a
3699
- href="#"
3700
- class="pf-c-breadcrumb__link pf-m-current"
3665
+ <li class="pf-c-nav__item">
3666
+ <a href="#" class="pf-c-nav__link">Instances</a>
3667
+ </li>
3668
+ <li class="pf-c-nav__item">
3669
+ <a href="#" class="pf-c-nav__link">Volumes</a>
3670
+ </li>
3671
+ <li class="pf-c-nav__item">
3672
+ <a href="#" class="pf-c-nav__link">Networks</a>
3673
+ </li>
3674
+ </ul>
3675
+ </section>
3676
+ </li>
3677
+ <li class="pf-c-nav__item pf-m-expandable">
3678
+ <button
3679
+ class="pf-c-nav__link"
3680
+ id="nav-horizontal-subnav-example-expandable-nav-link2"
3681
+ aria-expanded="false"
3682
+ >
3683
+ Policy
3684
+ <span class="pf-c-nav__toggle">
3685
+ <span class="pf-c-nav__toggle-icon">
3686
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3687
+ </span>
3688
+ </span>
3689
+ </button>
3690
+ <section
3691
+ class="pf-c-nav__subnav"
3692
+ aria-labelledby="nav-horizontal-subnav-example-expandable-nav-link2"
3693
+ hidden
3694
+ >
3695
+ <ul class="pf-c-nav__list">
3696
+ <li class="pf-c-nav__item">
3697
+ <a href="#" class="pf-c-nav__link">Subnav link 1</a>
3698
+ </li>
3699
+ <li class="pf-c-nav__item">
3700
+ <a href="#" class="pf-c-nav__link">Subnav link 2</a>
3701
+ </li>
3702
+ </ul>
3703
+ </section>
3704
+ </li>
3705
+ <li class="pf-c-nav__item pf-m-expandable">
3706
+ <button
3707
+ class="pf-c-nav__link"
3708
+ id="nav-horizontal-subnav-example-expandable-nav-link3"
3709
+ aria-expanded="false"
3710
+ >
3711
+ Authentication
3712
+ <span class="pf-c-nav__toggle">
3713
+ <span class="pf-c-nav__toggle-icon">
3714
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3715
+ </span>
3716
+ </span>
3717
+ </button>
3718
+ <section
3719
+ class="pf-c-nav__subnav"
3720
+ aria-labelledby="nav-horizontal-subnav-example-expandable-nav-link3"
3721
+ hidden
3722
+ >
3723
+ <ul class="pf-c-nav__list">
3724
+ <li class="pf-c-nav__item">
3725
+ <a href="#" class="pf-c-nav__link">Subnav link 1</a>
3726
+ </li>
3727
+ <li class="pf-c-nav__item">
3728
+ <a href="#" class="pf-c-nav__link">Subnav link 2</a>
3729
+ </li>
3730
+ </ul>
3731
+ </section>
3732
+ </li>
3733
+ </ul>
3734
+ </nav>
3735
+ </div>
3736
+ </div>
3737
+ <main
3738
+ class="pf-c-page__main"
3739
+ tabindex="-1"
3740
+ id="main-content-nav-horizontal-subnav-example"
3741
+ >
3742
+ <section class="pf-c-page__main-subnav pf-m-limit-width">
3743
+ <div class="pf-c-page__main-body">
3744
+ <nav
3745
+ class="pf-c-nav pf-m-horizontal-subnav pf-m-scrollable"
3746
+ aria-label="Local"
3747
+ >
3748
+ <button
3749
+ class="pf-c-nav__scroll-button"
3750
+ disabled
3751
+ aria-label="Scroll left"
3752
+ >
3753
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
3754
+ </button>
3755
+ <ul class="pf-c-nav__list">
3756
+ <li class="pf-c-nav__item">
3757
+ <a
3758
+ href="#"
3759
+ class="pf-c-nav__link pf-m-current"
3760
+ aria-current="page"
3761
+ >Horizontal subnav item 1</a>
3762
+ </li>
3763
+ <li class="pf-c-nav__item">
3764
+ <a href="#" class="pf-c-nav__link">Horizontal subnav item 2</a>
3765
+ </li>
3766
+ <li class="pf-c-nav__item">
3767
+ <a href="#" class="pf-c-nav__link">Horizontal subnav item 3</a>
3768
+ </li>
3769
+ <li class="pf-c-nav__item">
3770
+ <a href="#" class="pf-c-nav__link">Horizontal subnav item 4</a>
3771
+ </li>
3772
+ <li class="pf-c-nav__item">
3773
+ <a href="#" class="pf-c-nav__link">Horizontal subnav item 5</a>
3774
+ </li>
3775
+ </ul>
3776
+ <button class="pf-c-nav__scroll-button" aria-label="Scroll right">
3777
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3778
+ </button>
3779
+ </nav>
3780
+ </div>
3781
+ </section>
3782
+ <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
3783
+ <div class="pf-c-page__main-body">
3784
+ <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
3785
+ <ol class="pf-c-breadcrumb__list">
3786
+ <li class="pf-c-breadcrumb__item">
3787
+ <a href="#" class="pf-c-breadcrumb__link">Section home</a>
3788
+ </li>
3789
+ <li class="pf-c-breadcrumb__item">
3790
+ <span class="pf-c-breadcrumb__item-divider">
3791
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3792
+ </span>
3793
+
3794
+ <a href="#" class="pf-c-breadcrumb__link">Section title</a>
3795
+ </li>
3796
+ <li class="pf-c-breadcrumb__item">
3797
+ <span class="pf-c-breadcrumb__item-divider">
3798
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3799
+ </span>
3800
+
3801
+ <a href="#" class="pf-c-breadcrumb__link">Section title</a>
3802
+ </li>
3803
+ <li class="pf-c-breadcrumb__item">
3804
+ <span class="pf-c-breadcrumb__item-divider">
3805
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3806
+ </span>
3807
+
3808
+ <a
3809
+ href="#"
3810
+ class="pf-c-breadcrumb__link pf-m-current"
3701
3811
  aria-current="page"
3702
3812
  >Section landing</a>
3703
3813
  </li>
@@ -3713,7 +3823,7 @@ section: components
3713
3823
  </div>
3714
3824
  </div>
3715
3825
  </section>
3716
- <section class="pf-c-page__main-section pf-m-limit-width">
3826
+ <section class="pf-c-page__main-section pf-m-limit-width pf-m-fill">
3717
3827
  <div class="pf-c-page__main-body">
3718
3828
  <div class="pf-l-gallery pf-m-gutter">
3719
3829
  <div class="pf-c-card">
@@ -3749,20 +3859,32 @@ section: components
3749
3859
  </div>
3750
3860
  </div>
3751
3861
  </section>
3862
+ <section
3863
+ class="pf-c-page__main-section pf-m-limit-width pf-m-no-fill pf-m-light"
3864
+ >
3865
+ <div class="pf-c-page__main-body">
3866
+ <p>PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.</p>
3867
+ </div>
3868
+ </section>
3752
3869
  </main>
3753
3870
  </div>
3754
3871
 
3755
3872
  ```
3756
3873
 
3757
- ### Horizontal subnav
3874
+ ### Horizontal nav with horizontal subnav
3758
3875
 
3759
3876
  ```html isFullscreen
3760
- <div class="pf-c-page" id="nav-horizontal-subnav-example">
3761
- <a
3762
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
3763
- href="#main-content-nav-horizontal-subnav-example"
3764
- >Skip to content</a>
3765
- <header class="pf-c-masthead" id="nav-horizontal-subnav-example-masthead">
3877
+ <div class="pf-c-page" id="nav-horizontal-example">
3878
+ <div class="pf-c-skip-to-content">
3879
+ <a
3880
+ class="pf-c-button pf-m-primary"
3881
+ href="#main-content-nav-horizontal-example"
3882
+ >Skip to content</a>
3883
+ </div>
3884
+ <header
3885
+ class="pf-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
3886
+ id="nav-horizontal-example-masthead"
3887
+ >
3766
3888
  <span class="pf-c-masthead__toggle">
3767
3889
  <button
3768
3890
  class="pf-c-button pf-m-plain"
@@ -3793,10 +3915,55 @@ section: components
3793
3915
  <div class="pf-c-masthead__content">
3794
3916
  <div
3795
3917
  class="pf-c-toolbar pf-m-full-height pf-m-static"
3796
- id="nav-horizontal-subnav-example-masthead-toolbar"
3918
+ id="nav-horizontal-example-masthead-toolbar"
3797
3919
  >
3798
3920
  <div class="pf-c-toolbar__content">
3799
3921
  <div class="pf-c-toolbar__content-section">
3922
+ <div
3923
+ class="pf-c-toolbar__item pf-m-overflow-container"
3924
+ style="--pf-c-toolbar__item--MinWidth: 18ch;"
3925
+ >
3926
+ <nav
3927
+ class="pf-c-nav pf-m-horizontal pf-m-scrollable"
3928
+ id="-horizontal-nav"
3929
+ aria-label="Global"
3930
+ >
3931
+ <button
3932
+ class="pf-c-nav__scroll-button"
3933
+ disabled
3934
+ aria-label="Scroll left"
3935
+ >
3936
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
3937
+ </button>
3938
+ <ul class="pf-c-nav__list">
3939
+ <li class="pf-c-nav__item">
3940
+ <a href="#" class="pf-c-nav__link">Horizontal nav item 1</a>
3941
+ </li>
3942
+ <li class="pf-c-nav__item">
3943
+ <a href="#" class="pf-c-nav__link">Horizontal nav item 2</a>
3944
+ </li>
3945
+ <li class="pf-c-nav__item">
3946
+ <a href="#" class="pf-c-nav__link">Horizontal nav item 3</a>
3947
+ </li>
3948
+ <li class="pf-c-nav__item">
3949
+ <a href="#" class="pf-c-nav__link">Horizontal nav item 4</a>
3950
+ </li>
3951
+ <li class="pf-c-nav__item">
3952
+ <a
3953
+ href="#"
3954
+ class="pf-c-nav__link pf-m-current"
3955
+ aria-current="page"
3956
+ >Horizontal nav item 5</a>
3957
+ </li>
3958
+ </ul>
3959
+ <button
3960
+ class="pf-c-nav__scroll-button"
3961
+ aria-label="Scroll right"
3962
+ >
3963
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3964
+ </button>
3965
+ </nav>
3966
+ </div>
3800
3967
  <div
3801
3968
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
3802
3969
  >
@@ -3807,12 +3974,12 @@ section: components
3807
3974
  <nav
3808
3975
  class="pf-c-app-launcher"
3809
3976
  aria-label="Application launcher"
3810
- id="nav-horizontal-subnav-example-masthead-application-launcher"
3977
+ id="nav-horizontal-example-masthead-application-launcher"
3811
3978
  >
3812
3979
  <button
3813
3980
  class="pf-c-app-launcher__toggle"
3814
3981
  type="button"
3815
- id="nav-horizontal-subnav-example-masthead-application-launcher-button"
3982
+ id="nav-horizontal-example-masthead-application-launcher-button"
3816
3983
  aria-expanded="false"
3817
3984
  aria-label="Application launcher"
3818
3985
  >
@@ -3952,7 +4119,7 @@ section: components
3952
4119
  <div class="pf-c-dropdown">
3953
4120
  <button
3954
4121
  class="pf-c-dropdown__toggle pf-m-plain"
3955
- id="nav-horizontal-subnav-example-masthead-settings-button"
4122
+ id="nav-horizontal-example-masthead-settings-button"
3956
4123
  aria-expanded="false"
3957
4124
  type="button"
3958
4125
  aria-label="Settings"
@@ -3961,7 +4128,7 @@ section: components
3961
4128
  </button>
3962
4129
  <ul
3963
4130
  class="pf-c-dropdown__menu pf-m-align-right"
3964
- aria-labelledby="nav-horizontal-subnav-example-masthead-settings-button"
4131
+ aria-labelledby="nav-horizontal-example-masthead-settings-button"
3965
4132
  hidden
3966
4133
  >
3967
4134
  <li>
@@ -3983,7 +4150,7 @@ section: components
3983
4150
  <div class="pf-c-dropdown">
3984
4151
  <button
3985
4152
  class="pf-c-dropdown__toggle pf-m-plain"
3986
- id="nav-horizontal-subnav-example-masthead-help-button"
4153
+ id="nav-horizontal-example-masthead-help-button"
3987
4154
  aria-expanded="false"
3988
4155
  type="button"
3989
4156
  aria-label="Help"
@@ -3992,7 +4159,7 @@ section: components
3992
4159
  </button>
3993
4160
  <ul
3994
4161
  class="pf-c-dropdown__menu pf-m-align-right"
3995
- aria-labelledby="nav-horizontal-subnav-example-masthead-help-button"
4162
+ aria-labelledby="nav-horizontal-example-masthead-help-button"
3996
4163
  hidden
3997
4164
  >
3998
4165
  <li>
@@ -4472,196 +4639,123 @@ section: components
4472
4639
  aria-hidden="true"
4473
4640
  ></i>
4474
4641
  </span>
4475
- </button>
4476
- </li>
4477
- </ul>
4478
- </section>
4479
- </div>
4480
- </li>
4481
- </ul>
4482
- </section>
4483
- </div>
4484
- </div>
4485
- </div>
4486
- </div>
4487
- </div>
4488
- <div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
4489
- <div
4490
- class="pf-c-dropdown pf-m-full-height"
4491
- style="--pf-c-dropdown--MaxWidth: 20ch;"
4492
- >
4493
- <button
4494
- class="pf-c-dropdown__toggle"
4495
- id="nav-horizontal-subnav-example-masthead-profile-button"
4496
- aria-expanded="false"
4497
- type="button"
4498
- >
4499
- <span class="pf-c-dropdown__toggle-image">
4500
- <img
4501
- class="pf-c-avatar"
4502
- alt="Avatar image"
4503
- src="/assets/images/img_avatar-light.svg"
4504
- />
4505
- </span>
4506
- <span class="pf-c-dropdown__toggle-text">Ned Username</span>
4507
- <span class="pf-c-dropdown__toggle-icon">
4508
- <i class="fas fa-caret-down" aria-hidden="true"></i>
4509
- </span>
4510
- </button>
4511
- <div class="pf-c-dropdown__menu" hidden>
4512
- <section class="pf-c-dropdown__group">
4513
- <div class="pf-c-dropdown__menu-item pf-m-text">
4514
- <div class="pf-u-font-size-sm">Account number:</div>
4515
- <div>123456789</div>
4516
- </div>
4517
- <div class="pf-c-dropdown__menu-item pf-m-text">
4518
- <div class="pf-u-font-size-sm">Username:</div>
4519
- <div>mshaksho@redhat.com</div>
4520
- </div>
4521
- </section>
4522
- <hr class="pf-c-divider" />
4523
- <section class="pf-c-dropdown__group">
4524
- <ul>
4525
- <li>
4526
- <a class="pf-c-dropdown__menu-item" href="#">My profile</a>
4527
- </li>
4528
- <li>
4529
- <a
4530
- class="pf-c-dropdown__menu-item"
4531
- href="#"
4532
- >User management</a>
4533
- </li>
4534
- <li>
4535
- <a class="pf-c-dropdown__menu-item" href="#">Logout</a>
4536
- </li>
4537
- </ul>
4538
- </section>
4539
- </div>
4540
- </div>
4541
- </div>
4542
- </div>
4543
- </div>
4544
- </div>
4545
- </div>
4546
- </header>
4547
- <div class="pf-c-page__sidebar">
4548
- <div class="pf-c-page__sidebar-body">
4549
- <nav
4550
- class="pf-c-nav"
4551
- id="nav-horizontal-subnav-example-expandable-nav"
4552
- aria-label="Global"
4553
- >
4554
- <ul class="pf-c-nav__list">
4555
- <li class="pf-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
4556
- <button
4557
- class="pf-c-nav__link"
4558
- id="nav-horizontal-subnav-example-expandable-nav-link1"
4559
- aria-expanded="true"
4560
- >
4561
- System panel
4562
- <span class="pf-c-nav__toggle">
4563
- <span class="pf-c-nav__toggle-icon">
4564
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4565
- </span>
4566
- </span>
4567
- </button>
4568
- <section
4569
- class="pf-c-nav__subnav"
4570
- aria-labelledby="nav-horizontal-subnav-example-expandable-nav-link1"
4571
- >
4572
- <ul class="pf-c-nav__list">
4573
- <li class="pf-c-nav__item">
4574
- <a href="#" class="pf-c-nav__link">Overview</a>
4575
- </li>
4576
- <li class="pf-c-nav__item">
4577
- <a
4578
- href="#"
4579
- class="pf-c-nav__link pf-m-current"
4580
- aria-current="page"
4581
- >Resource usage</a>
4582
- </li>
4583
- <li class="pf-c-nav__item">
4584
- <a href="#" class="pf-c-nav__link">Hypervisors</a>
4585
- </li>
4586
- <li class="pf-c-divider" role="separator"></li>
4587
-
4588
- <li class="pf-c-nav__item">
4589
- <a href="#" class="pf-c-nav__link">Instances</a>
4590
- </li>
4591
- <li class="pf-c-nav__item">
4592
- <a href="#" class="pf-c-nav__link">Volumes</a>
4593
- </li>
4594
- <li class="pf-c-nav__item">
4595
- <a href="#" class="pf-c-nav__link">Networks</a>
4596
- </li>
4597
- </ul>
4598
- </section>
4599
- </li>
4600
- <li class="pf-c-nav__item pf-m-expandable">
4601
- <button
4602
- class="pf-c-nav__link"
4603
- id="nav-horizontal-subnav-example-expandable-nav-link2"
4604
- aria-expanded="false"
4605
- >
4606
- Policy
4607
- <span class="pf-c-nav__toggle">
4608
- <span class="pf-c-nav__toggle-icon">
4609
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4610
- </span>
4611
- </span>
4612
- </button>
4613
- <section
4614
- class="pf-c-nav__subnav"
4615
- aria-labelledby="nav-horizontal-subnav-example-expandable-nav-link2"
4616
- hidden
4617
- >
4618
- <ul class="pf-c-nav__list">
4619
- <li class="pf-c-nav__item">
4620
- <a href="#" class="pf-c-nav__link">Subnav link 1</a>
4621
- </li>
4622
- <li class="pf-c-nav__item">
4623
- <a href="#" class="pf-c-nav__link">Subnav link 2</a>
4624
- </li>
4625
- </ul>
4626
- </section>
4627
- </li>
4628
- <li class="pf-c-nav__item pf-m-expandable">
4629
- <button
4630
- class="pf-c-nav__link"
4631
- id="nav-horizontal-subnav-example-expandable-nav-link3"
4632
- aria-expanded="false"
4633
- >
4634
- Authentication
4635
- <span class="pf-c-nav__toggle">
4636
- <span class="pf-c-nav__toggle-icon">
4637
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4638
- </span>
4639
- </span>
4640
- </button>
4641
- <section
4642
- class="pf-c-nav__subnav"
4643
- aria-labelledby="nav-horizontal-subnav-example-expandable-nav-link3"
4644
- hidden
4645
- >
4646
- <ul class="pf-c-nav__list">
4647
- <li class="pf-c-nav__item">
4648
- <a href="#" class="pf-c-nav__link">Subnav link 1</a>
4649
- </li>
4650
- <li class="pf-c-nav__item">
4651
- <a href="#" class="pf-c-nav__link">Subnav link 2</a>
4652
- </li>
4653
- </ul>
4654
- </section>
4655
- </li>
4656
- </ul>
4657
- </nav>
4642
+ </button>
4643
+ </li>
4644
+ </ul>
4645
+ </section>
4646
+ </div>
4647
+ </li>
4648
+ </ul>
4649
+ </section>
4650
+ </div>
4651
+ </div>
4652
+ </div>
4653
+ </div>
4654
+ </div>
4655
+ <div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
4656
+ <div
4657
+ class="pf-c-dropdown pf-m-full-height"
4658
+ style="--pf-c-dropdown--MaxWidth: 20ch;"
4659
+ >
4660
+ <button
4661
+ class="pf-c-dropdown__toggle"
4662
+ id="nav-horizontal-example-masthead-profile-button"
4663
+ aria-expanded="false"
4664
+ type="button"
4665
+ >
4666
+ <span class="pf-c-dropdown__toggle-image">
4667
+ <img
4668
+ class="pf-c-avatar"
4669
+ alt="Avatar image"
4670
+ src="/assets/images/img_avatar-light.svg"
4671
+ />
4672
+ </span>
4673
+ <span class="pf-c-dropdown__toggle-text">Ned Username</span>
4674
+ <span class="pf-c-dropdown__toggle-icon">
4675
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
4676
+ </span>
4677
+ </button>
4678
+ <div class="pf-c-dropdown__menu" hidden>
4679
+ <section class="pf-c-dropdown__group">
4680
+ <div class="pf-c-dropdown__menu-item pf-m-text">
4681
+ <div class="pf-u-font-size-sm">Account number:</div>
4682
+ <div>123456789</div>
4683
+ </div>
4684
+ <div class="pf-c-dropdown__menu-item pf-m-text">
4685
+ <div class="pf-u-font-size-sm">Username:</div>
4686
+ <div>mshaksho@redhat.com</div>
4687
+ </div>
4688
+ </section>
4689
+ <hr class="pf-c-divider" />
4690
+ <section class="pf-c-dropdown__group">
4691
+ <ul>
4692
+ <li>
4693
+ <a class="pf-c-dropdown__menu-item" href="#">My profile</a>
4694
+ </li>
4695
+ <li>
4696
+ <a
4697
+ class="pf-c-dropdown__menu-item"
4698
+ href="#"
4699
+ >User management</a>
4700
+ </li>
4701
+ <li>
4702
+ <a class="pf-c-dropdown__menu-item" href="#">Logout</a>
4703
+ </li>
4704
+ </ul>
4705
+ </section>
4706
+ </div>
4707
+ </div>
4708
+ </div>
4709
+ </div>
4710
+ </div>
4711
+ </div>
4658
4712
  </div>
4659
- </div>
4713
+ </header>
4660
4714
  <main
4661
4715
  class="pf-c-page__main"
4662
4716
  tabindex="-1"
4663
- id="main-content-nav-horizontal-subnav-example"
4717
+ id="main-content-nav-horizontal-example"
4664
4718
  >
4719
+ <section class="pf-c-page__main-subnav pf-m-limit-width">
4720
+ <div class="pf-c-page__main-body">
4721
+ <nav
4722
+ class="pf-c-nav pf-m-horizontal-subnav pf-m-scrollable"
4723
+ aria-label="Local"
4724
+ >
4725
+ <button
4726
+ class="pf-c-nav__scroll-button"
4727
+ disabled
4728
+ aria-label="Scroll left"
4729
+ >
4730
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
4731
+ </button>
4732
+ <ul class="pf-c-nav__list">
4733
+ <li class="pf-c-nav__item">
4734
+ <a
4735
+ href="#"
4736
+ class="pf-c-nav__link pf-m-current"
4737
+ aria-current="page"
4738
+ >Horizontal subnav item 1</a>
4739
+ </li>
4740
+ <li class="pf-c-nav__item">
4741
+ <a href="#" class="pf-c-nav__link">Horizontal subnav item 2</a>
4742
+ </li>
4743
+ <li class="pf-c-nav__item">
4744
+ <a href="#" class="pf-c-nav__link">Horizontal subnav item 3</a>
4745
+ </li>
4746
+ <li class="pf-c-nav__item">
4747
+ <a href="#" class="pf-c-nav__link">Horizontal subnav item 4</a>
4748
+ </li>
4749
+ <li class="pf-c-nav__item">
4750
+ <a href="#" class="pf-c-nav__link">Horizontal subnav item 5</a>
4751
+ </li>
4752
+ </ul>
4753
+ <button class="pf-c-nav__scroll-button" aria-label="Scroll right">
4754
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4755
+ </button>
4756
+ </nav>
4757
+ </div>
4758
+ </section>
4665
4759
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
4666
4760
  <div class="pf-c-page__main-body">
4667
4761
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
@@ -4706,7 +4800,7 @@ section: components
4706
4800
  </div>
4707
4801
  </div>
4708
4802
  </section>
4709
- <section class="pf-c-page__main-section pf-m-limit-width">
4803
+ <section class="pf-c-page__main-section pf-m-limit-width pf-m-fill">
4710
4804
  <div class="pf-c-page__main-body">
4711
4805
  <div class="pf-l-gallery pf-m-gutter">
4712
4806
  <div class="pf-c-card">
@@ -4747,18 +4841,17 @@ section: components
4747
4841
 
4748
4842
  ```
4749
4843
 
4750
- ### Horizontal nav with horizontal subnav
4844
+ ### Legacy tertiary nav
4751
4845
 
4752
4846
  ```html isFullscreen
4753
- <div class="pf-c-page" id="nav-horizontal-example">
4754
- <a
4755
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
4756
- href="#main-content-nav-horizontal-example"
4757
- >Skip to content</a>
4758
- <header
4759
- class="pf-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
4760
- id="nav-horizontal-example-masthead"
4761
- >
4847
+ <div class="pf-c-page" id="nav-legacy-teriary-example">
4848
+ <div class="pf-c-skip-to-content">
4849
+ <a
4850
+ class="pf-c-button pf-m-primary"
4851
+ href="#main-content-nav-legacy-teriary-example"
4852
+ >Skip to content</a>
4853
+ </div>
4854
+ <header class="pf-c-masthead" id="nav-legacy-teriary-example-masthead">
4762
4855
  <span class="pf-c-masthead__toggle">
4763
4856
  <button
4764
4857
  class="pf-c-button pf-m-plain"
@@ -4789,55 +4882,10 @@ section: components
4789
4882
  <div class="pf-c-masthead__content">
4790
4883
  <div
4791
4884
  class="pf-c-toolbar pf-m-full-height pf-m-static"
4792
- id="nav-horizontal-example-masthead-toolbar"
4885
+ id="nav-legacy-teriary-example-masthead-toolbar"
4793
4886
  >
4794
4887
  <div class="pf-c-toolbar__content">
4795
4888
  <div class="pf-c-toolbar__content-section">
4796
- <div
4797
- class="pf-c-toolbar__item pf-m-overflow-container"
4798
- style="--pf-c-toolbar__item--MinWidth: 18ch;"
4799
- >
4800
- <nav
4801
- class="pf-c-nav pf-m-horizontal pf-m-scrollable"
4802
- id="-horizontal-nav"
4803
- aria-label="Global"
4804
- >
4805
- <button
4806
- class="pf-c-nav__scroll-button"
4807
- disabled
4808
- aria-label="Scroll left"
4809
- >
4810
- <i class="fas fa-angle-left" aria-hidden="true"></i>
4811
- </button>
4812
- <ul class="pf-c-nav__list">
4813
- <li class="pf-c-nav__item">
4814
- <a href="#" class="pf-c-nav__link">Horizontal nav item 1</a>
4815
- </li>
4816
- <li class="pf-c-nav__item">
4817
- <a href="#" class="pf-c-nav__link">Horizontal nav item 2</a>
4818
- </li>
4819
- <li class="pf-c-nav__item">
4820
- <a href="#" class="pf-c-nav__link">Horizontal nav item 3</a>
4821
- </li>
4822
- <li class="pf-c-nav__item">
4823
- <a href="#" class="pf-c-nav__link">Horizontal nav item 4</a>
4824
- </li>
4825
- <li class="pf-c-nav__item">
4826
- <a
4827
- href="#"
4828
- class="pf-c-nav__link pf-m-current"
4829
- aria-current="page"
4830
- >Horizontal nav item 5</a>
4831
- </li>
4832
- </ul>
4833
- <button
4834
- class="pf-c-nav__scroll-button"
4835
- aria-label="Scroll right"
4836
- >
4837
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4838
- </button>
4839
- </nav>
4840
- </div>
4841
4889
  <div
4842
4890
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
4843
4891
  >
@@ -4848,12 +4896,12 @@ section: components
4848
4896
  <nav
4849
4897
  class="pf-c-app-launcher"
4850
4898
  aria-label="Application launcher"
4851
- id="nav-horizontal-example-masthead-application-launcher"
4899
+ id="nav-legacy-teriary-example-masthead-application-launcher"
4852
4900
  >
4853
4901
  <button
4854
4902
  class="pf-c-app-launcher__toggle"
4855
4903
  type="button"
4856
- id="nav-horizontal-example-masthead-application-launcher-button"
4904
+ id="nav-legacy-teriary-example-masthead-application-launcher-button"
4857
4905
  aria-expanded="false"
4858
4906
  aria-label="Application launcher"
4859
4907
  >
@@ -4993,7 +5041,7 @@ section: components
4993
5041
  <div class="pf-c-dropdown">
4994
5042
  <button
4995
5043
  class="pf-c-dropdown__toggle pf-m-plain"
4996
- id="nav-horizontal-example-masthead-settings-button"
5044
+ id="nav-legacy-teriary-example-masthead-settings-button"
4997
5045
  aria-expanded="false"
4998
5046
  type="button"
4999
5047
  aria-label="Settings"
@@ -5002,7 +5050,7 @@ section: components
5002
5050
  </button>
5003
5051
  <ul
5004
5052
  class="pf-c-dropdown__menu pf-m-align-right"
5005
- aria-labelledby="nav-horizontal-example-masthead-settings-button"
5053
+ aria-labelledby="nav-legacy-teriary-example-masthead-settings-button"
5006
5054
  hidden
5007
5055
  >
5008
5056
  <li>
@@ -5024,7 +5072,7 @@ section: components
5024
5072
  <div class="pf-c-dropdown">
5025
5073
  <button
5026
5074
  class="pf-c-dropdown__toggle pf-m-plain"
5027
- id="nav-horizontal-example-masthead-help-button"
5075
+ id="nav-legacy-teriary-example-masthead-help-button"
5028
5076
  aria-expanded="false"
5029
5077
  type="button"
5030
5078
  aria-label="Help"
@@ -5033,7 +5081,7 @@ section: components
5033
5081
  </button>
5034
5082
  <ul
5035
5083
  class="pf-c-dropdown__menu pf-m-align-right"
5036
- aria-labelledby="nav-horizontal-example-masthead-help-button"
5084
+ aria-labelledby="nav-legacy-teriary-example-masthead-help-button"
5037
5085
  hidden
5038
5086
  >
5039
5087
  <li>
@@ -5533,7 +5581,7 @@ section: components
5533
5581
  >
5534
5582
  <button
5535
5583
  class="pf-c-dropdown__toggle"
5536
- id="nav-horizontal-example-masthead-profile-button"
5584
+ id="nav-legacy-teriary-example-masthead-profile-button"
5537
5585
  aria-expanded="false"
5538
5586
  type="button"
5539
5587
  >
@@ -5584,16 +5632,129 @@ section: components
5584
5632
  </div>
5585
5633
  </div>
5586
5634
  </div>
5587
- </header>
5635
+ </header>
5636
+ <div class="pf-c-page__sidebar">
5637
+ <div class="pf-c-page__sidebar-body">
5638
+ <nav
5639
+ class="pf-c-nav"
5640
+ id="nav-legacy-teriary-example-expandable-nav"
5641
+ aria-label="Global"
5642
+ >
5643
+ <ul class="pf-c-nav__list">
5644
+ <li class="pf-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
5645
+ <button
5646
+ class="pf-c-nav__link"
5647
+ id="nav-legacy-teriary-example-expandable-nav-link1"
5648
+ aria-expanded="true"
5649
+ >
5650
+ System panel
5651
+ <span class="pf-c-nav__toggle">
5652
+ <span class="pf-c-nav__toggle-icon">
5653
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
5654
+ </span>
5655
+ </span>
5656
+ </button>
5657
+ <section
5658
+ class="pf-c-nav__subnav"
5659
+ aria-labelledby="nav-legacy-teriary-example-expandable-nav-link1"
5660
+ >
5661
+ <ul class="pf-c-nav__list">
5662
+ <li class="pf-c-nav__item">
5663
+ <a href="#" class="pf-c-nav__link">Overview</a>
5664
+ </li>
5665
+ <li class="pf-c-nav__item">
5666
+ <a
5667
+ href="#"
5668
+ class="pf-c-nav__link pf-m-current"
5669
+ aria-current="page"
5670
+ >Resource usage</a>
5671
+ </li>
5672
+ <li class="pf-c-nav__item">
5673
+ <a href="#" class="pf-c-nav__link">Hypervisors</a>
5674
+ </li>
5675
+ <li class="pf-c-divider" role="separator"></li>
5676
+
5677
+ <li class="pf-c-nav__item">
5678
+ <a href="#" class="pf-c-nav__link">Instances</a>
5679
+ </li>
5680
+ <li class="pf-c-nav__item">
5681
+ <a href="#" class="pf-c-nav__link">Volumes</a>
5682
+ </li>
5683
+ <li class="pf-c-nav__item">
5684
+ <a href="#" class="pf-c-nav__link">Networks</a>
5685
+ </li>
5686
+ </ul>
5687
+ </section>
5688
+ </li>
5689
+ <li class="pf-c-nav__item pf-m-expandable">
5690
+ <button
5691
+ class="pf-c-nav__link"
5692
+ id="nav-legacy-teriary-example-expandable-nav-link2"
5693
+ aria-expanded="false"
5694
+ >
5695
+ Policy
5696
+ <span class="pf-c-nav__toggle">
5697
+ <span class="pf-c-nav__toggle-icon">
5698
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
5699
+ </span>
5700
+ </span>
5701
+ </button>
5702
+ <section
5703
+ class="pf-c-nav__subnav"
5704
+ aria-labelledby="nav-legacy-teriary-example-expandable-nav-link2"
5705
+ hidden
5706
+ >
5707
+ <ul class="pf-c-nav__list">
5708
+ <li class="pf-c-nav__item">
5709
+ <a href="#" class="pf-c-nav__link">Subnav link 1</a>
5710
+ </li>
5711
+ <li class="pf-c-nav__item">
5712
+ <a href="#" class="pf-c-nav__link">Subnav link 2</a>
5713
+ </li>
5714
+ </ul>
5715
+ </section>
5716
+ </li>
5717
+ <li class="pf-c-nav__item pf-m-expandable">
5718
+ <button
5719
+ class="pf-c-nav__link"
5720
+ id="nav-legacy-teriary-example-expandable-nav-link3"
5721
+ aria-expanded="false"
5722
+ >
5723
+ Authentication
5724
+ <span class="pf-c-nav__toggle">
5725
+ <span class="pf-c-nav__toggle-icon">
5726
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
5727
+ </span>
5728
+ </span>
5729
+ </button>
5730
+ <section
5731
+ class="pf-c-nav__subnav"
5732
+ aria-labelledby="nav-legacy-teriary-example-expandable-nav-link3"
5733
+ hidden
5734
+ >
5735
+ <ul class="pf-c-nav__list">
5736
+ <li class="pf-c-nav__item">
5737
+ <a href="#" class="pf-c-nav__link">Subnav link 1</a>
5738
+ </li>
5739
+ <li class="pf-c-nav__item">
5740
+ <a href="#" class="pf-c-nav__link">Subnav link 2</a>
5741
+ </li>
5742
+ </ul>
5743
+ </section>
5744
+ </li>
5745
+ </ul>
5746
+ </nav>
5747
+ </div>
5748
+ </div>
5588
5749
  <main
5589
5750
  class="pf-c-page__main"
5590
5751
  tabindex="-1"
5591
- id="main-content-nav-horizontal-example"
5752
+ id="main-content-nav-legacy-teriary-example"
5592
5753
  >
5593
- <section class="pf-c-page__main-subnav pf-m-limit-width">
5754
+ <section class="pf-c-page__main-nav pf-m-limit-width">
5594
5755
  <div class="pf-c-page__main-body">
5595
5756
  <nav
5596
- class="pf-c-nav pf-m-horizontal-subnav pf-m-scrollable"
5757
+ class="pf-c-nav pf-m-horizontal pf-m-tertiary pf-m-scrollable"
5597
5758
  aria-label="Local"
5598
5759
  >
5599
5760
  <button
@@ -5609,19 +5770,19 @@ section: components
5609
5770
  href="#"
5610
5771
  class="pf-c-nav__link pf-m-current"
5611
5772
  aria-current="page"
5612
- >Horizontal subnav item 1</a>
5773
+ >Tertiary nav item 1</a>
5613
5774
  </li>
5614
5775
  <li class="pf-c-nav__item">
5615
- <a href="#" class="pf-c-nav__link">Horizontal subnav item 2</a>
5776
+ <a href="#" class="pf-c-nav__link">Tertiary nav item 2</a>
5616
5777
  </li>
5617
5778
  <li class="pf-c-nav__item">
5618
- <a href="#" class="pf-c-nav__link">Horizontal subnav item 3</a>
5779
+ <a href="#" class="pf-c-nav__link">Tertiary nav item 3</a>
5619
5780
  </li>
5620
5781
  <li class="pf-c-nav__item">
5621
- <a href="#" class="pf-c-nav__link">Horizontal subnav item 4</a>
5782
+ <a href="#" class="pf-c-nav__link">Tertiary nav item 4</a>
5622
5783
  </li>
5623
5784
  <li class="pf-c-nav__item">
5624
- <a href="#" class="pf-c-nav__link">Horizontal subnav item 5</a>
5785
+ <a href="#" class="pf-c-nav__link">Tertiary nav item 5</a>
5625
5786
  </li>
5626
5787
  </ul>
5627
5788
  <button class="pf-c-nav__scroll-button" aria-label="Scroll right">
@@ -5674,7 +5835,7 @@ section: components
5674
5835
  </div>
5675
5836
  </div>
5676
5837
  </section>
5677
- <section class="pf-c-page__main-section pf-m-limit-width">
5838
+ <section class="pf-c-page__main-section pf-m-limit-width pf-m-fill">
5678
5839
  <div class="pf-c-page__main-body">
5679
5840
  <div class="pf-l-gallery pf-m-gutter">
5680
5841
  <div class="pf-c-card">
@@ -5715,15 +5876,17 @@ section: components
5715
5876
 
5716
5877
  ```
5717
5878
 
5718
- ### Legacy tertiary nav
5879
+ ### Grouped nav
5719
5880
 
5720
5881
  ```html isFullscreen
5721
- <div class="pf-c-page" id="nav-legacy-teriary-example">
5722
- <a
5723
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
5724
- href="#main-content-nav-legacy-teriary-example"
5725
- >Skip to content</a>
5726
- <header class="pf-c-masthead" id="nav-legacy-teriary-example-masthead">
5882
+ <div class="pf-c-page" id="nav-grouped-nav-example">
5883
+ <div class="pf-c-skip-to-content">
5884
+ <a
5885
+ class="pf-c-button pf-m-primary"
5886
+ href="#main-content-nav-grouped-nav-example"
5887
+ >Skip to content</a>
5888
+ </div>
5889
+ <header class="pf-c-masthead" id="nav-grouped-nav-example-masthead">
5727
5890
  <span class="pf-c-masthead__toggle">
5728
5891
  <button
5729
5892
  class="pf-c-button pf-m-plain"
@@ -5754,7 +5917,7 @@ section: components
5754
5917
  <div class="pf-c-masthead__content">
5755
5918
  <div
5756
5919
  class="pf-c-toolbar pf-m-full-height pf-m-static"
5757
- id="nav-legacy-teriary-example-masthead-toolbar"
5920
+ id="nav-grouped-nav-example-masthead-toolbar"
5758
5921
  >
5759
5922
  <div class="pf-c-toolbar__content">
5760
5923
  <div class="pf-c-toolbar__content-section">
@@ -5768,12 +5931,12 @@ section: components
5768
5931
  <nav
5769
5932
  class="pf-c-app-launcher"
5770
5933
  aria-label="Application launcher"
5771
- id="nav-legacy-teriary-example-masthead-application-launcher"
5934
+ id="nav-grouped-nav-example-masthead-application-launcher"
5772
5935
  >
5773
5936
  <button
5774
5937
  class="pf-c-app-launcher__toggle"
5775
5938
  type="button"
5776
- id="nav-legacy-teriary-example-masthead-application-launcher-button"
5939
+ id="nav-grouped-nav-example-masthead-application-launcher-button"
5777
5940
  aria-expanded="false"
5778
5941
  aria-label="Application launcher"
5779
5942
  >
@@ -5913,7 +6076,7 @@ section: components
5913
6076
  <div class="pf-c-dropdown">
5914
6077
  <button
5915
6078
  class="pf-c-dropdown__toggle pf-m-plain"
5916
- id="nav-legacy-teriary-example-masthead-settings-button"
6079
+ id="nav-grouped-nav-example-masthead-settings-button"
5917
6080
  aria-expanded="false"
5918
6081
  type="button"
5919
6082
  aria-label="Settings"
@@ -5922,7 +6085,7 @@ section: components
5922
6085
  </button>
5923
6086
  <ul
5924
6087
  class="pf-c-dropdown__menu pf-m-align-right"
5925
- aria-labelledby="nav-legacy-teriary-example-masthead-settings-button"
6088
+ aria-labelledby="nav-grouped-nav-example-masthead-settings-button"
5926
6089
  hidden
5927
6090
  >
5928
6091
  <li>
@@ -5944,7 +6107,7 @@ section: components
5944
6107
  <div class="pf-c-dropdown">
5945
6108
  <button
5946
6109
  class="pf-c-dropdown__toggle pf-m-plain"
5947
- id="nav-legacy-teriary-example-masthead-help-button"
6110
+ id="nav-grouped-nav-example-masthead-help-button"
5948
6111
  aria-expanded="false"
5949
6112
  type="button"
5950
6113
  aria-label="Help"
@@ -5953,7 +6116,7 @@ section: components
5953
6116
  </button>
5954
6117
  <ul
5955
6118
  class="pf-c-dropdown__menu pf-m-align-right"
5956
- aria-labelledby="nav-legacy-teriary-example-masthead-help-button"
6119
+ aria-labelledby="nav-grouped-nav-example-masthead-help-button"
5957
6120
  hidden
5958
6121
  >
5959
6122
  <li>
@@ -6453,7 +6616,7 @@ section: components
6453
6616
  >
6454
6617
  <button
6455
6618
  class="pf-c-dropdown__toggle"
6456
- id="nav-legacy-teriary-example-masthead-profile-button"
6619
+ id="nav-grouped-nav-example-masthead-profile-button"
6457
6620
  aria-expanded="false"
6458
6621
  type="button"
6459
6622
  >
@@ -6509,160 +6672,58 @@ section: components
6509
6672
  <div class="pf-c-page__sidebar-body">
6510
6673
  <nav
6511
6674
  class="pf-c-nav"
6512
- id="nav-legacy-teriary-example-expandable-nav"
6675
+ id="nav-grouped-nav-example-grouped-nav"
6513
6676
  aria-label="Global"
6514
6677
  >
6515
- <ul class="pf-c-nav__list">
6516
- <li class="pf-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
6517
- <button
6518
- class="pf-c-nav__link"
6519
- id="nav-legacy-teriary-example-expandable-nav-link1"
6520
- aria-expanded="true"
6521
- >
6522
- System panel
6523
- <span class="pf-c-nav__toggle">
6524
- <span class="pf-c-nav__toggle-icon">
6525
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6526
- </span>
6527
- </span>
6528
- </button>
6529
- <section
6530
- class="pf-c-nav__subnav"
6531
- aria-labelledby="nav-legacy-teriary-example-expandable-nav-link1"
6532
- >
6533
- <ul class="pf-c-nav__list">
6534
- <li class="pf-c-nav__item">
6535
- <a href="#" class="pf-c-nav__link">Overview</a>
6536
- </li>
6537
- <li class="pf-c-nav__item">
6538
- <a
6539
- href="#"
6540
- class="pf-c-nav__link pf-m-current"
6541
- aria-current="page"
6542
- >Resource usage</a>
6543
- </li>
6544
- <li class="pf-c-nav__item">
6545
- <a href="#" class="pf-c-nav__link">Hypervisors</a>
6546
- </li>
6547
- <li class="pf-c-divider" role="separator"></li>
6548
-
6549
- <li class="pf-c-nav__item">
6550
- <a href="#" class="pf-c-nav__link">Instances</a>
6551
- </li>
6552
- <li class="pf-c-nav__item">
6553
- <a href="#" class="pf-c-nav__link">Volumes</a>
6554
- </li>
6555
- <li class="pf-c-nav__item">
6556
- <a href="#" class="pf-c-nav__link">Networks</a>
6557
- </li>
6558
- </ul>
6559
- </section>
6560
- </li>
6561
- <li class="pf-c-nav__item pf-m-expandable">
6562
- <button
6563
- class="pf-c-nav__link"
6564
- id="nav-legacy-teriary-example-expandable-nav-link2"
6565
- aria-expanded="false"
6566
- >
6567
- Policy
6568
- <span class="pf-c-nav__toggle">
6569
- <span class="pf-c-nav__toggle-icon">
6570
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6571
- </span>
6572
- </span>
6573
- </button>
6574
- <section
6575
- class="pf-c-nav__subnav"
6576
- aria-labelledby="nav-legacy-teriary-example-expandable-nav-link2"
6577
- hidden
6578
- >
6579
- <ul class="pf-c-nav__list">
6580
- <li class="pf-c-nav__item">
6581
- <a href="#" class="pf-c-nav__link">Subnav link 1</a>
6582
- </li>
6583
- <li class="pf-c-nav__item">
6584
- <a href="#" class="pf-c-nav__link">Subnav link 2</a>
6585
- </li>
6586
- </ul>
6587
- </section>
6588
- </li>
6589
- <li class="pf-c-nav__item pf-m-expandable">
6590
- <button
6591
- class="pf-c-nav__link"
6592
- id="nav-legacy-teriary-example-expandable-nav-link3"
6593
- aria-expanded="false"
6594
- >
6595
- Authentication
6596
- <span class="pf-c-nav__toggle">
6597
- <span class="pf-c-nav__toggle-icon">
6598
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6599
- </span>
6600
- </span>
6601
- </button>
6602
- <section
6603
- class="pf-c-nav__subnav"
6604
- aria-labelledby="nav-legacy-teriary-example-expandable-nav-link3"
6605
- hidden
6606
- >
6607
- <ul class="pf-c-nav__list">
6608
- <li class="pf-c-nav__item">
6609
- <a href="#" class="pf-c-nav__link">Subnav link 1</a>
6610
- </li>
6611
- <li class="pf-c-nav__item">
6612
- <a href="#" class="pf-c-nav__link">Subnav link 2</a>
6613
- </li>
6614
- </ul>
6615
- </section>
6616
- </li>
6617
- </ul>
6618
- </nav>
6619
- </div>
6620
- </div>
6621
- <main
6622
- class="pf-c-page__main"
6623
- tabindex="-1"
6624
- id="main-content-nav-legacy-teriary-example"
6625
- >
6626
- <section class="pf-c-page__main-nav pf-m-limit-width">
6627
- <div class="pf-c-page__main-body">
6628
- <nav
6629
- class="pf-c-nav pf-m-horizontal pf-m-tertiary pf-m-scrollable"
6630
- aria-label="Local"
6631
- >
6632
- <button
6633
- class="pf-c-nav__scroll-button"
6634
- disabled
6635
- aria-label="Scroll left"
6636
- >
6637
- <i class="fas fa-angle-left" aria-hidden="true"></i>
6638
- </button>
6678
+ <section class="pf-c-nav__section" aria-labelledby="grouped-title1">
6679
+ <h2 class="pf-c-nav__section-title" id="grouped-title1">System panel</h2>
6639
6680
  <ul class="pf-c-nav__list">
6681
+ <li class="pf-c-nav__item">
6682
+ <a href="#" class="pf-c-nav__link">Overview</a>
6683
+ </li>
6684
+ <li class="pf-c-nav__item">
6685
+ <a href="#" class="pf-c-nav__link">Resource usage</a>
6686
+ </li>
6640
6687
  <li class="pf-c-nav__item">
6641
6688
  <a
6642
6689
  href="#"
6643
6690
  class="pf-c-nav__link pf-m-current"
6644
6691
  aria-current="page"
6645
- >Tertiary nav item 1</a>
6692
+ >Hypervisors</a>
6646
6693
  </li>
6647
6694
  <li class="pf-c-nav__item">
6648
- <a href="#" class="pf-c-nav__link">Tertiary nav item 2</a>
6695
+ <a href="#" class="pf-c-nav__link">Instances</a>
6649
6696
  </li>
6650
6697
  <li class="pf-c-nav__item">
6651
- <a href="#" class="pf-c-nav__link">Tertiary nav item 3</a>
6698
+ <a href="#" class="pf-c-nav__link">Volumes</a>
6652
6699
  </li>
6653
6700
  <li class="pf-c-nav__item">
6654
- <a href="#" class="pf-c-nav__link">Tertiary nav item 4</a>
6701
+ <a href="#" class="pf-c-nav__link">Networks</a>
6702
+ </li>
6703
+ </ul>
6704
+ </section>
6705
+ <section class="pf-c-nav__section" aria-labelledby="grouped-title2">
6706
+ <h2 class="pf-c-nav__section-title" id="grouped-title2">Policy</h2>
6707
+ <ul class="pf-c-nav__list">
6708
+ <li class="pf-c-nav__item">
6709
+ <a href="#" class="pf-c-nav__link">Hosts</a>
6655
6710
  </li>
6656
6711
  <li class="pf-c-nav__item">
6657
- <a href="#" class="pf-c-nav__link">Tertiary nav item 5</a>
6712
+ <a href="#" class="pf-c-nav__link">Virtual machines</a>
6713
+ </li>
6714
+ <li class="pf-c-nav__item">
6715
+ <a href="#" class="pf-c-nav__link">Storage</a>
6658
6716
  </li>
6659
6717
  </ul>
6660
- <button class="pf-c-nav__scroll-button" aria-label="Scroll right">
6661
- <i class="fas fa-angle-right" aria-hidden="true"></i>
6662
- </button>
6663
- </nav>
6664
- </div>
6665
- </section>
6718
+ </section>
6719
+ </nav>
6720
+ </div>
6721
+ </div>
6722
+ <main
6723
+ class="pf-c-page__main"
6724
+ tabindex="-1"
6725
+ id="main-content-nav-grouped-nav-example"
6726
+ >
6666
6727
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
6667
6728
  <div class="pf-c-page__main-body">
6668
6729
  <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
@@ -6752,10 +6813,12 @@ section: components
6752
6813
 
6753
6814
  ```html isFullscreen
6754
6815
  <div class="pf-c-page" id="nav-light-theme-example">
6755
- <a
6756
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
6757
- href="#main-content-nav-light-theme-example"
6758
- >Skip to content</a>
6816
+ <div class="pf-c-skip-to-content">
6817
+ <a
6818
+ class="pf-c-button pf-m-primary"
6819
+ href="#main-content-nav-light-theme-example"
6820
+ >Skip to content</a>
6821
+ </div>
6759
6822
  <header class="pf-c-masthead" id="nav-light-theme-example-masthead">
6760
6823
  <span class="pf-c-masthead__toggle">
6761
6824
  <button