From 2d6efe5164511ae1d5db001f02efe0e299404301 Mon Sep 17 00:00:00 2001
From: Scott Williams <5209283+scott-williams-az@users.noreply.github.com>
Date: Wed, 18 Feb 2026 11:35:39 -0700
Subject: [PATCH 1/7] feat(component-header-footer): add multi column dropdown,
 limit mega menu width

---
 .../components/controls/controls-helpers.js   |   7 +-
 .../app-webdir-ui/src/QuickLinks/index.js     |   1 -
 .../src/components/Contact/index.js           |   7 +-
 .../src/components/Social/index.js            |   8 +-
 .../.storybook/main.js                        |  24 +-
 .../src/header/components/Button/index.js     |   7 +-
 .../NavbarContainer/DropdownItem/index.js     | 110 ++-
 .../DropdownItem/index.styles.js              |  61 +-
 .../NavbarContainer/NavItem/index.js          |  20 +-
 .../NavbarContainer/NavItem/index.styles.js   |   9 +-
 .../src/header/components/HeaderMain/index.js |  11 +-
 .../components/HeaderMain/index.styles.js     |   2 +-
 .../UniversalNavbar/Search/index.js           |  30 +-
 .../src/header/core/constants/classNames.js   |   1 +
 .../src/header/core/utils/data-mock.js        | 809 ++++++++++++++++--
 .../src/header/index.stories.js               |  54 +-
 16 files changed, 1026 insertions(+), 135 deletions(-)

diff --git a/packages/app-rfi/src/components/controls/controls-helpers.js b/packages/app-rfi/src/components/controls/controls-helpers.js
index 60f8e18060..6c80e4e423 100644
--- a/packages/app-rfi/src/components/controls/controls-helpers.js
+++ b/packages/app-rfi/src/components/controls/controls-helpers.js
@@ -15,7 +15,12 @@ const GaEventPropTypes = {
   text: PropTypes.string,
 };
 
