@patternfly/react-core 6.0.0-alpha.8 → 6.0.0-alpha.80

package/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap

@@ -4,44 +4,37 @@ exports[`Page Check dark page against snapshot 1`] = `
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-v5-c-page my-page-class"
+    class="pf-v6-c-page my-page-class"
     id="PageId"
   >
     <header
-      class="pf-v5-c-page__header"
-    >
-      <div
-        class="pf-v5-c-page__header-brand"
-      >
-        <span
-          class="pf-v5-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      PageHeaderTools | Avatar
-    </header>
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
     <div
       aria-hidden="false"
-      class="pf-v5-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     >
       <div
-        class="pf-v5-c-page__sidebar-body"
+        class="pf-v6-c-page__sidebar-body"
       >
         Navigation
       </div>
     </div>
-    <main
-      class="pf-v5-c-page__main"
-      tabindex="-1"
+    <div
+      class="pf-v6-c-page__main-container"
     >
-      <section
-        class="pf-v5-c-page__main-section"
+      <main
+        class="pf-v6-c-page__main"
+        tabindex="-1"
       >
-        Section with default background
-      </section>
-    </main>
+        <section
+          class="pf-v6-c-page__main-section"
+        >
+          Section with default background
+        </section>
+      </main>
+    </div>
   </div>
 </DocumentFragment>
 `;
@@ -50,411 +43,85 @@ exports[`Page Check page horizontal layout example against snapshot 1`] = `
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-v5-c-page my-page-class"
+    class="pf-v6-c-page my-page-class"
     id="PageId"
   >
     <header
-      class="pf-v5-c-page__header"
-    >
-      <div
-        class="pf-v5-c-page__header-brand"
-      >
-        <span
-          class="pf-v5-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      <div
-        class="pf-v5-c-page__header-nav"
-      >
-        Navigation
-      </div>
-      PageHeaderTools | Avatar
-    </header>
-    <div
-      aria-hidden="false"
-      class="pf-v5-c-page__sidebar pf-m-expanded"
-      id="page-sidebar"
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
     />
-    <main
-      class="pf-v5-c-page__main"
-      tabindex="-1"
-    >
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        Section with default background
-      </section>
-    </main>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax 1`] = `
-<DocumentFragment>
-  <div
-    aria-label="Page layout"
-    class="pf-v5-c-page my-page-class"
-    id="PageId"
-  >
-    <header
-      class="pf-v5-c-page__header"
-    >
-      <div
-        class="pf-v5-c-page__header-brand"
-      >
-        <span
-          class="pf-v5-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      <div
-        class="pf-v5-c-page__header-nav"
-      >
-        Navigation
-      </div>
-      PageHeaderTools | Avatar
-    </header>
     <div
       aria-hidden="false"
-      class="pf-v5-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     />
-    <main
-      class="pf-v5-c-page__main"
-      tabindex="-1"
-    >
-      <section
-        class="pf-v5-c-page__main-breadcrumb"
-      >
-        <nav
-          aria-label="Breadcrumb"
-          class="pf-v5-c-breadcrumb"
-          data-ouia-component-id="OUIA-Generated-Breadcrumb-4"
-          data-ouia-component-type="PF5/Breadcrumb"
-          data-ouia-safe="true"
-        >
-          <ol
-            class="pf-v5-c-breadcrumb__list"
-            role="list"
-          >
-            <li
-              class="pf-v5-c-breadcrumb__item"
-            >
-              Section Home
-            </li>
-            <li
-              class="pf-v5-c-breadcrumb__item"
-            >
-              <span
-                class="pf-v5-c-breadcrumb__item-divider"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 256 512"
-                  width="1em"
-                >
-                  <path
-                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                  />
-                </svg>
-              </span>
-              <a
-                class="pf-v5-c-breadcrumb__link"
-                href="#"
-              >
-                Section Title
-              </a>
-            </li>
-            <li
-              class="pf-v5-c-breadcrumb__item"
-            >
-              <span
-                class="pf-v5-c-breadcrumb__item-divider"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 256 512"
-                  width="1em"
-                >
-                  <path
-                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                  />
-                </svg>
-              </span>
-              <a
-                class="pf-v5-c-breadcrumb__link"
-                href="#"
-              >
-                Section Title
-              </a>
-            </li>
-            <li
-              class="pf-v5-c-breadcrumb__item"
-            >
-              <span
-                class="pf-v5-c-breadcrumb__item-divider"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 256 512"
-                  width="1em"
-                >
-                  <path
-                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                  />
-                </svg>
-              </span>
-              <a
-                aria-current="page"
-                class="pf-v5-c-breadcrumb__link pf-m-current"
-                href="#"
-              >
-                Section Landing
-              </a>
-            </li>
-          </ol>
-        </nav>
-      </section>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        Section with default background
-      </section>
-    </main>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Page Check page to verify breadcrumb is created 1`] = `
-<DocumentFragment>
-  <div
-    aria-label="Page layout"
-    class="pf-v5-c-page my-page-class"
-    id="PageId"
-  >
-    <header
-      class="pf-v5-c-page__header"
-    >
-      <div
-        class="pf-v5-c-page__header-brand"
-      >
-        <span
-          class="pf-v5-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      <div
-        class="pf-v5-c-page__header-nav"
-      >
-        Navigation
-      </div>
-      PageHeaderTools | Avatar
-    </header>
     <div
-      aria-hidden="false"
-      class="pf-v5-c-page__sidebar pf-m-expanded"
-      id="page-sidebar"
-    />
-    <main
-      class="pf-v5-c-page__main"
-      tabindex="-1"
+      class="pf-v6-c-page__main-container"
     >
-      <section
-        class="pf-v5-c-page__main-breadcrumb"
+      <main
+        class="pf-v6-c-page__main"
+        tabindex="-1"
       >
-        <nav
-          aria-label="Breadcrumb"
-          class="pf-v5-c-breadcrumb"
-          data-ouia-component-id="OUIA-Generated-Breadcrumb-1"
-          data-ouia-component-type="PF5/Breadcrumb"
-          data-ouia-safe="true"
+        <section
+          class="pf-v6-c-page__main-section"
         >
-          <ol
-            class="pf-v5-c-breadcrumb__list"
-            role="list"
-          >
-            <li
-              class="pf-v5-c-breadcrumb__item"
-            >
-              Section Home
-            </li>
-            <li
-              class="pf-v5-c-breadcrumb__item"
-            >
-              <span
-                class="pf-v5-c-breadcrumb__item-divider"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 256 512"
-                  width="1em"
-                >
-                  <path
-                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                  />
-                </svg>
-              </span>
-              <a
-                class="pf-v5-c-breadcrumb__link"
-                href="#"
-              >
-                Section Title
-              </a>
-            </li>
-            <li
-              class="pf-v5-c-breadcrumb__item"
-            >
-              <span
-                class="pf-v5-c-breadcrumb__item-divider"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 256 512"
-                  width="1em"
-                >
-                  <path
-                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                  />
-                </svg>
-              </span>
-              <a
-                class="pf-v5-c-breadcrumb__link"
-                href="#"
-              >
-                Section Title
-              </a>
-            </li>
-            <li
-              class="pf-v5-c-breadcrumb__item"
-            >
-              <span
-                class="pf-v5-c-breadcrumb__item-divider"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 256 512"
-                  width="1em"
-                >
-                  <path
-                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                  />
-                </svg>
-              </span>
-              <a
-                aria-current="page"
-                class="pf-v5-c-breadcrumb__link pf-m-current"
-                href="#"
-              >
-                Section Landing
-              </a>
-            </li>
-          </ol>
-        </nav>
-      </section>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        Section with default background
-      </section>
-    </main>
+          Section with default background
+        </section>
+      </main>
+    </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`Page Check page to verify grouped nav and breadcrumb - new components syntax 1`] = `
+exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax 1`] = `
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-v5-c-page my-page-class"
+    class="pf-v6-c-page my-page-class"
     id="PageId"
   >
     <header
-      class="pf-v5-c-page__header"
-    >
-      <div
-        class="pf-v5-c-page__header-brand"
-      >
-        <span
-          class="pf-v5-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      <div
-        class="pf-v5-c-page__header-nav"
-      >
-        Navigation
-      </div>
-      PageHeaderTools | Avatar
-    </header>
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
     <div
       aria-hidden="false"
