diff --git a/apps/website/screens/components/header/HeaderPageLayout.tsx b/apps/website/screens/components/header/HeaderPageLayout.tsx index 4f26a0679..83d219086 100644 --- a/apps/website/screens/components/header/HeaderPageLayout.tsx +++ b/apps/website/screens/components/header/HeaderPageLayout.tsx @@ -17,8 +17,9 @@ const HeaderPageHeading = ({ children }: { children: ReactNode }) => { - A horizontal bar located at the top of the application, providing branding, primary navigation, and user - account controls. + The header is a structural component placed at the top of the interface. It provides global access to + navigation, branding, and user actions, ensuring consistency and orientation across products and + applications. The header is part of the application layout, so it can only be used inside of it. Please check the{" "} diff --git a/apps/website/screens/components/header/overview/HeaderOverviewPage.tsx b/apps/website/screens/components/header/overview/HeaderOverviewPage.tsx index aa30d8e96..94253f02b 100644 --- a/apps/website/screens/components/header/overview/HeaderOverviewPage.tsx +++ b/apps/website/screens/components/header/overview/HeaderOverviewPage.tsx @@ -1,91 +1,242 @@ import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react"; import DocFooter from "@/common/DocFooter"; +import Image from "@/common/Image"; +import Figure from "@/common/Figure"; import QuickNavContainer from "@/common/QuickNavContainer"; +import anatomy from "./images/header_anatomy.png"; +import leftSlot from "./images/left_slot.png"; +import mainNav from "./images/main_nav.png"; +import rightSlot from "./images/right_slot.png"; const sections = [ { title: "Introduction", content: ( - - 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 customizable side content. Its consistent presence reinforces - brand recognition and improves usability by offering easy navigation and access to quick actions. - + <> + + 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. + + It typically contains three main areas: left slot, main navigation and right slot. + ), }, { title: "Anatomy", content: ( <> - {/* Header anatomy */} + Header anatomy - Container: a layout structure that wraps all Header elements, ensuring consistent - alignment, spacing, and maximum width limits. The container helps keep the header properly aligned across - different screen sizes. + Left slot: it's where the branding and application name is displayed. - Brand Image: a clear, balanced logo that fits well within the header without overpowering - other elements. + Main navigation: a section that allows access to primary and secondary navigational levels, + which purposes is to guide the user through the primary levels of the interface. + {/* It is also where the searchbar will be displayed once that feature is triggered. */} - Application Name (Optional): a short, recognizable application name placed next to - the logo to reinforce brand identity. - - - Navigation Links (Optional): key links to main sections of the application. - - - Side Content (Optional): a customizable area for user-specific actions such as - profile, settings, or logout, triggered by click or keyboard focus. + Right slot: it's the place where all utilities related to an application are hosted. It’s + highly adaptable for each product's needs. ), }, { - title: "Responsive version", - content: ( - <> - - Applications are accessed on a wide range of devices, including laptops, tablets, and smartphones. To support - this, the header must be designed to scale responsively across screen sizes. The responsive header should - preserve the structural layout and visual hierarchy of the desktop version, ensuring consistency and usability - across all platforms. - - - "On smaller screens, the header content is replaced by a button. Triggering this button opens a menu that - displays navigation links and a bottom section." - - - ), + title: "Key interactions and features", + subSections: [ + { + title: "Left slot", + content: ( + <> + + The left slot hosts all branding elements of the product, application, or website. It is the visual anchor + of the header and helps users quickly identify the environment they are interacting with. + + + The logo is a required element in every implementation of the header, ensuring brand + presence and recognition across all platforms. It must always be displayed inside a fixed container to + maintain consistency in size and alignment with other header elements. + + + The name of the product or service is optional and can be placed to the + right of the logo. When included, it reinforces brand identity and provides additional + context—particularly useful in multi-product ecosystems or environments where the logo alone may not be + distinctive enough. + + + Both elements together should remain visually balanced, with consistent spacing and vertical alignment, + contributing to a cohesive and professional visual hierarchy. + +
+ Left slot configuration +
+ + ), + }, + { + title: "Main navigation", + content: ( + <> + + The main navigation section occupies the central area of the header and serves as the{" "} + primary entry point for exploring the product or application. It spans the full available + width, making it the most visually dominant and functionally important area of the component. + + + Navigation items within this section can be either single-level links or{" "} + expandable items that reveal one additional level of navigation. This two-level limit is + intentional and designed to keep the header focused on orientation rather than deep exploration. The goal + is to help users understand where they are and move between high-level areas efficiently, while deeper + navigation is delegated to components such as the sidenav. + + {/* + When the total width of navigation items exceeds the available horizontal space, the header automatically + groups the overflow items into a new expandable item (typically labeled "More" or + equivalent). This ensures the navigation remains usable and visually balanced across different screen + sizes and configurations. + */} + + Each navigation item should provide clear affordances for interaction, indicating whether it leads + directly to a section or expands to show sub-options. + +
+ Header with expandable content +
+ + ), + }, + { + title: "Right slot", + content: ( + <> + + The right slot is reserved for utilities and user actions that support quick access to + key functions within the product or application. It typically includes elements such as search, + notifications, settings, help, or user profile; but its configuration is intentionally flexible to adapt + to different product contexts. + + + While some elements may be predefined or recommended as part of the default header configuration, this + area remains open and customizable, allowing teams to include, remove, or reorder actions + according to their needs. + + + This flexible structure allows the right slot to serve both standardized and product-specific use cases + without compromising the header's overall consistency and usability. + + + However, though this area is open and configurable, we strongly recommend starting from one of the + predefined layout examples provided in Halstack. It is also very important not to include too many + actions, as it may overload the component and reduce clarity. + +
+ Right slot configuration +
+ + ), + }, + ], }, { title: "Best practices", - content: ( - - - Keep the Header minimal and functional: include only essential elements. - - - Use navigation links correctly: Only use navigation groups when necessary to organize - multiple links logically without overwhelming the top navigation. - - - Avoid overcrowding the Header: Limit the number of top-level navigation links. Group - secondary links inside navigation groups if needed to maintain a clean and user-friendly interface. - - - Display the application name clearly and concisely: The application name should be readable, - short, and not overpower the brand logo. It reinforces brand identity and provides immediate context to users. - - - Design the Header to respond gracefully to smaller screens: When adapting the Header to - mobile or tablet layouts, restructure the side content to preserve both visual clarity and functional - hierarchy. - - - ), + subSections: [ + { + title: "General", + content: ( + + + Use a header in any product that requires clear orientation and structure, especially those that are more + than just data dashboards. + + + In complex applications, the combination of the header and the sidenav provides a solid + navigation framework that allows users to move efficiently and understand the product’s structure. + + + When designing an application, always consider the information architecture and how it + will map across the navigation components offered by Halstack. Defining clear hierarchies and dependencies + between header and sidenav is essential for usability and a smoother user experience. + + + Keep the header focused on orientation and high-level access, avoiding turning it into a + full navigation menu. + + + ), + }, + { + title: "Left slot", + content: ( + + + Choose a compact version of the brand logo that occupies as little horizontal space as + possible. This ensures enough room for other header elements with higher interaction priority. + + + When including the product or service name, keep it short, clear, and recognizable. Avoid + long or redundant titles that compete visually with the navigation items. + + + Ensure that the logo maintains sufficient contrast and legibility on different background colors. + + + ), + }, + { + title: "Main navigation", + content: ( + + + Carefully evaluate the depth of navigation before configuring the header. Determine + whether the sidenav is needed and design both navigation layers to complement each other rather than + overlap in functionality. + + + Keep link names clear, concise, and action-oriented so users can immediately understand + where each link will take them. + + + Use icons sparingly and only when they add value or clarity. Avoid decorative or overly + abstract icons that could create confusion. + + + Limit the number of visible items to maintain balance and prevent overflow. + {/* When necessary, rely on the automatic grouping ("More" option) for secondary items. */} + + + ), + }, + { + title: "Right slot", + content: ( + + + Avoid overloading the header with too many utilities. Keep only the{" "} + most essential actions visible, and relocate secondary or less frequent actions to other + areas such as the sidenav, footer, or dedicated sections. + + + Ensure that the icons used for actions are universal and easily recognizable. When an + icon may not be self-explanatory, provide a tooltip for clarity. + + + Group related actions within containers to maintain alignment and logical order. + + + Follow accessibility best practices: all icons and actions must have an accessible label and be operable + by keyboard. + + + Review responsive behavior when adding or removing utilities to ensure the right slot maintains balance + and visual stability across viewports. + + + ), + }, + ], }, ]; diff --git a/apps/website/screens/components/header/overview/images/header_anatomy.png b/apps/website/screens/components/header/overview/images/header_anatomy.png index fc6fd66c3..5f68373a9 100644 Binary files a/apps/website/screens/components/header/overview/images/header_anatomy.png and b/apps/website/screens/components/header/overview/images/header_anatomy.png differ diff --git a/apps/website/screens/components/header/overview/images/header_responsive.png b/apps/website/screens/components/header/overview/images/header_responsive.png deleted file mode 100644 index ed3509d98..000000000 Binary files a/apps/website/screens/components/header/overview/images/header_responsive.png and /dev/null differ diff --git a/apps/website/screens/components/header/overview/images/header_responsive_details.png b/apps/website/screens/components/header/overview/images/header_responsive_details.png deleted file mode 100644 index 6cf81b7d2..000000000 Binary files a/apps/website/screens/components/header/overview/images/header_responsive_details.png and /dev/null differ diff --git a/apps/website/screens/components/header/overview/images/header_variants.png b/apps/website/screens/components/header/overview/images/header_variants.png deleted file mode 100644 index 8bc6f3d23..000000000 Binary files a/apps/website/screens/components/header/overview/images/header_variants.png and /dev/null differ diff --git a/apps/website/screens/components/header/overview/images/left_slot.png b/apps/website/screens/components/header/overview/images/left_slot.png new file mode 100644 index 000000000..0068260c6 Binary files /dev/null and b/apps/website/screens/components/header/overview/images/left_slot.png differ diff --git a/apps/website/screens/components/header/overview/images/main_nav.png b/apps/website/screens/components/header/overview/images/main_nav.png new file mode 100644 index 000000000..96246a911 Binary files /dev/null and b/apps/website/screens/components/header/overview/images/main_nav.png differ diff --git a/apps/website/screens/components/header/overview/images/right_slot.png b/apps/website/screens/components/header/overview/images/right_slot.png new file mode 100644 index 000000000..021458595 Binary files /dev/null and b/apps/website/screens/components/header/overview/images/right_slot.png differ