@patternfly/patternfly 6.0.0-alpha.98 → 6.0.0-alpha.99

package/docs/demos/Nav/examples/Nav.md

@@ -148,19 +148,7 @@ section: components
                     aria-label="Application launcher"
                   >
                     <span class="pf-v6-c-menu-toggle__icon">
-                      <svg
-                        class="pf-v5-svg"
-                        viewBox="0 0 192 512"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
+                      <i class="fas fa-th" aria-hidden="true"></i>
                     </span>
                   </button>
                 </div>
@@ -172,19 +160,7 @@ section: components
                     aria-label="Settings"
                   >
                     <span class="pf-v6-c-menu-toggle__icon">
-                      <svg
-                        class="pf-v5-svg"
-                        viewBox="0 0 192 512"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
+                      <i class="fas fa-cog" aria-hidden="true"></i>
                     </span>
                   </button>
                 </div>
@@ -196,19 +172,7 @@ section: components
                     aria-label="Help"
                   >
                     <span class="pf-v6-c-menu-toggle__icon">
-                      <svg
-                        class="pf-v5-svg"
-                        viewBox="0 0 192 512"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
+                      <i class="fas fa-question-circle" aria-hidden="true"></i>
                     </span>
                   </button>
                 </div>
@@ -221,19 +185,7 @@ section: components
                   aria-label="Actions"
                 >
                   <span class="pf-v6-c-menu-toggle__icon">
-                    <svg
-                      class="pf-v5-svg"
-                      viewBox="0 0 192 512"
-                      fill="currentColor"
-                      aria-hidden="true"
-                      role="img"
-                      width="1em"
-                      height="1em"
-                    >
-                      <path
-                        d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                      />
-                    </svg>
+                    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
                   </span>
                 </button>
               </div>
@@ -509,19 +461,7 @@ section: components
                     aria-label="Application launcher"
                   >
                     <span class="pf-v6-c-menu-toggle__icon">
-                      <svg
-                        class="pf-v5-svg"
-                        viewBox="0 0 192 512"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
+                      <i class="fas fa-th" aria-hidden="true"></i>
                     </span>
                   </button>
                 </div>
@@ -533,19 +473,7 @@ section: components
                     aria-label="Settings"
                   >
                     <span class="pf-v6-c-menu-toggle__icon">
-                      <svg
-                        class="pf-v5-svg"
-                        viewBox="0 0 192 512"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
+                      <i class="fas fa-cog" aria-hidden="true"></i>
                     </span>
                   </button>
                 </div>
@@ -557,19 +485,7 @@ section: components
                     aria-label="Help"
                   >
                     <span class="pf-v6-c-menu-toggle__icon">
-                      <svg
-                        class="pf-v5-svg"
-                        viewBox="0 0 192 512"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
+                      <i class="fas fa-question-circle" aria-hidden="true"></i>
                     </span>
                   </button>
                 </div>
@@ -582,19 +498,7 @@ section: components
                   aria-label="Actions"
                 >
                   <span class="pf-v6-c-menu-toggle__icon">
-                    <svg
-                      class="pf-v5-svg"
-                      viewBox="0 0 192 512"
-                      fill="currentColor"
-                      aria-hidden="true"
-                      role="img"
-                      width="1em"
-                      height="1em"
-                    >
-                      <path
-                        d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                      />
-                    </svg>
+                    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
                   </span>
                 </button>
               </div>
@@ -894,19 +798,7 @@ section: components
                     aria-label="Application launcher"
                   >
                     <span class="pf-v6-c-menu-toggle__icon">
-                      <svg
-                        class="pf-v5-svg"
-                        viewBox="0 0 192 512"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
+                      <i class="fas fa-th" aria-hidden="true"></i>
                     </span>
                   </button>
                 </div>
@@ -918,19 +810,7 @@ section: components
                     aria-label="Settings"
                   >
                     <span class="pf-v6-c-menu-toggle__icon">
-                      <svg
-                        class="pf-v5-svg"
-                        viewBox="0 0 192 512"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
+                      <i class="fas fa-cog" aria-hidden="true"></i>
                     </span>
                   </button>
                 </div>
