diff --git a/packages/app-webdir-ui/src/QuickLinks/index.js b/packages/app-webdir-ui/src/QuickLinks/index.js
index 8b62b280bd..e66ef78c71 100644
--- a/packages/app-webdir-ui/src/QuickLinks/index.js
+++ b/packages/app-webdir-ui/src/QuickLinks/index.js
@@ -32,4 +32,3 @@ const QuickLinks = () => {
 };
 
 export { QuickLinks };
-
diff --git a/packages/component-footer/src/components/Contact/index.js b/packages/component-footer/src/components/Contact/index.js
index ac2c339728..61eaf75a68 100644
--- a/packages/component-footer/src/components/Contact/index.js
+++ b/packages/component-footer/src/components/Contact/index.js
@@ -11,7 +11,12 @@ import { ColumnSection } from "../ColumnSection";
  */
 
 const Contact = ({
-  contact: { title = "", contactLink = "", contributionLink = "", columns = []},
+  contact: {
+    title = "",
+    contactLink = "",
+    contributionLink = "",
+    columns = [],
+  },
 }) => {
   return (
     <div className="wrapper" id="wrapper-footer-columns" data-testid="contact">
diff --git a/packages/component-footer/src/components/Social/index.js b/packages/component-footer/src/components/Social/index.js
index 68a6a808ff..89f92b4d9b 100644
--- a/packages/component-footer/src/components/Social/index.js
+++ b/packages/component-footer/src/components/Social/index.js
@@ -36,11 +36,9 @@ const DEF_MEDIA_LINKS = {
  * @returns {JSX.Element}
  */
 
-const Social = ({ social: {
-  logoUrl,
-  unitLogo = endorsedLogo,
-  mediaLinks = DEF_MEDIA_LINKS,
-}, }) => {
+const Social = ({
+  social: { logoUrl, unitLogo = endorsedLogo, mediaLinks = DEF_MEDIA_LINKS },
+}) => {
   return (
     <div className="wrapper" id="wrapper-endorsed-footer" data-testid="social">
       <div className="container" id="endorsed-footer">
diff --git a/packages/component-header-footer/.storybook/main.js b/packages/component-header-footer/.storybook/main.js
index 13e1ac928f..c7f37b3c8c 100644
--- a/packages/component-header-footer/.storybook/main.js
+++ b/packages/component-header-footer/.storybook/main.js
@@ -9,11 +9,33 @@ const config = {
   ],
   stories: ["../src/**/*.stories.js"],
   core: {
-    builder: '@storybook/builder-vite'
+    builder: "@storybook/builder-vite",
   },
   framework: {
     name: "@storybook/react-vite",
   },
+  async viteFinal(config) {
+    // Configure optimizeDeps to handle JSX in .js files
+    config.optimizeDeps = {
+      ...config.optimizeDeps,
+      esbuildOptions: {
+        ...config.optimizeDeps?.esbuildOptions,
+        loader: {
+          ".js": "jsx",
+          ".jsx": "jsx",
+        },
+      },
+    };
+
+    // Configure esbuild for build
+    config.esbuild = {
+      ...config.esbuild,
+      loader: "jsx",
+      include: /\.(jsx?|tsx?)$/,
+    };
+
+    return config;
+  },
 };
 
 export default config;
diff --git a/packages/component-header-footer/src/header/components/Button/index.js b/packages/component-header-footer/src/header/components/Button/index.js
index 1daf12413e..2b22c7b357 100644
--- a/packages/component-header-footer/src/header/components/Button/index.js
+++ b/packages/component-header-footer/src/header/components/Button/index.js
@@ -17,6 +17,7 @@ import { ButtonWrapper } from "./index.styles";
  * @param {string} props.text - The text content to display inside the button
  * @param {string} [props.classes] - Additional CSS classes to apply to the button
  * @param {function} [props.onClick] - Event handler function called when the button is clicked
+ * @param {function} [props.onKeyDown] - Event handler function called when a key is pressed while the button is focused
  * @param {function} [props.onFocus] - Event handler function called when the button receives focus
  * @param {string|React.Component} [props.as] - The element type or component to render as
  * @returns {JSX.Element} The rendered button component
@@ -27,6 +28,7 @@ const Button = ({
   text,
   classes,
   onClick,
+  onKeyDown,
   onFocus,
   as,
   ...props
@@ -35,8 +37,9 @@ const Button = ({
     <ButtonWrapper
       href={href}
       className={`button-${color} ${classes ?? ""}`}
-      onClick={onClick ? event => onClick(event) : undefined}
-      onFocus={onFocus ? event => onFocus(event) : undefined}
+      onClick={onClick}
+      onKeyDown={onKeyDown}
+      onFocus={onFocus}
       as={as}
       {...props}
     >
diff --git a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/DropdownItem/index.js b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/DropdownItem/index.js
index c643d76ae7..a36034ebb9 100644
--- a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/DropdownItem/index.js
+++ b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/DropdownItem/index.js
@@ -19,21 +19,24 @@ const LINK_DEFAULT_PROPS = {
   text: "",
 };
 
-const HeadingItem = ({ text }) => <h3 className={CLASS_NAMES.UL_HEADING}>{text}</h3>;
+const HeadingItem = ({ text }) => (
+  <h3 className={CLASS_NAMES.UL_HEADING}>{text}</h3>
+);
 
 HeadingItem.propTypes = {
   text: PropTypes.string,
 };
 
 const ButtonItem = ({ link, dropdownName, handleLinkEvent }) => (
-  <li className={CLASS_NAMES.NAV_BUTTON}>
+  <div className={CLASS_NAMES.NAV_BUTTON}>
     <Button
       text={link.text}
-      color={link.color || "dark"}
+      color={link.color || "maroon"}
       href={link.href}
       onClick={e => handleLinkEvent(e, link)}
+      onKeyDown={e => handleLinkEvent(e, link)}
     />
-  </li>
+  </div>
 );
 
 ButtonItem.propTypes = {
@@ -72,11 +75,11 @@ LinkItem.propTypes = {
  * @typedef { import("../../../../core/models/types").Button } Button
  * @typedef {{
  *  dropdownName: string
- *  items: [object][]
+ *  items: Array<Array<object>>
  *  buttons: Button[]
  *  classes?: string,
  *  listId: string
- *  setItemOpened: Function
+ *  opened: boolean
  *  parentLink: React.RefObject<HTMLElement> | null
  * }} DropdownItemProps
  */
@@ -91,11 +94,22 @@ const DropdownItem = ({
   buttons,
   classes,
   listId,
-  setItemOpened,
+  opened,
   parentLink,
 }) => {
-  const { breakpoint } = useAppContext();
-  const isMega = items?.length > 2;
+  const {
+    breakpoint,
+    headerHeight,
+    setItemOpened,
+    setMobileMenuOpen,
+    mobileMenuOpen,
+  } = useAppContext();
+  let cols = 0;
+  items.map(lists => {
+    cols += lists[0].span || 1;
+  });
+
+  const isMega = cols > 2;
   /**
    * @type {React.MutableRefObject<HTMLDivElement|null>}
    */
@@ -110,6 +124,16 @@ const DropdownItem = ({
       setAlignedRight(elPosition > breakpointPosition);
     }
   }, []);
+  useEffect(() => {
+    if (opened && dropdownRef?.current?.parentElement) {
+      dropdownRef.current.parentElement.scrollIntoView(
+        /** @type {ScrollIntoViewOptions} */ {
+          behavior: "smooth",
+          block: "start",
+        }
+      );
+    }
+  }, [dropdownRef, opened]);
 
   const stopPropagation = e => e.stopPropagation();
 
@@ -119,14 +143,13 @@ const DropdownItem = ({
 
     const focusNextLink = () => {
       const nextLink = parentElement.nextElementSibling?.firstChild;
-      if (nextLink) nextLink.focus();
+      if (typeof nextLink?.focus === "function") nextLink.focus();
     };
 
     const focusPrevLink = () => {
       const prevLink = parentElement.previousElementSibling?.firstChild;
-      if (prevLink) prevLink.focus();
+      if (typeof prevLink?.focus === "function") prevLink.focus();
     };
-
     stopPropagation(e);
 
     if (key === "ArrowDown") {
@@ -135,17 +158,25 @@ const DropdownItem = ({
     } else if (key === "ArrowUp") {
       e.preventDefault();
       focusPrevLink();
-    } else if (key === "Escape") {
+    } else if (key === "Escape" && opened) {
       setItemOpened();
-      if (parentLink?.current) parentLink.current.focus();
+      if (typeof parentLink?.current?.focus === "function") {
+        parentLink.current.focus();
+      }
+    } else if (key === "Escape" && !opened && mobileMenuOpen) {
+      setMobileMenuOpen(false);
     } else if (key === "Enter" || key === " " || type === "click") {
+      // Single page apps do not leave the page on link click,
+      // so we need to manually close the menu and trigger the onClick event
+      setMobileMenuOpen(false);
+      setItemOpened();
       link?.onClick?.(e);
       trackGAEvent({ ...LINK_DEFAULT_PROPS, text: link.text });
     }
   };
 
   const renderItem = (link, index) => {
-    const key = `${link.text}-${link.href || index}`;
+    const key = `${link.text}-${link.href}-${index}`;
     if (link.type === "heading")
       return <HeadingItem key={key} text={link.text} />;
     if (link.type === "button")
@@ -174,17 +205,68 @@ const DropdownItem = ({
         isMega ? " mega" : ""
       }`}
       breakpoint={breakpoint}
+      headerHeight={headerHeight}
     >
-      <div id={MULTIPLE_SUBMENUS ? listId : ""} className={CLASS_NAMES.DROPDOWN_CONTAINER}>
-        {items?.map((item, index0) => {
-          const genKey = idGenerator(`dropdown-item-${index0}-`);
-          const key = genKey.next().value;
-          return (
-            <ul id={MULTIPLE_SUBMENUS ? `${listId}-${key}` : listId} key={key}>
-              {item.map((link, index) => renderItem(link, index))}
-            </ul>
-          );
-        })}
+      <div
+        style={{ "--cols": cols < 3 ? 4 : cols }}
+        id={MULTIPLE_SUBMENUS ? listId : ""}
+        className={CLASS_NAMES.DROPDOWN_CONTAINER}
+      >
+        <>
+          {items?.map((item, index0) => {
+            const genKey = idGenerator(`dropdown-item-${index0}-`);
+            const key = genKey.next().value;
+            return (
+              <div
+                className={CLASS_NAMES.DROPDOWN_CONTAINER_COLUMN}
+                style={{ "--span": item[0].span || 1 }}
+                key={`${listId}-${key}`}
+                id={MULTIPLE_SUBMENUS ? `${listId}-${key}` : listId}
+              >
+                {(() => {
+                  let currentUl = [];
+                  const uls = [];
+                  item.forEach((link, index) => {
+                    if (link.type === "heading") {
+                      if (currentUl.length > 0) {
+                        uls.push(currentUl);
+                        currentUl = [];
+                      }
+                      uls.push([link]);
+                    } else if (link.type === "button") {
+                      if (currentUl.length > 0) {
+                        uls.push(currentUl);
+                        currentUl = [];
+                      }
+                      uls.push([link]);
+                    } else {
+                      currentUl.push(link);
+                    }
+                  });
+
+                  if (currentUl.length > 0) {
+                    uls.push(currentUl);
+                  }
+
+                  return uls.map((group, groupIndex) => {
+                    const groupKey = `${key}-group-${groupIndex}`;
+                    if (group.length === 1 && group[0].type === "heading") {
+                      return renderItem(group[0], groupIndex);
+                    }
+                    if (group.length === 1 && group[0].type === "button") {
+                      return renderItem(group[0], groupIndex);
+                    }
+                    return (
+                      <ul key={groupKey}>
+                        {group.map((link, index) => renderItem(link, index))}
+                      </ul>
+                    );
+                  });
+                })()}
+              </div>
+            );
+          })}
+        </>
       </div>
       {buttons && (
         <div className={CLASS_NAMES.DROPDOWN_BUTTON_CONTAINER}>
@@ -208,19 +290,21 @@ const DropdownItem = ({
 DropdownItem.propTypes = {
   dropdownName: PropTypes.string,
   items: PropTypes.arrayOf(
-    PropTypes.shape({
-      text: PropTypes.string,
-      selected: PropTypes.bool,
-      onClick: PropTypes.func,
-      href: PropTypes.string,
-    })
+    PropTypes.arrayOf(
+      PropTypes.shape({
+        text: PropTypes.string,
+        selected: PropTypes.bool,
+        onClick: PropTypes.func,
+        href: PropTypes.string,
+      })
+    )
   ),
   buttons: PropTypes.arrayOf(PropTypes.shape(ButtonPropTypes)),
   classes: PropTypes.string,
   listId: PropTypes.string,
+  opened: PropTypes.bool,
   setItemOpened: PropTypes.func,
   parentLink: PropTypes.shape({
-    focus: PropTypes.func,
     current: PropTypes.instanceOf(HTMLElement),
   }),
 };
diff --git a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/DropdownItem/index.styles.js b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/DropdownItem/index.styles.js
index bd40e41c28..96ea1bc294 100644
--- a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/DropdownItem/index.styles.js
+++ b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/DropdownItem/index.styles.js
@@ -8,6 +8,7 @@ import {
 import { CLASS_NAMES } from "../../../../core/constants/classNames";
 
 const DropdownWrapper = styled.div`
+  --gap: 2rem;
   position: fixed;
   background-color: ${ASU_WHITE};
   border: 1px solid ${ASU_GRAY5};
@@ -19,9 +20,8 @@ const DropdownWrapper = styled.div`
     visibility: visible;
   }
   &.mega {
-    width: 100%;
-    left: 0;
-    margin-left: 0 !important;
+    width: min(1200px, 100%);
+    left: calc((100% - 1200px) / 2);
   }
   &.aligned-right:not(.mega) {
     position: absolute;
@@ -30,31 +30,65 @@ const DropdownWrapper = styled.div`
   > .${CLASS_NAMES.DROPDOWN_CONTAINER} {
     max-width: 1200px;
     margin: 0 auto;
+    /*
+      max-height is calculated from
+      100% view Height
+      minus header
+      minus 2rem padding
+      minus 4rem cta buttons - future we could add a ref to measure if needed
+    */
+    max-height: calc(
+      100vh - ${({ headerHeight }) => headerHeight}px - 2rem - 4rem
+    );
+    overflow-y: auto;
+    overflow-x: hidden;
     display: flex;
-    justify-content: center;
-    padding: 2rem;
-    ul {
-      width: 16rem;
-      max-width: 282px;
+    justify-content: stretch;
+
+    .${CLASS_NAMES.DROPDOWN_CONTAINER_COLUMN} {
+      --span: 1; /* component overrides using inline style */
+      --col: 1; /* component overrides using inline style */
+      width: calc(1200px / var(--cols) * var(--span));
+      height: fit-content;
+      height: -webkit-fill-available;
+      padding: var(--gap);
       display: flex;
       flex-direction: column;
+      justify-content: flex-start;
+      row-gap: var(--gap);
+
       &:not(:last-child) {
-        padding-right: 2rem;
-        margin-right: 2rem;
         border-right: 1px solid ${ASU_GRAY5};
       }
-      .${CLASS_NAMES.UL_HEADING} {
-        margin-top: 0;
-        font-size: 1.5rem;
-        letter-spacing: -0.035em;
-        font-weight: 700;
-        text-align: left;
-        opacity: 1;
-        margin: 1rem 0;
-        line-height: calc(100% + 0.12em);
+    }
+
+    .${CLASS_NAMES.UL_HEADING} {
+      margin-top: 0;
+      font-size: 1.5rem;
+      letter-spacing: -0.035em;
+      font-weight: 700;
+      text-align: left;
+      opacity: 1;
+      margin: 0;
+      margin-bottom: -1.5rem;
+      line-height: calc(100% + 0.12em);
+    }
+    ul {
+      --ul-gap: 1rem;
+      &:is(:last-child) {
+        flex-grow: 0;
       }
+      margin: 0;
+      width: calc(1200px / var(--cols, 1) * var(--span, 1) - var(--gap) * 2);
+      display: flex;
+      flex-direction: row;
+      column-gap: var(--ul-gap);
+      flex-wrap: wrap;
       .${CLASS_NAMES.NAV_LINK} {
         padding: 0;
+        flex-basis: calc(
+          (100% / var(--span)) - var(--ul-gap) * (var(--span) - 1) / var(--span)
+        );
         a {
           width: 100%;
           display: inline-block;
@@ -68,8 +102,9 @@ const DropdownWrapper = styled.div`
           }
         }
         & + .${CLASS_NAMES.NAV_BUTTON} {
+          width: 100%;
           margin-top: auto;
-          padding-top: 2rem;
+          padding-top: var(--gap);
           & + .${CLASS_NAMES.NAV_BUTTON} {
             margin-top: 1rem;
           }
@@ -77,15 +112,23 @@ const DropdownWrapper = styled.div`
       }
     }
   }
+
+  .${CLASS_NAMES.NAV_BUTTON} {
+    flex: 1 1;
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    flex-wrap: nowrap;
+    width: fit-content;
+  }
   .${CLASS_NAMES.DROPDOWN_BUTTON_CONTAINER} {
     border-top: 1px solid ${ASU_GRAY5};
     border-bottom: 1px solid ${ASU_GRAY5};
-    margin-top: 1rem;
     > div {
       max-width: 1200px;
       margin: 0 auto;
       display: flex;
-      padding: 1rem 0;
+      padding: 1rem 2rem;
     }
   }
   @media (max-width: ${({ breakpoint }) => breakpoint}) {
@@ -99,25 +142,33 @@ const DropdownWrapper = styled.div`
     }
     > .${CLASS_NAMES.DROPDOWN_CONTAINER} {
       max-width: 100%;
-      padding: 1rem 2rem;
+      max-height: unset;
+      overflow-y: unset;
+      overflow-x: unset;
       flex-direction: column;
+
+      .${CLASS_NAMES.DROPDOWN_CONTAINER_COLUMN} {
+        width: 100%;
+        border-right: unset;
+        &:not(:first-child) {
+          padding-top: 0;
+        }
+      }
       ul {
         width: 100%;
         max-width: 100%;
-        padding: 0 1rem;
-        margin-bottom: 1rem;
+        padding: 0;
         &:not(:last-child) {
-          padding-right: 1rem;
-          margin: 0 0 1rem 0;
           border: none;
         }
         .${CLASS_NAMES.UL_HEADING} {
           font-size: 1.25rem;
         }
         .${CLASS_NAMES.NAV_BUTTON} {
-          padding-top: 1.5rem;
+          // padding-top: 1.5rem;
         }
         .${CLASS_NAMES.NAV_LINK} {
+          flex-basis: 100%;
           padding: 0 1rem;
           &:not(:last-child) {
             border-bottom: 1px solid ${ASU_GRAY5};
diff --git a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/NavItem/index.js b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/NavItem/index.js
index 655648acf2..0e2bf5d66c 100644
--- a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/NavItem/index.js
+++ b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/NavItem/index.js
@@ -6,7 +6,11 @@ import PropTypes from "prop-types";
 import React, { useRef, useEffect, useMemo } from "react";
 
 import { useAppContext } from "../../../../core/context/app-context";
-import { CLASS_NAMES, buildClassName, getDropdownClass } from "../../../../core/constants/classNames";
+import {
+  CLASS_NAMES,
+  buildClassName,
+  getDropdownClass,
+} from "../../../../core/constants/classNames";
 import { useIsMobile } from "../../../../core/hooks/isMobile";
 import { NavTreePropTypes } from "../../../../core/models/app-prop-types";
 import { DropdownItem } from "../DropdownItem";
@@ -36,7 +40,11 @@ const NavLinkIcon = ({ children }) => {
   return (
     <>
       {/* @ts-ignore */}
-      <FontAwesomeIcon icon={faHome} className={CLASS_NAMES.ICON_NAV_ITEM} alt="" />
+      <FontAwesomeIcon
+        icon={faHome}
+        className={CLASS_NAMES.ICON_NAV_ITEM}
+        alt=""
+      />
       <span className={CLASS_NAMES.MOBILE_ONLY}>{children}</span>
     </>
   );
@@ -60,33 +68,43 @@ const NavItem = ({ link, setItemOpened, itemOpened }) => {
   const clickRef = useRef(null);
   const parentLink = useRef(null);
   const opened = link.id === itemOpened;
-  const { breakpoint, expandOnHover, title } = useAppContext();
+  const {
+    breakpoint,
+    expandOnHover,
+    title,
+    mobileMenuOpen,
+    setMobileMenuOpen,
+  } = useAppContext();
   const isMobile = useIsMobile(breakpoint);
 
-  useEffect(() => {
-    const handleClickOutside = event => {
-      if (opened && !clickRef?.current?.contains(event.target)) {
-        setItemOpened();
-      }
-    };
-
-    const handleFocusChange = () => {
-      requestAnimationFrame(() => {
-        const node = clickRef.current;
-        if (opened && node && !node.contains(document.activeElement)) {
-          setItemOpened();
-        }
-      });
-    };
+  const handleClickOutside = event => {
+    if (opened && !clickRef?.current?.contains(event.target)) {
+      setItemOpened();
+    }
+  };
 
-    document.addEventListener("click", handleClickOutside, true);
-    document.addEventListener("focusin", handleFocusChange);
+  const handleFocusChange = () => {
+    requestAnimationFrame(() => {
+      const node = clickRef.current;
 
+      if (opened && node && !node.contains(document.activeElement)) {
+        setItemOpened();
+      }
+    });
+  };
+  useEffect(() => {
+    if (opened) {
+      document.addEventListener("click", handleClickOutside, true);
+      document.addEventListener("focusin", handleFocusChange);
+    } else {
+      document.removeEventListener("click", handleClickOutside, true);
+      document.removeEventListener("focusin", handleFocusChange);
+    }
     return () => {
       document.removeEventListener("click", handleClickOutside, true);
       document.removeEventListener("focusin", handleFocusChange);
     };
-  }, [opened]);
+  }, [opened, setItemOpened]);
 
   const renderNavLinks = useMemo(() => {
     if (link.type === "icon-home") {
@@ -99,7 +117,10 @@ const NavItem = ({ link, setItemOpened, itemOpened }) => {
           <FontAwesomeIcon
             // @ts-ignore
             icon={faChevronDown}
-            className={buildClassName(CLASS_NAMES.CHEVRON_ICON, opened && CLASS_NAMES.OPEN)}
+            className={buildClassName(
+              CLASS_NAMES.CHEVRON_ICON,
+              opened && CLASS_NAMES.OPEN
+            )}
             // @ts-ignore
             alt=""
           />
@@ -129,8 +150,16 @@ const NavItem = ({ link, setItemOpened, itemOpened }) => {
   };
 
   const handleKeyDown = e => {
-    if (!link.items && link.href) {
+    if (
+      !link.items &&
+      (link.href || link.onClick) &&
+      (e.key === "Enter" || e.key === " " || e.type === "click")
+    ) {
       trackGAEvent({ ...LINK_DEFAULT_PROPS, text: link.text });
+      // Single page apps do not leave the page on link click,
+      // so we need to manually close the menu and trigger the onClick event
+      setMobileMenuOpen(false);
+      setItemOpened();
       return;
     }
     const { key } = e;
@@ -147,28 +176,35 @@ const NavItem = ({ link, setItemOpened, itemOpened }) => {
     if (navigableKeys.includes(key)) {
       e.preventDefault();
       if (key === "Escape" && opened) {
+        if (typeof clickRef?.current?.focus === "function") {
+          clickRef.current.focus();
+        }
         setItemOpened();
         return;
       }
+
+      if (key === "Escape" && !opened && mobileMenuOpen) {
+        setMobileMenuOpen(false);
+        return;
+      }
       // Handle Enter or Space key
       if (key === "Enter" || key === " ") {
         if (link.items) {
-          if (!expandOnHover && !isMobile) {
-            setItemOpened();
-          } else if (isMobile) {
-            setItemOpened();
-          }
+          // Regardless of state or props mobile/desktop/hover/click
+          // if the item has a dropdown, we want to toggle it on Enter/Space
+          setItemOpened();
         }
         dispatchGAEvent();
         link.onClick?.(e);
       }
       if (key === "ArrowDown" || key === "ArrowRight") {
         if (opened) {
-          const dropdownItems = document.querySelectorAll(
+          // Only need first matching item
+          const dropdownItem = document.querySelector(
             `.${getDropdownClass(link.id)} li.${CLASS_NAMES.NAV_LINK} a`
           );
-          if (dropdownItems.length) {
-            dropdownItems[0].focus();
+          if (typeof dropdownItem?.focus === "function") {
+            dropdownItem.focus();
           }
         }
       }
@@ -225,10 +261,13 @@ const NavItem = ({ link, setItemOpened, itemOpened }) => {
           buttons={link.buttons}
           // @ts-ignore
           dropdownName={link.text}
-          classes={buildClassName(getDropdownClass(link.id), opened && CLASS_NAMES.OPENED)}
+          classes={buildClassName(
+            getDropdownClass(link.id),
+            opened && CLASS_NAMES.OPENED
+          )}
           listId={`dropdown-${link.id}`}
-          setItemOpened={setItemOpened}
-          parentLink={parentLink?.current}
+          opened={opened}
+          parentLink={parentLink}
         />
       )}
     </NavItemWrapper>
diff --git a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/NavItem/index.styles.js b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/NavItem/index.styles.js
index 3d965f3780..dc1461a81c 100644
--- a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/NavItem/index.styles.js
+++ b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/NavItem/index.styles.js
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { ASU_GRAY1, ASU_GOLD, ASU_GRAY4 } from "../../../../colors";
+import { ASU_GRAY1, ASU_GOLD, ASU_GRAY4, ASU_WHITE } from "../../../../colors";
 import { CLASS_NAMES } from "../../../../core/constants/classNames";
 
 const NavItemWrapper = styled.li`
@@ -16,6 +16,13 @@ const NavItemWrapper = styled.li`
     padding: 0.5rem 0.75rem;
     line-height: 1rem;
     color: ${ASU_GRAY1};
+
+    &[aria-expanded="true"] {
+      background-color: ${ASU_WHITE};
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
     &:after {
       transition: 0.5s cubic-bezier(0.19, 1, 0.19, 1);
       content: "";
diff --git a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/index.js b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/index.js
index 338d824362..99b5b8391a 100644
--- a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/index.js
+++ b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/index.js
@@ -14,12 +14,23 @@ export const BUTTON_ERROR_MESSAGE =
   "Header buttons cannot have both an onClick and an href property as this breaks accessibility. Please remove one";
 
 const NavbarContainer = () => {
-  const { navTree, mobileNavTree, buttons, breakpoint } = useAppContext();
+  const {
+    navTree,
+    mobileNavTree,
+    buttons,
+    breakpoint,
+    itemOpened,
+    setItemOpened,
+  } = useAppContext();
   const isMobile = useIsMobile(breakpoint);
-  const [itemOpened, setItemOpened] = useState(undefined);
 
   const handleSetItemOpened = itemId => {
-    setItemOpened(prev => (itemOpened === itemId ? undefined : itemId));
+    if (itemOpened === itemId) {
+      setItemOpened(() => undefined);
+    } else {
+      // Adding a slight delay so opening the dropdown is triggered after any close events have finished processing
+      setTimeout(() => setItemOpened(() => itemId), 1);
+    }
   };
 
   const validateButton = button => {
@@ -69,7 +80,10 @@ const NavbarContainer = () => {
             </ul>
           )}
           {!!buttons?.length && (
-            <form className={CLASS_NAMES.BUTTONS_CONTAINER} data-testid="buttons-container">
+            <form
+              className={CLASS_NAMES.BUTTONS_CONTAINER}
+              data-testid="buttons-container"
+            >
               {buttons.map(button => {
                 validateButton(button);
                 return (
diff --git a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/index.styles.js b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/index.styles.js
index 73546643ee..5013bcdbbb 100644
--- a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/index.styles.js
+++ b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/index.styles.js
@@ -24,8 +24,7 @@ const Wrapper = styled.nav`
       flex-direction: column;
       justify-content: flex-start;
       overflow-y: auto;
-      min-height: calc(100vh - 277px);
-      max-height: calc(100vh - 277px);
+      min-height: 0;
       > *:last-child {
         margin-bottom: min(75px, 15vw);
       }
diff --git a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/index.test.js b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/index.test.js
index afb0258ba8..552610da17 100644
--- a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/index.test.js
+++ b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/index.test.js
@@ -1,5 +1,5 @@
 // @ts-check
-import { render, fireEvent, cleanup } from "@testing-library/react";
+import { render, fireEvent, cleanup, waitFor } from "@testing-library/react";
 import React from "react";
 
 import { NavbarContainer } from ".";
@@ -66,7 +66,9 @@ describe("#Navbar Container Component opened/closed on hover", () => {
 
   it("should open dropdown", () => {
     fireEvent.mouseEnter(navItems[0].parentElement);
-    expect(navItems[0].className).toContain("open-link");
+    waitFor(() => {
+      expect(navItems[0].className).toContain("open-link");
+    });
   });
   it("should close dropdown", () => {
     fireEvent.mouseEnter(navItems[0].parentElement);
diff --git a/packages/component-header-footer/src/header/components/HeaderMain/Title/index.js b/packages/component-header-footer/src/header/components/HeaderMain/Title/index.js
index 4c915130d2..3055f71a16 100644
--- a/packages/component-header-footer/src/header/components/HeaderMain/Title/index.js
+++ b/packages/component-header-footer/src/header/components/HeaderMain/Title/index.js
@@ -3,7 +3,10 @@ import { trackGAEvent } from "@asu/shared";
 import React, { useEffect, useState } from "react";
 
 import { useAppContext } from "../../../core/context/app-context";
-import { CLASS_NAMES, buildClassName } from "../../../core/constants/classNames";
+import {
+  CLASS_NAMES,
+  buildClassName,
+} from "../../../core/constants/classNames";
 import { TitlePropTypes } from "../../../core/models/app-prop-types";
 import { checkFirstLoad } from "../../../core/utils/helpers/title";
 import { TitleWrapper } from "./index.styles";
@@ -54,7 +57,10 @@ const Title = () => {
           {parentOrg}
         </a>
         <a
-          className={buildClassName(CLASS_NAMES.SUBUNIT_NAME, active && "active")}
+          className={buildClassName(
+            CLASS_NAMES.SUBUNIT_NAME,
+            active && "active"
+          )}
           href={baseUrl}
           onClick={() =>
             trackGAEvent({
@@ -82,7 +88,10 @@ const Title = () => {
       data-testid="title"
     >
       <a
-        className={buildClassName(CLASS_NAMES.TITLE_SUBUNIT_NAME, active && "active")}
+        className={buildClassName(
+          CLASS_NAMES.TITLE_SUBUNIT_NAME,
+          active && "active"
+        )}
         href={baseUrl}
         onClick={() =>
           trackGAEvent({
diff --git a/packages/component-header-footer/src/header/components/HeaderMain/Title/index.styles.js b/packages/component-header-footer/src/header/components/HeaderMain/Title/index.styles.js
index 904e7cd5c4..1c1e59b1f5 100644
--- a/packages/component-header-footer/src/header/components/HeaderMain/Title/index.styles.js
+++ b/packages/component-header-footer/src/header/components/HeaderMain/Title/index.styles.js
@@ -11,7 +11,7 @@ const TitleWrapper = styled.div`
   line-height: 1;
   font-size: 1rem;
   font-weight: 700;
-  padding: 0 2rem 1.5rem 2rem;
+  padding: 0 2rem 1rem 2rem;
   letter-spacing: -1px;
   display: inline-block;
   margin: 0;
@@ -25,13 +25,12 @@ const TitleWrapper = styled.div`
     display: none;
   }
   .${CLASS_NAMES.UNIT_NAME},
-  .${CLASS_NAMES.SUBUNIT_NAME},
-  .${CLASS_NAMES.TITLE_SUBUNIT_NAME} {
+    .${CLASS_NAMES.SUBUNIT_NAME},
+    .${CLASS_NAMES.TITLE_SUBUNIT_NAME} {
     color: ${ASU_GRAY1};
   }
 
-  .${CLASS_NAMES.SUBUNIT_NAME},
-  .${CLASS_NAMES.TITLE_SUBUNIT_NAME} {
+  .${CLASS_NAMES.SUBUNIT_NAME}, .${CLASS_NAMES.TITLE_SUBUNIT_NAME} {
     background-image: linear-gradient(
       to right,
       transparent 51%,
diff --git a/packages/component-header-footer/src/header/components/HeaderMain/index.js b/packages/component-header-footer/src/header/components/HeaderMain/index.js
index e6c731fecb..ccc967e9c7 100644
--- a/packages/component-header-footer/src/header/components/HeaderMain/index.js
+++ b/packages/component-header-footer/src/header/components/HeaderMain/index.js
@@ -1,6 +1,6 @@
 // @ts-check
 import { trackGAEvent } from "@asu/shared";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import mobileMenuSearchIcon from "../../../../public/assets/icons/menu-search-icon.png?inline";
@@ -17,14 +17,38 @@ import { Search } from "../UniversalNavbar/Search";
 import { Title } from "./Title";
 
 const HeaderMain = () => {
-  const { breakpoint, isPartner, hasNavigation } = useAppContext();
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const {
+    breakpoint,
+    isPartner,
+    hasNavigation,
+    itemOpened,
+    setItemOpened,
+    mobileMenuOpen,
+    setMobileMenuOpen,
+    mobileMenuToggleRef,
+    headerTop,
+  } = useAppContext();
   const isMobile = useIsMobile(breakpoint);
 
   const handleChangeMenuVisibility = () => {
     setMobileMenuOpen(prevState => !prevState);
   };
 
+  useEffect(() => {
+    document.body.style.overflow =
+      mobileMenuOpen || itemOpened !== undefined ? "hidden" : "unset";
+
+    // Clean up function to re-enable scrolling
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [mobileMenuOpen, itemOpened, isMobile]);
+
+  useEffect(() => {
+    setMobileMenuOpen(false);
+    setItemOpened();
+  }, [isMobile]);
+
   const handleClickMobileMenu = () => {
     handleChangeMenuVisibility();
     trackGAEvent({
@@ -39,18 +63,20 @@ const HeaderMain = () => {
     <>
       {!isMobile && <UniversalNavbar />}
       {/* @ts-ignore */}
-      <HeaderMainWrapper breakpoint={breakpoint}>
+      <HeaderMainWrapper breakpoint={breakpoint} headerTop={headerTop}>
         <div className="container-xl">
           <div className={CLASS_NAMES.HEADER_MAIN}>
             <div
               className={buildClassName(
                 CLASS_NAMES.NAVBAR,
                 CLASS_NAMES.NAVBAR_EXPAND_XL,
-                isPartner && CLASS_NAMES.PARTNER
+                isPartner && CLASS_NAMES.PARTNER,
+                mobileMenuOpen && CLASS_NAMES.MOBILE_MENU_OPEN
               )}
             >
               {!isPartner && <Logo />}
               <button
+                ref={mobileMenuToggleRef}
                 className={buildClassName(
                   CLASS_NAMES.NAVBAR_TOGGLER,
                   !mobileMenuOpen && CLASS_NAMES.COLLAPSED
diff --git a/packages/component-header-footer/src/header/components/HeaderMain/index.styles.js b/packages/component-header-footer/src/header/components/HeaderMain/index.styles.js
index 1c24418e04..0127eefc11 100644
--- a/packages/component-header-footer/src/header/components/HeaderMain/index.styles.js
+++ b/packages/component-header-footer/src/header/components/HeaderMain/index.styles.js
@@ -12,6 +12,46 @@ const HeaderMainWrapper = styled.div`
     align-items: flex-start;
     flex-wrap: nowrap;
   }
+  .navbar.${CLASS_NAMES.MOBILE_MENU_OPEN} {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto auto;
+    grid-template-areas:
+      "logo . toggler"
+      "title title title"
+      "search search search"
+      "nav nav nav";
+
+    height: calc(100dvh - ${({ headerTop }) => headerTop}px);
+    overflow: hidden;
+    .navbar-brand {
+      grid-area: logo;
+      grid-column: 1;
+      grid-row: 1;
+    }
+    .navbar-toggler {
+      grid-area: toggler;
+      grid-column: 3;
+      grid-row: 1;
+    }
+    .${CLASS_NAMES.EXPAND_TITLE} {
+      grid-area: title;
+    }
+    & > * {
+      grid-column: 1;
+    }
+    & > form {
+      grid-area: search;
+    }
+    & > nav {
+      grid-area: nav;
+      display: grid;
+      grid-template-rows: 1fr auto;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+  }
   .navbar-brand {
     .${CLASS_NAMES.LOGO_VERT} {
       display: block;
@@ -79,6 +119,7 @@ const HeaderMainWrapper = styled.div`
       cursor: pointer;
       min-width: 44px;
       min-height: 44px;
+      padding: 0.25rem 0.45rem;
 
       .${CLASS_NAMES.MENU_SEARCH_ICON} {
         display: none;
diff --git a/packages/component-header-footer/src/header/components/UniversalNavbar/Login/index.js b/packages/component-header-footer/src/header/components/UniversalNavbar/Login/index.js
index 376a03389e..be4646ac36 100644
--- a/packages/component-header-footer/src/header/components/UniversalNavbar/Login/index.js
+++ b/packages/component-header-footer/src/header/components/UniversalNavbar/Login/index.js
@@ -3,7 +3,10 @@ import { trackGAEvent } from "@asu/shared";
 import React from "react";
 
 import { useAppContext } from "../../../core/context/app-context";
-import { CLASS_NAMES, buildClassName } from "../../../core/constants/classNames";
+import {
+  CLASS_NAMES,
+  buildClassName,
+} from "../../../core/constants/classNames";
 import { LoginWrapper } from "./index.styles";
 
 const DEFAUL_GA_EVENT = {
diff --git a/packages/component-header-footer/src/header/components/UniversalNavbar/Search/SearchInput.js b/packages/component-header-footer/src/header/components/UniversalNavbar/Search/SearchInput.js
index 195d5d6e3e..85db0ff97c 100644
--- a/packages/component-header-footer/src/header/components/UniversalNavbar/Search/SearchInput.js
+++ b/packages/component-header-footer/src/header/components/UniversalNavbar/Search/SearchInput.js
@@ -53,7 +53,10 @@ const SearchInput = ({
     return (
       <>
         {!hasInputValue && (
-          <FontAwesomeIcon className={CLASS_NAMES.SEARCH_ICON} icon={faSearch} />
+          <FontAwesomeIcon
+            className={CLASS_NAMES.SEARCH_ICON}
+            icon={faSearch}
+          />
         )}
         <input {...baseInputProps} />
         {hasInputValue && (
diff --git a/packages/component-header-footer/src/header/components/UniversalNavbar/Search/index.js b/packages/component-header-footer/src/header/components/UniversalNavbar/Search/index.js
index a6ba64cf6c..785c4f5ff1 100644
--- a/packages/component-header-footer/src/header/components/UniversalNavbar/Search/index.js
+++ b/packages/component-header-footer/src/header/components/UniversalNavbar/Search/index.js
@@ -29,7 +29,9 @@ const Search = () => {
   const [hasInputValue, setHasInputValue] = useState(false);
 
   useEffect(() => {
-    if (open && inputRef.current) inputRef.current.focus();
+    if (open && typeof inputRef?.current?.focus === "function") {
+      inputRef.current.focus();
+    }
   }, [open]);
 
   /**
diff --git a/packages/component-header-footer/src/header/components/UniversalNavbar/Search/index.styles.js b/packages/component-header-footer/src/header/components/UniversalNavbar/Search/index.styles.js
index 1646bce92f..3158d46b81 100644
--- a/packages/component-header-footer/src/header/components/UniversalNavbar/Search/index.styles.js
+++ b/packages/component-header-footer/src/header/components/UniversalNavbar/Search/index.styles.js
@@ -72,7 +72,7 @@ const SearchWrapper = styled.form`
   }
   @media (max-width: ${({ breakpoint }) => breakpoint}) {
     width: 100%;
-    padding: 1rem 1rem;
+    padding: 0 1rem 1rem;
     label {
       position: relative;
       font-size: 0.875rem;
diff --git a/packages/component-header-footer/src/header/components/UniversalNavbar/index.js b/packages/component-header-footer/src/header/components/UniversalNavbar/index.js
index e4c0d491ae..75e84bd39b 100644
--- a/packages/component-header-footer/src/header/components/UniversalNavbar/index.js
+++ b/packages/component-header-footer/src/header/components/UniversalNavbar/index.js
@@ -35,12 +35,18 @@ const UniversalNavbar = () => {
 
   const universalNavLinks = [
     {
-      className: buildClassName(CLASS_NAMES.NAV_LINK, CLASS_NAMES.VISUALLY_HIDDEN_FOCUSABLE),
+      className: buildClassName(
+        CLASS_NAMES.NAV_LINK,
+        CLASS_NAMES.VISUALLY_HIDDEN_FOCUSABLE
+      ),
       href: "#skip-to-content",
       text: "Skip to main content",
     },
     {
-      className: buildClassName(CLASS_NAMES.NAV_LINK, CLASS_NAMES.VISUALLY_HIDDEN_FOCUSABLE),
+      className: buildClassName(
+        CLASS_NAMES.NAV_LINK,
+        CLASS_NAMES.VISUALLY_HIDDEN_FOCUSABLE
+      ),
       href: `https://accessibility.asu.edu/report#a11yref=${getURL()}`,
       text: "Report an accessibility problem",
     },
diff --git a/packages/component-header-footer/src/header/components/UniversalNavbar/index.styles.js b/packages/component-header-footer/src/header/components/UniversalNavbar/index.styles.js
index 86a8c63495..cb49c5754e 100644
--- a/packages/component-header-footer/src/header/components/UniversalNavbar/index.styles.js
+++ b/packages/component-header-footer/src/header/components/UniversalNavbar/index.styles.js
@@ -80,6 +80,7 @@ const Wrapper = styled.div`
             display: flex;
             align-items: center;
             justify-content: center;
+            height: stretch;
 
             &.visually-hidden-focusable:not(:focus):not(:active) {
               border: none;
@@ -89,6 +90,14 @@ const Wrapper = styled.div`
       }
     }
   }
+
+  @media screen and (orientation: landscape) and (max-width: ${({
+      breakpoint,
+    }) => breakpoint}) {
+    .${CLASS_NAMES.HEADER_TOP} .nav .${CLASS_NAMES.LINKS_CONTAINER} {
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+    }
+  }
 `;
 
 export { Wrapper };
diff --git a/packages/component-header-footer/src/header/core/constants/classNames.js b/packages/component-header-footer/src/header/core/constants/classNames.js
index 1b2eb41a27..53b9fcc2df 100644
--- a/packages/component-header-footer/src/header/core/constants/classNames.js
+++ b/packages/component-header-footer/src/header/core/constants/classNames.js
@@ -1,4 +1,4 @@
-export const CLASS_PREFIX = 'uds-hdr-';
+export const CLASS_PREFIX = "uds-hdr-";
 
 // Custom class names used in the header component
 export const CLASS_NAMES = {
@@ -17,9 +17,10 @@ export const CLASS_NAMES = {
   OPEN: `${CLASS_PREFIX}open`,
 
   // Dropdown
-  HEADER_DROPDOWN: (id) => `${CLASS_PREFIX}header-dropdown-${id}`,
+  HEADER_DROPDOWN: id => `${CLASS_PREFIX}header-dropdown-${id}`,
   OPENED: `${CLASS_PREFIX}opened`,
   DROPDOWN_CONTAINER: `${CLASS_PREFIX}dropdown-container`,
+  DROPDOWN_CONTAINER_COLUMN: `${CLASS_PREFIX}dropdown-container-column`,
   DROPDOWN_BUTTON_CONTAINER: `${CLASS_PREFIX}dropdown-button-container`,
 
   // Search
@@ -58,24 +59,25 @@ export const CLASS_NAMES = {
   MENU_SEARCH_ICON: `${CLASS_PREFIX}menu-search-icon`,
   MENU_CLOSE_ICON: `${CLASS_PREFIX}menu-close-icon`,
 
-  NAVBAR: 'navbar',
-  NAVBAR_EXPAND_XL: 'navbar-expand-xl',
-  NAVBAR_BRAND: 'navbar-brand',
-  NAVBAR_TOGGLER: 'navbar-toggler',
-  NAVBAR_NAV: 'navbar-nav',
-  NAV_ITEM: 'nav-item',
-  COLLAPSED: 'collapsed',
-  CONTAINER: 'container',
-  CONTAINER_XL: 'container-xl',
-  FORM_CONTROL: 'form-control',
-  VISUALLY_HIDDEN: 'visually-hidden',
-  VISUALLY_HIDDEN_FOCUSABLE: 'visually-hidden-focusable',
+  NAVBAR: "navbar",
+  NAVBAR_EXPAND_XL: "navbar-expand-xl",
+  NAVBAR_BRAND: "navbar-brand",
+  NAVBAR_TOGGLER: "navbar-toggler",
+  NAVBAR_NAV: "navbar-nav",
+  NAV_ITEM: "nav-item",
+  COLLAPSED: "collapsed",
+  CONTAINER: "container",
+  CONTAINER_XL: "container-xl",
+  FORM_CONTROL: "form-control",
+  VISUALLY_HIDDEN: "visually-hidden",
+  VISUALLY_HIDDEN_FOCUSABLE: "visually-hidden-focusable",
+  MOBILE_MENU_OPEN: `${CLASS_PREFIX}mobile-menu-open`,
 };
 
 // Helper function to generate dropdown class name
-export const getDropdownClass = (id) => CLASS_NAMES.HEADER_DROPDOWN(id);
+export const getDropdownClass = id => CLASS_NAMES.HEADER_DROPDOWN(id);
 
 // Helper function to build class string
 export const buildClassName = (...classes) => {
-  return classes.filter(Boolean).join(' ');
+  return classes.filter(Boolean).join(" ");
 };
diff --git a/packages/component-header-footer/src/header/core/context/app-context.js b/packages/component-header-footer/src/header/core/context/app-context.js
index fb6ea5dd06..c965252e3d 100644
--- a/packages/component-header-footer/src/header/core/context/app-context.js
+++ b/packages/component-header-footer/src/header/core/context/app-context.js
@@ -1,7 +1,7 @@
 import PropTypes from "prop-types";
 import React, { createContext, useContext } from "react";
 
-import { HeaderPropTypes } from "../models/app-prop-types";
+import { HeaderContextPropTypes } from "../models/app-prop-types";
 
 const breakpoints = { Lg: "992px", Xl: "1260px" };
 
@@ -17,7 +17,7 @@ const AppContextProvider = ({ initialValue, children }) => {
 };
 
 AppContextProvider.propTypes = {
-  initialValue: PropTypes.shape(HeaderPropTypes).isRequired,
+  initialValue: PropTypes.shape(HeaderContextPropTypes).isRequired,
   children: PropTypes.node.isRequired,
 };
 
diff --git a/packages/component-header-footer/src/header/core/models/app-prop-types.js b/packages/component-header-footer/src/header/core/models/app-prop-types.js
index c1bace2e15..eea1471179 100644
--- a/packages/component-header-footer/src/header/core/models/app-prop-types.js
+++ b/packages/component-header-footer/src/header/core/models/app-prop-types.js
@@ -68,9 +68,20 @@ const HeaderPropTypes = {
   site: PropTypes.string,
   renderDiv: PropTypes.oneOf(["true", "false"]),
 };
+const HeaderContextPropTypes = {
+  ...HeaderPropTypes,
+  headerTop: PropTypes.number,
+  headerHeight: PropTypes.number,
+  itemOpened: PropTypes.number,
+  setItemOpened: PropTypes.func,
+  mobileMenuOpen: PropTypes.bool,
+  setMobileMenuOpen: PropTypes.func,
+  singlePageAppReset: PropTypes.func,
+};
 
 export {
   HeaderPropTypes,
+  HeaderContextPropTypes,
   LoginPropTypes,
   LogoPropTypes,
   TitlePropTypes,
diff --git a/packages/component-header-footer/src/header/core/models/types.js b/packages/component-header-footer/src/header/core/models/types.js
index 0b2bd38c04..2551f7d700 100644
--- a/packages/component-header-footer/src/header/core/models/types.js
+++ b/packages/component-header-footer/src/header/core/models/types.js
@@ -61,4 +61,15 @@
  * @property {string} renderDiv - Can be either "true" or "false".
  */
 
+/**
+ * @typedef {HeaderProps} HeaderContext
+ * @property {number} headerTop
+ * @property {number} headerHeight
+ * @property {number|undefined} itemOpened
+ * @property {function} setItemOpened
+ * @property {boolean} mobileMenuOpen
+ * @property {function} setMobileMenuOpen
+ * @property {function} singlePageAppReset
+ */
+
 export const JSDOC = "jsdoc";
diff --git a/packages/component-header-footer/src/header/core/utils/data-mock.js b/packages/component-header-footer/src/header/core/utils/data-mock.js
index 7f996155c4..1c91e3e96c 100644
--- a/packages/component-header-footer/src/header/core/utils/data-mock.js
+++ b/packages/component-header-footer/src/header/core/utils/data-mock.js
@@ -334,7 +334,7 @@ const navTreeMega = [
     href: "#",
   },
   {
-    text: "Link option 2",
+    text: "Col1",
     href: "/",
     items: [
       [
@@ -370,7 +370,7 @@ const navTreeMega = [
     ],
   },
   {
-    text: "Link option 3",
+    text: "Col2",
     href: "/",
     items: [
       [
@@ -434,7 +434,7 @@ const navTreeMega = [
     ],
   },
   {
-    text: "Link option 4",
+    text: "Col3",
     href: "#",
     items: [
       [
@@ -530,7 +530,7 @@ const navTreeMega = [
     ],
   },
   {
-    text: "Link option 5",
+    text: "A",
     href: "#",
     items: [
       [
@@ -599,6 +599,7 @@ const navTreeMega = [
           href: "https://asuonline.asu.edu/",
           type: "heading",
           text: "Column three",
+          span: 3,
         },
         {
           classes: "border first",
@@ -618,16 +619,106 @@ const navTreeMega = [
           text: "Polytechnic",
         },
         {
-          href: "https://campus.asu.edu/downtown/",
-          type: "button",
-          text: "Another Button",
+          classes: "border first",
+          href: "https://www.asu.edu/map/",
+          text: "Maps and Directions",
         },
-      ],
-      [
         {
-          href: "https://asuonline.asu.edu/",
-          type: "heading",
-          text: "Column four",
+          href: "https://campus.asu.edu/tempe/",
+          text: "Office of the technology",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "Office of the business",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Some longer text office of longtext",
+        },
+        {
+          classes: "border first",
+          href: "https://www.asu.edu/map/",
+          text: "University Technology Office",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Sun Devil Football",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "The School of Something",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Polytechnic",
+        },
+        {
+          classes: "border first",
+          href: "https://www.asu.edu/map/",
+          text: "Maps and Directions",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Office of the technology",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "Office of the business",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Some longer text office of longtext",
+        },
+        {
+          classes: "border first",
+          href: "https://www.asu.edu/map/",
+          text: "University Technology Office",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Sun Devil Football",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "The School of Something",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Polytechnic",
+        },
+        {
+          classes: "border first",
+          href: "https://www.asu.edu/map/",
+          text: "Maps and Directions",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Office of the technology",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "Office of the business",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Some longer text office of longtext",
+        },
+        {
+          classes: "border first",
+          href: "https://www.asu.edu/map/",
+          text: "University Technology Office",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Sun Devil Football",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "The School of Something",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Polytechnic",
         },
         {
           classes: "border first",
@@ -655,20 +746,8 @@ const navTreeMega = [
     ],
   },
   {
-    text: "Link option 6",
+    text: "B",
     href: "#",
-    buttons: [
-      {
-        text: "CTA One",
-        href: "https://asu.edu",
-        color: "maroon",
-      },
-      {
-        text: "CTA Two",
-        href: "https://asu.edu",
-        color: "gold",
-      },
-    ],
     items: [
       [
         {
@@ -678,7 +757,7 @@ const navTreeMega = [
         },
         {
           href: "https://havasu.asu.edu/",
-          text: "The Lake Havasu Campus",
+          text: "Lake Havasu",
         },
         {
           href: "https://www.thunderbird.edu/about-thunderbird/locations/phoenix-arizona",
@@ -701,13 +780,6 @@ const navTreeMega = [
           href: "https://wpcarey.asu.edu/mba/china-program/english/",
           text: "China",
         },
-        {
-          href: "https://campus.asu.edu/downtown/",
-          type: "button",
-          text: "Call to Action",
-        },
-      ],
-      [
         {
           href: "https://asuonline.asu.edu/",
           type: "heading",
@@ -733,7 +805,7 @@ const navTreeMega = [
         {
           href: "https://campus.asu.edu/downtown/",
           type: "button",
-          text: "Action Button",
+          text: "Action",
         },
       ],
       [
@@ -741,6 +813,7 @@ const navTreeMega = [
           href: "https://asuonline.asu.edu/",
           type: "heading",
           text: "Column three",
+          span: 3,
         },
         {
           classes: "border first",
@@ -760,16 +833,38 @@ const navTreeMega = [
           text: "Polytechnic",
         },
         {
-          href: "https://campus.asu.edu/downtown/",
-          type: "button",
-          text: "Another Button",
+          classes: "border first",
+          href: "https://www.asu.edu/map/",
+          text: "Maps and Directions",
         },
-      ],
-      [
         {
-          href: "https://asuonline.asu.edu/",
-          type: "heading",
-          text: "Column four",
+          href: "https://campus.asu.edu/tempe/",
+          text: "Office of the technology",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "Office of the business",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Some longer text office of longtext",
+        },
+        {
+          classes: "border first",
+          href: "https://www.asu.edu/map/",
+          text: "University Technology Office",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Sun Devil Football",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "The School of Something",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Polytechnic",
         },
         {
           classes: "border first",
@@ -789,30 +884,636 @@ const navTreeMega = [
           text: "Some longer text office of longtext",
         },
         {
-          href: "https://campus.asu.edu/downtown/",
-          type: "button",
-          text: "Downtown Phoenix",
+          classes: "border first",
+          href: "https://www.asu.edu/map/",
+          text: "University Technology Office",
         },
-      ],
-      [
         {
-          href: "https://asuonline.asu.edu/",
-          type: "heading",
-          text: "Column Five",
+          href: "https://campus.asu.edu/tempe/",
+          text: "Sun Devil Football",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "The School of Something",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Polytechnic",
         },
         {
           classes: "border first",
           href: "https://www.asu.edu/map/",
-          text: "Buildings and directory",
+          text: "Maps and Directions",
         },
         {
           href: "https://campus.asu.edu/tempe/",
-          text: "Some good news",
+          text: "Office of the technology",
         },
         {
           href: "https://campus.asu.edu/west/",
-          selected: true,
-          text: "Directory Admin Tools",
+          text: "Office of the business",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Some longer text office of longtext",
+        },
+        {
+          classes: "border first",
+          href: "https://www.asu.edu/map/",
+          text: "University Technology Office",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Sun Devil Football",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "The School of Something",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Polytechnic",
+        },
+        {
+          classes: "border first",
+          href: "https://www.asu.edu/map/",
+          text: "Maps and Directions",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Office of the technology",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "Office of the business",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Some longer text office of longtext",
+        },
+        {
+          href: "https://campus.asu.edu/downtown/",
+          type: "button",
+          text: "Downtown Phoenix",
+        },
+      ],
+    ],
+  },
+  {
+    text: "C",
+    href: "#",
+    buttons: [
+      {
+        text: "CTA One",
+        href: "https://asu.edu",
+        color: "maroon",
+      },
+      {
+        text: "CTA Two",
+        href: "https://asu.edu",
+        color: "gold",
+      },
+    ],
+    items: [
+      [
+        {
+          href: "https://asuonline.asu.edu/",
+          type: "heading",
+          text: "Menu One - span 2",
+          span: 2,
+        },
+        {
+          href: "https://havasu.asu.edu/",
+          text: "The Lake Havasu Campus",
+        },
+        {
+          href: "https://www.thunderbird.edu/about-thunderbird/locations/phoenix-arizona",
+          classes: "border",
+          text: "Thunderbird",
+        },
+        {
+          href: "https://skysong.asu.edu/",
+          text: "Skysong",
+        },
+        {
+          href: "https://asuresearchpark.com/",
+          text: "Research Park",
+        },
+        {
+          href: "https://washingtoncenter.asu.edu/",
+          text: "Washington D.C.",
+        },
+        {
+          href: "https://www.thunderbird.edu/about-thunderbird/locations/phoenix-arizona",
+          classes: "border",
+          text: "Thunderbird",
+        },
+        {
+          href: "https://skysong.asu.edu/",
+          text: "Skysong",
+        },
+        {
+          href: "https://asuresearchpark.com/",
+          text: "Research Park",
+        },
+        {
+          href: "https://washingtoncenter.asu.edu/",
+          text: "Washington D.C.",
+        },
+        {
+          href: "https://www.thunderbird.edu/about-thunderbird/locations/phoenix-arizona",
+          classes: "border",
+          text: "Thunderbird",
+        },
+        {
+          href: "https://skysong.asu.edu/",
+          text: "Skysong",
+        },
+        {
+          href: "https://asuresearchpark.com/",
+          text: "Research Park",
+        },
+        {
+          href: "https://washingtoncenter.asu.edu/",
+          text: "Washington D.C.",
+        },
+        {
+          href: "https://www.thunderbird.edu/about-thunderbird/locations/phoenix-arizona",
+          classes: "border",
+          text: "Thunderbird",
+        },
+        {
+          href: "https://skysong.asu.edu/",
+          text: "Skysong",
+        },
+        {
+          href: "https://asuresearchpark.com/",
+          text: "Research Park",
+        },
+        {
+          href: "https://washingtoncenter.asu.edu/",
+          text: "Washington D.C.",
+        },
+        {
+          href: "https://asuonline.asu.edu/",
+          type: "heading",
+          text: "Menu Two - type header, in same array - inherits span",
+        },
+        {
+          href: "https://www.asu.edu/map/",
+          text: "Faculty and Staff Directory",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "The Tempe Campus",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "Sun Devils and Things",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Another nav link",
+        },
+        {
+          href: "https://campus.asu.edu/downtown/",
+          type: "button",
+          text: "Action Button",
+        },
+      ],
+      [
+        {
+          href: "https://asuonline.asu.edu/",
+          type: "heading",
+          text: "Menu three - new array = new column",
+        },
+        {
+          href: "https://www.asu.edu/map/",
+          text: "University Technology Office",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Sun Devil Football",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "The School of Something",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Polytechnic",
+        },
+        {
+          href: "https://www.asu.edu/map/",
+          text: "University Technology Office",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Sun Devil Football",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "The School of Something",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Polytechnic",
+        },
+        {
+          href: "https://www.asu.edu/map/",
+          text: "University Technology Office",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Sun Devil Football",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "The School of Something",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Polytechnic",
+        },
+        {
+          href: "https://campus.asu.edu/downtown/",
+          type: "button",
+          text: "Another Button",
+        },
+      ],
+      [
+        {
+          href: "https://asuonline.asu.edu/",
+          type: "heading",
+          text: "Menu Four - new array = new column",
+        },
+        {
+          classes: "border first",
+          href: "https://www.asu.edu/map/",
+          text: "Maps and Directions",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Office of the technology",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "Office of the business",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Some longer text office of longtext",
+        },
+        {
+          href: "https://campus.asu.edu/downtown/",
+          // type: "button",
+          text: "Downtown Phoenix",
+        },
+        {
+          href: "https://asuonline.asu.edu/",
+          type: "heading",
+          text: "Column Five",
+        },
+        {
+          classes: "border first",
+          href: "https://www.asu.edu/map/",
+          text: "Buildings and directory",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Some good news",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          selected: true,
+          text: "Directory Admin Tools",
+        },
+      ],
+    ],
+  },
+
+  {
+    text: "D",
+    href: "#",
+    buttons: [
+      {
+        text: "CTA One",
+        href: "https://asu.edu",
+        color: "maroon",
+      },
+      {
+        text: "CTA Two",
+        href: "https://asu.edu",
+        color: "gold",
+      },
+    ],
+    items: [
+      [
+        {
+          href: "https://asuonline.asu.edu/",
+          type: "heading",
+          text: "Menu One - span 2",
+          span: 2,
+        },
+        {
+          href: "https://havasu.asu.edu/",
+          text: "The Lake Havasu Campus",
+        },
+        {
+          href: "https://www.thunderbird.edu/about-thunderbird/locations/phoenix-arizona",
+          classes: "border",
+          text: "Thunderbird",
+        },
+        {
+          href: "https://skysong.asu.edu/",
+          text: "Skysong",
+        },
+        {
+          href: "https://asuresearchpark.com/",
+          text: "Research Park",
+        },
+        {
+          href: "https://washingtoncenter.asu.edu/",
+          text: "Washington D.C.",
+        },
+        {
+          href: "https://www.thunderbird.edu/about-thunderbird/locations/phoenix-arizona",
+          classes: "border",
+          text: "Thunderbird",
+        },
+        {
+          href: "https://skysong.asu.edu/",
+          text: "Skysong",
+        },
+        {
+          href: "https://asuresearchpark.com/",
+          text: "Research Park",
+        },
+        {
+          href: "https://washingtoncenter.asu.edu/",
+          text: "Washington D.C.",
+        },
+        {
+          href: "https://www.thunderbird.edu/about-thunderbird/locations/phoenix-arizona",
+          classes: "border",
+          text: "Thunderbird",
+        },
+        {
+          href: "https://skysong.asu.edu/",
+          text: "Skysong",
+        },
+        {
+          href: "https://asuresearchpark.com/",
+          text: "Research Park",
+        },
+        {
+          href: "https://washingtoncenter.asu.edu/",
+          text: "Washington D.C.",
+        },
+        {
+          href: "https://asuonline.asu.edu/",
+          type: "heading",
+          text: "Menu Two - type header, in same array - inherits span",
+        },
+        {
+          href: "https://www.asu.edu/map/",
+          text: "Faculty and Staff Directory",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "The Tempe Campus",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "Sun Devils and Things",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Another nav link",
+        },
+        {
+          href: "https://campus.asu.edu/downtown/",
+          type: "button",
+          text: "Action Button",
+        },
+      ],
+      [
+        {
+          href: "https://asuonline.asu.edu/",
+          type: "heading",
+          text: "Menu three - span 3",
+          span: 3,
+        },
+        {
+          href: "https://www.asu.edu/map/",
+          text: "University Technology Office",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Sun Devil Football",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "The School of Something",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Polytechnic",
+        },
+        {
+          href: "https://www.asu.edu/map/",
+          text: "University Technology Office",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Sun Devil Football",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "The School of Something",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Polytechnic",
+        },
+        {
+          href: "https://www.asu.edu/map/",
+          text: "University Technology Office",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Sun Devil Football",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "The School of Something",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Polytechnic",
+        },
+        {
+          href: "https://asuonline.asu.edu/",
+          type: "heading",
+          text: "Menu Four",
+        },
+        {
+          classes: "border first",
+          href: "https://www.asu.edu/map/",
+          text: "Maps and Directions",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Office of the technology",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "Office of the business",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Some longer text office of longtext",
+        },
+        {
+          href: "https://campus.asu.edu/downtown/",
+          // type: "button",
+          text: "Downtown Phoenix",
+        },
+        {
+          classes: "border first",
+          href: "https://www.asu.edu/map/",
+          text: "Buildings and directory",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Some good news",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          selected: true,
+          text: "Directory Admin Tools",
+        },
+        {
+          href: "https://skysong.asu.edu/",
+          text: "Skysong",
+        },
+        {
+          href: "https://asuresearchpark.com/",
+          text: "Research Park",
+        },
+        {
+          href: "https://washingtoncenter.asu.edu/",
+          text: "Washington D.C.",
+        },
+        {
+          href: "https://www.thunderbird.edu/about-thunderbird/locations/phoenix-arizona",
+          classes: "border",
+          text: "Thunderbird",
+        },
+        {
+          href: "https://skysong.asu.edu/",
+          text: "Skysong",
+        },
+      ],
+    ],
+  },
+
+  {
+    text: "Col1",
+    href: "/",
+    items: [
+      [
+        {
+          href: "https://www.asu.edu/",
+          text: "A test navigation item",
+        },
+        {
+          href: "https://www.asu.edu/",
+          text: "Mauris viverra, sem nec",
+        },
+        {
+          href: "https://www.asu.edu/?feature=athletics",
+          text: "Massa nunc dictum nam venenatis",
+        },
+        {
+          href: "https://www.asu.edu/?feature=alumni",
+          text: "Alumni",
+        },
+        {
+          href: "https://www.asu.edu/?feature=giving",
+          text: "Giving",
+        },
+        {
+          href: "https://www.asu.edu/?feature=president",
+          text: "President",
+        },
+        {
+          href: "https://www.asu.edu/about",
+          text: "About ASU",
+        },
+      ],
+    ],
+  },
+  {
+    text: "Col2",
+    href: "/",
+    items: [
+      [
+        {
+          type: "heading",
+          text: "Column One",
+        },
+        {
+          href: "https://www.asu.edu/",
+          text: "Pellentesque ornare",
+        },
+        {
+          href: "https://www.asu.edu/",
+          text: "Curabitur viverra arcu nisl",
+        },
+        {
+          href: "https://www.asu.edu/?feature=athletics",
+          text: "Aenean pharetra",
+        },
+        {
+          href: "https://www.asu.edu/?feature=alumni",
+          text: "Pellentesque",
+        },
+        {
+          href: "https://www.asu.edu/?feature=giving",
+          text: "Donec sagittis nulla",
+        },
+        {
+          href: "https://www.asu.edu/?feature=president",
+          text: "Quisque fringilla",
+        },
+        {
+          href: "https://www.asu.edu/about",
+          text: "Integer vel gravida lectus",
+        },
+      ],
+      [
+        {
+          href: "https://www.asu.edu/?feature=newsevents",
+          type: "heading",
+          text: "Column two",
+        },
+        {
+          href: "https://www.asu.edu/?feature=academics",
+          text: "Nunc in libero odio",
+        },
+        {
+          href: "https://www.asu.edu/?feature=research",
+          text: "Maecenas quam elit",
+        },
+        {
+          href: "https://www.asu.edu/?feature=academics",
+          text: "Ut at vehicula neque",
+        },
+        {
+          href: "https://www.asu.edu/?feature=athletics",
+          type: "button",
+          text: "Sed molestie",
         },
       ],
     ],
diff --git a/packages/component-header-footer/src/header/header.js b/packages/component-header-footer/src/header/header.js
index 51630ba37e..d0e0affd9f 100644
--- a/packages/component-header-footer/src/header/header.js
+++ b/packages/component-header-footer/src/header/header.js
@@ -1,7 +1,7 @@
 // @ts-check
 import { trackReactComponent } from "@asu/shared";
 import { throttle } from "@asu/shared/utils/timers";
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 import { HeaderMain } from "./components/HeaderMain";
 import { AppContextProvider } from "./core/context/app-context";
@@ -51,6 +51,37 @@ const ASUHeader = ({
    * @type {React.MutableRefObject<HTMLDivElement?>}
    */
   const headerRef = useRef(null);
+  const mobileMenuToggleRef = useRef(null);
+
+  const [itemOpened, setStateItemOpened] = useState(undefined);
+  const [mobileMenuOpen, setStateMobileMenuOpen] = useState(false);
+  const [headerHeight, setHeaderHeight] = useState(150);
+  const [headerTop, setHeaderTop] = useState(0);
+
+  const setItemOpened = (openState = undefined) => {
+    setStateItemOpened(openState);
+  };
+
+  const setMobileMenuOpen = (openState = false) => {
+    if (
+      mobileMenuToggleRef?.current &&
+      typeof mobileMenuToggleRef.current.focus === "function"
+    ) {
+      mobileMenuToggleRef.current.focus();
+    }
+
+    setStateMobileMenuOpen(openState);
+  };
+
+  const singlePageAppReset = () => {
+    if (headerRef?.current) {
+      headerRef.current.focus();
+      window.scrollTo(0, 0);
+    }
+    setMobileMenuOpen();
+    setItemOpened();
+    document.body.style.overflow = "unset";
+  };
 
   const handleWindowScroll = () => {
     const curPos = window.scrollY;
@@ -60,6 +91,9 @@ const ASUHeader = ({
     } else {
       headerRef.current.classList.remove("scrolled");
     }
+
+    setHeaderTop(headerRef.current.getBoundingClientRect().top);
+    setHeaderHeight(headerRef.current.getBoundingClientRect().bottom);
   };
 
   useEffect(() => {
@@ -81,6 +115,13 @@ const ASUHeader = ({
     }
   }, []);
 
+  useEffect(() => {
+    if (headerRef?.current) {
+      setHeaderHeight(headerRef.current.getBoundingClientRect().bottom);
+      setHeaderTop(headerRef.current.getBoundingClientRect().top);
+    }
+  }, [headerRef, mobileMenuOpen]);
+
   useEffect(() => {
     const throttledScroll = () => throttle(handleWindowScroll, 100);
     window.addEventListener("scroll", throttledScroll);
@@ -125,6 +166,14 @@ const ASUHeader = ({
         mobileNavTree,
         hasNavigation: !!navTree?.length || !!mobileNavTree?.length,
         searchUrl,
+        headerTop,
+        headerHeight,
+        itemOpened,
+        setItemOpened,
+        mobileMenuOpen,
+        setMobileMenuOpen,
+        singlePageAppReset,
+        mobileMenuToggleRef,
         site,
       }}
     >
diff --git a/packages/component-header-footer/src/header/header.styles.js b/packages/component-header-footer/src/header/header.styles.js
index 5ee54f6277..da9a7bbf57 100644
--- a/packages/component-header-footer/src/header/header.styles.js
+++ b/packages/component-header-footer/src/header/header.styles.js
@@ -50,8 +50,7 @@ const Header = styled.header`
       a.${CLASS_NAMES.SUBUNIT_NAME} {
         margin: 0.52rem 0;
       }
-      a.${CLASS_NAMES.SUBUNIT_NAME},
-      a.${CLASS_NAMES.TITLE_SUBUNIT_NAME} {
+      a.${CLASS_NAMES.SUBUNIT_NAME}, a.${CLASS_NAMES.TITLE_SUBUNIT_NAME} {
         font-size: 1.5em;
         transition: 0.5s cubic-bezier(0.19, 1, 0.19, 1);
       }
@@ -117,8 +116,7 @@ const HeaderDiv = styled.div`
       a.${CLASS_NAMES.SUBUNIT_NAME} {
         margin: 0.52rem 0;
       }
-      a.${CLASS_NAMES.SUBUNIT_NAME},
-      a.${CLASS_NAMES.TITLE_SUBUNIT_NAME} {
+      a.${CLASS_NAMES.SUBUNIT_NAME}, a.${CLASS_NAMES.TITLE_SUBUNIT_NAME} {
         font-size: 1.5em;
         transition: 0.5s cubic-bezier(0.19, 1, 0.19, 1);
       }
diff --git a/packages/component-header-footer/src/header/index.stories.js b/packages/component-header-footer/src/header/index.stories.js
index 31a713f0d5..fe3a49a121 100644
--- a/packages/component-header-footer/src/header/index.stories.js
+++ b/packages/component-header-footer/src/header/index.stories.js
@@ -22,21 +22,71 @@ export default {
   },
 };
 
+const disabledText = "Disabled";
+const enabledText = "Enabled";
+
+function handlePageUnload(event) {
+  event.preventDefault();
+  event.returnValue = "";
+}
+
+function togglePageUnloadWarning(e) {
+  if (e.target.textContent === disabledText) {
+    window.addEventListener("beforeunload", handlePageUnload);
+    e.target.textContent = enabledText;
+  } else {
+    window.removeEventListener("beforeunload", handlePageUnload);
+    e.target.textContent = disabledText;
+  }
+}
+
 const Template = args => (
   <>
     <ASUHeader {...args} />
     <div
+      id="skip-to-content"
       style={{
         width: "100%",
         height: "200vh",
         background: "#f0f0f0",
         paddingTop: 40,
         marginTop: 140,
+        fontFamily: "Arial",
       }}
     >
-      <h1 style={{ textAlign: "center", fontFamily: "Arial" }}>
-        Scroll section
+      <h1 style={{ textAlign: "center" }}>
+        Scroll section to test header scroll behavior{" "}
+        {/* This button adds a page unload warning so clicking links will not navigate away. It also serves as a focus test for accessibility. */}
       </h1>
+      <div
+        style={{
+          maxWidth: "1200px",
+          width: "calc(100% - 4rem)",
+          padding: "2rem",
+          textAlign: "center",
+          margin: "2rem auto",
+        }}
+      >
+        <h2>Add Page Unload Warning</h2>
+        <p>
+          This button toggles a page unload warning that prompts the user to
+          confirm before leaving the page. This is useful for testing the
+          header's behavior when there is a potential for unintentionally
+          navigating away from the page.
+        </p>
+        <p>
+          This button also serves as a focusable element for testing
+          accessibility.
+        </p>
+        <p>
+          <Button
+            color="dark"
+            tabIndex={0}
+            onClick={togglePageUnloadWarning}
+            text={disabledText}
+          />
+        </p>
+      </div>
     </div>
   </>
 );
diff --git a/packages/shared/assets/img/named/index.js b/packages/shared/assets/img/named/index.js
index 7c827a071f..9b9b6342c7 100644
--- a/packages/shared/assets/img/named/index.js
+++ b/packages/shared/assets/img/named/index.js
@@ -20,7 +20,7 @@ import * as intro01 from "./intro01.jpg";
 import * as poly1 from "./poly01.jpg";
 import * as requestFormInformation from "./request-form-information.jpeg";
 import * as ws2DefaultImagev01Final from "./WS2-DefaultImagev01-Final.png";
-import * as moreGradsMoreInnovation from "./more-grads-more-innovation.png"
+import * as moreGradsMoreInnovation from "./more-grads-more-innovation.png";
 
 export const imageName = {
   anon: anon.default,
diff --git a/packages/unity-react-core/src/components/Button/Button.stories.jsx b/packages/unity-react-core/src/components/Button/Button.stories.jsx
index 6880a26c2a..8926f09781 100644
--- a/packages/unity-react-core/src/components/Button/Button.stories.jsx
+++ b/packages/unity-react-core/src/components/Button/Button.stories.jsx
@@ -281,45 +281,65 @@ export const AllVariants = () => (
   <div className="container-fluid">
     <div className="col col-sm-12 p-3">
       <h3>UDS Button Variants</h3>
+      <Button
+        label="Borderless"
+        variant="borderless"
+        color="gold"
+        onClick={handleClick}
+      />
+      <Button
+        label="Outline"
+        variant="outline"
+        color="gold"
+        onClick={handleClick}
+      />
+      <Button
+        label="Filled sm"
+        variant="filled"
+        color="gold"
+        onClick={handleClick}
+        size="small"
+      />
+      <Button
+        label="Filled md"
+        variant="filled"
+        color="gold"
+        onClick={handleClick}
+        size="medium"
+      />
+      <Button
+        label="Filled lg/default"
+        variant="filled"
+        color="gold"
+        onClick={handleClick}
+        size="large"
+      />
+      <h3>All Colors</h3>
+      <div style={{ display: "flex", gap: "1rem", flexWrap: "wrap" }}>
         <Button
-          label="Borderless"
-          variant="borderless"
-          color="gold"
-          onClick={handleClick}
-        />
-        <Button
-          label="Outline"
-          variant="outline"
+          label="Gold"
+          variant="filled"
           color="gold"
           onClick={handleClick}
         />
         <Button
-          label="Filled sm"
+          label="Maroon"
           variant="filled"
-          color="gold"
+          color="maroon"
           onClick={handleClick}
-          size="small"
         />
         <Button
-          label="Filled md"
+          label="Gray"
           variant="filled"
-          color="gold"
+          color="gray"
           onClick={handleClick}
-          size="medium"
         />
         <Button
-          label="Filled lg/default"
+          label="Dark"
           variant="filled"
-          color="gold"
+          color="dark"
           onClick={handleClick}
-          size="large"
         />
-      <h3>All Colors</h3>
-      <div style={{ display: "flex", gap: "1rem", flexWrap: "wrap" }}>
-        <Button label="Gold" variant="filled" color="gold" onClick={handleClick} />
-        <Button label="Maroon" variant="filled" color="maroon" onClick={handleClick} />
-        <Button label="Gray" variant="filled" color="gray" onClick={handleClick} />
-        <Button label="Dark" variant="filled" color="dark" onClick={handleClick} />
       </div>
     </div>
   </div>
@@ -332,4 +352,3 @@ AllVariants.parameters = {
   },
   controls: { disable: true },
 };
-
diff --git a/packages/unity-react-core/src/components/CardArrangement/CardArrangement.stories.jsx b/packages/unity-react-core/src/components/CardArrangement/CardArrangement.stories.jsx
index 36dd2ba001..03509e869a 100644
--- a/packages/unity-react-core/src/components/CardArrangement/CardArrangement.stories.jsx
+++ b/packages/unity-react-core/src/components/CardArrangement/CardArrangement.stories.jsx
@@ -5,7 +5,6 @@ import { CardArrangement } from "./CardArrangement";
 
 const img1 = imageAny();
 
-
 export default {
   title: "Components/Card Arrangement",
   component: CardArrangement,
@@ -198,25 +197,28 @@ const imageCards = [
     src: img1,
     alt: "Image card 1",
     captionTitle: "Image Card One",
-    caption: "This is the body content for the first image card with dropshadow and with cardLink prop provided. Card acts as anchor/link",
+    caption:
+      "This is the body content for the first image card with dropshadow and with cardLink prop provided. Card acts as anchor/link",
     border: true,
     dropShadow: true,
     cardLink: "https://example.com",
-    title: "example"
+    title: "example",
   },
   {
     type: "image",
     src: img1,
     alt: "Image card 2",
     captionTitle: "Image Card Two",
-    caption: "This is the body content for the second image card with no border",
+    caption:
+      "This is the body content for the second image card with no border",
   },
   {
     type: "image",
     src: img1,
     alt: "Image card 3",
     captionTitle: "Image Card Three",
-    caption: "This is the body content for the third image card with no drop shadow.",
+    caption:
+      "This is the body content for the third image card with no drop shadow.",
     border: true,
     dropShadow: false,
   },
diff --git a/packages/unity-react-core/src/components/ContentSpotlight/ContentSpotlight.stories.jsx b/packages/unity-react-core/src/components/ContentSpotlight/ContentSpotlight.stories.jsx
index 899824a178..997002d842 100644
--- a/packages/unity-react-core/src/components/ContentSpotlight/ContentSpotlight.stories.jsx
+++ b/packages/unity-react-core/src/components/ContentSpotlight/ContentSpotlight.stories.jsx
@@ -1,7 +1,7 @@
 // @ts-check
 import React from "react";
 import { ContentSpotlight } from "./ContentSpotlight";
-import {imageName} from "@asu/shared";
+import { imageName } from "@asu/shared";
 
 export default {
   title: "Components/ContentSpotlight",