-      class="pf-v5-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     />
-    <main
-      class="pf-v5-c-page__main"
-      tabindex="-1"
+    <div
+      class="pf-v6-c-page__main-container"
     >
-      <div
-        class="pf-v5-c-page__main-group pf-m-sticky-bottom"
+      <main
+        class="pf-v6-c-page__main"
+        tabindex="-1"
       >
         <section
-          class="pf-v5-c-page__main-breadcrumb"
+          class="pf-v6-c-page__main-breadcrumb"
         >
           <nav
             aria-label="Breadcrumb"
-            class="pf-v5-c-breadcrumb"
-            data-ouia-component-id="OUIA-Generated-Breadcrumb-7"
-            data-ouia-component-type="PF5/Breadcrumb"
+            class="pf-v6-c-breadcrumb"
+            data-ouia-component-id="OUIA-Generated-Breadcrumb-4"
+            data-ouia-component-type="PF6/Breadcrumb"
             data-ouia-safe="true"
           >
             <ol
-              class="pf-v5-c-breadcrumb__list"
+              class="pf-v6-c-breadcrumb__list"
               role="list"
             >
               <li
-                class="pf-v5-c-breadcrumb__item"
+                class="pf-v6-c-breadcrumb__item"
               >
                 Section Home
               </li>
               <li
-                class="pf-v5-c-breadcrumb__item"
+                class="pf-v6-c-breadcrumb__item"
               >
                 <span
-                  class="pf-v5-c-breadcrumb__item-divider"
+                  class="pf-v6-c-breadcrumb__item-divider"
                 >
                   <svg
                     aria-hidden="true"
-                    class="pf-v5-svg"
+                    class="pf-v6-svg"
                     fill="currentColor"
                     height="1em"
                     role="img"
@@ -467,21 +134,21 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
                   </svg>
                 </span>
                 <a
-                  class="pf-v5-c-breadcrumb__link"
+                  class="pf-v6-c-breadcrumb__link"
                   href="#"
                 >
                   Section Title
                 </a>
               </li>
               <li
-                class="pf-v5-c-breadcrumb__item"
+                class="pf-v6-c-breadcrumb__item"
               >
                 <span
-                  class="pf-v5-c-breadcrumb__item-divider"
+                  class="pf-v6-c-breadcrumb__item-divider"
                 >
                   <svg
                     aria-hidden="true"
-                    class="pf-v5-svg"
+                    class="pf-v6-svg"
                     fill="currentColor"
                     height="1em"
                     role="img"
@@ -494,21 +161,21 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
                   </svg>
                 </span>
                 <a
-                  class="pf-v5-c-breadcrumb__link"
+                  class="pf-v6-c-breadcrumb__link"
                   href="#"
                 >
                   Section Title
                 </a>
               </li>
               <li
-                class="pf-v5-c-breadcrumb__item"
+                class="pf-v6-c-breadcrumb__item"
               >
                 <span
-                  class="pf-v5-c-breadcrumb__item-divider"
+                  class="pf-v6-c-breadcrumb__item-divider"
                 >
                   <svg
                     aria-hidden="true"
-                    class="pf-v5-svg"
+                    class="pf-v6-svg"
                     fill="currentColor"
                     height="1em"
                     role="img"
@@ -522,7 +189,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
                 </span>
                 <a
                   aria-current="page"
-                  class="pf-v5-c-breadcrumb__link pf-m-current"
+                  class="pf-v6-c-breadcrumb__link pf-m-current"
                   href="#"
                 >
                   Section Landing
@@ -531,321 +198,207 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
             </ol>
           </nav>
         </section>
-        <div
-          class="pf-v5-c-page__main-nav"
+        <section
+          class="pf-v6-c-page__main-section"
+        >
+          Section with default background
+        </section>
+      </main>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Page Check page to verify breadcrumb is created 1`] = `
+<DocumentFragment>
+  <div
+    aria-label="Page layout"
+    class="pf-v6-c-page my-page-class"
+    id="PageId"
+  >
+    <header
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
+    <div
+      aria-hidden="false"
+      class="pf-v6-c-page__sidebar pf-m-expanded"
+      id="page-sidebar"
+    />
+    <div
+      class="pf-v6-c-page__main-container"
+    >
+      <main
+        class="pf-v6-c-page__main"
+        tabindex="-1"
+      >
+        <section
+          class="pf-v6-c-page__main-breadcrumb"
         >
           <nav
-            aria-label="Nav"
-            class="pf-v5-c-nav pf-m-horizontal pf-m-tertiary"
-            data-ouia-component-id="OUIA-Generated-Nav-tertiary-2"
-            data-ouia-component-type="PF5/Nav"
+            aria-label="Breadcrumb"
+            class="pf-v6-c-breadcrumb"
+            data-ouia-component-id="OUIA-Generated-Breadcrumb-1"
+            data-ouia-component-type="PF6/Breadcrumb"
             data-ouia-safe="true"
           >
-            <button
-              aria-label="Scroll back"
-              class="pf-v5-c-nav__scroll-button"
-              disabled=""
-            >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 256 512"
-                width="1em"
-              >
-                <path
-                  d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-                />
-              </svg>
-            </button>
-            <ul
-              class="pf-v5-c-nav__list"
+            <ol
+              class="pf-v6-c-breadcrumb__list"
               role="list"
             >
               <li
-                class="pf-v5-c-nav__item"
-                data-ouia-component-id="OUIA-Generated-NavItem-6"
-                data-ouia-component-type="PF5/NavItem"
-                data-ouia-safe="true"
+                class="pf-v6-c-breadcrumb__item"
               >
-                <a
-                  aria-current="page"
-                  class="pf-v5-c-nav__link pf-m-current"
-                >
-                  System Panel
-                </a>
+                Section Home
               </li>
               <li
-                class="pf-v5-c-nav__item"
-                data-ouia-component-id="OUIA-Generated-NavItem-7"
-                data-ouia-component-type="PF5/NavItem"
-                data-ouia-safe="true"
+                class="pf-v6-c-breadcrumb__item"
               >
-                <a
-                  class="pf-v5-c-nav__link"
+                <span
+                  class="pf-v6-c-breadcrumb__item-divider"
                 >
-                  Policy
-                </a>
-              </li>
-              <li
-                class="pf-v5-c-nav__item"
-                data-ouia-component-id="OUIA-Generated-NavItem-8"
-                data-ouia-component-type="PF5/NavItem"
-                data-ouia-safe="true"
-              >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
+                </span>
                 <a
-                  class="pf-v5-c-nav__link"
+                  class="pf-v6-c-breadcrumb__link"
+                  href="#"
                 >
-                  Authentication
+                  Section Title
                 </a>
               </li>
               <li
-                class="pf-v5-c-nav__item"
-                data-ouia-component-id="OUIA-Generated-NavItem-9"
-                data-ouia-component-type="PF5/NavItem"
-                data-ouia-safe="true"
+                class="pf-v6-c-breadcrumb__item"
               >
+                <span
+                  class="pf-v6-c-breadcrumb__item-divider"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
+                </span>
                 <a
-                  class="pf-v5-c-nav__link"
+                  class="pf-v6-c-breadcrumb__link"
+                  href="#"
                 >
-                  Network Services
+                  Section Title
                 </a>
               </li>
               <li
-                class="pf-v5-c-nav__item"
-                data-ouia-component-id="OUIA-Generated-NavItem-10"
-                data-ouia-component-type="PF5/NavItem"
-                data-ouia-safe="true"
+                class="pf-v6-c-breadcrumb__item"
               >
+                <span
+                  class="pf-v6-c-breadcrumb__item-divider"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
+                </span>
                 <a
-                  class="pf-v5-c-nav__link"
+                  aria-current="page"
+                  class="pf-v6-c-breadcrumb__link pf-m-current"
+                  href="#"
                 >
-                  Server
+                  Section Landing
                 </a>
               </li>
-            </ul>
-            <button
-              aria-label="Scroll foward"
-              class="pf-v5-c-nav__scroll-button"
-              disabled=""
-            >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 256 512"
-                width="1em"
-              >
-                <path
-                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                />
-              </svg>
-            </button>
+            </ol>
           </nav>