@@ -942,19 +822,7 @@ section: components
                     aria-label="Help"
                   >
                     <span class="pf-v6-c-menu-toggle__icon">
-                      <svg
-                        class="pf-v5-svg"
-                        viewBox="0 0 192 512"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
+                      <i class="fas fa-question-circle" aria-hidden="true"></i>
                     </span>
                   </button>
                 </div>
@@ -967,19 +835,7 @@ section: components
                   aria-label="Actions"
                 >
                   <span class="pf-v6-c-menu-toggle__icon">
-                    <svg
-                      class="pf-v5-svg"
-                      viewBox="0 0 192 512"
-                      fill="currentColor"
-                      aria-hidden="true"
-                      role="img"
-                      width="1em"
-                      height="1em"
-                    >
-                      <path
-                        d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                      />
-                    </svg>
+                    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
                   </span>
                 </button>
               </div>
@@ -1323,13 +1179,11 @@ section: components
               >
                 <div class="pf-v6-c-nav__scroll-button">
                   <button
-                    class="pf-v6-c-button pf-m-plain pf-m-RTL-icon-static"
+                    class="pf-v6-c-button pf-m-plain"
                     type="button"
                     aria-label="Scroll start"
                   >
-                    <span class="pf-v6-c-button__icon">
-                      <i class="fas fa-angle-left" aria-hidden="true"></i>
-                    </span>
+                    <i class="fas fa-angle-left" aria-hidden="true"></i>
                   </button>
                 </div>
                 <ul class="pf-v6-c-nav__list" role="list">
@@ -1355,13 +1209,11 @@ section: components
                 </ul>
                 <div class="pf-v6-c-nav__scroll-button">
                   <button
-                    class="pf-v6-c-button pf-m-plain pf-m-RTL-icon-static"
+                    class="pf-v6-c-button pf-m-plain"
                     type="button"
                     aria-label="Scroll end"
                   >
-                    <span class="pf-v6-c-button__icon">
-                      <i class="fas fa-angle-right" aria-hidden="true"></i>
-                    </span>
+                    <i class="fas fa-angle-right" aria-hidden="true"></i>
                   </button>
                 </div>
               </nav>
@@ -1380,19 +1232,7 @@ section: components
                     aria-label="Application launcher"
                   >
                     <span class="pf-v6-c-menu-toggle__icon">
-                      <svg
-                        class="pf-v5-svg"
-                        viewBox="0 0 192 512"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
+                      <i class="fas fa-th" aria-hidden="true"></i>
                     </span>
                   </button>
                 </div>
@@ -1404,19 +1244,7 @@ section: components
                     aria-label="Settings"
                   >
                     <span class="pf-v6-c-menu-toggle__icon">
-                      <svg
-                        class="pf-v5-svg"
-                        viewBox="0 0 192 512"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
+                      <i class="fas fa-cog" aria-hidden="true"></i>
                     </span>
                   </button>
                 </div>
@@ -1428,19 +1256,7 @@ section: components
                     aria-label="Help"
                   >
                     <span class="pf-v6-c-menu-toggle__icon">
-                      <svg
-                        class="pf-v5-svg"
-                        viewBox="0 0 192 512"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
+                      <i class="fas fa-question-circle" aria-hidden="true"></i>
                     </span>
                   </button>
                 </div>
@@ -1453,19 +1269,7 @@ section: components
                   aria-label="Actions"
                 >
                   <span class="pf-v6-c-menu-toggle__icon">
-                    <svg
-                      class="pf-v5-svg"
-                      viewBox="0 0 192 512"
-                      fill="currentColor"
-                      aria-hidden="true"
-                      role="img"
-                      width="1em"
-                      height="1em"
-                    >
-                      <path
-                        d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                      />
-                    </svg>
+                    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
                   </span>
                 </button>
               </div>
@@ -1710,19 +1514,7 @@ section: components
                     aria-label="Application launcher"
                   >
                     <span class="pf-v6-c-menu-toggle__icon">
-                      <svg
-                        class="pf-v5-svg"
-                        viewBox="0 0 192 512"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
+                      <i class="fas fa-th" aria-hidden="true"></i>
                     </span>
                   </button>
                 </div>
