@patternfly/react-core 4.228.0 → 4.230.0

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

@@ -4,7 +4,7 @@ exports[`Page Check dark page against snapshot 1`] = `
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default my-page-class"
+    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default pf-m-height-breakpoint-sm my-page-class"
     id="PageId"
   >
     <header
@@ -65,7 +65,7 @@ exports[`Page Check page horizontal layout example against snapshot 1`] = `
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default my-page-class"
+    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default pf-m-height-breakpoint-sm my-page-class"
     id="PageId"
   >
     <header
@@ -129,7 +129,7 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default my-page-class"
+    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default pf-m-height-breakpoint-sm my-page-class"
     id="PageId"
   >
     <header
@@ -170,7 +170,7 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
         <nav
           aria-label="Breadcrumb"
           class="pf-c-breadcrumb"
-          data-ouia-component-id="OUIA-Generated-Breadcrumb-2"
+          data-ouia-component-id="OUIA-Generated-Breadcrumb-4"
           data-ouia-component-type="PF4/Breadcrumb"
           data-ouia-safe="true"
         >
@@ -296,7 +296,7 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default my-page-class"
+    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default pf-m-height-breakpoint-sm my-page-class"
     id="PageId"
   >
     <header
@@ -463,7 +463,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default my-page-class"
+    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default pf-m-height-breakpoint-sm my-page-class"
     id="PageId"
   >
     <header
@@ -507,7 +507,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
           <nav
             aria-label="Breadcrumb"
             class="pf-c-breadcrumb"
-            data-ouia-component-id="OUIA-Generated-Breadcrumb-3"
+            data-ouia-component-id="OUIA-Generated-Breadcrumb-7"
             data-ouia-component-type="PF4/Breadcrumb"
             data-ouia-safe="true"
           >
@@ -749,7 +749,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default my-page-class"
+    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default pf-m-height-breakpoint-sm my-page-class"
     id="PageId"
   >
     <header
@@ -785,7 +785,8 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
       tabindex="-1"
     >
       <div
-        class="pf-c-page__main-group pf-m-sticky-bottom pf-m-shadow-top"
+        class="pf-c-page__main-group pf-m-sticky-bottom"
+        stickyonbreakpoint="[object Object]"
       >
         <div
           class="pf-c-page__main-nav"
@@ -911,7 +912,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
             <nav
               aria-label="Breadcrumb"
               class="pf-c-breadcrumb"
-              data-ouia-component-id="OUIA-Generated-Breadcrumb-4"
+              data-ouia-component-id="OUIA-Generated-Breadcrumb-8"
               data-ouia-component-type="PF4/Breadcrumb"
               data-ouia-safe="true"
             >
@@ -1039,7 +1040,7 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default my-page-class"
+    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default pf-m-height-breakpoint-sm my-page-class"
     id="PageId"
   >
     <header