-        </div>
-      </div>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        Section with default background
-      </section>
-    </main>
+        </section>
+        <section
+          class="pf-v6-c-page__main-section"
+        >
+          Section with default background
+        </section>
+      </main>
+    </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`Page Check page to verify grouped nav and breadcrumb - old / props syntax 1`] = `
+exports[`Page Check page to verify grouped nav and breadcrumb - new components syntax 1`] = `
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-v5-c-page my-page-class"
+    class="pf-v6-c-page my-page-class"
     id="PageId"
   >
     <header
-      class="pf-v5-c-page__header"
-    >
-      <div
-        class="pf-v5-c-page__header-brand"
-      >
-        <span
-          class="pf-v5-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      <div
-        class="pf-v5-c-page__header-nav"
-      >
-        Navigation
-      </div>
-      PageHeaderTools | Avatar
-    </header>
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
     <div
       aria-hidden="false"
-      class="pf-v5-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     />
-    <main
-      class="pf-v5-c-page__main"
-      tabindex="-1"
+    <div
+      class="pf-v6-c-page__main-container"
     >
-      <div
-        aria-label="test"
-        class="pf-v5-c-page__main-group pf-m-sticky-bottom pf-m-shadow-top pf-m-overflow-scroll"
-        role="region"
-        tabindex="0"
+      <main
+        class="pf-v6-c-page__main"
+        tabindex="-1"
       >
         <div
-          class="pf-v5-c-page__main-nav"
-        >
-          <nav
-            aria-label="Nav"
-            class="pf-v5-c-nav pf-m-horizontal pf-m-tertiary"
-            data-ouia-component-id="OUIA-Generated-Nav-tertiary-3"
-            data-ouia-component-type="PF5/Nav"
-            data-ouia-safe="true"
-          >
-            <button
-              aria-label="Scroll back"
-              class="pf-v5-c-nav__scroll-button"
-              disabled=""
-            >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 256 512"
-                width="1em"
-              >
-                <path
-                  d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-                />
-              </svg>
-            </button>
-            <ul
-              class="pf-v5-c-nav__list"
-              role="list"
-            >
-              <li
-                class="pf-v5-c-nav__item"
-                data-ouia-component-id="OUIA-Generated-NavItem-11"
-                data-ouia-component-type="PF5/NavItem"
-                data-ouia-safe="true"
-              >
-                <a
-                  aria-current="page"
-                  class="pf-v5-c-nav__link pf-m-current"
-                >
-                  System Panel
-                </a>
-              </li>
-              <li
-                class="pf-v5-c-nav__item"
-                data-ouia-component-id="OUIA-Generated-NavItem-12"
-                data-ouia-component-type="PF5/NavItem"
-                data-ouia-safe="true"
-              >
-                <a
-                  class="pf-v5-c-nav__link"
-                >
-                  Policy
-                </a>
-              </li>
-              <li
-                class="pf-v5-c-nav__item"
-                data-ouia-component-id="OUIA-Generated-NavItem-13"
-                data-ouia-component-type="PF5/NavItem"
-                data-ouia-safe="true"
-              >
-                <a
-                  class="pf-v5-c-nav__link"
-                >
-                  Authentication
-                </a>
-              </li>
-              <li
-                class="pf-v5-c-nav__item"
-                data-ouia-component-id="OUIA-Generated-NavItem-14"
-                data-ouia-component-type="PF5/NavItem"
-                data-ouia-safe="true"
-              >
-                <a
-                  class="pf-v5-c-nav__link"
-                >
-                  Network Services
-                </a>
-              </li>
-              <li
-                class="pf-v5-c-nav__item"
-                data-ouia-component-id="OUIA-Generated-NavItem-15"
-                data-ouia-component-type="PF5/NavItem"
-                data-ouia-safe="true"
-              >
-                <a
-                  class="pf-v5-c-nav__link"
-                >
-                  Server
-                </a>
-              </li>
-            </ul>
-            <button
-              aria-label="Scroll foward"
-              class="pf-v5-c-nav__scroll-button"
-              disabled=""
-            >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 256 512"
-                width="1em"
-              >
-                <path
-                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                />
-              </svg>
-            </button>
-          </nav>
-        </div>
-        <section
-          class="pf-v5-c-page__main-breadcrumb"
+          class="pf-v6-c-page__main-group pf-m-sticky-bottom"
         >
           <section
-            class="pf-v5-c-page__main-breadcrumb"
+            class="pf-v6-c-page__main-breadcrumb"
           >
             <nav
               aria-label="Breadcrumb"
-              class="pf-v5-c-breadcrumb"
-              data-ouia-component-id="OUIA-Generated-Breadcrumb-8"
-              data-ouia-component-type="PF5/Breadcrumb"
+              class="pf-v6-c-breadcrumb"
+              data-ouia-component-id="OUIA-Generated-Breadcrumb-7"
+              data-ouia-component-type="PF6/Breadcrumb"
               data-ouia-safe="true"
             >
               <ol
-                class="pf-v5-c-breadcrumb__list"
+                class="pf-v6-c-breadcrumb__list"
                 role="list"
               >
                 <li
-                  class="pf-v5-c-breadcrumb__item"
+                  class="pf-v6-c-breadcrumb__item"
                 >
                   Section Home
                 </li>
                 <li
-                  class="pf-v5-c-breadcrumb__item"
+                  class="pf-v6-c-breadcrumb__item"
                 >
                   <span
-                    class="pf-v5-c-breadcrumb__item-divider"
+                    class="pf-v6-c-breadcrumb__item-divider"
                   >
                     <svg
                       aria-hidden="true"
-                      class="pf-v5-svg"
+                      class="pf-v6-svg"
                       fill="currentColor"
                       height="1em"
                       role="img"
@@ -858,21 +411,21 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
                     </svg>
                   </span>
                   <a
-                    class="pf-v5-c-breadcrumb__link"
+                    class="pf-v6-c-breadcrumb__link"
                     href="#"
                   >
                     Section Title
                   </a>
                 </li>
                 <li
-                  class="pf-v5-c-breadcrumb__item"
+                  class="pf-v6-c-breadcrumb__item"
                 >
                   <span
-                    class="pf-v5-c-breadcrumb__item-divider"
+                    class="pf-v6-c-breadcrumb__item-divider"
                   >
                     <svg
                       aria-hidden="true"
-                      class="pf-v5-svg"
+                      class="pf-v6-svg"
                       fill="currentColor"
                       height="1em"
                       role="img"
@@ -885,21 +438,21 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
                     </svg>
                   </span>
                   <a
-                    class="pf-v5-c-breadcrumb__link"
+                    class="pf-v6-c-breadcrumb__link"
                     href="#"
                   >
                     Section Title
                   </a>
                 </li>
                 <li
-                  class="pf-v5-c-breadcrumb__item"
+                  class="pf-v6-c-breadcrumb__item"
                 >
                   <span
-                    class="pf-v5-c-breadcrumb__item-divider"
+                    class="pf-v6-c-breadcrumb__item-divider"
                   >
                     <svg
                       aria-hidden="true"
-                      class="pf-v5-svg"
+                      class="pf-v6-svg"
                       fill="currentColor"
                       height="1em"
                       role="img"
@@ -913,7 +466,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
                   </span>
                   <a
                     aria-current="page"
-                    class="pf-v5-c-breadcrumb__link pf-m-current"
+                    class="pf-v6-c-breadcrumb__link pf-m-current"
                     href="#"
                   >
                     Section Landing
@@ -922,982 +475,1173 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
               </ol>
             </nav>
           </section>