@@ -1734,19 +1526,7 @@ section: components
                     aria-label="Settings"
                   >
                     <span class="pf-v6-c-menu-toggle__icon">
-                      <svg
-                        class="pf-v5-svg"
-                        viewBox="0 0 192 512"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
+                      <i class="fas fa-cog" aria-hidden="true"></i>
                     </span>
                   </button>
                 </div>
@@ -1758,19 +1538,7 @@ section: components
                     aria-label="Help"
                   >
                     <span class="pf-v6-c-menu-toggle__icon">
-                      <svg
-                        class="pf-v5-svg"
-                        viewBox="0 0 192 512"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
+                      <i class="fas fa-question-circle" aria-hidden="true"></i>
                     </span>
                   </button>
                 </div>
@@ -1783,19 +1551,7 @@ section: components
                   aria-label="Actions"
                 >
                   <span class="pf-v6-c-menu-toggle__icon">
-                    <svg
-                      class="pf-v5-svg"
-                      viewBox="0 0 192 512"
-                      fill="currentColor"
-                      aria-hidden="true"
-                      role="img"
-                      width="1em"
-                      height="1em"
-                    >
-                      <path
-                        d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                      />
-                    </svg>
+                    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
                   </span>
                 </button>
               </div>
@@ -1809,108 +1565,28 @@ section: components
     <div class="pf-v6-c-page__sidebar-body">
       <nav
         class="pf-v6-c-nav"
-        id="nav-horizontal-subnav-example-expandable-nav"
+        id="nav-horizontal-subnav-example-primary-nav"
         aria-label="Global"
       >
         <ul class="pf-v6-c-nav__list" role="list">
-          <li class="pf-v6-c-nav__item pf-m-expandable pf-m-expanded">
-            <button
-              class="pf-v6-c-nav__link"
-              aria-expanded="true"
-              id="nav-horizontal-subnav-example-expandable-nav-link1"
-            >
-              System panel
-              <span class="pf-v6-c-nav__toggle">
-                <span class="pf-v6-c-nav__toggle-icon">
-                  <i class="fas fa-angle-right" aria-hidden="true"></i>
-                </span>
-              </span>
-            </button>
-            <section
-              class="pf-v6-c-nav__subnav"
-              aria-labelledby="nav-horizontal-subnav-example-expandable-nav-link1"
-            >
-              <ul class="pf-v6-c-nav__list" role="list">
-                <li class="pf-v6-c-nav__item">
-                  <a href="#" class="pf-v6-c-nav__link">Overview</a>
-                </li>
-                <li class="pf-v6-c-nav__item">
-                  <a
-                    href="#"
-                    class="pf-v6-c-nav__link pf-m-current"
-                    aria-current="page"
-                  >Resource usage</a>
-                </li>
-                <li class="pf-v6-c-nav__item">
-                  <a href="#" class="pf-v6-c-nav__link">Hypervisors</a>
-                </li>
-                <li class="pf-v6-c-nav__item">
-                  <a href="#" class="pf-v6-c-nav__link">Instances</a>
-                </li>
-                <li class="pf-v6-c-nav__item">
-                  <a href="#" class="pf-v6-c-nav__link">Volumes</a>
-                </li>
-                <li class="pf-v6-c-nav__item">
-                  <a href="#" class="pf-v6-c-nav__link">Networks</a>
-                </li>
-              </ul>
-            </section>
+          <li class="pf-v6-c-nav__item">
+            <a href="#" class="pf-v6-c-nav__link">System panel</a>
           </li>
-          <li class="pf-v6-c-nav__item pf-m-expandable">
-            <button
-              class="pf-v6-c-nav__link"
-              aria-expanded="false"
-              id="nav-horizontal-subnav-example-expandable-nav-link2"
-            >
-              Policy
-              <span class="pf-v6-c-nav__toggle">
-                <span class="pf-v6-c-nav__toggle-icon">
-                  <i class="fas fa-angle-right" aria-hidden="true"></i>
-                </span>
-              </span>
-            </button>
-            <section
-              class="pf-v6-c-nav__subnav"
-              aria-labelledby="nav-horizontal-subnav-example-expandable-nav-link2"
-              hidden
-            >
-              <ul class="pf-v6-c-nav__list" role="list">
-                <li class="pf-v6-c-nav__item">
-                  <a href="#" class="pf-v6-c-nav__link">Subnav link 1</a>
-                </li>
-                <li class="pf-v6-c-nav__item">
-                  <a href="#" class="pf-v6-c-nav__link">Subnav link 2</a>
-                </li>
-              </ul>
-            </section>
+          <li class="pf-v6-c-nav__item">
+            <a
+              href="#"
+              class="pf-v6-c-nav__link pf-m-current"
+              aria-current="page"
+            >Policy</a>
           </li>
