From c18af3b18ad8349f443fe62f605682d19d65e8ac Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Fri, 7 Nov 2025 13:42:33 +0100
Subject: [PATCH 01/23] new header component added

---
 packages/lib/src/base-menu/GroupItem.tsx      |  18 +-
 packages/lib/src/base-menu/ItemAction.tsx     |  25 ++-
 packages/lib/src/base-menu/MenuItem.tsx       |   1 +
 packages/lib/src/base-menu/Section.tsx        |   4 +-
 packages/lib/src/base-menu/SubMenu.tsx        |  40 +++-
 packages/lib/src/base-menu/types.ts           |  17 +-
 packages/lib/src/base-menu/useGroupItem.ts    |   3 +-
 packages/lib/src/base-menu/useItemAction.ts   |   5 +-
 packages/lib/src/contextual-menu/types.ts     |   4 +-
 .../lib/src/navigation-tree/GroupItem.tsx     |   6 +-
 .../src/navigation-tree/NavigationTree.tsx    |  10 +-
 .../lib/src/new-header/new-header.stories.tsx |  70 ++++++
 packages/lib/src/new-header/new-header.tsx    | 212 ++++++++++++++++++
 packages/lib/src/new-header/types.tsx         |  25 +++
 packages/lib/src/sidenav/Sidenav.tsx          |   2 +-
 15 files changed, 400 insertions(+), 42 deletions(-)
 create mode 100644 packages/lib/src/new-header/new-header.stories.tsx
 create mode 100644 packages/lib/src/new-header/new-header.tsx
 create mode 100644 packages/lib/src/new-header/types.tsx