+          <div
+            class="pf-v6-c-page__main-nav"
+          >
+            <nav
+              aria-label="Nav"
+              class="pf-v6-c-nav pf-m-horizontal pf-m-subnav"
+              data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-2"
+              data-ouia-component-type="PF6/Nav"
+              data-ouia-safe="true"
+            >
+              <ul
+                class="pf-v6-c-nav__list"
+                role="list"
+              >
+                <li
+                  class="pf-v6-c-nav__item"
+                  data-ouia-component-id="OUIA-Generated-NavItem-6"
+                  data-ouia-component-type="PF6/NavItem"
+                  data-ouia-safe="true"
+                >
+                  <a
+                    aria-current="page"
+                    class="pf-v6-c-nav__link pf-m-current"
+                  >
+                    System Panel
+                  </a>
+                </li>
+                <li
+                  class="pf-v6-c-nav__item"
+                  data-ouia-component-id="OUIA-Generated-NavItem-7"
+                  data-ouia-component-type="PF6/NavItem"
+                  data-ouia-safe="true"
+                >
+                  <a
+                    class="pf-v6-c-nav__link"
+                  >
+                    Policy
+                  </a>
+                </li>
+                <li
+                  class="pf-v6-c-nav__item"
+                  data-ouia-component-id="OUIA-Generated-NavItem-8"
+                  data-ouia-component-type="PF6/NavItem"
+                  data-ouia-safe="true"
+                >
+                  <a
+                    class="pf-v6-c-nav__link"
+                  >
+                    Authentication
+                  </a>
+                </li>
+                <li
+                  class="pf-v6-c-nav__item"
+                  data-ouia-component-id="OUIA-Generated-NavItem-9"
+                  data-ouia-component-type="PF6/NavItem"
+                  data-ouia-safe="true"
+                >
+                  <a
+                    class="pf-v6-c-nav__link"
+                  >
+                    Network Services
+                  </a>
+                </li>
+                <li
+                  class="pf-v6-c-nav__item"
+                  data-ouia-component-id="OUIA-Generated-NavItem-10"
+                  data-ouia-component-type="PF6/NavItem"
+                  data-ouia-safe="true"
+                >
+                  <a
+                    class="pf-v6-c-nav__link"
+                  >
+                    Server
+                  </a>
+                </li>
+              </ul>
+            </nav>
+          </div>
+        </div>
+        <section
+          class="pf-v6-c-page__main-section"
+        >
+          Section with default background
         </section>
-      </div>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        Section with default background
-      </section>
-    </main>
+      </main>
+    </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] = `
+exports[`Page Check page to verify grouped nav and breadcrumb - old / props syntax 1`] = `
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-v5-c-page my-page-class"
+    class="pf-v6-c-page my-page-class"
     id="PageId"
   >
     <header
-      class="pf-v5-c-page__header"
-    >
-      <div
-        class="pf-v5-c-page__header-brand"
-      >
-        <span
-          class="pf-v5-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      <div
-        class="pf-v5-c-page__header-nav"
-      >
-        Navigation
-      </div>
-      PageHeaderTools | Avatar
-    </header>
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
     <div
       aria-hidden="false"
-      class="pf-v5-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     />
-    <main
-      class="pf-v5-c-page__main"
-      tabindex="-1"
+    <div
+      class="pf-v6-c-page__main-container"
     >
-      <div
-        class="pf-v5-c-page__main-nav"
+      <main
+        class="pf-v6-c-page__main"
+        tabindex="-1"
       >
-        <nav
-          aria-label="Nav"
-          class="pf-v5-c-nav pf-m-horizontal pf-m-tertiary"
-          data-ouia-component-id="OUIA-Generated-Nav-tertiary-1"
-          data-ouia-component-type="PF5/Nav"
-          data-ouia-safe="true"
+        <div
+          aria-label="test"
+          class="pf-v6-c-page__main-group pf-m-sticky-bottom pf-m-shadow-top pf-m-overflow-scroll"
+          role="region"
+          tabindex="0"
         >
-          <button
-            aria-label="Scroll back"
-            class="pf-v5-c-nav__scroll-button"
-            disabled=""
+          <div
+            class="pf-v6-c-page__main-nav"
           >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 256 512"
-              width="1em"
-            >
-              <path
-                d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-              />
-            </svg>
-          </button>
-          <ul
-            class="pf-v5-c-nav__list"
-            role="list"
-          >
-            <li
-              class="pf-v5-c-nav__item"
-              data-ouia-component-id="OUIA-Generated-NavItem-1"
-              data-ouia-component-type="PF5/NavItem"
-              data-ouia-safe="true"
-            >
-              <a
-                aria-current="page"
-                class="pf-v5-c-nav__link pf-m-current"
-              >
-                System Panel
-              </a>
-            </li>
-            <li
-              class="pf-v5-c-nav__item"
-              data-ouia-component-id="OUIA-Generated-NavItem-2"
-              data-ouia-component-type="PF5/NavItem"
-              data-ouia-safe="true"
-            >
-              <a
-                class="pf-v5-c-nav__link"
-              >
-                Policy
-              </a>
-            </li>
-            <li
-              class="pf-v5-c-nav__item"
-              data-ouia-component-id="OUIA-Generated-NavItem-3"
-              data-ouia-component-type="PF5/NavItem"
-              data-ouia-safe="true"
-            >
-              <a
-                class="pf-v5-c-nav__link"
-              >
-                Authentication
-              </a>
-            </li>
-            <li
-              class="pf-v5-c-nav__item"
-              data-ouia-component-id="OUIA-Generated-NavItem-4"
-              data-ouia-component-type="PF5/NavItem"
-              data-ouia-safe="true"
-            >
-              <a
-                class="pf-v5-c-nav__link"
-              >
-                Network Services
-              </a>
-            </li>
-            <li
-              class="pf-v5-c-nav__item"
-              data-ouia-component-id="OUIA-Generated-NavItem-5"
-              data-ouia-component-type="PF5/NavItem"
+            <nav
+              aria-label="Nav"
+              class="pf-v6-c-nav pf-m-horizontal pf-m-subnav"
+              data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-3"
+              data-ouia-component-type="PF6/Nav"
               data-ouia-safe="true"
             >
-              <a
-                class="pf-v5-c-nav__link"
+              <ul
+                class="pf-v6-c-nav__list"
+                role="list"
               >
-                Server
-              </a>
-            </li>
-          </ul>
-          <button
-            aria-label="Scroll foward"
-            class="pf-v5-c-nav__scroll-button"
-            disabled=""
+                <li
+                  class="pf-v6-c-nav__item"
+                  data-ouia-component-id="OUIA-Generated-NavItem-11"
+                  data-ouia-component-type="PF6/NavItem"
+                  data-ouia-safe="true"
+                >
+                  <a
+                    aria-current="page"
+                    class="pf-v6-c-nav__link pf-m-current"
+                  >
+                    System Panel
+                  </a>
+                </li>
+                <li
+                  class="pf-v6-c-nav__item"
+                  data-ouia-component-id="OUIA-Generated-NavItem-12"
+                  data-ouia-component-type="PF6/NavItem"
+                  data-ouia-safe="true"
+                >
+                  <a
+                    class="pf-v6-c-nav__link"
+                  >
+                    Policy
+                  </a>
+                </li>
+                <li
+                  class="pf-v6-c-nav__item"
+                  data-ouia-component-id="OUIA-Generated-NavItem-13"
+                  data-ouia-component-type="PF6/NavItem"
+                  data-ouia-safe="true"
+                >
+                  <a
+                    class="pf-v6-c-nav__link"
+                  >
+                    Authentication
+                  </a>
+                </li>
+                <li
+                  class="pf-v6-c-nav__item"
+                  data-ouia-component-id="OUIA-Generated-NavItem-14"
+                  data-ouia-component-type="PF6/NavItem"
+                  data-ouia-safe="true"
+                >
+                  <a
+                    class="pf-v6-c-nav__link"
+                  >
+                    Network Services
+                  </a>
+                </li>
+                <li
+                  class="pf-v6-c-nav__item"
+                  data-ouia-component-id="OUIA-Generated-NavItem-15"
+                  data-ouia-component-type="PF6/NavItem"
+                  data-ouia-safe="true"
+                >
+                  <a
+                    class="pf-v6-c-nav__link"
+                  >
+                    Server
+                  </a>
+                </li>
+              </ul>
+            </nav>
+          </div>
+          <section
+            class="pf-v6-c-page__main-breadcrumb"
           >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 256 512"
-              width="1em"
+            <section
+              class="pf-v6-c-page__main-breadcrumb"
             >
