From c7c9246cb68933c1f1e11bdb0aef5e90b0699f23 Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Fri, 15 May 2026 10:45:18 -0400
Subject: [PATCH 1/3] feat(documentation-framework): add dynamic sticky support
 for tabs

---
 .../hooks/useIsStuck.js                       | 20 +++++++++++++++++++
 .../documentation-framework/templates/mdx.js  |  5 ++++-
 2 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 packages/documentation-framework/hooks/useIsStuck.js

diff --git a/packages/documentation-framework/hooks/useIsStuck.js b/packages/documentation-framework/hooks/useIsStuck.js
new file mode 100644
index 0000000000..2f19bc364f
--- /dev/null
+++ b/packages/documentation-framework/hooks/useIsStuck.js
@@ -0,0 +1,20 @@
+import { useState, useLayoutEffect } from 'react';
+
+export const useIsStuck = (stickyElementId) => {
+  const [isStuck, setIsStuck] = useState(false);
+
+  useLayoutEffect(() => {
+    const scrollElement = document.getElementById('ws-page-main');
+    const stickyElement = document.getElementById(stickyElementId);
+
+    const syncFromScroll = () => {
+      setIsStuck(scrollElement.scrollTop > stickyElement.getBoundingClientRect().top);
+    };
+
+    syncFromScroll();
+    scrollElement.addEventListener('scroll', syncFromScroll, { passive: true });
+    return () => scrollElement.removeEventListener('scroll', syncFromScroll);
+  }, []);
+
+  return isStuck;
+};
diff --git a/packages/documentation-framework/templates/mdx.js b/packages/documentation-framework/templates/mdx.js
index 005a874090..182dc93e57 100644
--- a/packages/documentation-framework/templates/mdx.js
+++ b/packages/documentation-framework/templates/mdx.js
@@ -23,6 +23,7 @@ import { capitalize, getTitle, slugger, trackEvent } from '../helpers';
 import './mdx.css';
 import { convertToReactComponent } from '@patternfly/ast-helpers';
 import { FunctionsTable } from '../components/functionsTable/functionsTable';
+import { useIsStuck } from '../hooks/useIsStuck';
 
 const MDXChildTemplate = ({ Component, source, toc = [], index = 0, id }) => {
   const {
@@ -167,6 +168,8 @@ const MDXChildTemplate = ({ Component, source, toc = [], index = 0, id }) => {
 };
 
 export const MDXTemplate = ({ title, sources = [], path, id, componentsData }) => {
+  const isStickyStuck = useIsStuck('ws-sticky-nav-tabs');
+
   const hasFeedbackButton = process.env.hasFeedbackButton;
   const isDeprecated =
     sources.some((source) => source.source === 'react-deprecated' || source.source === 'html-deprecated') &&
@@ -307,7 +310,7 @@ export const MDXTemplate = ({ title, sources = [], path, id, componentsData }) =
           </Content>
         </PageSection>
         {showTabs && (
-          <PageSection id="ws-sticky-nav-tabs" stickyOnBreakpoint={{ default: 'top' }} type="tabs">
+          <PageSection id="ws-sticky-nav-tabs" stickyBase="top" isStickyStuck={isStickyStuck} type="tabs">
             <div className="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom">
               <ul className="pf-v6-c-tabs__list">
                 {sourceKeys.map((source, index) => (

From b890fe913aa1ad6da075871632d7de87589af2d6 Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Fri, 15 May 2026 12:00:27 -0400
Subject: [PATCH 2/3] Add border bottom to tabs

---
 packages/documentation-framework/templates/mdx.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/documentation-framework/templates/mdx.js b/packages/documentation-framework/templates/mdx.js
index 182dc93e57..8dc2a94c1a 100644
--- a/packages/documentation-framework/templates/mdx.js
+++ b/packages/documentation-framework/templates/mdx.js
@@ -310,7 +310,7 @@ export const MDXTemplate = ({ title, sources = [], path, id, componentsData }) =
           </Content>
         </PageSection>
         {showTabs && (
-          <PageSection id="ws-sticky-nav-tabs" stickyBase="top" isStickyStuck={isStickyStuck} type="tabs">
+          <PageSection id="ws-sticky-nav-tabs" stickyBase="top" isStickyStuck={isStickyStuck} type="tabs" style={{ borderBottom: 'var(--pf-t--global--border--width--box--default) solid var(--pf-t--global--border--color--default)' }}>
             <div className="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom">
               <ul className="pf-v6-c-tabs__list">
                 {sourceKeys.map((source, index) => (

From e9d57559be29a56d52ae5cd6efa8e96b0fe3c006 Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Fri, 15 May 2026 13:28:42 -0400
Subject: [PATCH 3/3] Remove border custom style and no-bottom-border

---
 packages/documentation-framework/templates/mdx.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/documentation-framework/templates/mdx.js b/packages/documentation-framework/templates/mdx.js
index 8dc2a94c1a..108691086a 100644
--- a/packages/documentation-framework/templates/mdx.js
+++ b/packages/documentation-framework/templates/mdx.js
@@ -310,8 +310,8 @@ export const MDXTemplate = ({ title, sources = [], path, id, componentsData }) =
           </Content>
         </PageSection>
         {showTabs && (
-          <PageSection id="ws-sticky-nav-tabs" stickyBase="top" isStickyStuck={isStickyStuck} type="tabs" style={{ borderBottom: 'var(--pf-t--global--border--width--box--default) solid var(--pf-t--global--border--color--default)' }}>
-            <div className="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom">
+          <PageSection id="ws-sticky-nav-tabs" stickyBase="top" isStickyStuck={isStickyStuck} type="tabs">
+            <div className="pf-v6-c-tabs pf-m-page-insets">
               <ul className="pf-v6-c-tabs__list">
                 {sourceKeys.map((source, index) => (
                   <li