-          <li class="pf-v6-c-nav__item pf-m-expandable">
-            <button
-              class="pf-v6-c-nav__link"
-              aria-expanded="false"
-              id="nav-horizontal-subnav-example-expandable-nav-link3"
-            >
-              Authentication
-              <span class="pf-v6-c-nav__toggle">
-                <span class="pf-v6-c-nav__toggle-icon">
-                  <i class="fas fa-angle-right" aria-hidden="true"></i>
-                </span>
-              </span>
-            </button>
-            <section
-              class="pf-v6-c-nav__subnav"
-              aria-labelledby="nav-horizontal-subnav-example-expandable-nav-link3"
-              hidden
-            >
-              <ul class="pf-v6-c-nav__list" role="list">
-                <li class="pf-v6-c-nav__item">
-                  <a href="#" class="pf-v6-c-nav__link">Subnav link 1</a>
-                </li>
-                <li class="pf-v6-c-nav__item">
-                  <a href="#" class="pf-v6-c-nav__link">Subnav link 2</a>
-                </li>
-              </ul>
-            </section>
+          <li class="pf-v6-c-nav__item">
+            <a href="#" class="pf-v6-c-nav__link">Authentication</a>
+          </li>
+          <li class="pf-v6-c-nav__item">
+            <a href="#" class="pf-v6-c-nav__link">Network services</a>
+          </li>
+          <li class="pf-v6-c-nav__item">
+            <a href="#" class="pf-v6-c-nav__link">Server</a>
           </li>
         </ul>
       </nav>
@@ -1921,6 +1597,24 @@ section: components
     tabindex="-1"
     id="main-content-nav-horizontal-subnav-example"
   >
+    <section class="pf-v6-c-page__main-subnav pf-m-limit-width">
+      <div class="pf-v6-c-page__main-body">
+        <nav class="pf-v6-c-nav pf-m-horizontal pf-m-subnav" aria-label="Local">
+          <ul class="pf-v6-c-nav__list" role="list">
+            <li class="pf-v6-c-nav__item">
+              <a
+                href="#"
+                class="pf-v6-c-nav__link pf-m-current"
+                aria-current="page"
+              >Horizontal subnav item 1</a>
+            </li>
+            <li class="pf-v6-c-nav__item">
+              <a href="#" class="pf-v6-c-nav__link">Horizontal subnav item 2</a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </section>
     <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
       <div class="pf-v6-c-page__main-body">
         <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
@@ -2151,13 +1845,11 @@ section: components
               >
                 <div class="pf-v6-c-nav__scroll-button">
                   <button
-                    class="pf-v6-c-button pf-m-plain pf-m-RTL-icon-static"
+                    class="pf-v6-c-button pf-m-plain"
                     type="button"
                     aria-label="Scroll start"
                   >
-                    <span class="pf-v6-c-button__icon">
-                      <i class="fas fa-angle-left" aria-hidden="true"></i>
-                    </span>
+                    <i class="fas fa-angle-left" aria-hidden="true"></i>
                   </button>
                 </div>
                 <ul class="pf-v6-c-nav__list" role="list">
@@ -2183,13 +1875,11 @@ section: components
                 </ul>
                 <div class="pf-v6-c-nav__scroll-button">
                   <button
-                    class="pf-v6-c-button pf-m-plain pf-m-RTL-icon-static"
+                    class="pf-v6-c-button pf-m-plain"
                     type="button"
                     aria-label="Scroll end"
                   >
-                    <span class="pf-v6-c-button__icon">
-                      <i class="fas fa-angle-right" aria-hidden="true"></i>
-                    </span>
+                    <i class="fas fa-angle-right" aria-hidden="true"></i>
                   </button>
                 </div>
               </nav>