-              <path
-                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-              />
-            </svg>
-          </button>
-        </nav>
-      </div>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        Section with default background
-      </section>
-    </main>
+              <nav
+                aria-label="Breadcrumb"
+                class="pf-v6-c-breadcrumb"
+                data-ouia-component-id="OUIA-Generated-Breadcrumb-8"
+                data-ouia-component-type="PF6/Breadcrumb"
+                data-ouia-safe="true"
+              >
+                <ol
+                  class="pf-v6-c-breadcrumb__list"
+                  role="list"
+                >
+                  <li
+                    class="pf-v6-c-breadcrumb__item"
+                  >
+                    Section Home
+                  </li>
+                  <li
+                    class="pf-v6-c-breadcrumb__item"
+                  >
+                    <span
+                      class="pf-v6-c-breadcrumb__item-divider"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="pf-v6-svg"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        viewBox="0 0 256 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                        />
+                      </svg>
+                    </span>
+                    <a
+                      class="pf-v6-c-breadcrumb__link"
+                      href="#"
+                    >
+                      Section Title
+                    </a>
+                  </li>
+                  <li
+                    class="pf-v6-c-breadcrumb__item"
+                  >
+                    <span
+                      class="pf-v6-c-breadcrumb__item-divider"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="pf-v6-svg"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        viewBox="0 0 256 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                        />
+                      </svg>
+                    </span>
+                    <a
+                      class="pf-v6-c-breadcrumb__link"
+                      href="#"
+                    >
+                      Section Title
+                    </a>
+                  </li>
+                  <li
+                    class="pf-v6-c-breadcrumb__item"
+                  >
+                    <span
+                      class="pf-v6-c-breadcrumb__item-divider"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="pf-v6-svg"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        viewBox="0 0 256 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                        />
+                      </svg>
+                    </span>
+                    <a
+                      aria-current="page"
+                      class="pf-v6-c-breadcrumb__link pf-m-current"
+                      href="#"
+                    >
+                      Section Landing
+                    </a>
+                  </li>
+                </ol>
+              </nav>
+            </section>
+          </section>
+        </div>
+        <section
+          class="pf-v6-c-page__main-section"
+        >
+          Section with default background
+        </section>
+      </main>
+    </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`Page Check page to verify skip to content points to main content region 1`] = `
+exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] = `
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-v5-c-page my-page-class"
-    data-testid="page-test-id"
+    class="pf-v6-c-page my-page-class"
     id="PageId"
   >
-    <div
-      class="pf-v5-c-skip-to-content"
-    >
-      <a
-        aria-disabled="false"
-        class="pf-v5-c-button pf-m-primary"
-        data-ouia-component-id="OUIA-Generated-Button-primary-1"
-        data-ouia-component-type="PF5/Button"
-        data-ouia-safe="true"
-        href="#main-content-page-layout-test-nav"
-      >
-        Skip to Content
-      </a>
-    </div>
     <header
-      class="pf-v5-c-page__header"
-    >
-      <div
-        class="pf-v5-c-page__header-brand"
-      >
-        <span
-          class="pf-v5-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      <div
-        class="pf-v5-c-page__header-nav"
-      >
-        Navigation
-      </div>
-      PageHeaderTools | Avatar
-    </header>
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
     <div
       aria-hidden="false"
-      class="pf-v5-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     />
-    <main
-      class="pf-v5-c-page__main"
-      id="main-content-page-layout-test-nav"
-      tabindex="-1"
+    <div
+      class="pf-v6-c-page__main-container"
     >
-      <section
-        class="pf-v5-c-page__main-breadcrumb"
+      <main
+        class="pf-v6-c-page__main"
+        tabindex="-1"
       >
-        <nav
-          aria-label="Breadcrumb"
-          class="pf-v5-c-breadcrumb"
-          data-ouia-component-id="OUIA-Generated-Breadcrumb-9"
-          data-ouia-component-type="PF5/Breadcrumb"
-          data-ouia-safe="true"
+        <div
+          class="pf-v6-c-page__main-nav"
         >
-          <ol
-            class="pf-v5-c-breadcrumb__list"
-            role="list"
+          <nav
+            aria-label="Nav"
+            class="pf-v6-c-nav pf-m-horizontal pf-m-subnav"
+            data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-1"
+            data-ouia-component-type="PF6/Nav"
+            data-ouia-safe="true"
           >
-            <li
-              class="pf-v5-c-breadcrumb__item"
-            >
-              Section Home
-            </li>
-            <li
-              class="pf-v5-c-breadcrumb__item"
+            <ul
+              class="pf-v6-c-nav__list"
+              role="list"
             >
-              <span
-                class="pf-v5-c-breadcrumb__item-divider"
+              <li
+                class="pf-v6-c-nav__item"
+                data-ouia-component-id="OUIA-Generated-NavItem-1"
+                data-ouia-component-type="PF6/NavItem"
+                data-ouia-safe="true"
               >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 256 512"
-                  width="1em"
+                <a
+                  aria-current="page"
+                  class="pf-v6-c-nav__link pf-m-current"
                 >
-                  <path
-                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                  />
-                </svg>
-              </span>
-              <a
-                class="pf-v5-c-breadcrumb__link"
-                href="#"
-              >
-                Section Title
-              </a>
-            </li>
-            <li
-              class="pf-v5-c-breadcrumb__item"
-            >
-              <span
-                class="pf-v5-c-breadcrumb__item-divider"
+                  System Panel
+                </a>
+              </li>
+              <li
+                class="pf-v6-c-nav__item"
+                data-ouia-component-id="OUIA-Generated-NavItem-2"
+                data-ouia-component-type="PF6/NavItem"
+                data-ouia-safe="true"
               >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 256 512"
-                  width="1em"
+                <a
+                  class="pf-v6-c-nav__link"
                 >
-                  <path
-                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                  />
-                </svg>
-              </span>
-              <a
-                class="pf-v5-c-breadcrumb__link"
-                href="#"
+                  Policy
+                </a>
+              </li>
+              <li
+                class="pf-v6-c-nav__item"
+                data-ouia-component-id="OUIA-Generated-NavItem-3"
+                data-ouia-component-type="PF6/NavItem"
+                data-ouia-safe="true"
               >
-                Section Title
-              </a>
-            </li>
-            <li
-              class="pf-v5-c-breadcrumb__item"
-            >
-              <span
-                class="pf-v5-c-breadcrumb__item-divider"
+                <a
+                  class="pf-v6-c-nav__link"
+                >
+                  Authentication
+                </a>
+              </li>
+              <li
+                class="pf-v6-c-nav__item"
+                data-ouia-component-id="OUIA-Generated-NavItem-4"
+                data-ouia-component-type="PF6/NavItem"
+                data-ouia-safe="true"
               >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 256 512"
-                  width="1em"
+                <a
+                  class="pf-v6-c-nav__link"
                 >
-                  <path
-                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                  />
-                </svg>
-              </span>
-              <a
-                aria-current="page"
-                class="pf-v5-c-breadcrumb__link pf-m-current"
-                href="#"
+                  Network Services
+                </a>
+              </li>
+              <li
+                class="pf-v6-c-nav__item"
+                data-ouia-component-id="OUIA-Generated-NavItem-5"
+                data-ouia-component-type="PF6/NavItem"
+                data-ouia-safe="true"
               >
-                Section Landing
-              </a>
-            </li>
-          </ol>
-        </nav>
-      </section>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        Section with default background
-      </section>
-    </main>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Page Check page vertical layout example against snapshot 1`] = `
-<DocumentFragment>
-  <div
-    aria-label="Page layout"
-    class="pf-v5-c-page my-page-class"
-    id="PageId"
-  >
-    <header
-      class="pf-v5-c-page__header"
-    >
-      <div
-        class="pf-v5-c-page__header-brand"
-      >
-        <span
-          class="pf-v5-c-page__header-brand-link"
+                <a
+                  class="pf-v6-c-nav__link"
+                >
+                  Server
+                </a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <section
+          class="pf-v6-c-page__main-section"
         >
-          Logo
-        </span>
-      </div>
-      PageHeaderTools | Avatar
-    </header>
-    <div
-      aria-hidden="false"
-      class="pf-v5-c-page__sidebar pf-m-expanded"
-      id="page-sidebar"
-    >
-      <div
-        class="pf-v5-c-page__sidebar-body"
-      >
-        Navigation
-      </div>
+          Section with default background
+        </section>
+      </main>
     </div>