@@ -1218,7 +1219,7 @@ exports[`Page Check page to verify skip to content points to main content region
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default my-page-class"
+    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default pf-m-height-breakpoint-sm my-page-class"
     data-testid="page-test-id"
     id="PageId"
   >
@@ -1267,7 +1268,7 @@ exports[`Page Check page to verify skip to content points to main content region
         <nav
           aria-label="Breadcrumb"
           class="pf-c-breadcrumb"
-          data-ouia-component-id="OUIA-Generated-Breadcrumb-5"
+          data-ouia-component-id="OUIA-Generated-Breadcrumb-9"
           data-ouia-component-type="PF4/Breadcrumb"
           data-ouia-safe="true"
         >
@@ -1393,7 +1394,68 @@ exports[`Page Check page vertical layout example against snapshot 1`] = `
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default my-page-class"
+    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default pf-m-height-breakpoint-sm my-page-class"
+    id="PageId"
+  >
+    <header
+      class="pf-c-page__header"
+    >
+      <div
+        class="pf-c-page__header-brand"
+      >
+        <a
+          class="pf-c-page__header-brand-link"
+        >
+          Logo
+        </a>
+      </div>
+      PageHeaderTools | Avatar
+    </header>
+    <div
+      aria-hidden="false"
+      class="pf-c-page__sidebar pf-m-expanded"
+      id="page-sidebar"
+    >
+      <div
+        class="pf-c-page__sidebar-body"
+      >
+        Navigation
+      </div>
+    </div>
+    <main
+      class="pf-c-page__main"
+      tabindex="-1"
+    >
+      <section
+        class="pf-c-page__main-section"
+      >
+        Section with default background
+      </section>
+      <section
+        class="pf-c-page__main-section pf-m-light"
+      >
+        Section with light background
+      </section>
+      <section
+        class="pf-c-page__main-section pf-m-dark-200"
+      >
+        Section with dark background
+      </section>
+      <section
+        class="pf-c-page__main-section pf-m-dark-100"
+      >
+        Section with darker background
+      </section>
+    </main>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrumb syntax 1`] = `
+<DocumentFragment>
+  <div
+    aria-label="Page layout"
+    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default pf-m-height-breakpoint-sm my-page-class"
     id="PageId"
   >
     <header
@@ -1408,6 +1470,11 @@ exports[`Page Check page vertical layout example against snapshot 1`] = `
           Logo
         </a>
       </div>
+      <div
+        class="pf-c-page__header-nav"
+      >
+        Navigation
+      </div>
       PageHeaderTools | Avatar
     </header>
     <div
