diff --git a/docs/_includes/footer_custom.html b/docs/_includes/footer_custom.html
new file mode 100644
index 00000000..f512acec
--- /dev/null
+++ b/docs/_includes/footer_custom.html
@@ -0,0 +1,45 @@
+{%- assign docs_pages = site.html_pages
+      | where_exp: "item", "item.title != nil"
+      | where_exp: "item", "item.parent == nil"
+      | where_exp: "item", "item.nav_exclude != true" -%}
+{%- include components/nav/sorted.html pages=docs_pages -%}
+
+{%- assign previous_doc = nil -%}
+{%- assign next_doc = nil -%}
+{%- assign current_doc_found = false -%}
+
+{%- for docs_page in nav_sorted -%}
+  {%- if current_doc_found -%}
+    {%- assign next_doc = docs_page -%}
+    {%- break -%}
+  {%- endif -%}
+
+  {%- if docs_page.url == page.url -%}
+    {%- assign current_doc_found = true -%}
+  {%- else -%}
+    {%- assign previous_doc = docs_page -%}
+  {%- endif -%}
+{%- endfor -%}
+
+{%- if current_doc_found -%}
+  {%- if previous_doc or next_doc -%}
+    <nav class="sa-page-nav" aria-label="Page navigation">
+      <div class="sa-page-nav__slot sa-page-nav__slot--prev">
+        {%- if previous_doc -%}
+          <a class="sa-page-nav__link" href="{{ previous_doc.url | relative_url }}">
+            <span class="sa-page-nav__eyebrow">&larr; Prev</span>
+            <span class="sa-page-nav__title">{{ previous_doc.nav_title | default: previous_doc.title }}</span>
+          </a>
+        {%- endif -%}
+      </div>
+      <div class="sa-page-nav__slot sa-page-nav__slot--next">
+        {%- if next_doc -%}
+          <a class="sa-page-nav__link" href="{{ next_doc.url | relative_url }}">
+            <span class="sa-page-nav__eyebrow">Next &rarr;</span>
+            <span class="sa-page-nav__title">{{ next_doc.nav_title | default: next_doc.title }}</span>
+          </a>
+        {%- endif -%}
+      </div>
+    </nav>
+  {%- endif -%}
+{%- endif -%}
diff --git a/docs/_sass/custom/custom.scss b/docs/_sass/custom/custom.scss
index fcb254b6..bdaedb9b 100644
--- a/docs/_sass/custom/custom.scss
+++ b/docs/_sass/custom/custom.scss
@@ -276,6 +276,59 @@ figure.highlight code {
   border-color: #1a7f37;
 }
 
+.sa-page-nav {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+  margin: 1rem 0 0;
+}
+
+.sa-page-nav__slot--next {
+  text-align: right;
+}
+
+.sa-page-nav__link {
+  display: block;
+  min-height: 4.25rem;
+  padding: 0.75rem 0.85rem;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  background: #ffffff;
+  color: inherit;
+  text-decoration: none;
+}
+
+.sa-page-nav__link:hover,
+.sa-page-nav__link:focus-visible {
+  border-color: #8c959f;
+  text-decoration: none;
+}
+
+.sa-page-nav__eyebrow {
+  display: block;
+  color: #6e7781;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+
+.sa-page-nav__title {
+  display: block;
+  margin-top: 0.3rem;
+  color: #0969da;
+  font-weight: 600;
+  line-height: 1.3;
+  overflow-wrap: anywhere;
+}
+
+@media (max-width: 31rem) {
+  .sa-page-nav {
+    grid-template-columns: 1fr;
+  }
+}
+
 .highlight .c,
 .highlight .c1,
 .highlight .cm,