-    <main
-      class="pf-v5-c-page__main"
-      tabindex="-1"
-    >
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        Section with default background
-      </section>
-    </main>
   </div>
 </DocumentFragment>
 `;
 
-exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrumb syntax 1`] = `
+exports[`Page Check page to verify skip to content points to main content region 1`] = `
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-v5-c-page my-page-class"
+    class="pf-v6-c-page my-page-class"
+    data-testid="page-test-id"
     id="PageId"
   >
-    <header
-      class="pf-v5-c-page__header"
+    <div
+      class="pf-v6-c-skip-to-content"
     >
-      <div
-        class="pf-v5-c-page__header-brand"
+      <a
+        aria-disabled="false"
+        class="pf-v6-c-button pf-m-primary"
+        data-ouia-component-id="OUIA-Generated-Button-primary-1"
+        data-ouia-component-type="PF6/Button"
+        data-ouia-safe="true"
+        href="#main-content-page-layout-test-nav"
       >
         <span
-          class="pf-v5-c-page__header-brand-link"
+          class="pf-v6-c-button__text"
         >
-          Logo
+          Skip to Content
         </span>
-      </div>
-      <div
-        class="pf-v5-c-page__header-nav"
-      >
-        Navigation
-      </div>
-      PageHeaderTools | Avatar
-    </header>
+      </a>
+    </div>
+    <header
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
     <div
       aria-hidden="false"
-      class="pf-v5-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     />
-    <main
-      class="pf-v5-c-page__main"
-      tabindex="-1"
+    <div
+      class="pf-v6-c-page__main-container"
     >
-      <section
-        class="pf-v5-c-page__main-breadcrumb pf-m-sticky-bottom-on-sm-height pf-m-sticky-bottom-on-md-height pf-m-sticky-bottom-on-lg-height pf-m-sticky-bottom-on-xl-height pf-m-sticky-bottom-on-2xl-height"
+      <main
+        class="pf-v6-c-page__main"
+        id="main-content-page-layout-test-nav"
+        tabindex="-1"
       >
-        <nav
-          aria-label="Breadcrumb"
-          class="pf-v5-c-breadcrumb"
-          data-ouia-component-id="OUIA-Generated-Breadcrumb-6"
-          data-ouia-component-type="PF5/Breadcrumb"
-          data-ouia-safe="true"
+        <section
+          class="pf-v6-c-page__main-breadcrumb"
         >
-          <ol
-            class="pf-v5-c-breadcrumb__list"
-            role="list"
+          <nav
+            aria-label="Breadcrumb"
+            class="pf-v6-c-breadcrumb"
+            data-ouia-component-id="OUIA-Generated-Breadcrumb-9"
+            data-ouia-component-type="PF6/Breadcrumb"
+            data-ouia-safe="true"
           >
-            <li
-              class="pf-v5-c-breadcrumb__item"
-            >
-              Section Home
-            </li>
-            <li
-              class="pf-v5-c-breadcrumb__item"
+            <ol
+              class="pf-v6-c-breadcrumb__list"
+              role="list"
             >
-              <span
-                class="pf-v5-c-breadcrumb__item-divider"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 256 512"
-                  width="1em"
-                >
-                  <path
-                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                  />
-                </svg>
-              </span>
-              <a
-                class="pf-v5-c-breadcrumb__link"
-                href="#"
+              <li
+                class="pf-v6-c-breadcrumb__item"
               >
-                Section Title
-              </a>
-            </li>
-            <li
-              class="pf-v5-c-breadcrumb__item"
-            >
-              <span
-                class="pf-v5-c-breadcrumb__item-divider"
+                Section Home
+              </li>
+              <li
+                class="pf-v6-c-breadcrumb__item"
               >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 256 512"
-                  width="1em"
+                <span
+                  class="pf-v6-c-breadcrumb__item-divider"
                 >
-                  <path
-                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                  />
-                </svg>
-              </span>
-              <a
-                class="pf-v5-c-breadcrumb__link"
-                href="#"
-              >
-                Section Title
-              </a>
-            </li>
-            <li
-              class="pf-v5-c-breadcrumb__item"
-            >
-              <span
-                class="pf-v5-c-breadcrumb__item-divider"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 256 512"
-                  width="1em"
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
+                </span>
+                <a
+                  class="pf-v6-c-breadcrumb__link"
+                  href="#"
                 >
-                  <path
-                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                  />
-                </svg>
-              </span>
-              <a
-                aria-current="page"
-                class="pf-v5-c-breadcrumb__link pf-m-current"
-                href="#"
-              >
-                Section Landing
-              </a>
-            </li>
-          </ol>
-        </nav>
-      </section>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        Section with default background
-      </section>
-    </main>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
-<DocumentFragment>
-  <div
-    aria-label="Page layout"
-    class="pf-v5-c-page my-page-class"
-    id="PageId"
-  >
-    <header
-      class="pf-v5-c-page__header"
-    >
-      <div
-        class="pf-v5-c-page__header-brand"
-      >
-        <span
-          class="pf-v5-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      <div
-        class="pf-v5-c-page__header-nav"
-      >
-        Navigation
-      </div>
-      PageHeaderTools | Avatar
-    </header>
-    <div
-      aria-hidden="false"
-      class="pf-v5-c-page__sidebar pf-m-expanded"
-      id="page-sidebar"
-    />
-    <main
-      class="pf-v5-c-page__main"
-      tabindex="-1"
-    >
-      <section
-        class="pf-v5-c-page__main-breadcrumb pf-m-sticky-bottom-on-sm-height pf-m-sticky-bottom-on-md-height pf-m-sticky-bottom-on-lg-height pf-m-sticky-bottom-on-xl-height pf-m-sticky-bottom-on-2xl-height"
-      >
-        <nav
-          aria-label="Breadcrumb"
-          class="pf-v5-c-breadcrumb"
-          data-ouia-component-id="OUIA-Generated-Breadcrumb-3"
-          data-ouia-component-type="PF5/Breadcrumb"
-          data-ouia-safe="true"
-        >
-          <ol
-            class="pf-v5-c-breadcrumb__list"
-            role="list"
-          >
-            <li
-              class="pf-v5-c-breadcrumb__item"
-            >
-              Section Home
-            </li>
-            <li
-              class="pf-v5-c-breadcrumb__item"
-            >
-              <span
-                class="pf-v5-c-breadcrumb__item-divider"
+                  Section Title
+                </a>
+              </li>
+              <li
+                class="pf-v6-c-breadcrumb__item"
               >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 256 512"
-                  width="1em"
+                <span
+                  class="pf-v6-c-breadcrumb__item-divider"
                 >
-                  <path
-                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                  />
-                </svg>
-              </span>
-              <a
-                class="pf-v5-c-breadcrumb__link"
-                href="#"
-              >
-                Section Title
-              </a>
-            </li>
-            <li
-              class="pf-v5-c-breadcrumb__item"
-            >
-              <span
-                class="pf-v5-c-breadcrumb__item-divider"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 256 512"
-                  width="1em"
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
+                </span>
+                <a
+                  class="pf-v6-c-breadcrumb__link"
+                  href="#"
                 >
-                  <path
-                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                  />
-                </svg>
-              </span>
-              <a
-                class="pf-v5-c-breadcrumb__link"
-                href="#"
-              >
-                Section Title
-              </a>
-            </li>
-            <li
-              class="pf-v5-c-breadcrumb__item"
-            >
-              <span
-                class="pf-v5-c-breadcrumb__item-divider"
+                  Section Title
+                </a>
+              </li>
+              <li
+                class="pf-v6-c-breadcrumb__item"
               >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 256 512"
-                  width="1em"
+                <span
+                  class="pf-v6-c-breadcrumb__item-divider"
                 >