diff --git a/packages/lib/src/base-menu/GroupItem.tsx b/packages/lib/src/base-menu/GroupItem.tsx
index db9c6b328..e72c73bf4 100644
--- a/packages/lib/src/base-menu/GroupItem.tsx
+++ b/packages/lib/src/base-menu/GroupItem.tsx
@@ -13,10 +13,10 @@ const GroupItem = ({ items, ...props }: GroupItemProps) => {
 
   const NavigationTreeId = `sidenav-${useId()}`;
   const contextValue = useContext(BaseMenuContext) ?? {};
-  const { groupSelected, isOpen, toggleOpen, responsiveView } = useGroupItem(items, contextValue);
+  const { groupSelected, isOpen, toggleOpen, hasPopOver, isHorizontal } = useGroupItem(items, contextValue);
 
   // TODO: SET A FIXED WIDTH TO PREVENT MOVING CONTENT WHEN EXPANDING/COLLAPSING IN RESPONSIVEVIEW
-  return responsiveView ? (
+  return hasPopOver ? (
     <>
       <Popover.Root open={isOpen}>
         <Popover.Trigger
@@ -37,7 +37,7 @@ const GroupItem = ({ items, ...props }: GroupItemProps) => {
           />
         </Popover.Trigger>
         <Popover.Portal container={document.getElementById(`${NavigationTreeId}-portal`)}>
-          <BaseMenuContext.Provider value={{ ...contextValue, displayGroupLines: false, responsiveView: false }}>
+          <BaseMenuContext.Provider value={{ ...contextValue, displayGroupLines: false, hasPopOver: false }}>
             <Popover.Content
               aria-label="Group details"
               onCloseAutoFocus={(event) => {
@@ -47,12 +47,18 @@ const GroupItem = ({ items, ...props }: GroupItemProps) => {
                 event.preventDefault();
               }}
               align="start"
-              side="right"
+              side={isHorizontal ? "bottom" : "right"}
               style={{ zIndex: "var(--z-contextualmenu)" }}
+              sideOffset={isHorizontal ? 16 : 0}
+              onInteractOutside={isHorizontal ? () => toggleOpen() : undefined}
             >
-              <SubMenu id={groupMenuId} depthLevel={props.depthLevel}>
+              <SubMenu id={groupMenuId} depthLevel={props.depthLevel} isPopOver={true}>
                 {items.map((item, index) => (
-                  <MenuItem item={item} depthLevel={props.depthLevel + 1} key={`${item.label}-${index}`} />
+                  <MenuItem
+                    item={item}
+                    depthLevel={isHorizontal ? props.depthLevel : props.depthLevel + 1}
+                    key={`${item.label}-${index}`}
+                  />
                 ))}
               </SubMenu>
             </Popover.Content>
diff --git a/packages/lib/src/base-menu/ItemAction.tsx b/packages/lib/src/base-menu/ItemAction.tsx
index 681e24bbf..5b22aa878 100644
--- a/packages/lib/src/base-menu/ItemAction.tsx
+++ b/packages/lib/src/base-menu/ItemAction.tsx
@@ -9,19 +9,20 @@ const Action = styled.button<{
   depthLevel: ItemActionProps["depthLevel"];
   selected: ItemActionProps["selected"];
   displayGroupLines: boolean;
-  responsiveView?: boolean;
+  hasPopOver?: boolean;
+  isHorizontal?: boolean;
 }>`
   box-sizing: content-box;
   border: none;
   border-radius: var(--border-radius-s);
-  ${({ displayGroupLines, depthLevel, responsiveView }) => `
-    ${!responsiveView ? `padding: var(--spacing-padding-xxs) var(--spacing-padding-xxs) var(--spacing-padding-xxs) calc(var(--spacing-padding-xs) + ${!displayGroupLines ? depthLevel : 0} * var(--spacing-padding-l))` : "padding: var(--spacing-padding-xxs) var(--spacing-padding-none)"};
+  ${({ displayGroupLines, depthLevel, hasPopOver, isHorizontal }) => `
+    ${!hasPopOver || isHorizontal ? `padding: var(--spacing-padding-xxs) var(--spacing-padding-xxs) var(--spacing-padding-xxs) calc(var(--spacing-padding-xs) + ${!displayGroupLines ? depthLevel : 0} * var(--spacing-padding-l))` : "padding: var(--spacing-padding-xxs) var(--spacing-padding-none)"};
     ${displayGroupLines && depthLevel > 0 ? "margin-left: var(--spacing-padding-xs);" : ""}
   `}
   display: flex;
   align-items: center;
   gap: var(--spacing-gap-m);
-  justify-content: ${({ responsiveView }) => (responsiveView ? "center" : "space-between")};
+  justify-content: ${({ hasPopOver }) => (hasPopOver ? "center" : "space-between")};
   background-color: ${({ selected }) => (selected ? "var(--color-bg-primary-lighter)" : "transparent")};
   height: var(--height-s);
   cursor: pointer;
@@ -84,8 +85,9 @@ const ItemAction = memo(
       hasTooltip,
       modifiedBadge,
       displayControlsAfter,
-      responsiveView,
+      hasPopOver,
       displayGroupLines,
+      isHorizontal,
       handleTextMouseEnter,
       getWrapper,
     } = useItemAction(props);
@@ -100,31 +102,32 @@ const ItemAction = memo(
           depthLevel={depthLevel}
           selected={selected}
           displayGroupLines={!!displayGroupLines}
-          responsiveView={responsiveView}
+          hasPopOver={hasPopOver}
+          isHorizontal={isHorizontal}
           {...(href && { href })}
           {...rest}
           aria-pressed={!href ? ariaPressed : undefined}
         >
-          <Label aria-label={responsiveView ? label : undefined}>
+          <Label aria-label={hasPopOver ? label : undefined}>
             {!displayControlsAfter && collapseIcon && (
               <Control>
                 <Icon>{collapseIcon}</Icon>
               </Control>
             )}
-            {(icon || responsiveView) && (
-              <TooltipWrapper condition={responsiveView} label={label}>
+            {(icon || hasPopOver) && (
+              <TooltipWrapper condition={hasPopOver} label={label}>
                 <Icon>
                   {typeof icon === "string" ? <DxcIcon icon={icon} /> : icon ? icon : <DxcIcon icon="topic" />}
                 </Icon>
               </TooltipWrapper>
             )}
-            {!responsiveView && (
+            {(!hasPopOver || isHorizontal) && (
               <Text selected={props.selected} onMouseEnter={handleTextMouseEnter}>
                 {label}
               </Text>
             )}
           </Label>
-          {!responsiveView && (modifiedBadge || (displayControlsAfter && collapseIcon)) && (
+          {(!hasPopOver || isHorizontal) && (modifiedBadge || (displayControlsAfter && collapseIcon)) && (
             <Control>
               {modifiedBadge}
               {displayControlsAfter && collapseIcon && <Icon>{collapseIcon}</Icon>}
diff --git a/packages/lib/src/base-menu/MenuItem.tsx b/packages/lib/src/base-menu/MenuItem.tsx
index b70663a48..889328def 100644
--- a/packages/lib/src/base-menu/MenuItem.tsx
+++ b/packages/lib/src/base-menu/MenuItem.tsx
@@ -7,6 +7,7 @@ import { isGroupItem } from "./utils";
 const MenuItemContainer = styled.li`
   display: grid;
   gap: var(--spacing-gap-xs);
+  width: fit-content;
 `;
 
 export default function MenuItem({ item, depthLevel = 0 }: MenuItemProps) {
diff --git a/packages/lib/src/base-menu/Section.tsx b/packages/lib/src/base-menu/Section.tsx
index 5981b3490..dab8e8007 100644
--- a/packages/lib/src/base-menu/Section.tsx
+++ b/packages/lib/src/base-menu/Section.tsx
@@ -23,10 +23,10 @@ const Title = styled.h2`
 
 export default function Section({ index, length, section }: SectionProps) {
   const id = `section-${useId()}`;
-  const { responsiveView } = useContext(BaseMenuContext) ?? {};
+  const { hasPopOver } = useContext(BaseMenuContext) ?? {};
   return (
     <SectionContainer aria-label={section.title ?? id} aria-labelledby={id}>
-      {!responsiveView && section.title && <Title id={id}>{section.title}</Title>}
+      {!hasPopOver && section.title && <Title id={id}>{section.title}</Title>}
       <SubMenu depthLevel={-1}>
         {section.items.map((item, i) => (
           <MenuItem item={item} key={`${item.label}-${i}`} />
diff --git a/packages/lib/src/base-menu/SubMenu.tsx b/packages/lib/src/base-menu/SubMenu.tsx
index a0414a3d2..106656e9c 100644
--- a/packages/lib/src/base-menu/SubMenu.tsx
+++ b/packages/lib/src/base-menu/SubMenu.tsx
@@ -3,26 +3,52 @@ import { SubMenuProps } from "./types";
 import BaseMenuContext from "./BaseMenuContext";
 import { useContext } from "react";
 
-const SubMenuContainer = styled.ul<{ depthLevel: number; displayGroupLines?: boolean }>`
+const SubMenuContainer = styled.ul<{
+  depthLevel: number;
+  displayGroupLines?: boolean;
+  isHorizontal?: boolean;
+  isPopOver?: boolean;
+}>`
   margin: 0;
   padding: 0;
-  display: grid;
-  gap: var(--spacing-gap-xs);
+  display: flex;
+  flex-direction: ${({ isHorizontal }) => (isHorizontal ? "row" : "column")};
+  gap: ${({ isHorizontal }) => (isHorizontal ? "var(--spacing-gap-s)" : "var(--spacing-gap-xs)")};
   list-style: none;
-
+  ${({ isPopOver }) =>
+    isPopOver &&
+    `
+      max-width: 240px;
+      background-color: var(--color-bg-neutral-lightest);
+      border-radius: var(--border-radius-m);
+      box-shadow: var(--shadow-200);
+    `}
   ${({ depthLevel, displayGroupLines }) =>
     displayGroupLines &&
     depthLevel >= 0 &&
     `
       margin-left: calc(var(--spacing-padding-m) + ${depthLevel} * var(--spacing-padding-xs));
       border-left: var(--border-width-s) solid var(--border-color-neutral-lighter);
-    `}
+    `};
 `;
 
-export default function SubMenu({ children, id, depthLevel = 0 }: SubMenuProps) {
+export default function SubMenu({
+  children,
+  id,
+  depthLevel = 0,
+  isHorizontal = false,
+  isPopOver = false,
+}: SubMenuProps) {
   const { displayGroupLines } = useContext(BaseMenuContext) ?? {};
   return (
-    <SubMenuContainer id={id} role="menu" depthLevel={depthLevel} displayGroupLines={displayGroupLines}>
+    <SubMenuContainer
+      id={id}
+      role="menu"
+      depthLevel={depthLevel}
+      displayGroupLines={displayGroupLines}
+      isHorizontal={isHorizontal}
+      isPopOver={isPopOver}
+    >
       {children}
     </SubMenuContainer>
   );
diff --git a/packages/lib/src/base-menu/types.ts b/packages/lib/src/base-menu/types.ts
index 1ef9fc25b..14eab1181 100644
--- a/packages/lib/src/base-menu/types.ts
+++ b/packages/lib/src/base-menu/types.ts
@@ -39,7 +39,11 @@ type Props = {
   /**
    * If true the menu will be icons only and display a popover on click.
    */
-  responsiveView?: boolean;
+  hasPopOver?: boolean;
+  /**
+   * If true the menu will be displayed horizontally.
+   */
+  isHorizontal?: boolean;
 };
 
 type ItemWithId = Item & { id: number };
@@ -76,13 +80,20 @@ type SectionProps = {
   index: number;
   length: number;
 };
-type SubMenuProps = { children: ReactNode; id?: string; depthLevel?: number };
+type SubMenuProps = {
+  children: ReactNode;
+  id?: string;
+  depthLevel?: number;
+  isHorizontal?: boolean;
+  isPopOver?: boolean;
+};
 type BaseMenuContextProps = {
   selectedItemId?: number;
   setSelectedItemId?: Dispatch<SetStateAction<number>>;
   displayGroupLines?: boolean;
   displayControlsAfter?: boolean;
-  responsiveView?: boolean;
+  hasPopOver?: boolean;
+  isHorizontal?: boolean;
 };
 
 export type {
diff --git a/packages/lib/src/base-menu/useGroupItem.ts b/packages/lib/src/base-menu/useGroupItem.ts
index c8997ec3f..3d420b93d 100644
--- a/packages/lib/src/base-menu/useGroupItem.ts
+++ b/packages/lib/src/base-menu/useGroupItem.ts
@@ -21,6 +21,7 @@ export const useGroupItem = (items: GroupItemProps["items"], context: BaseMenuCo
     groupSelected,
     isOpen,
     toggleOpen,
-    responsiveView: context.responsiveView,
+    hasPopOver: context.hasPopOver,
+    isHorizontal: context.isHorizontal,
   };
 };
diff --git a/packages/lib/src/base-menu/useItemAction.ts b/packages/lib/src/base-menu/useItemAction.ts
index dda97fa10..b1a2e3eb8 100644
--- a/packages/lib/src/base-menu/useItemAction.ts
+++ b/packages/lib/src/base-menu/useItemAction.ts
@@ -5,7 +5,7 @@ import { ItemActionProps } from "./types";
 export function useItemAction({ badge, renderItem }: ItemActionProps) {
   const [hasTooltip, setHasTooltip] = useState(false);
   const modifiedBadge = badge && cloneElement(badge, { size: "small" });
-  const { displayControlsAfter, responsiveView, displayGroupLines } = useContext(BaseMenuContext) ?? {};
+  const { displayControlsAfter, hasPopOver, displayGroupLines, isHorizontal } = useContext(BaseMenuContext) ?? {};
 
   const handleTextMouseEnter = (event: React.MouseEvent<HTMLSpanElement>) => {
     const text = event.currentTarget;
@@ -17,8 +17,9 @@ export function useItemAction({ badge, renderItem }: ItemActionProps) {
     hasTooltip,
     modifiedBadge,
     displayControlsAfter,
-    responsiveView,
+    hasPopOver,
     displayGroupLines,
+    isHorizontal,
     handleTextMouseEnter,
     getWrapper,
   };
diff --git a/packages/lib/src/contextual-menu/types.ts b/packages/lib/src/contextual-menu/types.ts
index 83d6b0a53..194c79aae 100644
--- a/packages/lib/src/contextual-menu/types.ts
+++ b/packages/lib/src/contextual-menu/types.ts
@@ -15,9 +15,9 @@ import BaseProps, {
 } from "../base-menu/types";
 
 type Item = Omit<BaseItem, "href" | "renderItem" | "selected">;
-type Props = Omit<BaseProps, "displayBorder" | "displayGroupLines" | "displayControlsAfter" | "responsiveView">;
+type Props = Omit<BaseProps, "displayBorder" | "displayGroupLines" | "displayControlsAfter" | "hasPopOver">;
 type ItemActionProps = Omit<BaseItemActionProps, "href" | "renderItem">;
-type ContextualMenuContextProps = Omit<BaseMenuContextProps, "responsiveView">;
+type ContextualMenuContextProps = Omit<BaseMenuContextProps, "hasPopOver">;
 
 export type {
   ContextualMenuContextProps,
diff --git a/packages/lib/src/navigation-tree/GroupItem.tsx b/packages/lib/src/navigation-tree/GroupItem.tsx
index f8c87e19c..4ccefb8b8 100644
--- a/packages/lib/src/navigation-tree/GroupItem.tsx
+++ b/packages/lib/src/navigation-tree/GroupItem.tsx
@@ -13,9 +13,9 @@ const GroupItem = ({ items, ...props }: GroupItemProps) => {
 
   const NavigationTreeId = `sidenav-${useId()}`;
   const contextValue = useContext(NavigationTreeContext) ?? {};
-  const { groupSelected, isOpen, toggleOpen, responsiveView } = useGroupItem(items, contextValue);
+  const { groupSelected, isOpen, toggleOpen, hasPopOver } = useGroupItem(items, contextValue);
 
-  return responsiveView ? (
+  return hasPopOver ? (
     <>
       <Popover.Root open={isOpen}>
         <Popover.Trigger
@@ -36,7 +36,7 @@ const GroupItem = ({ items, ...props }: GroupItemProps) => {
           />
         </Popover.Trigger>
         <Popover.Portal container={document.getElementById(`${NavigationTreeId}-portal`)}>
-          <NavigationTreeContext.Provider value={{ ...contextValue, displayGroupLines: false, responsiveView: false }}>
+          <NavigationTreeContext.Provider value={{ ...contextValue, displayGroupLines: false, hasPopOver: false }}>
             <Popover.Content
               aria-label="Group details"
               onCloseAutoFocus={(event) => {
diff --git a/packages/lib/src/navigation-tree/NavigationTree.tsx b/packages/lib/src/navigation-tree/NavigationTree.tsx
index 49c248dd0..5f905ac45 100644
--- a/packages/lib/src/navigation-tree/NavigationTree.tsx
+++ b/packages/lib/src/navigation-tree/NavigationTree.tsx
@@ -33,7 +33,8 @@ export default function DxcNavigationTree({
   displayBorder = true,
   displayGroupLines = false,
   displayControlsAfter = false,
-  responsiveView = false,
+  hasPopOver = false,
+  isHorizontal = false,
 }: NavigationTreePropsType) {
   const [firstUpdate, setFirstUpdate] = useState(true);
   const [selectedItemId, setSelectedItemId] = useState(-1);
@@ -45,9 +46,10 @@ export default function DxcNavigationTree({
       setSelectedItemId,
       displayGroupLines,
       displayControlsAfter,
-      responsiveView,
+      hasPopOver,
+      isHorizontal,
     }),
-    [selectedItemId, setSelectedItemId, displayGroupLines, displayControlsAfter, responsiveView]
+    [selectedItemId, setSelectedItemId, displayGroupLines, displayControlsAfter, hasPopOver, isHorizontal]
   );
 
   useLayoutEffect(() => {
@@ -71,7 +73,7 @@ export default function DxcNavigationTree({
             <Section key={`section-${index}`} section={item} index={index} length={itemsWithId.length} />
           ))
         ) : (
-          <SubMenu>
+          <SubMenu isHorizontal={isHorizontal}>
             {(itemsWithId as (GroupItemWithId | ItemWithId)[]).map((item, index) => (
               <MenuItem item={item} key={`${item.label}-${index}`} />
             ))}
diff --git a/packages/lib/src/new-header/new-header.stories.tsx b/packages/lib/src/new-header/new-header.stories.tsx
new file mode 100644
index 000000000..479504ff2
--- /dev/null
+++ b/packages/lib/src/new-header/new-header.stories.tsx
@@ -0,0 +1,70 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import DxcNewHeader from "./new-header";
+import DxcBadge from "../badge/Badge";
+import { useEffect } from "react";
+
+export default {
+  title: "newHeader",
+  component: DxcNewHeader,
+  decorators: [
+    (Story) => {
+      useEffect(() => {
+        const prev = document.body.style.cssText;
+        document.body.style.backgroundColor = "var(--color-bg-neutral-light)";
+        document.body.style.padding = "0";
+        return () => {
+          document.body.style.cssText = prev;
+        };
+      }, []);
+
+      return <Story />;
+    },
+  ],
+} satisfies Meta<typeof DxcNewHeader>;
+
+const branding = {
+  logo: {
+    src: "https://picsum.photos/104/34",
+    alt: "DXC Logo",
+    href: "https://www.dxc.com",
+  },
+  appTitle: "Application Title",
+};
+
+const items = [
+  {
+    label: "Grouped Item 1",
+    icon: "favorite",
+    items: [
+      { label: "Item 1", icon: "person" },
+      {
+        label: "Grouped Item 2",
+        items: [
+          {
+            label: "Item 2",
+            icon: "bookmark",
+            badge: <DxcBadge color="primary" label="Experimental" />,
+          },
+          { label: "Selected Item 3" },
+        ],
+      },
+    ],
+    badge: <DxcBadge color="success" label="New" />,
+  },
+  { label: "Item 4", icon: "key" },
+  { label: "Item 5", icon: "person" },
+  { label: "Grouped Item 6", items: [{ label: "Item 7", icon: "person" }, { label: "Item 8" }] },
+  { label: "Item 9" },
+];
+
+const NewHeader = () => (
+  <>
+    <DxcNewHeader branding={branding} navItems={items} sideContent={<div>Side Content</div>} />
+  </>
+);
+
+type Story = StoryObj<typeof DxcNewHeader>;
+
+export const Chromatic: Story = {
+  render: NewHeader,
+};
diff --git a/packages/lib/src/new-header/new-header.tsx b/packages/lib/src/new-header/new-header.tsx
new file mode 100644
index 000000000..bafa0f825
--- /dev/null
+++ b/packages/lib/src/new-header/new-header.tsx
@@ -0,0 +1,212 @@
+import styled from "@emotion/styled";
+import DxcGrid from "../grid/Grid";
+import HeaderProps from "./types";
+import DxcImage from "../image/Image";
+import DxcDivider from "../divider/Divider";
+import DxcHeading from "../heading/Heading";
+import { isGroupItem } from "../base-menu/utils";
+import { GroupItem, Item } from "../base-menu/types";
+import { useEffect, useMemo, useState } from "react";
+import DxcNavigationTree from "../navigation-tree/NavigationTree";
+import { responsiveSizes } from "../common/variables";
+import DxcButton from "../button/Button";
+
+const MAX_MAIN_NAV_SIZE = "60%";
+const LEVEL_LIMIT = 1;
+
+const HeaderContainer = styled.header`
+  width: 100%;
+  height: var(--height-xxxl);
+  box-sizing: border-box;
+  background: var(--color-bg-neutral-lightest);
+  box-shadow: var(--shadow-100);
+  padding: 0 var(--spacing-gap-l);
+`;
+
+const SideContainer = styled.div`
+  display: flex;
+  align-items: center;
+  height: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+  gap: var(--spacing-gap-m);
+`;
+
+const BrandingContainer = styled(SideContainer)`
+  justify-content: flex-start;
+  height: var(--height-m);
+`;
+
+const RightSideContainer = styled(SideContainer)`
+  justify-content: flex-end;
+`;
+
+const LogoContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const MainNavContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  gap: var(--spacing-gap-s);
+`;
+
+const HamburguerButton = ({ onClick }: { onClick: () => void }) => {
+  return <DxcButton icon="menu" mode="tertiary" aria-label="Menu button" onClick={onClick} />;
+};
+
+const ResponsiveMenuContainer = styled.div`
+  display: grid;
+  grid-template-rows: auto 1fr;
+`;
+
+const ResponsiveMenu = styled.div`
+  width: 100%;
+  background-color: var(--color-bg-neutral-lightest);
+  display: flex;
+  padding: var(--spacing-padding-m);
+  box-sizing: border-box;
+  flex-direction: column;
+  gap: 12px;
+`;
+
+const Overlay = styled.div`
+  width: 100%;
+  height: 100%;
+  background-color: var(--color-bg-alpha-medium);
+  z-index: var(--z-header-overlay);
+`;
+
+/**
+ * Prepares the navigation items to be rendered in the header.
+ * @param navItems prop with the navigation items.
+ * @return Processed navigation items with limited levels.
+ */
+const sanitizeNavItems = (navItems: HeaderProps["navItems"], level?: number): (GroupItem | Item)[] => {
+  if (!navItems) return [];
+  if (!level) level = 0;
+  const sanitizedItems = navItems.reduce<(GroupItem | Item)[]>((acc, item) => {
+    if (isGroupItem(item)) {
+      if (level < LEVEL_LIMIT) {
+        const processedGroup: GroupItem = {
+          ...item,
+          items: sanitizeNavItems(item.items, level + 1),
+        };
+        return [...acc, processedGroup];
+      }
+    } else {
+      return [...acc, item];
+    }
+    return acc;
+  }, []);
+  return sanitizedItems;
+};
+
+const DxcNewHeader = ({ branding, navItems, sideContent }: HeaderProps): JSX.Element => {
+  const [isResponsive, setIsResponsive] = useState(false);
+  const [isMenuVisible, setIsMenuVisible] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsResponsive(window.matchMedia(`(max-width: ${responsiveSizes.medium}rem)`).matches);
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  const toggleMenu = () => {
+    if (isResponsive && !isMenuVisible) {
+      setIsMenuVisible(!isMenuVisible);
+    } else {
+      setIsMenuVisible(!isMenuVisible);
+    }
+  };
+
+  const sanitizedNavItems = useMemo(() => (navItems ? sanitizeNavItems(navItems) : []), [navItems]);
+  return (
+    <DxcGrid
+      templateRows={
+        isResponsive && isMenuVisible
+          ? ["var(--height-xxxl)", "calc(100vh - var(--height-xxxl))"]
+          : ["var(--height-xxxl)"]
+      }
+    >
+      <HeaderContainer>
+        <DxcGrid
+          templateColumns={
+            !isResponsive && sanitizedNavItems && sanitizedNavItems.length > 0
+              ? ["auto", `minmax(auto, ${MAX_MAIN_NAV_SIZE})`, "auto"]
+              : ["auto", "auto"]
+          }
+          templateRows={["var(--height-xxxl)"]}
+          gap="var(--spacing-gap-ml)"
+          placeItems="center"
+        >
+          <BrandingContainer>
+            <LogoContainer
+              role={branding.logo.onClick ? "button" : undefined}
+              as={branding.logo.href ? "a" : undefined}
+            >
+              <DxcImage src={branding.logo.src} alt={branding.logo.alt} height="var(--height-m)" objectFit="contain" />
+            </LogoContainer>
+            {branding.appTitle && !isResponsive && (
+              <>
+                <DxcDivider orientation="vertical" />
+                <DxcHeading text={branding.appTitle} as="h1" level={5} />
+              </>
+            )}
+          </BrandingContainer>
+          {!isResponsive && sanitizedNavItems && sanitizedNavItems.length > 0 && (
+            <MainNavContainer>
+              <DxcNavigationTree
+                items={sanitizedNavItems}
+                displayGroupLines={false}
+                displayBorder={false}
+                displayControlsAfter
+                hasPopOver
+                isHorizontal
+              />
+            </MainNavContainer>
+          )}
+          {sideContent && (
+            <RightSideContainer>
+              {!isResponsive && sideContent} {isResponsive && <HamburguerButton onClick={toggleMenu} />}
+            </RightSideContainer>
+          )}
+        </DxcGrid>
+      </HeaderContainer>
+      {isResponsive && isMenuVisible && (
+        <ResponsiveMenuContainer>
+          <ResponsiveMenu>
+            {branding.appTitle && <DxcHeading text={branding.appTitle} as="h1" level={5} />}
+            <DxcNavigationTree
+              items={sanitizedNavItems}
+              displayGroupLines={false}
+              displayBorder={false}
+              displayControlsAfter
+            />
+            {sideContent && (
+              <>
+                <DxcDivider />
+                {sideContent}
+              </>
+            )}
+          </ResponsiveMenu>
+          <Overlay onClick={toggleMenu} />
+        </ResponsiveMenuContainer>
+      )}
+    </DxcGrid>
+  );
+};
+
+export default DxcNewHeader;
diff --git a/packages/lib/src/new-header/types.tsx b/packages/lib/src/new-header/types.tsx
new file mode 100644
index 000000000..63a45d17b
--- /dev/null
+++ b/packages/lib/src/new-header/types.tsx
@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+import { GroupItem, Item } from "../base-menu/types";
+
+type LogoPropsType = {
+  src: string;
+  alt: string;
+  href?: string;
+  onClick?: () => void;
+};
+
+type BrandingPropsType = {
+  logo: LogoPropsType;
+  appTitle?: string;
+};
+
+type MainNavPropsType = (GroupItem | Item)[];
+
+type Props = {
+  branding: BrandingPropsType;
+  responsiveBranding?: BrandingPropsType;
+  navItems?: MainNavPropsType;
+  sideContent?: ReactNode;
+};
+
+export default Props;
diff --git a/packages/lib/src/sidenav/Sidenav.tsx b/packages/lib/src/sidenav/Sidenav.tsx
index 92b4d1cec..363056987 100644
--- a/packages/lib/src/sidenav/Sidenav.tsx
+++ b/packages/lib/src/sidenav/Sidenav.tsx
@@ -112,7 +112,7 @@ const DxcSidenav = ({
           items={navItems}
           displayGroupLines={displayGroupLines}
           displayBorder={false}
-          responsiveView={!isExpanded}
+          hasPopOver={!isExpanded}
           displayControlsAfter
         />
       )}

From b99f6e8d921502f371e649b1bc3610ba303a334d Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Fri, 7 Nov 2025 14:47:06 +0100
Subject: [PATCH 02/23] Removed old header and moved new header to the location

---
 .../src/header/Header.accessibility.test.tsx  |  87 ----
 packages/lib/src/header/Header.stories.tsx    | 291 +++----------
 packages/lib/src/header/Header.test.tsx       |  44 +-
 packages/lib/src/header/Header.tsx            | 388 ++++++++----------
 packages/lib/src/header/types.ts              |  54 ---
 .../lib/src/{new-header => header}/types.tsx  |   3 +-
 packages/lib/src/layout/ApplicationLayout.tsx |  10 +-
 packages/lib/src/layout/Icons.tsx             |  20 +
 .../lib/src/new-header/new-header.stories.tsx |  70 ----
 packages/lib/src/new-header/new-header.tsx    | 212 ----------
 10 files changed, 255 insertions(+), 924 deletions(-)
 delete mode 100644 packages/lib/src/header/Header.accessibility.test.tsx
 delete mode 100644 packages/lib/src/header/types.ts
 rename packages/lib/src/{new-header => header}/types.tsx (88%)
 delete mode 100644 packages/lib/src/new-header/new-header.stories.tsx
 delete mode 100644 packages/lib/src/new-header/new-header.tsx

diff --git a/packages/lib/src/header/Header.accessibility.test.tsx b/packages/lib/src/header/Header.accessibility.test.tsx
deleted file mode 100644
index ce2d4ce14..000000000
--- a/packages/lib/src/header/Header.accessibility.test.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { render } from "@testing-library/react";
-import { axe, formatRules } from "../../test/accessibility/axe-helper";
-import DxcHeader from "./Header";
-import DxcFlex from "../flex/Flex";
-import DxcLink from "../link/Link";
-import rules from "../../test/accessibility/rules/specific/header/disabledRules";
-import { vi } from "vitest";
-
-global.ResizeObserver = vi.fn().mockImplementation(() => ({
-  observe: vi.fn(),
-  unobserve: vi.fn(),
-  disconnect: vi.fn(),
-}));
-
-const disabledRules = {
-  rules: formatRules(rules),
-};
-
-const iconSVG = (
-  <svg viewBox="0 0 24 24" height="24" width="24" fill="currentColor">
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
-  </svg>
-);
-
-const iconUrl = "https://iconape.com/wp-content/files/yd/367773/svg/logo-linkedin-logo-icon-png-svg.png";
-
-const options = [
-  {
-    value: "1",
-    label: "Amazon",
-    icon: iconUrl,
-  },
-  {
-    value: "2",
-    label: "Ebay",
-    icon: iconUrl,
-  },
-  {
-    value: "3",
-    label: "Wallapop",
-    icon: iconSVG,
-  },
-  {
-    value: "4",
-    label: "Aliexpress",
-    icon: iconSVG,
-  },
-];
-
-describe("Header component accessibility tests", () => {
-  beforeAll(() => {
-    Object.defineProperty(window, "matchMedia", {
-      writable: true,
-      value: vi.fn().mockImplementation(() => ({
-        matches: false,
-      })),
-    });
-  });
-  it("Should not have basic accessibility issues", async () => {
-    const { container } = render(
-      <DxcHeader
-        content={
-          <DxcFlex alignItems="center" gap="4rem">
-            <DxcLink>Link 1</DxcLink>
-            <DxcLink>Link 2</DxcLink>
-            <DxcLink>Link 3</DxcLink>
-            <DxcHeader.Dropdown
-              options={options}
-              label="dropdown-test"
-              icon={iconSVG}
-              iconPosition="after"
-              margin="medium"
-              size="medium"
-              optionsIconPosition="after"
-              onSelectOption={() => {}}
-            />
-          </DxcFlex>
-        }
-        margin="medium"
-        underlined
-      />
-    );
-    const results = await axe(container, disabledRules);
-    expect(results.violations).toHaveLength(0);
-  });
-});
diff --git a/packages/lib/src/header/Header.stories.tsx b/packages/lib/src/header/Header.stories.tsx
index dbc69cae4..8d2dc1eff 100644
--- a/packages/lib/src/header/Header.stories.tsx
+++ b/packages/lib/src/header/Header.stories.tsx
@@ -1,263 +1,70 @@
-import Title from "../../.storybook/components/Title";
-import ExampleContainer from "../../.storybook/components/ExampleContainer";
-import disabledRules from "../../test/accessibility/rules/specific/header/disabledRules";
-import preview from "../../.storybook/preview";
-import DxcFlex from "../flex/Flex";
-import DxcLink from "../link/Link";
-import DxcHeader from "./Header";
 import { Meta, StoryObj } from "@storybook/react-vite";
-import { userEvent, waitFor, within } from "storybook/internal/test";
+import DxcHeader from "./Header";
+import DxcBadge from "../badge/Badge";
+import { useEffect } from "react";
 
 export default {
-  title: "Header",
+  title: "newHeader",
   component: DxcHeader,
-  parameters: {
-    a11y: {
-      config: {
-        rules: [
-          ...(preview?.parameters?.a11y?.config?.rules || []),
-          ...disabledRules.map((ruleId) => ({ id: ruleId, enabled: false })),
-        ],
-      },
+  decorators: [
+    (Story) => {
+      useEffect(() => {
+        const prev = document.body.style.cssText;
+        document.body.style.backgroundColor = "var(--color-bg-neutral-light)";
+        document.body.style.padding = "0";
+        return () => {
+          document.body.style.cssText = prev;
+        };
+      }, []);
+
+      return <Story />;
     },
-  },
+  ],
 } satisfies Meta<typeof DxcHeader>;
 
-const options = [
-  {
-    value: "1",
-    label: "Amazon",
+const branding = {
+  logo: {
+    src: "https://picsum.photos/104/34",
+    alt: "DXC Logo",
+    href: "https://www.dxc.com",
   },
-];
+  appTitle: "Application Title",
+};
 
-const options2 = [
+const items = [
   {
-    value: "1",
-    label: "Home",
-  },
-  {
-    value: "2",
-    label: "Release notes",
-  },
-  {
-    value: "3",
-    label: "Sign out",
+    label: "Grouped Item 1",
+    icon: "favorite",
+    items: [
+      { label: "Item 1", icon: "person" },
+      {
+        label: "Grouped Item 2",
+        items: [
+          {
+            label: "Item 2",
+            icon: "bookmark",
+            badge: <DxcBadge color="primary" label="Experimental" />,
+          },
+          { label: "Selected Item 3" },
+        ],
+      },
+    ],
+    badge: <DxcBadge color="success" label="New" />,
   },
+  { label: "Item 4", icon: "key" },
+  { label: "Item 5", icon: "person" },
+  { label: "Grouped Item 6", items: [{ label: "Item 7", icon: "person" }, { label: "Item 8" }] },
+  { label: "Item 9" },
 ];
 
-const responsiveContentFunction = () => <p>Lorem ipsum dolor sit amet.</p>;
-
-const Header = () => (
+const NewHeader = () => (
   <>
-    <ExampleContainer>
-      <Title title="Default with dropdown" theme="light" level={4} />
-      <DxcHeader
-        content={<DxcHeader.Dropdown options={options} label="Default Dropdown" onSelectOption={() => {}} />}
-      />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Underlined with text" theme="light" level={4} />
-      <DxcHeader underlined content={<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>} />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Underlined, dropdown and links" theme="light" level={4} />
-      <DxcHeader
-        content={
-          <DxcFlex alignItems="center" gap="4rem">
-            <DxcLink>Link 1</DxcLink>
-            <DxcLink>Link 2</DxcLink>
-            <DxcLink>Link 3</DxcLink>
-            <DxcHeader.Dropdown options={options2} label="Label" onSelectOption={() => {}} />
-          </DxcFlex>
-        }
-        underlined
-      />
-    </ExampleContainer>
-    <Title title="Margins" theme="light" level={2} />
-    <ExampleContainer>
-      <Title title="Xxsmall margin" theme="light" level={4} />
-      <DxcHeader underlined margin="xxsmall" />
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Xsmall margin" theme="light" level={4} />
-      <DxcHeader underlined margin="xsmall" />
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Small margin" theme="light" level={4} />
-      <DxcHeader underlined margin="small" />
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Medium margin" theme="light" level={4} />
-      <DxcHeader underlined margin="medium" />
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Large margin" theme="light" level={4} />
-      <DxcHeader underlined margin="large" />
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Xlarge margin" theme="light" level={4} />
-      <DxcHeader underlined margin="xlarge" />
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Xxlarge margin" theme="light" level={4} />
-      <DxcHeader underlined margin="xxlarge" />
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
-    </ExampleContainer>
+    <DxcHeader branding={branding} navItems={items} sideContent={<div>Side Content</div>} />
   </>
 );
 
-const HeaderCustomLogo = () => (
-  <>
-    <ExampleContainer>
-      <Title title="Default with dropdown" theme="light" level={4} />
-      <DxcHeader
-        content={<DxcHeader.Dropdown options={options} label="Default Dropdown" onSelectOption={() => {}} />}
-        logo={{
-          src: "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/2048px-2021_Facebook_icon.svg.png",
-          title: "Custom Logo",
-          href: "#test",
-        }}
-      />
-    </ExampleContainer>
-  </>
-);
-
-const Responsive = () => (
-  <ExampleContainer>
-    <Title title="Responsive" theme="light" level={4} />
-    <DxcHeader
-      content={<DxcHeader.Dropdown options={options} label="Default Dropdown" onSelectOption={() => {}} />}
-      responsiveContent={responsiveContentFunction}
-      underlined
-    />
-  </ExampleContainer>
-);
-
-const RespHeaderFocus = () => (
-  <ExampleContainer pseudoState="pseudo-focus">
-    <Title title="Responsive focus" theme="light" level={4} />
-    <DxcHeader responsiveContent={responsiveContentFunction} underlined />
-  </ExampleContainer>
-);
-const RespHeaderHover = () => (
-  <ExampleContainer pseudoState="pseudo-hover">
-    <Title title="Responsive hover" theme="light" level={4} />
-    <DxcHeader responsiveContent={responsiveContentFunction} underlined />
-  </ExampleContainer>
-);
-const RespHeaderMenuMobile = () => (
-  <ExampleContainer>
-    <Title title="Responsive menu" theme="light" level={4} />
-    <DxcHeader responsiveContent={responsiveContentFunction} underlined />
-  </ExampleContainer>
-);
-
-const RespHeaderMenuTablet = () => (
-  <ExampleContainer>
-    <Title title="Responsive menu" theme="light" level={4} />
-    <DxcHeader responsiveContent={responsiveContentFunction} underlined />
-  </ExampleContainer>
-);
-
 type Story = StoryObj<typeof DxcHeader>;
 
 export const Chromatic: Story = {
-  render: Header,
-};
-
-export const CustomLogo: Story = {
-  render: HeaderCustomLogo,
-};
-
-export const ResponsiveHeader: Story = {
-  render: Responsive,
-  parameters: {
-    chromatic: { viewports: [375] },
-  },
-  globals: {
-    viewport: { value: "iphonex", isRotated: false },
-  },
-};
-
-export const ResponsiveHeaderFocus: Story = {
-  render: RespHeaderFocus,
-  parameters: {
-    chromatic: { viewports: [375] },
-  },
-  globals: {
-    viewport: { value: "iphonex", isRotated: false },
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await waitFor(() => canvas.findByText("Menu"));
-  },
-};
-
-export const ResponsiveHeaderHover: Story = {
-  render: RespHeaderHover,
-  parameters: {
-    chromatic: { viewports: [375] },
-  },
-  globals: {
-    viewport: { value: "iphonex", isRotated: false },
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await waitFor(() => canvas.findByText("Menu"));
-  },
-};
-
-export const ResponsiveHeaderMenuMobile: Story = {
-  render: RespHeaderMenuMobile,
-  parameters: {
-    chromatic: { viewports: [375] },
-  },
-  globals: {
-    viewport: { value: "iphonex", isRotated: false },
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await waitFor(() => canvas.findByText("Menu"));
-    await userEvent.click(await canvas.findByText("Menu"));
-  },
-};
-
-export const ResponsiveHeaderMenuTablet: Story = {
-  render: RespHeaderMenuTablet,
-  parameters: {
-    chromatic: { viewports: [720] },
-  },
-  globals: {
-    viewport: { value: "pixelxl", isRotated: false },
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await waitFor(() => canvas.findByText("Menu"));
-    await userEvent.click(await canvas.findByText("Menu"));
-  },
-};
-
-export const ResponsiveHeaderTooltip: Story = {
-  render: RespHeaderMenuMobile,
-  parameters: {
-    chromatic: { viewports: [375] },
-  },
-  globals: {
-    viewport: { value: "iphonex", isRotated: false },
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await waitFor(() => canvas.findByText("Menu"));
-    await userEvent.click(await canvas.findByText("Menu"));
-    const closeButton = (await canvas.findAllByRole("button"))[1];
-    if (closeButton != null) {
-      await userEvent.hover(closeButton);
-    }
-  },
+  render: NewHeader,
 };
diff --git a/packages/lib/src/header/Header.test.tsx b/packages/lib/src/header/Header.test.tsx
index c280117d0..c9fbbf5fe 100644
--- a/packages/lib/src/header/Header.test.tsx
+++ b/packages/lib/src/header/Header.test.tsx
@@ -1,6 +1,13 @@
-import { fireEvent, render } from "@testing-library/react";
+import { render } from "@testing-library/react";
 import DxcHeader from "./Header";
 
+const defaultHeaderBranding = {
+  logo: {
+    src: "url-to-dxc-logo",
+    alt: "DXC Logo",
+  },
+};
+
 describe("Header component tests", () => {
   beforeAll(() => {
     Object.defineProperty(window, "matchMedia", {
@@ -11,38 +18,7 @@ describe("Header component tests", () => {
     });
   });
   test("Header renders with default logo", () => {
-    const { getByTitle } = render(<DxcHeader />);
-    expect(getByTitle("DXC Logo")).toBeTruthy();
-  });
-  test("Call correct function on logo click", () => {
-    const onClick = jest.fn();
-    const { getByTitle } = render(<DxcHeader onClick={onClick} />);
-    const logo = getByTitle("DXC Logo");
-    fireEvent.click(logo);
-    expect(onClick).toHaveBeenCalled();
-  });
-  test("Header renders with correct children", () => {
-    // We need to force the offsetWidth value
-    Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
-      configurable: true,
-      value: 1024,
-    });
-
-    const { getByText } = render(<DxcHeader content={<p>header-child-text</p>} />);
-    expect(getByText("header-child-text")).toBeTruthy();
-  });
-  test("Header renders menu button in mobile", () => {
-    Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
-      configurable: true,
-      value: 425,
-    });
-    Object.defineProperty(window, "matchMedia", {
-      writable: true,
-      value: jest.fn().mockImplementation(() => ({
-        matches: true,
-      })),
-    });
-    const { getByText } = render(<DxcHeader responsiveContent={() => <p>header-child-text</p>} />);
-    expect(getByText("Menu")).toBeTruthy();
+    const { getByAltText } = render(<DxcHeader branding={defaultHeaderBranding} />);
+    expect(getByAltText("DXC Logo")).toBeTruthy();
   });
 });
diff --git a/packages/lib/src/header/Header.tsx b/packages/lib/src/header/Header.tsx
index 97b9c18ba..565c8ab27 100644
--- a/packages/lib/src/header/Header.tsx
+++ b/packages/lib/src/header/Header.tsx
@@ -1,215 +1,122 @@
-import { ComponentProps, useContext, useEffect, useRef, useState } from "react";
-import { responsiveSizes, spaces } from "../common/variables";
-import DxcDropdown from "../dropdown/Dropdown";
-import DxcIcon from "../icon/Icon";
-import HeaderPropsType, { Logo } from "./types";
-import DxcFlex from "../flex/Flex";
-import { HalstackLanguageContext } from "../HalstackContext";
-import DxcActionIcon from "../action-icon/ActionIcon";
-import { dxcLogo } from "./Icons";
 import styled from "@emotion/styled";
-
-const HeaderDropdown = styled.div`
-  display: flex;
-  button {
-    background-color: transparent;
-    :hover {
-      background-color: transparent;
-    }
-  }
-`;
-
-const HeaderContainer = styled.header<{
-  margin: HeaderPropsType["margin"];
-  underlined: HeaderPropsType["underlined"];
-}>`
-  background-color: var(--color-bg-neutral-lightest);
-  border-bottom: ${(props) =>
-    props.underlined && `var(--border-width-m) var(--border-style-default) var(--border-color-neutral-strongest)`};
-  align-items: center;
+import DxcGrid from "../grid/Grid";
+import HeaderProps from "./types";
+import DxcImage from "../image/Image";
+import DxcDivider from "../divider/Divider";
+import DxcHeading from "../heading/Heading";
+import { isGroupItem } from "../base-menu/utils";
+import { GroupItem, Item } from "../base-menu/types";
+import { useEffect, useMemo, useState } from "react";
+import DxcNavigationTree from "../navigation-tree/NavigationTree";
+import { responsiveSizes } from "../common/variables";
+import DxcButton from "../button/Button";
+
+const MAX_MAIN_NAV_SIZE = "60%";
+const LEVEL_LIMIT = 1;
+
+const HeaderContainer = styled.header`
+  width: 100%;
+  height: var(--height-xxxl);
   box-sizing: border-box;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  margin-bottom: ${(props) => (props.margin ? spaces[props.margin] : "0px")};
-  min-height: 64px;
-  padding: var(--spacing-padding-none) var(--spacing-padding-l);
+  background: var(--color-bg-neutral-lightest);
+  box-shadow: var(--shadow-100);
+  padding: 0 var(--spacing-gap-l);
 `;
 
-const LogoAnchor = styled.a<{ interactive: boolean }>`
-  ${(props) => (props.interactive ? "cursor: pointer" : "cursor: default; outline:none;")};
-`;
-
-const LogoImg = styled.img`
-  max-height: var(--height-xl);
-  width: auto;
+const SideContainer = styled.div`
+  display: flex;
+  align-items: center;
+  height: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+  gap: var(--spacing-gap-m);
 `;
 
-const LogoContainer = styled.div`
-  max-height: var(--height-xl);
-  vertical-align: middle;
-  width: auto;
+const BrandingContainer = styled(SideContainer)`
+  justify-content: flex-start;
+  height: var(--height-m);
 `;
 
-const ChildContainer = styled.div`
-  display: flex;
-  align-items: center;
+const RightSideContainer = styled(SideContainer)`
   justify-content: flex-end;
-  flex-grow: 1;
-  width: calc(100% - 186px);
 `;
 
-const ContentContainer = styled.div`
+const LogoContainer = styled.div`
   display: flex;
   align-items: center;
-  flex-grow: 1;
-  justify-content: flex-end;
-  width: calc(100% - 186px);
-  color: var(--color-fg-neutral-dark);
 `;
 
-const HamburgerTrigger = styled.button`
-  align-items: center;
-  background-color: transparent;
-  border-radius: var(--border-radius-xs);
-  border: var(--border-width-s) var(--border-style-default) transparent;
-  color: var(--color-fg-neutral-dark);
-  cursor: pointer;
+const MainNavContainer = styled.div`
   display: flex;
-  flex-direction: column;
-  font-family: var(--typography-font-family);
-  font-size: var(--typography-label-s);
-  font-weight: var(--typography-label-semibold);
-  height: var(--height-xl);
   justify-content: center;
-  padding: var(--spacing-padding-none) var(--spacing-padding-m);
-  text-transform: uppercase;
-  :hover {
-    background-color: var(--color-bg-neutral-medium);
-  }
-  &:focus {
-    outline: var(--border-color-secondary-medium) var(--border-style-default) var(--border-width-m);
-  }
-  & > svg {
-    fill: var(--color-fg-neutral-dark);
-  }
-  & > span {
-    font-size: var(--height-s);
-  }
+  align-items: center;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  gap: var(--spacing-gap-s);
 `;
 
-const ResponsiveMenu = styled.div<{ hasVisibility: boolean }>`
-  display: flex;
-  flex-direction: column;
-  background-color: var(--color-bg-neutral-lightest);
-  position: fixed;
-  top: 0;
-  right: 0;
-  z-index: var(--z-header-menu);
-
-  @media (max-width: ${responsiveSizes.large}rem) and (min-width: ${responsiveSizes.small}rem) {
-    width: 60vw;
-  }
-
-  @media (not((max-width: ${responsiveSizes.large}rem) and (min-width: ${responsiveSizes.small}rem))) {
-    width: 100vw;
-  }
-
-  height: 100vh;
-  padding: 20px;
-  transform: ${(props) => (props.hasVisibility ? "translateX(0)" : "translateX(100vw)")};
-  transition-property: transform, opacity;
-  transition-duration: 0.6s;
-  transition-timing-function: ease-in-out;
-  box-sizing: border-box;
-`;
+const HamburguerButton = ({ onClick }: { onClick: () => void }) => {
+  return <DxcButton icon="menu" mode="tertiary" aria-label="Menu button" onClick={onClick} />;
+};
 
-const ResponsiveLogoContainer = styled.div`
-  max-height: var(--height-xl);
-  width: auto;
-  display: flex;
+const ResponsiveMenuContainer = styled.div`
+  display: grid;
+  grid-template-rows: auto 1fr;
 `;
 
-const MenuContent = styled.div`
+const ResponsiveMenu = styled.div`
+  width: 100%;
+  background-color: var(--color-bg-neutral-lightest);
   display: flex;
+  padding: var(--spacing-padding-m);
+  box-sizing: border-box;
   flex-direction: column;
-  align-items: flex-start;
-  height: 100%;
-  color: var(--color-fg-neutral-dark);
+  gap: 12px;
 `;
 
-const Overlay = styled.div<{ hasVisibility: boolean }>`
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background-color: ${(props) => (props.hasVisibility ? "var(--color-bg-alpha-medium)" : "transparent")};
-
-  @media (max-width: ${responsiveSizes.small}rem) {
-    ${(props) => !props.hasVisibility && "display: none"};
-  }
-
+const Overlay = styled.div`
+  width: 100%;
+  height: 100%;
+  background-color: var(--color-bg-alpha-medium);
   z-index: var(--z-header-overlay);
 `;
 
-const Dropdown = (props: ComponentProps<typeof DxcDropdown>) => (
-  <HeaderDropdown>
-    <DxcDropdown {...props} />
-  </HeaderDropdown>
-);
-
-const getLogoElement = (logo?: Logo) => {
-  if (logo) {
-    return <LogoImg alt={logo.title} src={logo.src} title={logo.title} />;
-  } else {
-    return dxcLogo;
-  }
-};
-
-type ContentProps = {
-  isResponsive: boolean;
-  responsiveContent: HeaderPropsType["responsiveContent"];
-  handleMenu: () => void;
-  content: HeaderPropsType["content"];
+/**
+ * Prepares the navigation items to be rendered in the header.
+ * @param navItems prop with the navigation items.
+ * @return Processed navigation items with limited levels.
+ */
+const sanitizeNavItems = (navItems: HeaderProps["navItems"], level?: number): (GroupItem | Item)[] => {
+  if (!navItems) return [];
+  if (!level) level = 0;
+  const sanitizedItems = navItems.reduce<(GroupItem | Item)[]>((acc, item) => {
+    if (isGroupItem(item)) {
+      if (level < LEVEL_LIMIT) {
+        const processedGroup: GroupItem = {
+          ...item,
+          items: sanitizeNavItems(item.items, level + 1),
+        };
+        return [...acc, processedGroup];
+      }
+    } else {
+      return [...acc, item];
+    }
+    return acc;
+  }, []);
+  return sanitizedItems;
 };
 
-const Content = ({ isResponsive, responsiveContent, handleMenu, content }: ContentProps) =>
-  isResponsive ? (
-    <MenuContent>{responsiveContent?.(handleMenu)}</MenuContent>
-  ) : (
-    <ContentContainer>{content}</ContentContainer>
-  );
-
-const DxcHeader = ({
-  underlined = false,
-  content,
-  responsiveContent,
-  logo,
-  margin,
-  onClick,
-  tabIndex = 0,
-}: HeaderPropsType): JSX.Element => {
+const DxcHeader = ({ branding, navItems, sideContent }: HeaderProps): JSX.Element => {
   const [isResponsive, setIsResponsive] = useState(false);
   const [isMenuVisible, setIsMenuVisible] = useState(false);
-  const translatedLabels = useContext(HalstackLanguageContext);
-  const ref = useRef(null);
-
-  const handleMenu = () => {
-    if (isResponsive && !isMenuVisible) {
-      setIsMenuVisible(!isMenuVisible);
-    } else {
-      setIsMenuVisible(!isMenuVisible);
-    }
-  };
-
-  const headerLogo = getLogoElement(logo);
 
   useEffect(() => {
     const handleResize = () => {
       setIsResponsive(window.matchMedia(`(max-width: ${responsiveSizes.medium}rem)`).matches);
     };
-
     handleResize();
     window.addEventListener("resize", handleResize);
     return () => {
@@ -217,63 +124,98 @@ const DxcHeader = ({
     };
   }, []);
 
-  useEffect(() => {
-    if (!isResponsive) {
-      setIsMenuVisible(false);
+  const toggleMenu = () => {
+    if (isResponsive && !isMenuVisible) {
+      setIsMenuVisible(!isMenuVisible);
+    } else {
+      setIsMenuVisible(!isMenuVisible);
     }
-  }, [isResponsive]);
+  };
 
+  const sanitizedNavItems = useMemo(() => (navItems ? sanitizeNavItems(navItems) : []), [navItems]);
   return (
-    <HeaderContainer underlined={underlined} margin={margin} ref={ref}>
-      <LogoAnchor
-        href={logo?.href}
-        tabIndex={onClick ? tabIndex : -1}
-        interactive={!!onClick || !!logo?.href}
-        onClick={onClick}
-      >
-        <LogoContainer>{headerLogo}</LogoContainer>
-      </LogoAnchor>
-      {isResponsive && responsiveContent && (
-        <DxcFlex grow={1}>
-          <ChildContainer>
-            <HamburgerTrigger tabIndex={tabIndex} onClick={handleMenu} aria-label="Show options">
-              <DxcIcon icon="menu" />
-              {translatedLabels.header.hamburgerTitle}
-            </HamburgerTrigger>
-          </ChildContainer>
-          <ResponsiveMenu hasVisibility={isMenuVisible}>
-            <DxcFlex justifyContent="space-between" alignItems="center">
-              <ResponsiveLogoContainer>{headerLogo}</ResponsiveLogoContainer>
-              <DxcActionIcon
-                size="xsmall"
-                icon="close"
-                onClick={handleMenu}
-                tabIndex={tabIndex}
-                title={translatedLabels.header.closeIcon}
+    <DxcGrid
+      templateRows={
+        isResponsive && isMenuVisible
+          ? ["var(--height-xxxl)", "calc(100vh - var(--height-xxxl))"]
+          : ["var(--height-xxxl)"]
+      }
+    >
+      <HeaderContainer>
+        <DxcGrid
+          templateColumns={
+            !isResponsive && sanitizedNavItems && sanitizedNavItems.length > 0
+              ? ["auto", `minmax(auto, ${MAX_MAIN_NAV_SIZE})`, "auto"]
+              : ["auto", "auto"]
+          }
+          templateRows={["var(--height-xxxl)"]}
+          gap="var(--spacing-gap-ml)"
+          placeItems="center"
+        >
+          <BrandingContainer>
+            <LogoContainer
+              role={branding.logo.onClick ? "button" : undefined}
+              as={branding.logo.href ? "a" : undefined}
+            >
+              {typeof branding.logo.src === "string" ? (
+                <DxcImage
+                  src={branding.logo.src}
+                  alt={branding.logo.alt}
+                  height="var(--height-m)"
+                  objectFit="contain"
+                />
+              ) : (
+                branding.logo.src
+              )}
+            </LogoContainer>
+            {branding.appTitle && !isResponsive && (
+              <>
+                <DxcDivider orientation="vertical" />
+                <DxcHeading text={branding.appTitle} as="h1" level={5} />
+              </>
+            )}
+          </BrandingContainer>
+          {!isResponsive && sanitizedNavItems && sanitizedNavItems.length > 0 && (
+            <MainNavContainer>
+              <DxcNavigationTree
+                items={sanitizedNavItems}
+                displayGroupLines={false}
+                displayBorder={false}
+                displayControlsAfter
+                hasPopOver
+                isHorizontal
               />
-            </DxcFlex>
-            <Content
-              isResponsive={isResponsive}
-              responsiveContent={responsiveContent}
-              handleMenu={handleMenu}
-              content={content}
+            </MainNavContainer>
+          )}
+          {sideContent && (
+            <RightSideContainer>
+              {!isResponsive && sideContent} {isResponsive && <HamburguerButton onClick={toggleMenu} />}
+            </RightSideContainer>
+          )}
+        </DxcGrid>
+      </HeaderContainer>
+      {isResponsive && isMenuVisible && (
+        <ResponsiveMenuContainer>
+          <ResponsiveMenu>
+            {branding.appTitle && <DxcHeading text={branding.appTitle} as="h1" level={5} />}
+            <DxcNavigationTree
+              items={sanitizedNavItems}
+              displayGroupLines={false}
+              displayBorder={false}
+              displayControlsAfter
             />
+            {sideContent && (
+              <>
+                <DxcDivider />
+                {sideContent}
+              </>
+            )}
           </ResponsiveMenu>
-          <Overlay onClick={handleMenu} hasVisibility={isMenuVisible} />
-        </DxcFlex>
-      )}
-      {!isResponsive && (
-        <Content
-          isResponsive={isResponsive}
-          responsiveContent={responsiveContent}
-          handleMenu={handleMenu}
-          content={content}
-        />
+          <Overlay onClick={toggleMenu} />
+        </ResponsiveMenuContainer>
       )}
-    </HeaderContainer>
+    </DxcGrid>
   );
 };
 
-DxcHeader.Dropdown = Dropdown;
-
 export default DxcHeader;
diff --git a/packages/lib/src/header/types.ts b/packages/lib/src/header/types.ts
deleted file mode 100644
index 05857fa7f..000000000
--- a/packages/lib/src/header/types.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { ReactNode } from "react";
-import { Space } from "../common/utils";
-
-export type Logo = {
-  /**
-   * URL to navigate when the logo is clicked.
-   */
-  href?: string;
-  /**
-   * Source of the logo image.
-   */
-  src: string;
-  /**
-   * Alternative text for the logo image.
-   */
-  title?: string;
-};
-
-type Props = {
-  /**
-   * Whether a contrast line should appear at the bottom of the header.
-   */
-  underlined?: boolean;
-  /**
-   * Content shown in the header. Take into account that the component applies styles
-   * for the first child in the content, so we recommend the use of Fragment
-   * to be applied correctly. Otherwise, the styles can be modified.
-   */
-  content?: ReactNode;
-  /**
-   * Content shown in responsive version. It receives the close menu handler that can
-   * be used to add that functionality when a element is clicked.
-   */
-  responsiveContent?: (closeHandler: () => void) => ReactNode;
-  /**
-   * Logo to be displayed inside the header
-   */
-  logo?: Logo;
-  /**
-   * Size of the bottom margin to be applied to the header.
-   */
-  margin?: Space;
-  /**
-   * This function will be called when the user clicks the header logo.
-   */
-  onClick?: () => void;
-  /**
-   * Value of the tabindex for all interactive elements, except those inside the
-   * custom area.
-   */
-  tabIndex?: number;
-};
-
-export default Props;
diff --git a/packages/lib/src/new-header/types.tsx b/packages/lib/src/header/types.tsx
similarity index 88%
rename from packages/lib/src/new-header/types.tsx
rename to packages/lib/src/header/types.tsx
index 63a45d17b..548afa592 100644
--- a/packages/lib/src/new-header/types.tsx
+++ b/packages/lib/src/header/types.tsx
@@ -1,8 +1,9 @@
 import { ReactNode } from "react";
 import { GroupItem, Item } from "../base-menu/types";
+import { SVG } from "../common/utils";
 
 type LogoPropsType = {
-  src: string;
+  src: string | SVG;
   alt: string;
   href?: string;
   onClick?: () => void;
diff --git a/packages/lib/src/layout/ApplicationLayout.tsx b/packages/lib/src/layout/ApplicationLayout.tsx
index 72808a608..efb826511 100644
--- a/packages/lib/src/layout/ApplicationLayout.tsx
+++ b/packages/lib/src/layout/ApplicationLayout.tsx
@@ -5,6 +5,7 @@ import DxcHeader from "../header/Header";
 import DxcSidenav from "../sidenav/Sidenav";
 import ApplicationLayoutPropsType, { AppLayoutMainPropsType } from "./types";
 import { bottomLinks, findChildType, socialLinks, year } from "./utils";
+import { dxcLogo } from "./Icons";
 
 const ApplicationLayoutContainer = styled.div`
   top: 0;
@@ -60,6 +61,13 @@ const MainContentContainer = styled.main`
   grid-template-rows: 1fr auto;
 `;
 
+const defaultHeaderBranding = {
+  logo: {
+    src: dxcLogo,
+    alt: "DXC Logo",
+  },
+};
+
 const Main = ({ children }: AppLayoutMainPropsType): JSX.Element => <div>{children}</div>;
 
 const DxcApplicationLayout = ({ header, sidenav, footer, children }: ApplicationLayoutPropsType): JSX.Element => {
@@ -67,7 +75,7 @@ const DxcApplicationLayout = ({ header, sidenav, footer, children }: Application
 
   return (
     <ApplicationLayoutContainer ref={ref}>
-      <HeaderContainer>{header ?? <DxcHeader underlined />}</HeaderContainer>
+      <HeaderContainer>{header ?? <DxcHeader branding={defaultHeaderBranding} />}</HeaderContainer>
       <BodyContainer>
         {sidenav && <SidenavContainer>{sidenav}</SidenavContainer>}
         <MainContainer>
diff --git a/packages/lib/src/layout/Icons.tsx b/packages/lib/src/layout/Icons.tsx
index 69228f92c..93c6c2c2a 100644
--- a/packages/lib/src/layout/Icons.tsx
+++ b/packages/lib/src/layout/Icons.tsx
@@ -59,4 +59,24 @@ const layoutIcons = {
   ),
 };
 
+export const dxcLogo = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="73" height="40" viewBox="0 0 73 40">
+    <title>DXC Logo</title>
+    <g transform="translate(0)">
+      <g>
+        <path
+          d="M91.613-28.177v2.514H90.231V-28.15l-2.415-3.82h1.616l1.5,2.532,1.526-2.532h1.571ZM83.9-25.555A3.15,3.15,0,0,1,80.6-28.8v-.018a3.231,3.231,0,0,1,3.294-3.262,3.442,3.442,0,0,1,2.469.865l-.87,1.054a2.311,2.311,0,0,0-1.643-.64,1.891,1.891,0,0,0-1.8,1.964v.018a1.886,1.886,0,0,0,1.9,2,2.2,2.2,0,0,0,1.3-.378v-.9H83.858v-1.2h2.729v2.738A4.071,4.071,0,0,1,83.9-25.555Zm-6.416-3.261a1.913,1.913,0,0,0-1.9-1.982A1.883,1.883,0,0,0,73.7-28.835v.018a1.913,1.913,0,0,0,1.9,1.982A1.883,1.883,0,0,0,77.486-28.8Zm-1.9,3.261a3.225,3.225,0,0,1-3.33-3.243v-.018A3.255,3.255,0,0,1,75.6-32.078a3.225,3.225,0,0,1,3.331,3.243v.018A3.255,3.255,0,0,1,75.583-25.555Zm-9.173-.108V-31.97h1.382v5.045h3.133v1.261Zm-3.433-3.153a1.913,1.913,0,0,0-1.9-1.982,1.883,1.883,0,0,0-1.886,1.964v.018a1.913,1.913,0,0,0,1.9,1.982A1.883,1.883,0,0,0,62.978-28.8Zm-1.9,3.261a3.225,3.225,0,0,1-3.33-3.243v-.018a3.255,3.255,0,0,1,3.348-3.262,3.225,3.225,0,0,1,3.331,3.243v.018A3.255,3.255,0,0,1,61.075-25.555Zm-6.508-.108-3.043-4.009v4.009H50.159V-31.97h1.275l2.944,3.883V-31.97h1.364v6.306Zm-8.246,0v-2.531h-2.55v2.531H42.389V-31.97h1.382v2.5h2.55v-2.5H47.7v6.306Zm-8.432.108A3.178,3.178,0,0,1,34.666-28.8v-.018a3.2,3.2,0,0,1,3.276-3.262,3.237,3.237,0,0,1,2.478.973l-.88,1.018a2.315,2.315,0,0,0-1.606-.712,1.866,1.866,0,0,0-1.822,1.964v.018a1.87,1.87,0,0,0,1.822,1.982,2.265,2.265,0,0,0,1.651-.739l.88.891A3.206,3.206,0,0,1,37.889-25.555Zm-9.805-.108V-31.97h4.739v1.235H29.458v1.279h2.962v1.234H29.458V-26.9h3.411v1.234ZM24.322-30.69v5.027H22.939V-30.69H21.028v-1.28h5.206v1.28H24.322"
+          transform="translate(-21.028 65.555)"
+          fill="#010101"
+        />
+        <path
+          d="M75.836-76.712a8.975,8.975,0,0,1,2.246-3.9,8.393,8.393,0,0,1,6.058-2.457h9.824v-5.67H84.139a14.611,14.611,0,0,0-10.232,4.221,14.509,14.509,0,0,0-3.076,4.536,11.913,11.913,0,0,0-.973,3.271Zm0,4.325a8.978,8.978,0,0,0,2.246,3.9,8.394,8.394,0,0,0,6.058,2.457h9.824v5.67H84.139A14.611,14.611,0,0,1,73.907-64.58a14.506,14.506,0,0,1-3.076-4.536,11.91,11.91,0,0,1-.973-3.271ZM57.522-69.832l-7.5,9.473H42.581L53.818-74.55,42.581-88.739H50.02l7.5,9.472,7.5-9.472h7.439L61.225-74.55l11.237,14.19H65.023Zm-12.336-6.88a11.935,11.935,0,0,0-.973-3.271,14.515,14.515,0,0,0-3.076-4.536A14.612,14.612,0,0,0,30.9-88.739H21.081v5.67H30.9a8.394,8.394,0,0,1,6.058,2.457,8.978,8.978,0,0,1,2.246,3.9Zm0,4.325a11.932,11.932,0,0,1-.973,3.271,14.511,14.511,0,0,1-3.076,4.536A14.611,14.611,0,0,1,30.9-60.359H21.081v-5.67H30.9a8.4,8.4,0,0,0,6.058-2.457,8.981,8.981,0,0,0,2.246-3.9h5.978"
+          transform="translate(-21.049 88.739)"
+          fill="#603494"
+        />
+      </g>
+    </g>
+  </svg>
+);
+
 export default layoutIcons;
diff --git a/packages/lib/src/new-header/new-header.stories.tsx b/packages/lib/src/new-header/new-header.stories.tsx
deleted file mode 100644
index 479504ff2..000000000
--- a/packages/lib/src/new-header/new-header.stories.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react-vite";
-import DxcNewHeader from "./new-header";
-import DxcBadge from "../badge/Badge";
-import { useEffect } from "react";
-
-export default {
-  title: "newHeader",
-  component: DxcNewHeader,
-  decorators: [
-    (Story) => {
-      useEffect(() => {
-        const prev = document.body.style.cssText;
-        document.body.style.backgroundColor = "var(--color-bg-neutral-light)";
-        document.body.style.padding = "0";
-        return () => {
-          document.body.style.cssText = prev;
-        };
-      }, []);
-
-      return <Story />;
-    },
-  ],
-} satisfies Meta<typeof DxcNewHeader>;
-
-const branding = {
-  logo: {
-    src: "https://picsum.photos/104/34",
-    alt: "DXC Logo",
-    href: "https://www.dxc.com",
-  },
-  appTitle: "Application Title",
-};
-
-const items = [
-  {
-    label: "Grouped Item 1",
-    icon: "favorite",
-    items: [
-      { label: "Item 1", icon: "person" },
-      {
-        label: "Grouped Item 2",
-        items: [
-          {
-            label: "Item 2",
-            icon: "bookmark",
-            badge: <DxcBadge color="primary" label="Experimental" />,
-          },
-          { label: "Selected Item 3" },
-        ],
-      },
-    ],
-    badge: <DxcBadge color="success" label="New" />,
-  },
-  { label: "Item 4", icon: "key" },
-  { label: "Item 5", icon: "person" },
-  { label: "Grouped Item 6", items: [{ label: "Item 7", icon: "person" }, { label: "Item 8" }] },
-  { label: "Item 9" },
-];
-
-const NewHeader = () => (
-  <>
-    <DxcNewHeader branding={branding} navItems={items} sideContent={<div>Side Content</div>} />
-  </>
-);
-
-type Story = StoryObj<typeof DxcNewHeader>;
-
-export const Chromatic: Story = {
-  render: NewHeader,
-};
diff --git a/packages/lib/src/new-header/new-header.tsx b/packages/lib/src/new-header/new-header.tsx
deleted file mode 100644
index bafa0f825..000000000
--- a/packages/lib/src/new-header/new-header.tsx
+++ /dev/null
@@ -1,212 +0,0 @@
-import styled from "@emotion/styled";
-import DxcGrid from "../grid/Grid";
-import HeaderProps from "./types";
-import DxcImage from "../image/Image";
-import DxcDivider from "../divider/Divider";
-import DxcHeading from "../heading/Heading";
-import { isGroupItem } from "../base-menu/utils";
-import { GroupItem, Item } from "../base-menu/types";
-import { useEffect, useMemo, useState } from "react";
-import DxcNavigationTree from "../navigation-tree/NavigationTree";
-import { responsiveSizes } from "../common/variables";
-import DxcButton from "../button/Button";
-
-const MAX_MAIN_NAV_SIZE = "60%";
-const LEVEL_LIMIT = 1;
-
-const HeaderContainer = styled.header`
-  width: 100%;
-  height: var(--height-xxxl);
-  box-sizing: border-box;
-  background: var(--color-bg-neutral-lightest);
-  box-shadow: var(--shadow-100);
-  padding: 0 var(--spacing-gap-l);
-`;
-
-const SideContainer = styled.div`
-  display: flex;
-  align-items: center;
-  height: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 100%;
-  gap: var(--spacing-gap-m);
-`;
-
-const BrandingContainer = styled(SideContainer)`
-  justify-content: flex-start;
-  height: var(--height-m);
-`;
-
-const RightSideContainer = styled(SideContainer)`
-  justify-content: flex-end;
-`;
-
-const LogoContainer = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const MainNavContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-  gap: var(--spacing-gap-s);
-`;
-
-const HamburguerButton = ({ onClick }: { onClick: () => void }) => {
-  return <DxcButton icon="menu" mode="tertiary" aria-label="Menu button" onClick={onClick} />;
-};
-
-const ResponsiveMenuContainer = styled.div`
-  display: grid;
-  grid-template-rows: auto 1fr;
-`;
-
-const ResponsiveMenu = styled.div`
-  width: 100%;
-  background-color: var(--color-bg-neutral-lightest);
-  display: flex;
-  padding: var(--spacing-padding-m);
-  box-sizing: border-box;
-  flex-direction: column;
-  gap: 12px;
-`;
-
-const Overlay = styled.div`
-  width: 100%;
-  height: 100%;
-  background-color: var(--color-bg-alpha-medium);
-  z-index: var(--z-header-overlay);
-`;
-
-/**
- * Prepares the navigation items to be rendered in the header.
- * @param navItems prop with the navigation items.
- * @return Processed navigation items with limited levels.
- */
-const sanitizeNavItems = (navItems: HeaderProps["navItems"], level?: number): (GroupItem | Item)[] => {
-  if (!navItems) return [];
-  if (!level) level = 0;
-  const sanitizedItems = navItems.reduce<(GroupItem | Item)[]>((acc, item) => {
-    if (isGroupItem(item)) {
-      if (level < LEVEL_LIMIT) {
-        const processedGroup: GroupItem = {
-          ...item,
-          items: sanitizeNavItems(item.items, level + 1),
-        };
-        return [...acc, processedGroup];
-      }
-    } else {
-      return [...acc, item];
-    }
-    return acc;
-  }, []);
-  return sanitizedItems;
-};
-
-const DxcNewHeader = ({ branding, navItems, sideContent }: HeaderProps): JSX.Element => {
-  const [isResponsive, setIsResponsive] = useState(false);
-  const [isMenuVisible, setIsMenuVisible] = useState(false);
-
-  useEffect(() => {
-    const handleResize = () => {
-      setIsResponsive(window.matchMedia(`(max-width: ${responsiveSizes.medium}rem)`).matches);
-    };
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-
-  const toggleMenu = () => {
-    if (isResponsive && !isMenuVisible) {
-      setIsMenuVisible(!isMenuVisible);
-    } else {
-      setIsMenuVisible(!isMenuVisible);
-    }
-  };
-
-  const sanitizedNavItems = useMemo(() => (navItems ? sanitizeNavItems(navItems) : []), [navItems]);
-  return (
-    <DxcGrid
-      templateRows={
-        isResponsive && isMenuVisible
-          ? ["var(--height-xxxl)", "calc(100vh - var(--height-xxxl))"]
-          : ["var(--height-xxxl)"]
-      }
-    >
-      <HeaderContainer>
-        <DxcGrid
-          templateColumns={
-            !isResponsive && sanitizedNavItems && sanitizedNavItems.length > 0
-              ? ["auto", `minmax(auto, ${MAX_MAIN_NAV_SIZE})`, "auto"]
-              : ["auto", "auto"]
-          }
-          templateRows={["var(--height-xxxl)"]}
-          gap="var(--spacing-gap-ml)"
-          placeItems="center"
-        >
-          <BrandingContainer>
-            <LogoContainer
-              role={branding.logo.onClick ? "button" : undefined}
-              as={branding.logo.href ? "a" : undefined}
-            >
-              <DxcImage src={branding.logo.src} alt={branding.logo.alt} height="var(--height-m)" objectFit="contain" />
-            </LogoContainer>
-            {branding.appTitle && !isResponsive && (
-              <>
-                <DxcDivider orientation="vertical" />
-                <DxcHeading text={branding.appTitle} as="h1" level={5} />
-              </>
-            )}
-          </BrandingContainer>
-          {!isResponsive && sanitizedNavItems && sanitizedNavItems.length > 0 && (
-            <MainNavContainer>
-              <DxcNavigationTree
-                items={sanitizedNavItems}
-                displayGroupLines={false}
-                displayBorder={false}
-                displayControlsAfter
-                hasPopOver
-                isHorizontal
-              />
-            </MainNavContainer>
-          )}
-          {sideContent && (
-            <RightSideContainer>
-              {!isResponsive && sideContent} {isResponsive && <HamburguerButton onClick={toggleMenu} />}
-            </RightSideContainer>
-          )}
-        </DxcGrid>
-      </HeaderContainer>
-      {isResponsive && isMenuVisible && (
-        <ResponsiveMenuContainer>
-          <ResponsiveMenu>
-            {branding.appTitle && <DxcHeading text={branding.appTitle} as="h1" level={5} />}
-            <DxcNavigationTree
-              items={sanitizedNavItems}
-              displayGroupLines={false}
-              displayBorder={false}
-              displayControlsAfter
-            />
-            {sideContent && (
-              <>
-                <DxcDivider />
-                {sideContent}
-              </>
-            )}
-          </ResponsiveMenu>
-          <Overlay onClick={toggleMenu} />
-        </ResponsiveMenuContainer>
-      )}
-    </DxcGrid>
-  );
-};
-
-export default DxcNewHeader;

From 50c9eafaca61bf9eaa6cf22c0ca4e649b9fcc48e Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Mon, 10 Nov 2025 11:05:51 +0100
Subject: [PATCH 03/23] Visual tests added

---
 packages/lib/src/header/Header.stories.tsx | 57 +++++++++++++++++++---
 1 file changed, 51 insertions(+), 6 deletions(-)

diff --git a/packages/lib/src/header/Header.stories.tsx b/packages/lib/src/header/Header.stories.tsx
index 8d2dc1eff..50a9d2ffd 100644
--- a/packages/lib/src/header/Header.stories.tsx
+++ b/packages/lib/src/header/Header.stories.tsx
@@ -2,9 +2,11 @@ import { Meta, StoryObj } from "@storybook/react-vite";
 import DxcHeader from "./Header";
 import DxcBadge from "../badge/Badge";
 import { useEffect } from "react";
+import DxcFlex from "../flex/Flex";
+import Title from "../../.storybook/components/Title";
 
 export default {
-  title: "newHeader",
+  title: "Header",
   component: DxcHeader,
   decorators: [
     (Story) => {
@@ -24,13 +26,33 @@ export default {
 
 const branding = {
   logo: {
-    src: "https://picsum.photos/104/34",
+    src: "https://picsum.photos/id/1000/104/34",
     alt: "DXC Logo",
     href: "https://www.dxc.com",
   },
   appTitle: "Application Title",
 };
 
+const brandingWithoutTitle = {
+  logo: {
+    src: "https://picsum.photos/id/1000/104/34",
+    alt: "DXC Logo",
+    href: "https://www.dxc.com",
+  },
+};
+
+const longBranding = {
+  logo: {
+    src: "https://picsum.photos/id/1000/104/34",
+    alt: "DXC Logo",
+    href: "https://www.dxc.com",
+  },
+  appTitle:
+    "Application Title with a very long name that exceeds the normal length to test how the header manages overflow situations",
+};
+
+const longSideContent = `Long side content that is intended to test how the header component handles situations where the side content exceeds the typical length. This content should ideally wrap or be truncated based on the design specifications of the header component within the application.`;
+
 const items = [
   {
     label: "Grouped Item 1",
@@ -57,14 +79,37 @@ const items = [
   { label: "Item 9" },
 ];
 
-const NewHeader = () => (
-  <>
+const longItems = [
+  ...items,
+  { label: "Item 10" },
+  { label: "Item 11" },
+  { label: "Item 12" },
+  { label: "Item 13" },
+  { label: "Item 14" },
+  { label: "Item 15" },
+  { label: "Item 16" },
+  { label: "Item 17" },
+];
+
+const Header = () => (
+  <DxcFlex gap="var(--spacing-gap-m)" direction="column">
+    <Title title="Default Header" theme="light" level={3} />
+    <DxcHeader branding={brandingWithoutTitle} />
+    <DxcHeader branding={branding} />
+    <DxcHeader branding={branding} sideContent={<div>Side Content</div>} />
     <DxcHeader branding={branding} navItems={items} sideContent={<div>Side Content</div>} />
-  </>
+    <Title title="Header with long content" theme="light" level={3} />
+    <DxcHeader branding={branding} navItems={items} sideContent={<div>{longSideContent}</div>} />
+    <DxcHeader branding={longBranding} navItems={items} />
+    <DxcHeader branding={longBranding} navItems={items} sideContent={<div>{longSideContent}</div>} />
+    <DxcHeader branding={longBranding} sideContent={<div>{longSideContent}</div>} />
+    <DxcHeader branding={longBranding} navItems={longItems} />
+    <DxcHeader branding={longBranding} navItems={longItems} sideContent={<div>{longSideContent}</div>} />
+  </DxcFlex>
 );
 
 type Story = StoryObj<typeof DxcHeader>;
 
 export const Chromatic: Story = {
-  render: NewHeader,
+  render: Header,
 };

From d7f68f39bebad559e2a11d0d2f20e520d63a7ca6 Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Wed, 12 Nov 2025 16:29:24 +0100
Subject: [PATCH 04/23] Added callback type to sideContent + tests and improved
 responsiveness

---
 packages/lib/src/base-menu/MenuItem.tsx       |   1 -
 packages/lib/src/base-menu/useGroupItem.ts    |   4 +-
 packages/lib/src/header/Header.stories.tsx    | 111 +++++++++++++++++-
 packages/lib/src/header/Header.tsx            |  37 +++---
 packages/lib/src/header/types.tsx             |   3 +-
 packages/lib/src/layout/ApplicationLayout.tsx |  11 +-
 packages/lib/src/styles/variables.css         |   4 +-
 7 files changed, 141 insertions(+), 30 deletions(-)

diff --git a/packages/lib/src/base-menu/MenuItem.tsx b/packages/lib/src/base-menu/MenuItem.tsx
index 889328def..b70663a48 100644
--- a/packages/lib/src/base-menu/MenuItem.tsx
+++ b/packages/lib/src/base-menu/MenuItem.tsx
@@ -7,7 +7,6 @@ import { isGroupItem } from "./utils";
 const MenuItemContainer = styled.li`
   display: grid;
   gap: var(--spacing-gap-xs);
-  width: fit-content;
 `;
 
 export default function MenuItem({ item, depthLevel = 0 }: MenuItemProps) {
diff --git a/packages/lib/src/base-menu/useGroupItem.ts b/packages/lib/src/base-menu/useGroupItem.ts
index 3d420b93d..1bb2096f3 100644
--- a/packages/lib/src/base-menu/useGroupItem.ts
+++ b/packages/lib/src/base-menu/useGroupItem.ts
@@ -10,9 +10,9 @@ const isGroupSelected = (items: GroupItemProps["items"], selectedItemId?: number
 
 export const useGroupItem = (items: GroupItemProps["items"], context: BaseMenuContextProps) => {
   const groupMenuId = `group-menu-${useId()}`;
-  const { selectedItemId } = context ?? {};
+  const { selectedItemId, hasPopOver } = context ?? {};
   const groupSelected = useMemo(() => isGroupSelected(items, selectedItemId), [items, selectedItemId]);
-  const [isOpen, setIsOpen] = useState(groupSelected && selectedItemId === -1);
+  const [isOpen, setIsOpen] = useState(hasPopOver ? false : groupSelected && selectedItemId === -1);
 
   const toggleOpen = () => setIsOpen((prev) => !prev);
 
diff --git a/packages/lib/src/header/Header.stories.tsx b/packages/lib/src/header/Header.stories.tsx
index 50a9d2ffd..c015ec14f 100644
--- a/packages/lib/src/header/Header.stories.tsx
+++ b/packages/lib/src/header/Header.stories.tsx
@@ -4,6 +4,12 @@ import DxcBadge from "../badge/Badge";
 import { useEffect } from "react";
 import DxcFlex from "../flex/Flex";
 import Title from "../../.storybook/components/Title";
+import DxcApplicationLayout from "../layout/ApplicationLayout";
+import DxcParagraph from "../paragraph/Paragraph";
+import { dxcLogo } from "./Icons";
+import DxcButton from "../button/Button";
+import { waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 export default {
   title: "Header",
@@ -41,6 +47,13 @@ const brandingWithoutTitle = {
   },
 };
 
+const dxcBrandedLogo = {
+  logo: {
+    src: dxcLogo,
+    alt: "DXC Logo",
+  },
+};
+
 const longBranding = {
   logo: {
     src: "https://picsum.photos/id/1000/104/34",
@@ -58,7 +71,7 @@ const items = [
     label: "Grouped Item 1",
     icon: "favorite",
     items: [
-      { label: "Item 1", icon: "person" },
+      { label: "Item 1", icon: "person", selected: true },
       {
         label: "Grouped Item 2",
         items: [
@@ -108,8 +121,104 @@ const Header = () => (
   </DxcFlex>
 );
 
+const HeaderInLayout = () => (
+  <DxcApplicationLayout
+    header={
+      <DxcHeader
+        branding={dxcBrandedLogo}
+        navItems={items}
+        sideContent={(isResponsive) =>
+          isResponsive ? (
+            <>
+              <DxcButton icon="settings" mode="tertiary" size={{ height: "medium" }} />
+            </>
+          ) : (
+            <>
+              <DxcButton icon="settings" mode="tertiary" size={{ height: "medium" }} />
+              <DxcButton label="Side button" mode="secondary" size={{ height: "medium" }} />
+              <DxcButton label="Another button" mode="primary" size={{ height: "medium" }} />
+            </>
+          )
+        }
+        responsiveBottomContent={
+          <>
+            <DxcButton label="Bottom content button" mode="secondary" size={{ width: "fillParent" }} />
+            <DxcButton label="Another button" mode="primary" size={{ width: "fillParent" }} />
+          </>
+        }
+      />
+    }
+  >
+    <DxcApplicationLayout.Main>
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices fermentum ante et pharetra. Integer
+        ullamcorper ante non laoreet suscipit. Integer pharetra viverra nunc, quis fermentum urna eleifend eget.
+        Maecenas dolor justo, ullamcorper ac posuere tincidunt, dictum id urna. Suspendisse est metus, euismod et felis
+        eget, condimentum elementum eros. Curabitur ut lorem ut odio volutpat lacinia. Interdum et malesuada fames ac
+        ante ipsum primis in faucibus. Sed leo quam, lobortis in ultricies ac, interdum in sem. Suspendisse magna enim,
+        rhoncus eget lectus vitae, rutrum interdum ligula. Nunc efficitur neque ac orci pretium lacinia. Proin sagittis
+        condimentum mi, eu dapibus quam faucibus eget. Aenean fermentum nisl ut mauris convallis, in imperdiet neque
+        porttitor. Aliquam erat volutpat. Fusce tincidunt arcu id arcu dignissim viverra. Sed imperdiet vitae odio eget
+        consequat. Vivamus eu dictum orci.
+      </DxcParagraph>
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices fermentum ante et pharetra. Integer
+        ullamcorper ante non laoreet suscipit. Integer pharetra viverra nunc, quis fermentum urna eleifend eget.
+        Maecenas dolor justo, ullamcorper ac posuere tincidunt, dictum id urna. Suspendisse est metus, euismod et felis
+        eget, condimentum elementum eros. Curabitur ut lorem ut odio volutpat lacinia. Interdum et malesuada fames ac
+        ante ipsum primis in faucibus. Sed leo quam, lobortis in ultricies ac, interdum in sem. Suspendisse magna enim,
+        rhoncus eget lectus vitae, rutrum interdum ligula. Nunc efficitur neque ac orci pretium lacinia. Proin sagittis
+        condimentum mi, eu dapibus quam faucibus eget. Aenean fermentum nisl ut mauris convallis, in imperdiet neque
+        porttitor. Aliquam erat volutpat. Fusce tincidunt arcu id arcu dignissim viverra. Sed imperdiet vitae odio eget
+        consequat. Vivamus eu dictum orci.
+      </DxcParagraph>
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices fermentum ante et pharetra. Integer
+        ullamcorper ante non laoreet suscipit. Integer pharetra viverra nunc, quis fermentum urna eleifend eget.
+        Maecenas dolor justo, ullamcorper ac posuere tincidunt, dictum id urna. Suspendisse est metus, euismod et felis
+        eget, condimentum elementum eros. Curabitur ut lorem ut odio volutpat lacinia. Interdum et malesuada fames ac
+        ante ipsum primis in faucibus. Sed leo quam, lobortis in ultricies ac, interdum in sem. Suspendisse magna enim,
+        rhoncus eget lectus vitae, rutrum interdum ligula. Nunc efficitur neque ac orci pretium lacinia. Proin sagittis
+        condimentum mi, eu dapibus quam faucibus eget. Aenean fermentum nisl ut mauris convallis, in imperdiet neque
+        porttitor. Aliquam erat volutpat. Fusce tincidunt arcu id arcu dignissim viverra. Sed imperdiet vitae odio eget
+        consequat. Vivamus eu dictum orci.
+      </DxcParagraph>
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices fermentum ante et pharetra. Integer
+        ullamcorper ante non laoreet suscipit. Integer pharetra viverra nunc, quis fermentum urna eleifend eget.
+        Maecenas dolor justo, ullamcorper ac posuere tincidunt, dictum id urna. Suspendisse est metus, euismod et felis
+        eget, condimentum elementum eros. Curabitur ut lorem ut odio volutpat lacinia. Interdum et malesuada fames ac
+        ante ipsum primis in faucibus. Sed leo quam, lobortis in ultricies ac, interdum in sem. Suspendisse magna enim,
+        rhoncus eget lectus vitae, rutrum interdum ligula. Nunc efficitur neque ac orci pretium lacinia. Proin sagittis
+        condimentum mi, eu dapibus quam faucibus eget. Aenean fermentum nisl ut mauris convallis, in imperdiet neque
+        porttitor. Aliquam erat volutpat. Fusce tincidunt arcu id arcu dignissim viverra. Sed imperdiet vitae odio eget
+        consequat. Vivamus eu dictum orci.
+      </DxcParagraph>
+    </DxcApplicationLayout.Main>
+  </DxcApplicationLayout>
+);
+
 type Story = StoryObj<typeof DxcHeader>;
 
 export const Chromatic: Story = {
   render: Header,
 };
+
+export const InLayout: Story = {
+  render: HeaderInLayout,
+};
+
+export const Responsive: Story = {
+  render: HeaderInLayout,
+  parameters: {
+    chromatic: { viewports: [375] },
+  },
+  globals: {
+    viewport: { value: "iphonex", isRotated: false },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const menuButton = await waitFor(() => canvas.getAllByRole("button")[1]);
+    if (menuButton) userEvent.click(menuButton);
+  },
+};
diff --git a/packages/lib/src/header/Header.tsx b/packages/lib/src/header/Header.tsx
index 565c8ab27..e048ab18a 100644
--- a/packages/lib/src/header/Header.tsx
+++ b/packages/lib/src/header/Header.tsx
@@ -14,6 +14,16 @@ import DxcButton from "../button/Button";
 const MAX_MAIN_NAV_SIZE = "60%";
 const LEVEL_LIMIT = 1;
 
+const MainContainer = styled.div<{ isResponsive: boolean; isMenuVisible: boolean }>`
+  display: grid;
+  width: 100%;
+  grid-template-rows: ${(props) =>
+    props.isResponsive && props.isMenuVisible
+      ? "var(--height-xxxl) calc(100vh - var(--height-xxxl))"
+      : "var(--height-xxxl)"};
+  ${(props) => (props.isResponsive && props.isMenuVisible ? "position: fixed;" : "")}
+`;
+
 const HeaderContainer = styled.header`
   width: 100%;
   height: var(--height-xxxl);
@@ -46,6 +56,10 @@ const RightSideContainer = styled(SideContainer)`
 const LogoContainer = styled.div`
   display: flex;
   align-items: center;
+  svg {
+    height: var(--height-m);
+    width: auto;
+  }
 `;
 
 const MainNavContainer = styled.div`
@@ -74,7 +88,7 @@ const ResponsiveMenu = styled.div`
   padding: var(--spacing-padding-m);
   box-sizing: border-box;
   flex-direction: column;
-  gap: 12px;
+  gap: var(--spacing-gap-m);
 `;
 
 const Overlay = styled.div`
@@ -109,7 +123,7 @@ const sanitizeNavItems = (navItems: HeaderProps["navItems"], level?: number): (G
   return sanitizedItems;
 };
 
-const DxcHeader = ({ branding, navItems, sideContent }: HeaderProps): JSX.Element => {
+const DxcHeader = ({ branding, navItems, sideContent, responsiveBottomContent }: HeaderProps): JSX.Element => {
   const [isResponsive, setIsResponsive] = useState(false);
   const [isMenuVisible, setIsMenuVisible] = useState(false);
 
@@ -131,16 +145,10 @@ const DxcHeader = ({ branding, navItems, sideContent }: HeaderProps): JSX.Elemen
       setIsMenuVisible(!isMenuVisible);
     }
   };
-
   const sanitizedNavItems = useMemo(() => (navItems ? sanitizeNavItems(navItems) : []), [navItems]);
+
   return (
-    <DxcGrid
-      templateRows={
-        isResponsive && isMenuVisible
-          ? ["var(--height-xxxl)", "calc(100vh - var(--height-xxxl))"]
-          : ["var(--height-xxxl)"]
-      }
-    >
+    <MainContainer isResponsive={isResponsive} isMenuVisible={isMenuVisible}>
       <HeaderContainer>
         <DxcGrid
           templateColumns={
@@ -189,7 +197,8 @@ const DxcHeader = ({ branding, navItems, sideContent }: HeaderProps): JSX.Elemen
           )}
           {sideContent && (
             <RightSideContainer>
-              {!isResponsive && sideContent} {isResponsive && <HamburguerButton onClick={toggleMenu} />}
+              {typeof sideContent === "function" ? sideContent(isResponsive) : isResponsive && sideContent}{" "}
+              {isResponsive && <HamburguerButton onClick={toggleMenu} />}
             </RightSideContainer>
           )}
         </DxcGrid>
@@ -204,17 +213,17 @@ const DxcHeader = ({ branding, navItems, sideContent }: HeaderProps): JSX.Elemen
               displayBorder={false}
               displayControlsAfter
             />
-            {sideContent && (
+            {responsiveBottomContent && (
               <>
                 <DxcDivider />
-                {sideContent}
+                {responsiveBottomContent}
               </>
             )}
           </ResponsiveMenu>
           <Overlay onClick={toggleMenu} />
         </ResponsiveMenuContainer>
       )}
-    </DxcGrid>
+    </MainContainer>
   );
 };
 
diff --git a/packages/lib/src/header/types.tsx b/packages/lib/src/header/types.tsx
index 548afa592..124c94125 100644
--- a/packages/lib/src/header/types.tsx
+++ b/packages/lib/src/header/types.tsx
@@ -20,7 +20,8 @@ type Props = {
   branding: BrandingPropsType;
   responsiveBranding?: BrandingPropsType;
   navItems?: MainNavPropsType;
-  sideContent?: ReactNode;
+  sideContent?: ReactNode | ((isResponsive: boolean) => ReactNode);
+  responsiveBottomContent?: ReactNode;
 };
 
 export default Props;
diff --git a/packages/lib/src/layout/ApplicationLayout.tsx b/packages/lib/src/layout/ApplicationLayout.tsx
index efb826511..844189871 100644
--- a/packages/lib/src/layout/ApplicationLayout.tsx
+++ b/packages/lib/src/layout/ApplicationLayout.tsx
@@ -5,7 +5,6 @@ import DxcHeader from "../header/Header";
 import DxcSidenav from "../sidenav/Sidenav";
 import ApplicationLayoutPropsType, { AppLayoutMainPropsType } from "./types";
 import { bottomLinks, findChildType, socialLinks, year } from "./utils";
-import { dxcLogo } from "./Icons";
 
 const ApplicationLayoutContainer = styled.div`
   top: 0;
@@ -20,6 +19,7 @@ const ApplicationLayoutContainer = styled.div`
 
 const HeaderContainer = styled.div`
   width: 100%;
+  min-height: var(--height-xxxl);
   height: fit-content;
   z-index: var(--z-app-layout-header);
 `;
@@ -61,13 +61,6 @@ const MainContentContainer = styled.main`
   grid-template-rows: 1fr auto;
 `;
 
-const defaultHeaderBranding = {
-  logo: {
-    src: dxcLogo,
-    alt: "DXC Logo",
-  },
-};
-
 const Main = ({ children }: AppLayoutMainPropsType): JSX.Element => <div>{children}</div>;
 
 const DxcApplicationLayout = ({ header, sidenav, footer, children }: ApplicationLayoutPropsType): JSX.Element => {
@@ -75,7 +68,7 @@ const DxcApplicationLayout = ({ header, sidenav, footer, children }: Application
 
   return (
     <ApplicationLayoutContainer ref={ref}>
-      <HeaderContainer>{header ?? <DxcHeader branding={defaultHeaderBranding} />}</HeaderContainer>
+      {header && <HeaderContainer>{header}</HeaderContainer>}
       <BodyContainer>
         {sidenav && <SidenavContainer>{sidenav}</SidenavContainer>}
         <MainContainer>
diff --git a/packages/lib/src/styles/variables.css b/packages/lib/src/styles/variables.css
index 53b0b52dc..cf4919b5d 100644
--- a/packages/lib/src/styles/variables.css
+++ b/packages/lib/src/styles/variables.css
@@ -4,8 +4,8 @@
   /**************/
 
   /* Application Layout */
-  --z-app-layout-header: 100;
-  --z-app-layout-sidenav: 110;
+  --z-app-layout-sidenav: 100;
+  --z-app-layout-header: 110;
 
   /* Header */
   --z-header-overlay: 200;

From d5b4248ea72e65e07131639747c158bf1551c8b9 Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Thu, 13 Nov 2025 11:30:06 +0100
Subject: [PATCH 05/23] Header responsive testing, documentation and
 implementation in website

---
 apps/website/pages/_app.tsx                   |   6 +
 .../screens/common/images/dxc_logo.tsx        |  19 ++
 .../components/header/code/HeaderCodePage.tsx | 170 ++++++++----------
 .../header/overview/HeaderOverviewPage.tsx    |  56 ++----
 packages/lib/src/base-menu/types.ts           |   1 +
 packages/lib/src/header/Header.tsx            |  11 +-
 packages/lib/src/header/types.tsx             |   9 +-
 7 files changed, 130 insertions(+), 142 deletions(-)
 create mode 100644 apps/website/screens/common/images/dxc_logo.tsx

diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx
index b685f4969..7227ba1b3 100644
--- a/apps/website/pages/_app.tsx
+++ b/apps/website/pages/_app.tsx
@@ -14,6 +14,7 @@ import Link from "next/link";
 import { GroupItem, Item, Section } from "../../../packages/lib/src/base-menu/types";
 import { isGroupItem } from "../../../packages/lib/src/base-menu/utils";
 import SidenavLogo from "@/common/sidenav/SidenavLogo";
+import { dxcLogo } from "@/common/images/dxc_logo";
 
 type NextPageWithLayout = NextPage & {
   getLayout?: (_page: ReactElement) => ReactNode;
@@ -99,6 +100,11 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon.png" />
       </Head>
       <DxcApplicationLayout
+        header={
+          <DxcApplicationLayout.Header
+            branding={{ logo: { src: dxcLogo, alt: "DXC Technology" }, appTitle: "Halstack react" }}
+          />
+        }
         sidenav={
           <DxcApplicationLayout.Sidenav
             navItems={filteredSections}
diff --git a/apps/website/screens/common/images/dxc_logo.tsx b/apps/website/screens/common/images/dxc_logo.tsx
new file mode 100644
index 000000000..b67485529
--- /dev/null
+++ b/apps/website/screens/common/images/dxc_logo.tsx
@@ -0,0 +1,19 @@
+export const dxcLogo = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="73" height="40" viewBox="0 0 73 40">
+    <title>DXC Logo</title>
+    <g transform="translate(0)">
+      <g>
+        <path
+          d="M91.613-28.177v2.514H90.231V-28.15l-2.415-3.82h1.616l1.5,2.532,1.526-2.532h1.571ZM83.9-25.555A3.15,3.15,0,0,1,80.6-28.8v-.018a3.231,3.231,0,0,1,3.294-3.262,3.442,3.442,0,0,1,2.469.865l-.87,1.054a2.311,2.311,0,0,0-1.643-.64,1.891,1.891,0,0,0-1.8,1.964v.018a1.886,1.886,0,0,0,1.9,2,2.2,2.2,0,0,0,1.3-.378v-.9H83.858v-1.2h2.729v2.738A4.071,4.071,0,0,1,83.9-25.555Zm-6.416-3.261a1.913,1.913,0,0,0-1.9-1.982A1.883,1.883,0,0,0,73.7-28.835v.018a1.913,1.913,0,0,0,1.9,1.982A1.883,1.883,0,0,0,77.486-28.8Zm-1.9,3.261a3.225,3.225,0,0,1-3.33-3.243v-.018A3.255,3.255,0,0,1,75.6-32.078a3.225,3.225,0,0,1,3.331,3.243v.018A3.255,3.255,0,0,1,75.583-25.555Zm-9.173-.108V-31.97h1.382v5.045h3.133v1.261Zm-3.433-3.153a1.913,1.913,0,0,0-1.9-1.982,1.883,1.883,0,0,0-1.886,1.964v.018a1.913,1.913,0,0,0,1.9,1.982A1.883,1.883,0,0,0,62.978-28.8Zm-1.9,3.261a3.225,3.225,0,0,1-3.33-3.243v-.018a3.255,3.255,0,0,1,3.348-3.262,3.225,3.225,0,0,1,3.331,3.243v.018A3.255,3.255,0,0,1,61.075-25.555Zm-6.508-.108-3.043-4.009v4.009H50.159V-31.97h1.275l2.944,3.883V-31.97h1.364v6.306Zm-8.246,0v-2.531h-2.55v2.531H42.389V-31.97h1.382v2.5h2.55v-2.5H47.7v6.306Zm-8.432.108A3.178,3.178,0,0,1,34.666-28.8v-.018a3.2,3.2,0,0,1,3.276-3.262,3.237,3.237,0,0,1,2.478.973l-.88,1.018a2.315,2.315,0,0,0-1.606-.712,1.866,1.866,0,0,0-1.822,1.964v.018a1.87,1.87,0,0,0,1.822,1.982,2.265,2.265,0,0,0,1.651-.739l.88.891A3.206,3.206,0,0,1,37.889-25.555Zm-9.805-.108V-31.97h4.739v1.235H29.458v1.279h2.962v1.234H29.458V-26.9h3.411v1.234ZM24.322-30.69v5.027H22.939V-30.69H21.028v-1.28h5.206v1.28H24.322"
+          transform="translate(-21.028 65.555)"
+          fill="#010101"
+        />
+        <path
+          d="M75.836-76.712a8.975,8.975,0,0,1,2.246-3.9,8.393,8.393,0,0,1,6.058-2.457h9.824v-5.67H84.139a14.611,14.611,0,0,0-10.232,4.221,14.509,14.509,0,0,0-3.076,4.536,11.913,11.913,0,0,0-.973,3.271Zm0,4.325a8.978,8.978,0,0,0,2.246,3.9,8.394,8.394,0,0,0,6.058,2.457h9.824v5.67H84.139A14.611,14.611,0,0,1,73.907-64.58a14.506,14.506,0,0,1-3.076-4.536,11.91,11.91,0,0,1-.973-3.271ZM57.522-69.832l-7.5,9.473H42.581L53.818-74.55,42.581-88.739H50.02l7.5,9.472,7.5-9.472h7.439L61.225-74.55l11.237,14.19H65.023Zm-12.336-6.88a11.935,11.935,0,0,0-.973-3.271,14.515,14.515,0,0,0-3.076-4.536A14.612,14.612,0,0,0,30.9-88.739H21.081v5.67H30.9a8.394,8.394,0,0,1,6.058,2.457,8.978,8.978,0,0,1,2.246,3.9Zm0,4.325a11.932,11.932,0,0,1-.973,3.271,14.511,14.511,0,0,1-3.076,4.536A14.611,14.611,0,0,1,30.9-60.359H21.081v-5.67H30.9a8.4,8.4,0,0,0,6.058-2.457,8.981,8.981,0,0,0,2.246-3.9h5.978"
+          transform="translate(-21.049 88.739)"
+          fill="#603494"
+        />
+      </g>
+    </g>
+  </svg>
+);
diff --git a/apps/website/screens/components/header/code/HeaderCodePage.tsx b/apps/website/screens/components/header/code/HeaderCodePage.tsx
index 30eddc65c..4122fb4ca 100644
--- a/apps/website/screens/components/header/code/HeaderCodePage.tsx
+++ b/apps/website/screens/components/header/code/HeaderCodePage.tsx
@@ -1,14 +1,36 @@
-import { DxcFlex, DxcTable, DxcParagraph, DxcLink } from "@dxc-technology/halstack-react";
+import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
 import DocFooter from "@/common/DocFooter";
 import QuickNavContainer from "@/common/QuickNavContainer";
-import Link from "next/link";
 import Code, { ExtendedTableCode, TableCode } from "@/common/Code";
 import StatusBadge from "@/common/StatusBadge";
 
-const logoTypeString = `{
-  href?: string;
-  src: string;
-  title?: string;
+const brandingTypeString = `{
+  logo : {
+    src: string | SVG;
+    alt: string;
+    href?: string;
+    onClick?: () => void;
+    };
+  appTitle?: string;
+}`;
+
+const navItemsTypeString = `(GroupItem | Item)[]`;
+
+const commonItemTypeString = `{
+  badge?: ReactElement;
+  icon?: string | SVG;
+  label: string;
+}`;
+
+const itemTypeString = `{ 
+  ${commonItemTypeString}
+  onSelect?: () => void;
+  selected?: boolean;
+}`;
+
+const groupItemTypeString = `{ 
+  ${commonItemTypeString}
+  items: (Item)[];
 }`;
 
 const sections = [
@@ -25,124 +47,90 @@ const sections = [
           </tr>
         </thead>
         <tbody>
-          <tr>
-            <td>content</td>
-            <td>
-              <TableCode>React.ReactNode</TableCode>
-            </td>
-            <td>
-              Content shown in the header. Take into account that the component applies styles for the first child in
-              the content, so we recommend the use of <Code>React.Fragment</Code> to be applied correctly. Otherwise,
-              the styles can be modified.
-            </td>
-            <td>-</td>
-          </tr>
           <tr>
             <td>
               <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
-                <StatusBadge status="new" />
-                logo
+                <StatusBadge status="required" />
+                branding
               </DxcFlex>
             </td>
             <td>
-              <td>
-                <TableCode>{"Logo"}</TableCode>
-                <p>
-                  being <Code>Logo</Code> an object with the following properties:
-                </p>
-                <ExtendedTableCode>{logoTypeString}</ExtendedTableCode>
-              </td>
+              <ExtendedTableCode>{brandingTypeString}</ExtendedTableCode>
             </td>
-            <td>Logo to be displayed inside the header.</td>
+            <td>Object used to configure the header branding, including logo and application title.</td>
             <td>-</td>
           </tr>
           <tr>
-            <td>margin</td>
+            <td>navItems</td>
             <td>
-              <TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'</TableCode>
+              <TableCode>{navItemsTypeString}</TableCode>
             </td>
-            <td>Size of the bottom margin to be applied to the header.</td>
-            <td>-</td>
-          </tr>
-          <tr>
-            <td>onClick</td>
             <td>
-              <TableCode>{"() => void"}</TableCode>
+              Array of navigation items to be displayed in the header navigation menu. Each item can be a single/simple
+              item or a group item.
+              <p>
+                Being <Code>Item</Code> an object with the following properties:
+              </p>
+              <ExtendedTableCode>{itemTypeString}</ExtendedTableCode>
+              <p>
+                and <Code>GroupItem</Code> an object with the following properties:
+              </p>
+              <ExtendedTableCode>{groupItemTypeString}</ExtendedTableCode>
+              Group items will ignore any nested group items to maintain a maximum of two levels in the navigation menu.
+              When responsive, navigation items will be displayed in a vertical menu below the header in a vertical
+              layout.
             </td>
-            <td>This function will be called when the user clicks the header logo.</td>
             <td>-</td>
           </tr>
           <tr>
-            <td>responsiveContent</td>
+            <td>responsiveBottomContent</td>
             <td>
-              <TableCode>{"(closeHandler: () => void) => React.ReactNode"}</TableCode>
+              <TableCode>React.ReactNode</TableCode>
             </td>
             <td>
-              Content shown in responsive version. It receives the close menu handler that can be used to add that
-              functionality when a element is clicked.
+              The content rendered in the bottom part of the header menu under the navigation items when in responsive
+              mode.
             </td>
             <td>-</td>
           </tr>
           <tr>
-            <td>tabIndex</td>
+            <td>sideContent</td>
             <td>
-              <TableCode>number</TableCode>
+              <TableCode>{"React.ReactNode | (isResponsive: boolean) => React.ReactNode"}</TableCode>
             </td>
-            <td>Value of the tabindex for all interactive elements, except those inside the custom area.</td>
             <td>
-              <TableCode>0</TableCode>
-            </td>
-          </tr>
-          <tr>
-            <td>underlined</td>
-            <td>
-              <TableCode>boolean</TableCode>
-            </td>
-            <td>Whether a contrast line should appear at the bottom of the header.</td>
-            <td>
-              <TableCode>false</TableCode>
+              Content to be displayed on the right side of the header. It can be a React node or a function that
+              receives a boolean indicating if the header is in responsive mode and returns a React node.
             </td>
           </tr>
         </tbody>
       </DxcTable>
     ),
   },
-  {
-    title: "DxcHeader.Dropdown",
-    content: (
-      <DxcParagraph>
-        Everything between the tags will be displayed as a dropdown. If you want to show a{" "}
-        <Link href="/components/dropdown" passHref legacyBehavior>
-          <DxcLink>DxcDropdown</DxcLink>
-        </Link>
-        , as a shortcut, you can also use it as a direct child of the DxcHeader without the tags, but we recommend to
-        use it with the tags since some styles will be applied for a better fit in the header.
-      </DxcParagraph>
-    ),
-  },
-  {
-    title: "Examples",
-    subSections: [
-      {
-        title: "Header in application layout",
-        content: (
-          <iframe
-            src="https://codesandbox.io/embed/rough-https-9oduyh?fontsize=14&hidenavigation=1&theme=dark"
-            style={{
-              width: "100%",
-              minHeight: "500px",
-              border: "0",
-              borderRadius: "4px",
-              overflow: "hidden",
-            }}
-            title="Footer and header"
-            allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-            sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-          />
-        ),
-      },
-    ],
-  },
+  // UPDATE to new sandbox link when available
+  // {
+  //   title: "Examples",
+  //   subSections: [
+  //     {
+  //       title: "Header in application layout",
+  //       content: (
+  //         <iframe
+  //           src="https://codesandbox.io/embed/rough-https-9oduyh?fontsize=14&hidenavigation=1&theme=dark"
+  //           style={{
+  //             width: "100%",
+  //             minHeight: "500px",
+  //             border: "0",
+  //             borderRadius: "4px",
+  //             overflow: "hidden",
+  //           }}
+  //           title="Footer and header"
+  //           sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  //           allowFullScreen
+  //         />
+  //       ),
+  //     },
+  //   ],
+  // },
 ];
 
 const HeaderCodePage = () => {
diff --git a/apps/website/screens/components/header/overview/HeaderOverviewPage.tsx b/apps/website/screens/components/header/overview/HeaderOverviewPage.tsx
index 1558e31f0..aa30d8e96 100644
--- a/apps/website/screens/components/header/overview/HeaderOverviewPage.tsx
+++ b/apps/website/screens/components/header/overview/HeaderOverviewPage.tsx
@@ -1,10 +1,6 @@
 import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
 import DocFooter from "@/common/DocFooter";
-import Figure from "@/common/Figure";
-import Image from "@/common/Image";
 import QuickNavContainer from "@/common/QuickNavContainer";
-import anatomy from "./images/header_anatomy.png";
-import variants from "./images/header_variants.png";
 
 const sections = [
   {
@@ -12,8 +8,8 @@ const sections = [
     content: (
       <DxcParagraph>
         The Header serves as the primary navigation and identity element for an application. It includes branding, quick
-        access to key sections via navigation links, and a user account menu. Its consistent presence reinforces brand
-        recognition and improves usability by offering easy navigation and access to user-related actions.
+        access to key sections via navigation links, and a customizable side content. Its consistent presence reinforces
+        brand recognition and improves usability by offering easy navigation and access to quick actions.
       </DxcParagraph>
     ),
   },
@@ -21,7 +17,7 @@ const sections = [
     title: "Anatomy",
     content: (
       <>
-        <Image src={anatomy} alt="Header anatomy" />
+        {/* <Image src={anatomy} alt="Header anatomy" /> */}
         <DxcBulletedList type="number">
           <DxcBulletedList.Item>
             <strong>Container:</strong> a layout structure that wraps all Header elements, ensuring consistent
@@ -40,41 +36,13 @@ const sections = [
             <strong>Navigation Links</strong> <em>(Optional)</em>: key links to main sections of the application.
           </DxcBulletedList.Item>
           <DxcBulletedList.Item>
-            <strong>Header Dropdown</strong> <em>(Optional)</em>: a dropdown menu for user-specific actions such as
+            <strong>Side Content</strong> <em>(Optional)</em>: a customizable area for user-specific actions such as
             profile, settings, or logout, triggered by click or keyboard focus.
           </DxcBulletedList.Item>
-          <DxcBulletedList.Item>
-            <strong>Divider</strong> <em>(Optional)</em>: horizontal line that visually separates the Header from the
-            page content below, enhancing layout clarity.
-          </DxcBulletedList.Item>
         </DxcBulletedList>
       </>
     ),
   },
-  {
-    title: "Variants",
-    content: (
-      <>
-        <DxcParagraph>
-          To maintain consistency with the way variants are structured across components, the Header offers two primary
-          styles: <strong>default</strong> and <strong>underlined</strong>.
-        </DxcParagraph>
-        <DxcBulletedList>
-          <DxcBulletedList.Item>
-            The <strong>default</strong> variant features a clean header without a visual separation from the page
-            content, ideal for minimalistic or immersive layouts.
-          </DxcBulletedList.Item>
-          <DxcBulletedList.Item>
-            The <strong>underlined</strong> variant includes a subtle bottom divider, creating a clear visual boundary
-            between the header and the rest of the page content, enhancing structure and clarity.
-          </DxcBulletedList.Item>
-        </DxcBulletedList>
-        <Figure caption="Header variants">
-          <Image src={variants} alt="Header variants" />
-        </Figure>
-      </>
-    ),
-  },
   {
     title: "Responsive version",
     content: (
@@ -87,7 +55,7 @@ const sections = [
         </DxcParagraph>
         <DxcParagraph>
           "On smaller screens, the header content is replaced by a button. Triggering this button opens a menu that
-          displays custom content."
+          displays navigation links and a bottom section."
         </DxcParagraph>
       </>
     ),
@@ -100,17 +68,12 @@ const sections = [
           <strong>Keep the Header minimal and functional:</strong> include only essential elements.
         </DxcBulletedList.Item>
         <DxcBulletedList.Item>
-          <strong>Select the correct variant according to visual needs:</strong> Use the <strong>default</strong>{" "}
-          variant for simple pages and underlined variant to visually separate the Header from the content when
-          necessary.
-        </DxcBulletedList.Item>
-        <DxcBulletedList.Item>
-          <strong>Use dropdowns correctly for complex navigation:</strong> Only use Header dropdowns when necessary to
-          organize multiple links logically without overwhelming the top navigation.
+          <strong>Use navigation links correctly:</strong> Only use navigation groups when necessary to organize
+          multiple links logically without overwhelming the top navigation.
         </DxcBulletedList.Item>
         <DxcBulletedList.Item>
           <strong>Avoid overcrowding the Header:</strong> Limit the number of top-level navigation links. Group
-          secondary links inside dropdowns if needed to maintain a clean and user-friendly interface.
+          secondary links inside navigation groups if needed to maintain a clean and user-friendly interface.
         </DxcBulletedList.Item>
         <DxcBulletedList.Item>
           <strong>Display the application name clearly and concisely:</strong> The application name should be readable,
@@ -118,7 +81,8 @@ const sections = [
         </DxcBulletedList.Item>
         <DxcBulletedList.Item>
           <strong>Design the Header to respond gracefully to smaller screens:</strong> When adapting the Header to
-          mobile or tablet layouts, restructure the content to preserve both visual clarity and functional hierarchy.
+          mobile or tablet layouts, restructure the side content to preserve both visual clarity and functional
+          hierarchy.
         </DxcBulletedList.Item>
       </DxcBulletedList>
     ),
diff --git a/packages/lib/src/base-menu/types.ts b/packages/lib/src/base-menu/types.ts
index 88ab76958..86d70c0f9 100644
--- a/packages/lib/src/base-menu/types.ts
+++ b/packages/lib/src/base-menu/types.ts
@@ -97,6 +97,7 @@ type BaseMenuContextProps = {
 };
 
 export type {
+  CommonItemProps,
   BaseMenuContextProps,
   GroupItem,
   GroupItemProps,
diff --git a/packages/lib/src/header/Header.tsx b/packages/lib/src/header/Header.tsx
index e048ab18a..494bb0da6 100644
--- a/packages/lib/src/header/Header.tsx
+++ b/packages/lib/src/header/Header.tsx
@@ -100,7 +100,10 @@ const Overlay = styled.div`
 
 /**
  * Prepares the navigation items to be rendered in the header.
+ * Even though the typing does not allow this, the navigation tree does.
+ * So this function limits the levels of navigation to the limit by ignoring any nested group items over that limit.
  * @param navItems prop with the navigation items.
+ * @param level current level of recursion.
  * @return Processed navigation items with limited levels.
  */
 const sanitizeNavItems = (navItems: HeaderProps["navItems"], level?: number): (GroupItem | Item)[] => {
@@ -153,7 +156,11 @@ const DxcHeader = ({ branding, navItems, sideContent, responsiveBottomContent }:
         <DxcGrid
           templateColumns={
             !isResponsive && sanitizedNavItems && sanitizedNavItems.length > 0
-              ? ["auto", `minmax(auto, ${MAX_MAIN_NAV_SIZE})`, "auto"]
+              ? [
+                  `minmax(auto, calc((100% - ${MAX_MAIN_NAV_SIZE}) / 2))`,
+                  `minmax(auto, ${MAX_MAIN_NAV_SIZE})`,
+                  `minmax(auto, calc((100% - ${MAX_MAIN_NAV_SIZE}) / 2))`,
+                ]
               : ["auto", "auto"]
           }
           templateRows={["var(--height-xxxl)"]}
@@ -197,7 +204,7 @@ const DxcHeader = ({ branding, navItems, sideContent, responsiveBottomContent }:
           )}
           {sideContent && (
             <RightSideContainer>
-              {typeof sideContent === "function" ? sideContent(isResponsive) : isResponsive && sideContent}{" "}
+              {typeof sideContent === "function" ? sideContent(isResponsive) : sideContent}{" "}
               {isResponsive && <HamburguerButton onClick={toggleMenu} />}
             </RightSideContainer>
           )}
diff --git a/packages/lib/src/header/types.tsx b/packages/lib/src/header/types.tsx
index 124c94125..10f9da349 100644
--- a/packages/lib/src/header/types.tsx
+++ b/packages/lib/src/header/types.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { GroupItem, Item } from "../base-menu/types";
+import { CommonItemProps, Item } from "../base-menu/types";
 import { SVG } from "../common/utils";
 
 type LogoPropsType = {
@@ -14,14 +14,17 @@ type BrandingPropsType = {
   appTitle?: string;
 };
 
+type GroupItem = CommonItemProps & {
+  items: Item[];
+};
+
 type MainNavPropsType = (GroupItem | Item)[];
 
 type Props = {
   branding: BrandingPropsType;
-  responsiveBranding?: BrandingPropsType;
   navItems?: MainNavPropsType;
-  sideContent?: ReactNode | ((isResponsive: boolean) => ReactNode);
   responsiveBottomContent?: ReactNode;
+  sideContent?: ReactNode | ((isResponsive: boolean) => ReactNode);
 };
 
 export default Props;

From f4236917455d4f09877a0f64bb568dc0fefd924e Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Thu, 13 Nov 2025 12:06:42 +0100
Subject: [PATCH 06/23] Header accessibility test

---
 .../src/header/Header.accessibilty.test.tsx   | 84 +++++++++++++++++++
 1 file changed, 84 insertions(+)
 create mode 100644 packages/lib/src/header/Header.accessibilty.test.tsx

diff --git a/packages/lib/src/header/Header.accessibilty.test.tsx b/packages/lib/src/header/Header.accessibilty.test.tsx
new file mode 100644
index 000000000..6a95d78e6
--- /dev/null
+++ b/packages/lib/src/header/Header.accessibilty.test.tsx
@@ -0,0 +1,84 @@
+import { render } from "@testing-library/react";
+import { axe, formatRules } from "../../test/accessibility/axe-helper";
+import DxcHeader from "./Header";
+import rules from "../../test/accessibility/rules/specific/header/disabledRules";
+import { vi } from "vitest";
+import DxcBadge from "../badge/Badge";
+import DxcButton from "../button/Button";
+
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}));
+
+const disabledRules = {
+  rules: formatRules(rules),
+};
+
+const iconSVG = (
+  <svg viewBox="0 0 24 24" height="24" width="24" fill="currentColor">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
+  </svg>
+);
+
+const iconUrl = "https://iconape.com/wp-content/files/yd/367773/svg/logo-linkedin-logo-icon-png-svg.png";
+
+const branding = {
+  logo: {
+    src: iconSVG,
+    alt: "DXC Logo",
+    href: iconUrl,
+  },
+  appTitle:
+    "Application Title with a very long name that exceeds the normal length to test how the header manages overflow situations",
+};
+
+const items = [
+  {
+    label: "Grouped Item 1",
+    icon: "favorite",
+    items: [
+      { label: "Item 1", icon: "person", selected: true },
+      {
+        label: "Grouped Item 2",
+        items: [
+          {
+            label: "Item 2",
+            icon: "bookmark",
+            badge: <DxcBadge color="primary" label="Experimental" />,
+          },
+          { label: "Selected Item 3" },
+        ],
+      },
+    ],
+    badge: <DxcBadge color="success" label="New" />,
+  },
+  { label: "Item 4", icon: "key" },
+  { label: "Item 5", icon: "person" },
+  { label: "Grouped Item 6", items: [{ label: "Item 7", icon: "person" }, { label: "Item 8" }] },
+  { label: "Item 9" },
+];
+
+describe("Header component accessibility tests", () => {
+  beforeAll(() => {
+    Object.defineProperty(window, "matchMedia", {
+      writable: true,
+      value: vi.fn().mockImplementation(() => ({
+        matches: false,
+      })),
+    });
+  });
+  it("Should not have basic accessibility issues", async () => {
+    const { container } = render(
+      <DxcHeader
+        branding={branding}
+        navItems={items}
+        sideContent={<DxcButton icon="settings" mode="tertiary" size={{ height: "medium" }} onClick={() => {}} />}
+      />
+    );
+    const results = await axe(container, disabledRules);
+    expect(results.violations).toHaveLength(0);
+  });
+});

From ed16f2a60f994ff765c71050feda080794477d2e Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Thu, 13 Nov 2025 12:38:37 +0100
Subject: [PATCH 07/23] Trying to fix storybook interaction exception

---
 packages/lib/src/header/Header.stories.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/lib/src/header/Header.stories.tsx b/packages/lib/src/header/Header.stories.tsx
index c015ec14f..4028e25af 100644
--- a/packages/lib/src/header/Header.stories.tsx
+++ b/packages/lib/src/header/Header.stories.tsx
@@ -218,7 +218,7 @@ export const Responsive: Story = {
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const menuButton = await waitFor(() => canvas.getAllByRole("button")[1]);
-    if (menuButton) userEvent.click(menuButton);
+    const menuButtons = await waitFor(() => canvas.getAllByRole("button"));
+    if (menuButtons[1]) userEvent.click(menuButtons[1]);
   },
 };

From f9bb5e23e9d2f76cb5688d4dc6a38b17fada8c02 Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Thu, 13 Nov 2025 12:40:42 +0100
Subject: [PATCH 08/23] Title added to button

---
 packages/lib/src/header/Header.accessibilty.test.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/lib/src/header/Header.accessibilty.test.tsx b/packages/lib/src/header/Header.accessibilty.test.tsx
index 6a95d78e6..7ee54278a 100644
--- a/packages/lib/src/header/Header.accessibilty.test.tsx
+++ b/packages/lib/src/header/Header.accessibilty.test.tsx
@@ -75,7 +75,9 @@ describe("Header component accessibility tests", () => {
       <DxcHeader
         branding={branding}
         navItems={items}
-        sideContent={<DxcButton icon="settings" mode="tertiary" size={{ height: "medium" }} onClick={() => {}} />}
+        sideContent={
+          <DxcButton title="Settings" icon="settings" mode="tertiary" size={{ height: "medium" }} onClick={() => {}} />
+        }
       />
     );
     const results = await axe(container, disabledRules);

From 0546382dd2ad6f815c927488a2dfe65218e5fea5 Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Thu, 13 Nov 2025 13:03:13 +0100
Subject: [PATCH 09/23] accessibility test correctly named

---
 ...Header.accessibilty.test.tsx => Header.accessibility.test.tsx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/lib/src/header/{Header.accessibilty.test.tsx => Header.accessibility.test.tsx} (100%)

diff --git a/packages/lib/src/header/Header.accessibilty.test.tsx b/packages/lib/src/header/Header.accessibility.test.tsx
similarity index 100%
rename from packages/lib/src/header/Header.accessibilty.test.tsx
rename to packages/lib/src/header/Header.accessibility.test.tsx

From c2a305dbc785df50857348cf110a2f758ae04aff Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Thu, 13 Nov 2025 13:08:55 +0100
Subject: [PATCH 10/23] title added to buttons in test

---
 packages/lib/src/header/Header.stories.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/lib/src/header/Header.stories.tsx b/packages/lib/src/header/Header.stories.tsx
index 4028e25af..9f2d7a257 100644
--- a/packages/lib/src/header/Header.stories.tsx
+++ b/packages/lib/src/header/Header.stories.tsx
@@ -130,11 +130,11 @@ const HeaderInLayout = () => (
         sideContent={(isResponsive) =>
           isResponsive ? (
             <>
-              <DxcButton icon="settings" mode="tertiary" size={{ height: "medium" }} />
+              <DxcButton icon="settings" title="Settings" mode="tertiary" size={{ height: "medium" }} />
             </>
           ) : (
             <>
-              <DxcButton icon="settings" mode="tertiary" size={{ height: "medium" }} />
+              <DxcButton icon="settings" title="Settings" mode="tertiary" size={{ height: "medium" }} />
               <DxcButton label="Side button" mode="secondary" size={{ height: "medium" }} />
               <DxcButton label="Another button" mode="primary" size={{ height: "medium" }} />
             </>

From c8a6f6182fcaca17672240e4f8f796adcaaf2b00 Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Thu, 13 Nov 2025 13:21:34 +0100
Subject: [PATCH 11/23] addin rules exceptions

---
 packages/lib/src/header/Header.stories.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/lib/src/header/Header.stories.tsx b/packages/lib/src/header/Header.stories.tsx
index 9f2d7a257..02cc833e8 100644
--- a/packages/lib/src/header/Header.stories.tsx
+++ b/packages/lib/src/header/Header.stories.tsx
@@ -10,6 +10,8 @@ import { dxcLogo } from "./Icons";
 import DxcButton from "../button/Button";
 import { waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import preview from "../../.storybook/preview";
+import disabledRules from "../../test/accessibility/rules/specific/header/disabledRules";
 
 export default {
   title: "Header",
@@ -28,6 +30,16 @@ export default {
       return <Story />;
     },
   ],
+  parameters: {
+    a11y: {
+      config: {
+        rules: [
+          ...(preview?.parameters?.a11y?.config?.rules || []),
+          ...disabledRules.map((ruleId) => ({ id: ruleId, enabled: false })),
+        ],
+      },
+    },
+  },
 } satisfies Meta<typeof DxcHeader>;
 
 const branding = {

From 55a0c2e144ab7a390182aac63d883f923fde2c7c Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Thu, 13 Nov 2025 13:36:20 +0100
Subject: [PATCH 12/23] adding title to missing title in header

---
 packages/lib/src/header/Header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/lib/src/header/Header.tsx b/packages/lib/src/header/Header.tsx
index 494bb0da6..43e201c87 100644
--- a/packages/lib/src/header/Header.tsx
+++ b/packages/lib/src/header/Header.tsx
@@ -73,7 +73,7 @@ const MainNavContainer = styled.div`
 `;
 
 const HamburguerButton = ({ onClick }: { onClick: () => void }) => {
-  return <DxcButton icon="menu" mode="tertiary" aria-label="Menu button" onClick={onClick} />;
+  return <DxcButton title="Toggle menu" icon="menu" mode="tertiary" aria-label="Menu button" onClick={onClick} />;
 };
 
 const ResponsiveMenuContainer = styled.div`

From d919166ab4dc64b6c4818e65445530ace5c6fb3b Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Thu, 13 Nov 2025 13:48:42 +0100
Subject: [PATCH 13/23] changing userEvent to storybook's one

---
 packages/lib/src/header/Header.stories.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/lib/src/header/Header.stories.tsx b/packages/lib/src/header/Header.stories.tsx
index 02cc833e8..34448da43 100644
--- a/packages/lib/src/header/Header.stories.tsx
+++ b/packages/lib/src/header/Header.stories.tsx
@@ -8,8 +8,7 @@ import DxcApplicationLayout from "../layout/ApplicationLayout";
 import DxcParagraph from "../paragraph/Paragraph";
 import { dxcLogo } from "./Icons";
 import DxcButton from "../button/Button";
-import { waitFor, within } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import { waitFor, userEvent, within } from "storybook/internal/test";
 import preview from "../../.storybook/preview";
 import disabledRules from "../../test/accessibility/rules/specific/header/disabledRules";
 
@@ -231,6 +230,6 @@ export const Responsive: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const menuButtons = await waitFor(() => canvas.getAllByRole("button"));
-    if (menuButtons[1]) userEvent.click(menuButtons[1]);
+    if (menuButtons[1]) await userEvent.click(menuButtons[1]);
   },
 };

From d9b5760e5bea9083893eda8e3156252231d1ba5c Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Thu, 13 Nov 2025 13:54:36 +0100
Subject: [PATCH 14/23] adding wait to render menu

---
 packages/lib/src/header/Header.stories.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/lib/src/header/Header.stories.tsx b/packages/lib/src/header/Header.stories.tsx
index 34448da43..9537a4542 100644
--- a/packages/lib/src/header/Header.stories.tsx
+++ b/packages/lib/src/header/Header.stories.tsx
@@ -231,5 +231,6 @@ export const Responsive: Story = {
     const canvas = within(canvasElement);
     const menuButtons = await waitFor(() => canvas.getAllByRole("button"));
     if (menuButtons[1]) await userEvent.click(menuButtons[1]);
+    await waitFor(() => canvas.getByText("Bottom content button"));
   },
 };

From 3469d39b2eef84ae83f36a2994d8a3e4cd6b61fc Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Thu, 13 Nov 2025 14:01:52 +0100
Subject: [PATCH 15/23] trying to fix inconsistencies in actions

---
 packages/lib/src/header/Header.stories.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/lib/src/header/Header.stories.tsx b/packages/lib/src/header/Header.stories.tsx
index 9537a4542..84c6376fc 100644
--- a/packages/lib/src/header/Header.stories.tsx
+++ b/packages/lib/src/header/Header.stories.tsx
@@ -230,7 +230,11 @@ export const Responsive: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const menuButtons = await waitFor(() => canvas.getAllByRole("button"));
-    if (menuButtons[1]) await userEvent.click(menuButtons[1]);
+    if (menuButtons[1]) {
+      await userEvent.click(menuButtons[1]);
+      await userEvent.click(menuButtons[1]);
+      await userEvent.click(menuButtons[1]);
+    }
     await waitFor(() => canvas.getByText("Bottom content button"));
   },
 };

From 214988bcab3193173911033e7f9aceb83c2b9ffa Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Thu, 13 Nov 2025 14:13:53 +0100
Subject: [PATCH 16/23] adding steps to test

---
 packages/lib/src/header/Header.stories.tsx | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/lib/src/header/Header.stories.tsx b/packages/lib/src/header/Header.stories.tsx
index 84c6376fc..7337d4125 100644
--- a/packages/lib/src/header/Header.stories.tsx
+++ b/packages/lib/src/header/Header.stories.tsx
@@ -8,7 +8,7 @@ import DxcApplicationLayout from "../layout/ApplicationLayout";
 import DxcParagraph from "../paragraph/Paragraph";
 import { dxcLogo } from "./Icons";
 import DxcButton from "../button/Button";
-import { waitFor, userEvent, within } from "storybook/internal/test";
+import { userEvent, within } from "storybook/internal/test";
 import preview from "../../.storybook/preview";
 import disabledRules from "../../test/accessibility/rules/specific/header/disabledRules";
 
@@ -227,14 +227,17 @@ export const Responsive: Story = {
   globals: {
     viewport: { value: "iphonex", isRotated: false },
   },
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
-    const menuButtons = await waitFor(() => canvas.getAllByRole("button"));
-    if (menuButtons[1]) {
-      await userEvent.click(menuButtons[1]);
-      await userEvent.click(menuButtons[1]);
-      await userEvent.click(menuButtons[1]);
-    }
-    await waitFor(() => canvas.getByText("Bottom content button"));
+    await step("Open Menu", async () => {
+      const buttons = await canvas.findAllByRole("button");
+      if (buttons[1]) {
+        await userEvent.click(buttons[1]);
+      }
+    });
+
+    await step("Wait for content", async () => {
+      await canvas.findByText("Bottom content button");
+    });
   },
 };

From 235ed9f9b9c8386e276f667450e2709f3b24b43a Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Thu, 13 Nov 2025 14:24:33 +0100
Subject: [PATCH 17/23] Trying to improve inconsistencies in the test

---
 packages/lib/src/header/Header.stories.tsx | 21 +++++++++------------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/packages/lib/src/header/Header.stories.tsx b/packages/lib/src/header/Header.stories.tsx
index 7337d4125..736ffd44f 100644
--- a/packages/lib/src/header/Header.stories.tsx
+++ b/packages/lib/src/header/Header.stories.tsx
@@ -8,7 +8,7 @@ import DxcApplicationLayout from "../layout/ApplicationLayout";
 import DxcParagraph from "../paragraph/Paragraph";
 import { dxcLogo } from "./Icons";
 import DxcButton from "../button/Button";
-import { userEvent, within } from "storybook/internal/test";
+import { screen, userEvent, within } from "storybook/internal/test";
 import preview from "../../.storybook/preview";
 import disabledRules from "../../test/accessibility/rules/specific/header/disabledRules";
 
@@ -227,17 +227,14 @@ export const Responsive: Story = {
   globals: {
     viewport: { value: "iphonex", isRotated: false },
   },
-  play: async ({ canvasElement, step }) => {
+  play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    await step("Open Menu", async () => {
-      const buttons = await canvas.findAllByRole("button");
-      if (buttons[1]) {
-        await userEvent.click(buttons[1]);
-      }
-    });
-
-    await step("Wait for content", async () => {
-      await canvas.findByText("Bottom content button");
-    });
+    const buttons = await canvas.findAllByRole<HTMLButtonElement>("button");
+    const secondButton = buttons[1];
+    if (!secondButton) {
+      throw new Error("Button not found");
+    }
+    await userEvent.click(secondButton);
+    await screen.findByText("Bottom content button");
   },
 };

From c814b76a502fba3b3e877719fdda880cbf6bd777 Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Thu, 13 Nov 2025 14:39:22 +0100
Subject: [PATCH 18/23] changing actions to tabs

---
 packages/lib/src/header/Header.stories.tsx | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/lib/src/header/Header.stories.tsx b/packages/lib/src/header/Header.stories.tsx
index 736ffd44f..2aa101ff8 100644
--- a/packages/lib/src/header/Header.stories.tsx
+++ b/packages/lib/src/header/Header.stories.tsx
@@ -8,7 +8,7 @@ import DxcApplicationLayout from "../layout/ApplicationLayout";
 import DxcParagraph from "../paragraph/Paragraph";
 import { dxcLogo } from "./Icons";
 import DxcButton from "../button/Button";
-import { screen, userEvent, within } from "storybook/internal/test";
+import { userEvent, within } from "storybook/internal/test";
 import preview from "../../.storybook/preview";
 import disabledRules from "../../test/accessibility/rules/specific/header/disabledRules";
 
@@ -229,12 +229,9 @@ export const Responsive: Story = {
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const buttons = await canvas.findAllByRole<HTMLButtonElement>("button");
-    const secondButton = buttons[1];
-    if (!secondButton) {
-      throw new Error("Button not found");
-    }
-    await userEvent.click(secondButton);
-    await screen.findByText("Bottom content button");
+    await userEvent.tab();
+    await userEvent.tab();
+    await userEvent.keyboard("{Enter}");
+    await canvas.findByText("Bottom content button");
   },
 };

From 5226a0addb25df1e8ee6c23e1baa291b08f9b774 Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Thu, 13 Nov 2025 14:48:20 +0100
Subject: [PATCH 19/23] added settimeout

---
 packages/lib/src/header/Header.stories.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/lib/src/header/Header.stories.tsx b/packages/lib/src/header/Header.stories.tsx
index 2aa101ff8..4edc1712b 100644
--- a/packages/lib/src/header/Header.stories.tsx
+++ b/packages/lib/src/header/Header.stories.tsx
@@ -230,6 +230,7 @@ export const Responsive: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     await userEvent.tab();
+    await new Promise<void>((resolve) => setTimeout(resolve, 100));
     await userEvent.tab();
     await userEvent.keyboard("{Enter}");
     await canvas.findByText("Bottom content button");

From 942adb311371cbff9816f220e9b61f92897854ef Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Thu, 13 Nov 2025 14:56:59 +0100
Subject: [PATCH 20/23] increasing wait

---
 packages/lib/src/header/Header.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/lib/src/header/Header.stories.tsx b/packages/lib/src/header/Header.stories.tsx
index 4edc1712b..34885e585 100644
--- a/packages/lib/src/header/Header.stories.tsx
+++ b/packages/lib/src/header/Header.stories.tsx
@@ -230,7 +230,7 @@ export const Responsive: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     await userEvent.tab();
-    await new Promise<void>((resolve) => setTimeout(resolve, 100));
+    await new Promise<void>((resolve) => setTimeout(resolve, 1000));
     await userEvent.tab();
     await userEvent.keyboard("{Enter}");
     await canvas.findByText("Bottom content button");

From 2f9c3410498b95ee9fe2479e345d46fc33f4aef9 Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Thu, 13 Nov 2025 15:03:44 +0100
Subject: [PATCH 21/23] additional wait time

---
 packages/lib/src/header/Header.stories.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/lib/src/header/Header.stories.tsx b/packages/lib/src/header/Header.stories.tsx
index 34885e585..ff4c847ee 100644
--- a/packages/lib/src/header/Header.stories.tsx
+++ b/packages/lib/src/header/Header.stories.tsx
@@ -229,8 +229,9 @@ export const Responsive: Story = {
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
+    await new Promise<void>((resolve) => setTimeout(resolve, 100));
     await userEvent.tab();
-    await new Promise<void>((resolve) => setTimeout(resolve, 1000));
+    await new Promise<void>((resolve) => setTimeout(resolve, 100));
     await userEvent.tab();
     await userEvent.keyboard("{Enter}");
     await canvas.findByText("Bottom content button");

From fefeceef571ed0ff4d0608b546673823f885217e Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Fri, 14 Nov 2025 11:25:30 +0100
Subject: [PATCH 22/23] submenu styles on popover + conditional header check

---
 packages/lib/src/base-menu/SubMenu.tsx        | 6 ++++--
 packages/lib/src/layout/ApplicationLayout.tsx | 6 +++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/lib/src/base-menu/SubMenu.tsx b/packages/lib/src/base-menu/SubMenu.tsx
index 106656e9c..f7114b96c 100644
--- a/packages/lib/src/base-menu/SubMenu.tsx
+++ b/packages/lib/src/base-menu/SubMenu.tsx
@@ -18,10 +18,12 @@ const SubMenuContainer = styled.ul<{
   ${({ isPopOver }) =>
     isPopOver &&
     `
-      max-width: 240px;
+      min-width: 200px;
+      max-width: 320px;
+      padding: var(--spacing-padding-xs);
       background-color: var(--color-bg-neutral-lightest);
       border-radius: var(--border-radius-m);
-      box-shadow: var(--shadow-200);
+      box-shadow: var(--shadow-100);
     `}
   ${({ depthLevel, displayGroupLines }) =>
     displayGroupLines &&
diff --git a/packages/lib/src/layout/ApplicationLayout.tsx b/packages/lib/src/layout/ApplicationLayout.tsx
index 844189871..890c5b5c7 100644
--- a/packages/lib/src/layout/ApplicationLayout.tsx
+++ b/packages/lib/src/layout/ApplicationLayout.tsx
@@ -6,11 +6,11 @@ import DxcSidenav from "../sidenav/Sidenav";
 import ApplicationLayoutPropsType, { AppLayoutMainPropsType } from "./types";
 import { bottomLinks, findChildType, socialLinks, year } from "./utils";
 
-const ApplicationLayoutContainer = styled.div`
+const ApplicationLayoutContainer = styled.div<{ header?: React.ReactNode }>`
   top: 0;
   left: 0;
   display: grid;
-  grid-template-rows: auto 1fr;
+  grid-template-rows: ${({ header }) => (header ? "auto 1fr" : "1fr")};
   height: 100vh;
   width: 100vw;
   position: absolute;
@@ -67,7 +67,7 @@ const DxcApplicationLayout = ({ header, sidenav, footer, children }: Application
   const ref = useRef(null);
 
   return (
-    <ApplicationLayoutContainer ref={ref}>
+    <ApplicationLayoutContainer ref={ref} header={header}>
       {header && <HeaderContainer>{header}</HeaderContainer>}
       <BodyContainer>
         {sidenav && <SidenavContainer>{sidenav}</SidenavContainer>}

From 52152a152af2807b24c1abd43758e9f485ed4b49 Mon Sep 17 00:00:00 2001
From: Jialecl <jialestrabajos@gmail.com>
Date: Fri, 14 Nov 2025 12:44:35 +0100
Subject: [PATCH 23/23] changes based on feedback

---
 .../components/header/code/HeaderCodePage.tsx  | 18 ++++++++----------
 .../lib/src/header/{types.tsx => types.ts}     |  0
 2 files changed, 8 insertions(+), 10 deletions(-)
 rename packages/lib/src/header/{types.tsx => types.ts} (100%)

diff --git a/apps/website/screens/components/header/code/HeaderCodePage.tsx b/apps/website/screens/components/header/code/HeaderCodePage.tsx
index 4122fb4ca..2f1b3d484 100644
--- a/apps/website/screens/components/header/code/HeaderCodePage.tsx
+++ b/apps/website/screens/components/header/code/HeaderCodePage.tsx
@@ -10,26 +10,24 @@ const brandingTypeString = `{
     alt: string;
     href?: string;
     onClick?: () => void;
-    };
+  };
   appTitle?: string;
 }`;
 
 const navItemsTypeString = `(GroupItem | Item)[]`;
 
-const commonItemTypeString = `{
+const itemTypeString = `{
   badge?: ReactElement;
   icon?: string | SVG;
   label: string;
-}`;
-
-const itemTypeString = `{ 
-  ${commonItemTypeString}
   onSelect?: () => void;
   selected?: boolean;
 }`;
 
-const groupItemTypeString = `{ 
-  ${commonItemTypeString}
+const groupItemTypeString = `{
+  badge?: ReactElement;
+  icon?: string | SVG;
+  label: string;
   items: (Item)[];
 }`;
 
@@ -99,8 +97,8 @@ const sections = [
               <TableCode>{"React.ReactNode | (isResponsive: boolean) => React.ReactNode"}</TableCode>
             </td>
             <td>
-              Content to be displayed on the right side of the header. It can be a React node or a function that
-              receives a boolean indicating if the header is in responsive mode and returns a React node.
+              Content to be displayed on the right side of the header. It can be a ReactNode or a function that receives
+              a boolean indicating if the header is in responsive mode and returns a ReactNode.
             </td>
           </tr>
         </tbody>
diff --git a/packages/lib/src/header/types.tsx b/packages/lib/src/header/types.ts
similarity index 100%
rename from packages/lib/src/header/types.tsx
rename to packages/lib/src/header/types.ts