-const RfiLabel = ({ label, name, id = undefined, requiredIcon = undefined }) => (
+const RfiLabel = ({
+  label,
+  name,
+  id = undefined,
+  requiredIcon = undefined,
+}) => (
   <label htmlFor={id || name}>
     {requiredIcon && (
       <>
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..c9c488b3c8 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
@@ -29,11 +29,12 @@ const ButtonItem = ({ link, dropdownName, handleLinkEvent }) => (
   <li 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,7 +73,7 @@ LinkItem.propTypes = {
  * @typedef { import("../../../../core/models/types").Button } Button
  * @typedef {{
  *  dropdownName: string
- *  items: [object][]
+ *  items: Array<Array<object>>
  *  buttons: Button[]
  *  classes?: string,
  *  listId: string
@@ -95,7 +96,12 @@ const DropdownItem = ({
   parentLink,
 }) => {
   const { breakpoint } = useAppContext();
-  const isMega = items?.length > 2;
+  let cols = 0;
+  items.map(lists => {
+    cols += lists[0].span || 1;
+  });
+
+  const isMega = cols > 2;
   /**
    * @type {React.MutableRefObject<HTMLDivElement|null>}
    */
@@ -119,14 +125,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") {
@@ -137,7 +142,9 @@ const DropdownItem = ({
       focusPrevLink();
     } else if (key === "Escape") {
       setItemOpened();
-      if (parentLink?.current) parentLink.current.focus();
+      if (typeof parentLink?.current?.focus === "function") {
+        parentLink.current.focus();
+      }
     } else if (key === "Enter" || key === " " || type === "click") {
       link?.onClick?.(e);
       trackGAEvent({ ...LINK_DEFAULT_PROPS, text: link.text });
@@ -145,7 +152,7 @@ const DropdownItem = ({
   };
 
   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")
@@ -175,16 +182,66 @@ const DropdownItem = ({
       }`}
       breakpoint={breakpoint}
     >
-      <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 +265,20 @@ 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,
   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..ef6035000d 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,17 +30,23 @@ const DropdownWrapper = styled.div`
   > .${CLASS_NAMES.DROPDOWN_CONTAINER} {
     max-width: 1200px;
     margin: 0 auto;
+    max-height: 50vh;
+    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));
+      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} {
@@ -50,11 +56,15 @@ const DropdownWrapper = styled.div`
         font-weight: 700;
         text-align: left;
         opacity: 1;
-        margin: 1rem 0;
+        margin: 0;
+        margin-bottom: -1.5rem;
         line-height: calc(100% + 0.12em);
       }
       .${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 +78,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 +88,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;
+    border-top: 1px solid #d0d0d0;
+    border-bottom: 1px solid #d0d0d0;
     > div {
       max-width: 1200px;
       margin: 0 auto;
       display: flex;
-      padding: 1rem 0;
+      padding: 1rem 2rem;
     }
   }
   @media (max-width: ${({ breakpoint }) => breakpoint}) {
@@ -99,12 +118,19 @@ const DropdownWrapper = styled.div`
     }
     > .${CLASS_NAMES.DROPDOWN_CONTAINER} {
       max-width: 100%;
+      max-height: unset;
+      overflow-y: unset;
+      overflow-x: unset;
       padding: 1rem 2rem;
       flex-direction: column;
+
+      .${CLASS_NAMES.DROPDOWN_CONTAINER_COLUMN} {
+        width: 100%;
+      }
       ul {
         width: 100%;
         max-width: 100%;
-        padding: 0 1rem;
+        padding: 0;
         margin-bottom: 1rem;
         &:not(:last-child) {
           padding-right: 1rem;
@@ -118,6 +144,7 @@ const DropdownWrapper = styled.div`
           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..24161b488b 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
@@ -147,28 +147,30 @@ 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;
       }
       // 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();
           }
         }
       }
@@ -228,7 +230,7 @@ const NavItem = ({ link, setItemOpened, itemOpened }) => {
           classes={buildClassName(getDropdownClass(link.id), opened && CLASS_NAMES.OPENED)}
           listId={`dropdown-${link.id}`}
           setItemOpened={setItemOpened}
-          parentLink={parentLink?.current}
+          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 0e2dbb48da..805b398e44 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`
@@ -15,6 +15,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/index.js b/packages/component-header-footer/src/header/components/HeaderMain/index.js
index e6c731fecb..68d3b6117f 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";
@@ -25,6 +25,15 @@ const HeaderMain = () => {
     setMobileMenuOpen(prevState => !prevState);
   };
 
+  useEffect(() => {
+    document.body.style.overflow = mobileMenuOpen ? "hidden" : "unset";
+
+    // Clean up function to re-enable scrolling
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [mobileMenuOpen]);
+
   const handleClickMobileMenu = () => {
     handleChangeMenuVisibility();
     trackGAEvent({
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 f90c1b774a..4df140e00e 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
@@ -47,7 +47,6 @@ const HeaderMainWrapper = styled.div`
       justify-content: space-between;
       &.${CLASS_NAMES.PARTNER} {
         flex-direction: row-reverse;
-        flex-wrap: nowrap;
       }
     }
     .${CLASS_NAMES.PARTNER} .${CLASS_NAMES.CONTENT_CONTAINER} {
@@ -80,6 +79,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/Search/index.js b/packages/component-header-footer/src/header/components/UniversalNavbar/Search/index.js
index a6ba64cf6c..f70c8e722a 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]);
 
   /**
@@ -92,18 +94,20 @@ const Search = () => {
     >
       {!isMobile ? (
         <>
-          {!open && (
-            <button
-              type="button"
-              aria-label="Search asu.edu"
-              onClick={handleChangeVisibility}
-              className={CLASS_NAMES.SEARCH_BUTTON}
-              data-testid="search-button"
-            >
-              <span>Search</span>
-              <FontAwesomeIcon icon={faSearch} />
-            </button>
-          )}
+        {
+          !open && (
+          <button
+            type="button"
+            aria-label="Search asu.edu"
+            onClick={handleChangeVisibility}
+            className={CLASS_NAMES.SEARCH_BUTTON}
+            data-testid="search-button"
+          >
+            <span
+            >Search</span>
+            <FontAwesomeIcon icon={faSearch} />
+          </button>
+)}
           {open && (
             <>
               <SearchInput
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..225bb69f9a 100644
--- a/packages/component-header-footer/src/header/core/constants/classNames.js
+++ b/packages/component-header-footer/src/header/core/constants/classNames.js
@@ -20,6 +20,7 @@ export const CLASS_NAMES = {
   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
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/index.stories.js b/packages/component-header-footer/src/header/index.stories.js
index 3e15d165fc..e416cda09d 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>
   </>
 );

From f196de70bff89f8448b7a1adeba21ad5cf631e34 Mon Sep 17 00:00:00 2001
From: Scott Williams <5209283+scott-williams-az@users.noreply.github.com>
Date: Wed, 18 Feb 2026 12:05:07 -0700
Subject: [PATCH 2/7] linting

---
 packages/shared/assets/img/named/index.js     |  2 +-
 .../src/components/Button/Button.stories.jsx  | 67 ++++++++++++-------
 .../CardArrangement.stories.jsx               | 12 ++--
 .../ContentSpotlight.stories.jsx              |  2 +-
 4 files changed, 52 insertions(+), 31 deletions(-)

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",

From 83cf51112071930b2c06231022769de846d9cf95 Mon Sep 17 00:00:00 2001
From: Scott Williams <5209283+scott-williams-az@users.noreply.github.com>
Date: Wed, 18 Feb 2026 15:28:41 -0700
Subject: [PATCH 3/7] fix resolving merge

---
 .../components/HeaderMain/NavbarContainer/DropdownItem/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 c9c488b3c8..3f7829b96f 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
@@ -26,7 +26,7 @@ HeadingItem.propTypes = {
 };
 
 const ButtonItem = ({ link, dropdownName, handleLinkEvent }) => (
-  <li className={CLASS_NAMES.NAV_BUTTON}>
+  <div className={CLASS_NAMES.NAV_BUTTON}>
     <Button
       text={link.text}
       color={link.color || "maroon"}

From d03f8222f8dddd7242411eafb6394586cde41dbe Mon Sep 17 00:00:00 2001
From: Scott Williams <5209283+scott-williams-az@users.noreply.github.com>
Date: Wed, 18 Feb 2026 16:02:20 -0700
Subject: [PATCH 4/7] fix resolving merge

---
 .../NavbarContainer/DropdownItem/index.styles.js   | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

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 ef6035000d..61d8892ba7 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
@@ -49,6 +49,8 @@ const DropdownWrapper = styled.div`
       &:not(:last-child) {
         border-right: 1px solid ${ASU_GRAY5};
       }
+    }
+
       .${CLASS_NAMES.UL_HEADING} {
         margin-top: 0;
         font-size: 1.5rem;
@@ -60,6 +62,18 @@ const DropdownWrapper = styled.div`
         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);
+      // max-width: 282px;
+      display: flex;
+      flex-direction: row;
+      column-gap: var(--ul-gap);
+      flex-wrap: wrap;
       .${CLASS_NAMES.NAV_LINK} {
         padding: 0;
         flex-basis: calc(

From 1092b8b4339d846df77f3d3d18f9ec571aeae5ba Mon Sep 17 00:00:00 2001
From: Scott Williams <5209283+scott-williams-az@users.noreply.github.com>
Date: Thu, 19 Feb 2026 11:47:57 -0700
Subject: [PATCH 5/7] feat(component-header-footer): adjust dropdown open/close
 and height

---
 .../NavbarContainer/DropdownItem/index.js     |  7 ++--
 .../DropdownItem/index.styles.js              | 25 ++++++++-------
 .../NavbarContainer/NavItem/index.js          | 24 +++++++++++---
 .../HeaderMain/NavbarContainer/index.js       | 12 +++++--
 .../HeaderMain/NavbarContainer/index.test.js  |  6 ++--
 .../components/HeaderMain/Title/index.js      | 15 +++++++--
 .../HeaderMain/Title/index.styles.js          |  7 ++--
 .../components/UniversalNavbar/Login/index.js |  5 ++-
 .../UniversalNavbar/Search/SearchInput.js     |  5 ++-
 .../UniversalNavbar/Search/index.js           | 26 +++++++--------
 .../components/UniversalNavbar/index.js       | 10 ++++--
 .../src/header/core/constants/classNames.js   | 32 +++++++++----------
 .../src/header/core/context/app-context.js    |  4 +--
 .../src/header/core/models/app-prop-types.js  |  5 +++
 .../src/header/core/models/types.js           |  5 +++
 .../src/header/header.js                      | 11 ++++++-
 .../src/header/header.styles.js               |  6 ++--
 17 files changed, 134 insertions(+), 71 deletions(-)

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 3f7829b96f..80603953ac 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,7 +19,9 @@ 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,
@@ -95,7 +97,7 @@ const DropdownItem = ({
   setItemOpened,
   parentLink,
 }) => {
-  const { breakpoint } = useAppContext();
+  const { breakpoint, headerHeight } = useAppContext();
   let cols = 0;
   items.map(lists => {
     cols += lists[0].span || 1;
@@ -181,6 +183,7 @@ const DropdownItem = ({
         isMega ? " mega" : ""
       }`}
       breakpoint={breakpoint}
+      headerHeight={headerHeight}
     >
       <div
         style={{ "--cols": cols < 3 ? 4 : cols }}
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 61d8892ba7..def2595c16 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
@@ -30,7 +30,7 @@ const DropdownWrapper = styled.div`
   > .${CLASS_NAMES.DROPDOWN_CONTAINER} {
     max-width: 1200px;
     margin: 0 auto;
-    max-height: 50vh;
+    max-height: calc(80vh - ${({ headerHeight }) => headerHeight}px - 2rem);
     overflow-y: auto;
     overflow-x: hidden;
     display: flex;
@@ -40,6 +40,7 @@ const DropdownWrapper = styled.div`
       --span: 1; /* component overrides using inline style */
       --col: 1; /* component overrides using inline style */
       width: calc(1200px / var(--cols) * var(--span));
+      height: fit-content;
       padding: var(--gap);
       display: flex;
       flex-direction: column;
@@ -51,17 +52,17 @@ const DropdownWrapper = styled.div`
       }
     }
 
-      .${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);
-      }
+    .${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) {
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 24161b488b..d825084f04 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>
     </>
   );
@@ -86,7 +94,7 @@ const NavItem = ({ link, setItemOpened, itemOpened }) => {
       document.removeEventListener("click", handleClickOutside, true);
       document.removeEventListener("focusin", handleFocusChange);
     };
-  }, [opened]);
+  }, [opened, setItemOpened]);
 
   const renderNavLinks = useMemo(() => {
     if (link.type === "icon-home") {
@@ -99,7 +107,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=""
           />
@@ -227,7 +238,10 @@ 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}
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..98a118dec7 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
@@ -19,7 +19,12 @@ const NavbarContainer = () => {
   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 +74,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.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..3910c0fc13 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
@@ -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/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 f70c8e722a..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
@@ -94,20 +94,18 @@ const Search = () => {
     >
       {!isMobile ? (
         <>
-        {
-          !open && (
-          <button
-            type="button"
-            aria-label="Search asu.edu"
-            onClick={handleChangeVisibility}
-            className={CLASS_NAMES.SEARCH_BUTTON}
-            data-testid="search-button"
-          >
-            <span
-            >Search</span>
-            <FontAwesomeIcon icon={faSearch} />
-          </button>
-)}
+          {!open && (
+            <button
+              type="button"
+              aria-label="Search asu.edu"
+              onClick={handleChangeVisibility}
+              className={CLASS_NAMES.SEARCH_BUTTON}
+              data-testid="search-button"
+            >
+              <span>Search</span>
+              <FontAwesomeIcon icon={faSearch} />
+            </button>
+          )}
           {open && (
             <>
               <SearchInput
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/core/constants/classNames.js b/packages/component-header-footer/src/header/core/constants/classNames.js
index 225bb69f9a..1ed51e9ca6 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,7 +17,7 @@ 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`,
@@ -59,24 +59,24 @@ 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",
 };
 
 // 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..7afa4ef661 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,14 @@ const HeaderPropTypes = {
   site: PropTypes.string,
   renderDiv: PropTypes.oneOf(["true", "false"]),
 };
+const HeaderContextPropTypes = {
+  ...HeaderPropTypes,
+  headerHeight: [PropTypes.number],
+};
 
 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..c2ef37e22d 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,9 @@
  * @property {string} renderDiv - Can be either "true" or "false".
  */
 
+/**
+ * @typedef {HeaderProps} HeaderContext
+ * @property {number} headerHeight
+ */
+
 export const JSDOC = "jsdoc";
diff --git a/packages/component-header-footer/src/header/header.js b/packages/component-header-footer/src/header/header.js
index 51630ba37e..c0dc0bd69b 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,7 @@ const ASUHeader = ({
    * @type {React.MutableRefObject<HTMLDivElement?>}
    */
   const headerRef = useRef(null);
+  const [headerHeight, setHeaderHeight] = useState(150);
 
   const handleWindowScroll = () => {
     const curPos = window.scrollY;
@@ -60,6 +61,7 @@ const ASUHeader = ({
     } else {
       headerRef.current.classList.remove("scrolled");
     }
+    setHeaderHeight(headerRef.current.getBoundingClientRect().bottom);
   };
 
   useEffect(() => {
@@ -81,6 +83,12 @@ const ASUHeader = ({
     }
   }, []);
 
+  useEffect(() => {
+    if (headerRef?.current) {
+      setHeaderHeight(headerRef.current.getBoundingClientRect().bottom);
+    }
+  }, [headerRef]);
+
   useEffect(() => {
     const throttledScroll = () => throttle(handleWindowScroll, 100);
     window.addEventListener("scroll", throttledScroll);
@@ -125,6 +133,7 @@ const ASUHeader = ({
         mobileNavTree,
         hasNavigation: !!navTree?.length || !!mobileNavTree?.length,
         searchUrl,
+        headerHeight,
         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);
       }

From 5c368450bde86bff8eeb19d6e1862790f7052f9b Mon Sep 17 00:00:00 2001
From: Scott Williams <5209283+scott-williams-az@users.noreply.github.com>
Date: Thu, 19 Feb 2026 12:58:21 -0700
Subject: [PATCH 6/7] feat(component-header-footer): mobile styles

---
 .../NavbarContainer/DropdownItem/index.js     | 13 +++++++
 .../DropdownItem/index.styles.js              |  3 +-
 .../NavbarContainer/NavItem/index.js          | 39 +++++++++++--------
 3 files changed, 37 insertions(+), 18 deletions(-)

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 80603953ac..b6693ba154 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
@@ -79,6 +79,7 @@ LinkItem.propTypes = {
  *  buttons: Button[]
  *  classes?: string,
  *  listId: string
+ *  opened: boolean
  *  setItemOpened: Function
  *  parentLink: React.RefObject<HTMLElement> | null
  * }} DropdownItemProps
@@ -94,6 +95,7 @@ const DropdownItem = ({
   buttons,
   classes,
   listId,
+  opened,
   setItemOpened,
   parentLink,
 }) => {
@@ -118,6 +120,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();
 
@@ -280,6 +292,7 @@ DropdownItem.propTypes = {
   buttons: PropTypes.arrayOf(PropTypes.shape(ButtonPropTypes)),
   classes: PropTypes.string,
   listId: PropTypes.string,
+  opened: PropTypes.bool,
   setItemOpened: PropTypes.func,
   parentLink: PropTypes.shape({
     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 def2595c16..f334082d9b 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
@@ -48,7 +48,7 @@ const DropdownWrapper = styled.div`
       row-gap: var(--gap);
 
       &:not(:last-child) {
-        border-right: 1px solid ${ASU_GRAY5};
+
       }
     }
 
@@ -141,6 +141,7 @@ const DropdownWrapper = styled.div`
 
       .${CLASS_NAMES.DROPDOWN_CONTAINER_COLUMN} {
         width: 100%;
+        border-right: unset;
       }
       ul {
         width: 100%;
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 d825084f04..e8dc245053 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
@@ -71,25 +71,29 @@ const NavItem = ({ link, setItemOpened, itemOpened }) => {
   const { breakpoint, expandOnHover, title } = 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);
@@ -243,6 +247,7 @@ const NavItem = ({ link, setItemOpened, itemOpened }) => {
             opened && CLASS_NAMES.OPENED
           )}
           listId={`dropdown-${link.id}`}
+          opened={opened}
           setItemOpened={setItemOpened}
           parentLink={parentLink}
         />

From 7fbe4e7705948e5eed11f8797e3d17c3a9941af9 Mon Sep 17 00:00:00 2001
From: Scott Williams <5209283+scott-williams-az@users.noreply.github.com>
Date: Thu, 19 Feb 2026 13:05:57 -0700
Subject: [PATCH 7/7] feat(component-header-footer): add style that was removed

---
 .../HeaderMain/NavbarContainer/DropdownItem/index.styles.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 f334082d9b..83c0192833 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
@@ -48,7 +48,7 @@ const DropdownWrapper = styled.div`
       row-gap: var(--gap);
 
       &:not(:last-child) {
-
+        border-right: 1px solid ${ASU_GRAY5};
       }
     }