-                  <path
-                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                  />
-                </svg>
-              </span>
-              <a
-                aria-current="page"
-                class="pf-v5-c-breadcrumb__link pf-m-current"
-                href="#"
-              >
-                Section Landing
-              </a>
-            </li>
-          </ol>
-        </nav>
-      </section>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        Section with default background
-      </section>
-    </main>
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
+                </span>
+                <a
+                  aria-current="page"
+                  class="pf-v6-c-breadcrumb__link pf-m-current"
+                  href="#"
+                >
+                  Section Landing
+                </a>
+              </li>
+            </ol>
+          </nav>
+        </section>
+        <section
+          class="pf-v6-c-page__main-section"
+        >
+          Section with default background
+        </section>
+      </main>
+    </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBreadcrumb syntax 1`] = `
+exports[`Page Check page vertical layout example against snapshot 1`] = `
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-v5-c-page my-page-class"
+    class="pf-v6-c-page my-page-class"
     id="PageId"
   >
     <header
-      class="pf-v5-c-page__header"
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
+    <div
+      aria-hidden="false"
+      class="pf-v6-c-page__sidebar pf-m-expanded"
+      id="page-sidebar"
     >
       <div
-        class="pf-v5-c-page__header-brand"
-      >
-        <span
-          class="pf-v5-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      <div
-        class="pf-v5-c-page__header-nav"
+        class="pf-v6-c-page__sidebar-body"
       >
         Navigation
       </div>
-      PageHeaderTools | Avatar
-    </header>
+    </div>
     <div
-      aria-hidden="false"
-      class="pf-v5-c-page__sidebar pf-m-expanded"
-      id="page-sidebar"
-    />
-    <main
-      class="pf-v5-c-page__main"
-      tabindex="-1"
+      class="pf-v6-c-page__main-container"
     >
-      <section
-        class="pf-v5-c-page__main-breadcrumb pf-m-sticky-top-on-sm-height pf-m-sticky-top-on-md-height pf-m-sticky-top-on-lg-height pf-m-sticky-top-on-xl-height pf-m-sticky-top-on-2xl-height"
+      <main
+        class="pf-v6-c-page__main"
+        tabindex="-1"
       >
-        <nav
-          aria-label="Breadcrumb"
-          class="pf-v5-c-breadcrumb"
-          data-ouia-component-id="OUIA-Generated-Breadcrumb-5"
-          data-ouia-component-type="PF5/Breadcrumb"
-          data-ouia-safe="true"
+        <section
+          class="pf-v6-c-page__main-section"
         >
-          <ol
-            class="pf-v5-c-breadcrumb__list"
-            role="list"
-          >
-            <li
-              class="pf-v5-c-breadcrumb__item"
-            >
-              Section Home
-            </li>
-            <li
-              class="pf-v5-c-breadcrumb__item"
-            >
-              <span
-                class="pf-v5-c-breadcrumb__item-divider"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 256 512"
-                  width="1em"
-                >
-                  <path
-                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                  />
-                </svg>
-              </span>
-              <a
-                class="pf-v5-c-breadcrumb__link"
-                href="#"
-              >
-                Section Title
-              </a>
-            </li>
-            <li
-              class="pf-v5-c-breadcrumb__item"
-            >
-              <span
-                class="pf-v5-c-breadcrumb__item-divider"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 256 512"
-                  width="1em"
-                >
-                  <path
-                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                  />
-                </svg>
-              </span>
-              <a
-                class="pf-v5-c-breadcrumb__link"
-                href="#"
-              >
-                Section Title
-              </a>
-            </li>
-            <li
-              class="pf-v5-c-breadcrumb__item"
-            >
-              <span
-                class="pf-v5-c-breadcrumb__item-divider"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 256 512"
-                  width="1em"
-                >
-                  <path
-                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                  />
-                </svg>
-              </span>
-              <a
-                aria-current="page"
-                class="pf-v5-c-breadcrumb__link pf-m-current"
-                href="#"
-              >
-                Section Landing
-              </a>
-            </li>
-          </ol>
-        </nav>
-      </section>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        Section with default background
-      </section>
-    </main>
+          Section with default background
+        </section>
+      </main>
+    </div>
   </div>
 </DocumentFragment>
 `;
 
-exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
+exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrumb syntax 1`] = `
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-v5-c-page my-page-class"
+    class="pf-v6-c-page my-page-class"
     id="PageId"
   >
     <header
-      class="pf-v5-c-page__header"
-    >
-      <div
-        class="pf-v5-c-page__header-brand"
-      >
-        <span
-          class="pf-v5-c-page__header-brand-link"
-        >
-          Logo
-        </span>
-      </div>
-      <div
-        class="pf-v5-c-page__header-nav"
-      >
-        Navigation
-      </div>
-      PageHeaderTools | Avatar
-    </header>
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
     <div
       aria-hidden="false"
-      class="pf-v5-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
     />
-    <main
-      class="pf-v5-c-page__main"
-      tabindex="-1"
+    <div
+      class="pf-v6-c-page__main-container"
     >
-      <section
-        class="pf-v5-c-page__main-breadcrumb pf-m-sticky-top-on-sm-height pf-m-sticky-top-on-md-height pf-m-sticky-top-on-lg-height pf-m-sticky-top-on-xl-height pf-m-sticky-top-on-2xl-height"
+      <main
+        class="pf-v6-c-page__main"
+        tabindex="-1"
       >
-        <nav
-          aria-label="Breadcrumb"
-          class="pf-v5-c-breadcrumb"
-          data-ouia-component-id="OUIA-Generated-Breadcrumb-2"
-          data-ouia-component-type="PF5/Breadcrumb"
-          data-ouia-safe="true"
+        <section
+          class="pf-v6-c-page__main-breadcrumb pf-m-sticky-bottom-on-sm-height pf-m-sticky-bottom-on-md-height pf-m-sticky-bottom-on-lg-height pf-m-sticky-bottom-on-xl-height pf-m-sticky-bottom-on-2xl-height"
         >
-          <ol
-            class="pf-v5-c-breadcrumb__list"
-            role="list"
+          <nav
+            aria-label="Breadcrumb"
+            class="pf-v6-c-breadcrumb"
+            data-ouia-component-id="OUIA-Generated-Breadcrumb-6"
+            data-ouia-component-type="PF6/Breadcrumb"
+            data-ouia-safe="true"
           >
-            <li
-              class="pf-v5-c-breadcrumb__item"
-            >
-              Section Home
-            </li>
-            <li
-              class="pf-v5-c-breadcrumb__item"
-            >
-              <span
-                class="pf-v5-c-breadcrumb__item-divider"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 256 512"
-                  width="1em"
-                >
-                  <path
-                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                  />
-                </svg>
-              </span>
-              <a
-                class="pf-v5-c-breadcrumb__link"
-                href="#"
-              >
-                Section Title
-              </a>
-            </li>
-            <li
-              class="pf-v5-c-breadcrumb__item"
+            <ol
+              class="pf-v6-c-breadcrumb__list"
+              role="list"
             >
-              <span
-                class="pf-v5-c-breadcrumb__item-divider"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 256 512"
-                  width="1em"
-                >
-                  <path
-                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                  />
-                </svg>
-              </span>
-              <a
-                class="pf-v5-c-breadcrumb__link"
-                href="#"
+              <li
+                class="pf-v6-c-breadcrumb__item"
               >
-                Section Title
-              </a>
-            </li>
-            <li
-              class="pf-v5-c-breadcrumb__item"
-            >
-              <span
-                class="pf-v5-c-breadcrumb__item-divider"
+                Section Home
+              </li>
+              <li
+                class="pf-v6-c-breadcrumb__item"
               >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 256 512"
-                  width="1em"
+                <span
+                  class="pf-v6-c-breadcrumb__item-divider"
                 >