@@ -1417,14 +1484,616 @@ exports[`Page Check page vertical layout example against snapshot 1`] = `
     >
       <div
         class="pf-c-page__sidebar-body"
+      />
+    </div>
+    <main
+      class="pf-c-page__main"
+      tabindex="-1"
+    >
+      <section
+        class="pf-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-c-breadcrumb"
+          data-ouia-component-id="OUIA-Generated-Breadcrumb-6"
+          data-ouia-component-type="PF4/Breadcrumb"
+          data-ouia-safe="true"
+        >
+          <ol
+            class="pf-c-breadcrumb__list"
+          >
+            <li
+              class="pf-c-breadcrumb__item"
+            >
+              Section Home
+            </li>
+            <li
+              class="pf-c-breadcrumb__item"
+            >
+              <span
+                class="pf-c-breadcrumb__item-divider"
+              >
+                <svg
+                  aria-hidden="true"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  style="vertical-align: -0.125em;"
+                  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-c-breadcrumb__link"
+                href="#"
+              >
+                Section Title
+              </a>
+            </li>
+            <li
+              class="pf-c-breadcrumb__item"
+            >
+              <span
+                class="pf-c-breadcrumb__item-divider"
+              >
+                <svg
+                  aria-hidden="true"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  style="vertical-align: -0.125em;"
+                  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-c-breadcrumb__link"
+                href="#"
+              >
+                Section Title
+              </a>
+            </li>
+            <li
+              class="pf-c-breadcrumb__item"
+            >
+              <span
+                class="pf-c-breadcrumb__item-divider"
+              >
+                <svg
+                  aria-hidden="true"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  style="vertical-align: -0.125em;"
+                  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-c-breadcrumb__link pf-m-current"
+                href="#"
+              >
+                Section Landing
+              </a>
+            </li>
+          </ol>
+        </nav>
+      </section>
+      <section
+        class="pf-c-page__main-section"
+      >
+        Section with default background
+      </section>
+      <section
+        class="pf-c-page__main-section pf-m-light"
+      >
+        Section with light background
+      </section>
+      <section
+        class="pf-c-page__main-section pf-m-dark-200"
+      >
+        Section with dark background
+      </section>
+      <section
+        class="pf-c-page__main-section pf-m-dark-100"
+      >
+        Section with darker background
+      </section>
+    </main>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
+<DocumentFragment>
+  <div
+    aria-label="Page layout"
+    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default pf-m-height-breakpoint-sm my-page-class"
+    id="PageId"
+  >
+    <header
+      class="pf-c-page__header"
+    >
+      <div
+        class="pf-c-page__header-brand"
+      >
+        <a
+          class="pf-c-page__header-brand-link"
+        >
+          Logo
+        </a>
+      </div>
+      <div
+        class="pf-c-page__header-nav"
       >
         Navigation
       </div>
+      PageHeaderTools | Avatar
+    </header>
+    <div
+      aria-hidden="false"
+      class="pf-c-page__sidebar pf-m-expanded"
+      id="page-sidebar"
+    >
+      <div
+        class="pf-c-page__sidebar-body"
+      />
     </div>
     <main
       class="pf-c-page__main"
       tabindex="-1"
     >
+      <section
+        class="pf-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-c-breadcrumb"
+          data-ouia-component-id="OUIA-Generated-Breadcrumb-3"
+          data-ouia-component-type="PF4/Breadcrumb"
+          data-ouia-safe="true"
+        >
+          <ol
+            class="pf-c-breadcrumb__list"
+          >
+            <li
+              class="pf-c-breadcrumb__item"
+            >
+              Section Home
+            </li>
+            <li
+              class="pf-c-breadcrumb__item"
+            >
+              <span
+                class="pf-c-breadcrumb__item-divider"
+              >
+                <svg
+                  aria-hidden="true"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  style="vertical-align: -0.125em;"
+                  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-c-breadcrumb__link"
+                href="#"
+              >
+                Section Title
+              </a>
+            </li>
+            <li
+              class="pf-c-breadcrumb__item"
+            >
+              <span
+                class="pf-c-breadcrumb__item-divider"
+              >
+                <svg
+                  aria-hidden="true"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  style="vertical-align: -0.125em;"
+                  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-c-breadcrumb__link"
+                href="#"
+              >
+                Section Title
+              </a>
+            </li>
+            <li
+              class="pf-c-breadcrumb__item"
+            >
+              <span
+                class="pf-c-breadcrumb__item-divider"
+              >
+                <svg
+                  aria-hidden="true"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  style="vertical-align: -0.125em;"
+                  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-c-breadcrumb__link pf-m-current"
+                href="#"
+              >
+                Section Landing
+              </a>
+            </li>
+          </ol>
+        </nav>
+      </section>
+      <section
+        class="pf-c-page__main-section"
+      >
+        Section with default background
+      </section>
+      <section
+        class="pf-c-page__main-section pf-m-light"
+      >
+        Section with light background
+      </section>
+      <section
+        class="pf-c-page__main-section pf-m-dark-200"
+      >
+        Section with dark background
+      </section>
+      <section
+        class="pf-c-page__main-section pf-m-dark-100"
+      >
+        Section with darker background
+      </section>
+    </main>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBreadcrumb syntax 1`] = `
+<DocumentFragment>
+  <div
+    aria-label="Page layout"
+    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default pf-m-height-breakpoint-sm my-page-class"
+    id="PageId"
+  >
+    <header
+      class="pf-c-page__header"
+    >
+      <div
+        class="pf-c-page__header-brand"
+      >
+        <a
+          class="pf-c-page__header-brand-link"
+        >
+          Logo
+        </a>
+      </div>
+      <div
+        class="pf-c-page__header-nav"
+      >
+        Navigation
+      </div>
+      PageHeaderTools | Avatar
+    </header>
+    <div
+      aria-hidden="false"
+      class="pf-c-page__sidebar pf-m-expanded"
+      id="page-sidebar"
+    >
+      <div
+        class="pf-c-page__sidebar-body"
+      />
+    </div>
+    <main
+      class="pf-c-page__main"
+      tabindex="-1"
+    >
+      <section
+        class="pf-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-c-breadcrumb"
+          data-ouia-component-id="OUIA-Generated-Breadcrumb-5"
+          data-ouia-component-type="PF4/Breadcrumb"
+          data-ouia-safe="true"
+        >
+          <ol
+            class="pf-c-breadcrumb__list"
+          >
+            <li
+              class="pf-c-breadcrumb__item"
+            >
+              Section Home
+            </li>
+            <li
+              class="pf-c-breadcrumb__item"
+            >
+              <span
+                class="pf-c-breadcrumb__item-divider"
+              >
+                <svg
+                  aria-hidden="true"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  style="vertical-align: -0.125em;"
+                  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-c-breadcrumb__link"
+                href="#"
+              >
+                Section Title
+              </a>
+            </li>
+            <li
+              class="pf-c-breadcrumb__item"
+            >
+              <span
+                class="pf-c-breadcrumb__item-divider"
+              >
+                <svg
+                  aria-hidden="true"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  style="vertical-align: -0.125em;"
+                  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-c-breadcrumb__link"
+                href="#"
+              >
+                Section Title
+              </a>
+            </li>
+            <li
+              class="pf-c-breadcrumb__item"
+            >
+              <span
+                class="pf-c-breadcrumb__item-divider"
+              >
+                <svg
+                  aria-hidden="true"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  style="vertical-align: -0.125em;"
+                  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-c-breadcrumb__link pf-m-current"
+                href="#"
+              >
+                Section Landing
+              </a>
+            </li>
+          </ol>
+        </nav>
+      </section>
+      <section
+        class="pf-c-page__main-section"
+      >
+        Section with default background
+      </section>
+      <section
+        class="pf-c-page__main-section pf-m-light"
+      >
+        Section with light background
+      </section>
+      <section
+        class="pf-c-page__main-section pf-m-dark-200"
+      >
+        Section with dark background
+      </section>
+      <section
+        class="pf-c-page__main-section pf-m-dark-100"
+      >
+        Section with darker background
+      </section>
+    </main>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
+<DocumentFragment>
+  <div
+    aria-label="Page layout"
+    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default pf-m-height-breakpoint-sm my-page-class"
+    id="PageId"
+  >
+    <header
+      class="pf-c-page__header"
+    >
+      <div
+        class="pf-c-page__header-brand"
+      >
+        <a
+          class="pf-c-page__header-brand-link"
+        >
+          Logo
+        </a>
+      </div>
+      <div
+        class="pf-c-page__header-nav"
+      >
+        Navigation
+      </div>
+      PageHeaderTools | Avatar
+    </header>
+    <div
+      aria-hidden="false"
+      class="pf-c-page__sidebar pf-m-expanded"
+      id="page-sidebar"
+    >
+      <div
+        class="pf-c-page__sidebar-body"
+      />
+    </div>
+    <main
+      class="pf-c-page__main"
+      tabindex="-1"
+    >
+      <section
+        class="pf-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-c-breadcrumb"
+          data-ouia-component-id="OUIA-Generated-Breadcrumb-2"
+          data-ouia-component-type="PF4/Breadcrumb"
+          data-ouia-safe="true"
+        >
+          <ol
+            class="pf-c-breadcrumb__list"
+          >
+            <li
+              class="pf-c-breadcrumb__item"
+            >
+              Section Home
+            </li>
+            <li
+              class="pf-c-breadcrumb__item"
+            >
+              <span
+                class="pf-c-breadcrumb__item-divider"
+              >
+                <svg
+                  aria-hidden="true"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  style="vertical-align: -0.125em;"
+                  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-c-breadcrumb__link"
+                href="#"
+              >
+                Section Title
+              </a>
+            </li>
+            <li
+              class="pf-c-breadcrumb__item"
+            >
+              <span
+                class="pf-c-breadcrumb__item-divider"
+              >
+                <svg
+                  aria-hidden="true"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  style="vertical-align: -0.125em;"
+                  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-c-breadcrumb__link"
+                href="#"
+              >
+                Section Title
+              </a>
+            </li>
+            <li
+              class="pf-c-breadcrumb__item"
+            >
+              <span
+                class="pf-c-breadcrumb__item-divider"
+              >
+                <svg
+                  aria-hidden="true"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  style="vertical-align: -0.125em;"
+                  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-c-breadcrumb__link pf-m-current"
+                href="#"
+              >
+                Section Landing
+              </a>
+            </li>
+          </ol>
+        </nav>
+      </section>
       <section
         class="pf-c-page__main-section"
       >