@@ -2208,19 +1898,7 @@ section: components
                     aria-label="Application launcher"
                   >
                     <span class="pf-v6-c-menu-toggle__icon">
-                      <svg
-                        class="pf-v5-svg"
-                        viewBox="0 0 192 512"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
+                      <i class="fas fa-th" aria-hidden="true"></i>
                     </span>
                   </button>
                 </div>
@@ -2232,19 +1910,7 @@ section: components
                     aria-label="Settings"
                   >
                     <span class="pf-v6-c-menu-toggle__icon">
-                      <svg
-                        class="pf-v5-svg"
-                        viewBox="0 0 192 512"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
+                      <i class="fas fa-cog" aria-hidden="true"></i>
                     </span>
                   </button>
                 </div>
@@ -2256,19 +1922,7 @@ section: components
                     aria-label="Help"
                   >
                     <span class="pf-v6-c-menu-toggle__icon">
-                      <svg
-                        class="pf-v5-svg"
-                        viewBox="0 0 192 512"
-                        fill="currentColor"
-                        aria-hidden="true"
-                        role="img"
-                        width="1em"
-                        height="1em"
-                      >
-                        <path
-                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                        />
-                      </svg>
+                      <i class="fas fa-question-circle" aria-hidden="true"></i>
                     </span>
                   </button>
                 </div>
@@ -2281,19 +1935,7 @@ section: components
                   aria-label="Actions"
                 >
                   <span class="pf-v6-c-menu-toggle__icon">
-                    <svg
-                      class="pf-v5-svg"
-                      viewBox="0 0 192 512"
-                      fill="currentColor"
-                      aria-hidden="true"
-                      role="img"
-                      width="1em"
-                      height="1em"
-                    >
-                      <path
-                        d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                      />
-                    </svg>
+                    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
                   </span>
                 </button>
               </div>
@@ -2308,23 +1950,9 @@ section: components
     tabindex="-1"
     id="main-content-nav-horizontal-example"
   >
-    <section class="pf-v6-c-page__main-nav pf-m-limit-width">
+    <section class="pf-v6-c-page__main-subnav pf-m-limit-width">
       <div class="pf-v6-c-page__main-body">
-        <nav
-          class="pf-v6-c-nav pf-m-scrollable pf-m-horizontal pf-m-subnav"
-          aria-label="Local"
-        >
-          <div class="pf-v6-c-nav__scroll-button">
-            <button
-              class="pf-v6-c-button pf-m-plain pf-m-RTL-icon-static"
-              type="button"
-              aria-label="Scroll start"
-            >
-              <span class="pf-v6-c-button__icon">
-                <i class="fas fa-angle-left" aria-hidden="true"></i>
-              </span>
-            </button>
-          </div>
+        <nav class="pf-v6-c-nav pf-m-horizontal pf-m-subnav" aria-label="Local">
           <ul class="pf-v6-c-nav__list" role="list">
             <li class="pf-v6-c-nav__item">
               <a
@@ -2336,27 +1964,7 @@ section: components
             <li class="pf-v6-c-nav__item">
               <a href="#" class="pf-v6-c-nav__link">Horizontal subnav item 2</a>
             </li>
-            <li class="pf-v6-c-nav__item">
-              <a href="#" class="pf-v6-c-nav__link">Horizontal subnav item 3</a>
-            </li>
-            <li class="pf-v6-c-nav__item">
-              <a href="#" class="pf-v6-c-nav__link">Horizontal subnav item 4</a>
-            </li>
-            <li class="pf-v6-c-nav__item">
-              <a href="#" class="pf-v6-c-nav__link">Horizontal subnav item 5</a>
-            </li>
           </ul>
-          <div class="pf-v6-c-nav__scroll-button">
-            <button
-              class="pf-v6-c-button pf-m-plain pf-m-RTL-icon-static"
-              type="button"
-              aria-label="Scroll end"
-            >
-              <span class="pf-v6-c-button__icon">
-                <i class="fas fa-angle-right" aria-hidden="true"></i>
-              </span>
-            </button>
-          </div>
         </nav>
       </div>
     </section>