-                  <path
-                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                  />
-                </svg>
-              </span>
-              <a
-                aria-current="page"
-                class="pf-v5-c-breadcrumb__link pf-m-current"
-                href="#"
-              >
-                Section Landing
-              </a>
-            </li>
-          </ol>
-        </nav>
-      </section>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        Section with default background
-      </section>
-    </main>
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
+                </span>
+                <a
+                  class="pf-v6-c-breadcrumb__link"
+                  href="#"
+                >
+                  Section Title
+                </a>
+              </li>
+              <li
+                class="pf-v6-c-breadcrumb__item"
+              >
+                <span
+                  class="pf-v6-c-breadcrumb__item-divider"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
+                </span>
+                <a
+                  class="pf-v6-c-breadcrumb__link"
+                  href="#"
+                >
+                  Section Title
+                </a>
+              </li>
+              <li
+                class="pf-v6-c-breadcrumb__item"
+              >
+                <span
+                  class="pf-v6-c-breadcrumb__item-divider"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
+                </span>
+                <a
+                  aria-current="page"
+                  class="pf-v6-c-breadcrumb__link pf-m-current"
+                  href="#"
+                >
+                  Section Landing
+                </a>
+              </li>
+            </ol>
+          </nav>
+        </section>
+        <section
+          class="pf-v6-c-page__main-section"
+        >
+          Section with default background
+        </section>
+      </main>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
+<DocumentFragment>
+  <div
+    aria-label="Page layout"
+    class="pf-v6-c-page my-page-class"
+    id="PageId"
+  >
+    <header
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
+    <div
+      aria-hidden="false"
+      class="pf-v6-c-page__sidebar pf-m-expanded"
+      id="page-sidebar"
+    />
+    <div
+      class="pf-v6-c-page__main-container"
+    >
+      <main
+        class="pf-v6-c-page__main"
+        tabindex="-1"
+      >
+        <section
+          class="pf-v6-c-page__main-breadcrumb pf-m-sticky-bottom-on-sm-height pf-m-sticky-bottom-on-md-height pf-m-sticky-bottom-on-lg-height pf-m-sticky-bottom-on-xl-height pf-m-sticky-bottom-on-2xl-height"
+        >
+          <nav
+            aria-label="Breadcrumb"
+            class="pf-v6-c-breadcrumb"
+            data-ouia-component-id="OUIA-Generated-Breadcrumb-3"
+            data-ouia-component-type="PF6/Breadcrumb"
+            data-ouia-safe="true"
+          >
+            <ol
+              class="pf-v6-c-breadcrumb__list"
+              role="list"
+            >
+              <li
+                class="pf-v6-c-breadcrumb__item"
+              >
+                Section Home
+              </li>
+              <li
+                class="pf-v6-c-breadcrumb__item"
+              >
+                <span
+                  class="pf-v6-c-breadcrumb__item-divider"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
+                </span>
+                <a
+                  class="pf-v6-c-breadcrumb__link"
+                  href="#"
+                >
+                  Section Title
+                </a>
+              </li>
+              <li
+                class="pf-v6-c-breadcrumb__item"
+              >
+                <span
+                  class="pf-v6-c-breadcrumb__item-divider"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
+                </span>
+                <a
+                  class="pf-v6-c-breadcrumb__link"
+                  href="#"
+                >
+                  Section Title
+                </a>
+              </li>
+              <li
+                class="pf-v6-c-breadcrumb__item"
+              >
+                <span
+                  class="pf-v6-c-breadcrumb__item-divider"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
+                </span>
+                <a
+                  aria-current="page"
+                  class="pf-v6-c-breadcrumb__link pf-m-current"
+                  href="#"
+                >
+                  Section Landing
+                </a>
+              </li>
+            </ol>
+          </nav>
+        </section>
+        <section
+          class="pf-v6-c-page__main-section"
+        >
+          Section with default background
+        </section>
+      </main>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBreadcrumb syntax 1`] = `
+<DocumentFragment>
+  <div
+    aria-label="Page layout"
+    class="pf-v6-c-page my-page-class"
+    id="PageId"
+  >
+    <header
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
+    <div
+      aria-hidden="false"
+      class="pf-v6-c-page__sidebar pf-m-expanded"
+      id="page-sidebar"
+    />
+    <div
+      class="pf-v6-c-page__main-container"
+    >
+      <main
+        class="pf-v6-c-page__main"
+        tabindex="-1"
+      >
+        <section
+          class="pf-v6-c-page__main-breadcrumb pf-m-sticky-top-on-sm-height pf-m-sticky-top-on-md-height pf-m-sticky-top-on-lg-height pf-m-sticky-top-on-xl-height pf-m-sticky-top-on-2xl-height"
+        >
+          <nav
+            aria-label="Breadcrumb"
+            class="pf-v6-c-breadcrumb"
+            data-ouia-component-id="OUIA-Generated-Breadcrumb-5"
+            data-ouia-component-type="PF6/Breadcrumb"
+            data-ouia-safe="true"
+          >
+            <ol
+              class="pf-v6-c-breadcrumb__list"
+              role="list"
+            >
+              <li
+                class="pf-v6-c-breadcrumb__item"
+              >
+                Section Home
+              </li>
+              <li
+                class="pf-v6-c-breadcrumb__item"
+              >
+                <span
+                  class="pf-v6-c-breadcrumb__item-divider"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
+                </span>
+                <a
+                  class="pf-v6-c-breadcrumb__link"
+                  href="#"
+                >
+                  Section Title
+                </a>
+              </li>
+              <li
+                class="pf-v6-c-breadcrumb__item"
+              >
+                <span
+                  class="pf-v6-c-breadcrumb__item-divider"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
+                </span>
+                <a
+                  class="pf-v6-c-breadcrumb__link"
+                  href="#"
+                >
+                  Section Title
+                </a>
+              </li>
+              <li
+                class="pf-v6-c-breadcrumb__item"
+              >
+                <span
+                  class="pf-v6-c-breadcrumb__item-divider"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
+                </span>
+                <a
+                  aria-current="page"
+                  class="pf-v6-c-breadcrumb__link pf-m-current"
+                  href="#"
+                >
+                  Section Landing
+                </a>
+              </li>
+            </ol>
+          </nav>
+        </section>
+        <section
+          class="pf-v6-c-page__main-section"
+        >
+          Section with default background
+        </section>
+      </main>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
+<DocumentFragment>
+  <div
+    aria-label="Page layout"
+    class="pf-v6-c-page my-page-class"
+    id="PageId"
+  >
+    <header
+      class="pf-v6-c-masthead pf-m-display-inline-on-md"
+    />
+    <div
+      aria-hidden="false"
+      class="pf-v6-c-page__sidebar pf-m-expanded"
+      id="page-sidebar"
+    />
+    <div
+      class="pf-v6-c-page__main-container"
+    >
+      <main
+        class="pf-v6-c-page__main"
+        tabindex="-1"
+      >
+        <section
+          class="pf-v6-c-page__main-breadcrumb pf-m-sticky-top-on-sm-height pf-m-sticky-top-on-md-height pf-m-sticky-top-on-lg-height pf-m-sticky-top-on-xl-height pf-m-sticky-top-on-2xl-height"
+        >
+          <nav
+            aria-label="Breadcrumb"
+            class="pf-v6-c-breadcrumb"
+            data-ouia-component-id="OUIA-Generated-Breadcrumb-2"
+            data-ouia-component-type="PF6/Breadcrumb"
+            data-ouia-safe="true"
+          >
+            <ol
+              class="pf-v6-c-breadcrumb__list"
+              role="list"
+            >
+              <li
+                class="pf-v6-c-breadcrumb__item"
+              >
+                Section Home
+              </li>
+              <li
+                class="pf-v6-c-breadcrumb__item"
+              >
+                <span
+                  class="pf-v6-c-breadcrumb__item-divider"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
+                </span>
+                <a
+                  class="pf-v6-c-breadcrumb__link"
+                  href="#"
+                >
+                  Section Title
+                </a>
+              </li>
+              <li
+                class="pf-v6-c-breadcrumb__item"
+              >
+                <span
+                  class="pf-v6-c-breadcrumb__item-divider"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
+                </span>
+                <a
+                  class="pf-v6-c-breadcrumb__link"
+                  href="#"
+                >
+                  Section Title
+                </a>
+              </li>
+              <li
+                class="pf-v6-c-breadcrumb__item"
+              >
+                <span
+                  class="pf-v6-c-breadcrumb__item-divider"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
+                </span>
+                <a
+                  aria-current="page"
+                  class="pf-v6-c-breadcrumb__link pf-m-current"
+                  href="#"
+                >
+                  Section Landing
+                </a>
+              </li>
+            </ol>
+          </nav>
+        </section>
+        <section
+          class="pf-v6-c-page__main-section"
+        >
+          Section with default background
+        </section>
+      </main>
+    </div>
   </div>
 </DocumentFragment>
 `;