diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx
index 34fbd44b0..236dbabce 100644
--- a/apps/website/pages/_app.tsx
+++ b/apps/website/pages/_app.tsx
@@ -100,13 +100,11 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo
- }
+ header={}
sidenav={
}
+ branding={isExpanded && }
topContent={
isExpanded && (
(
+ <>
+
+ Sidenav code — Halstack Design System
+
+
+
+);
+
+Code.getLayout = (page: ReactElement) => {page};
+
+export default Code;
diff --git a/apps/website/pages/components/sidenav/index.tsx b/apps/website/pages/components/sidenav/index.tsx
index 8e099c450..50ec17a20 100644
--- a/apps/website/pages/components/sidenav/index.tsx
+++ b/apps/website/pages/components/sidenav/index.tsx
@@ -1,36 +1,17 @@
-// import Head from "next/head";
-// import type { ReactElement } from "react";
-// import SidenavPageLayout from "screens/components/sidenav/SidenavPageLayout";
-// import SidenavOverviewPage from "screens/components/sidenav/overview/SidenavOverviewPage";
-
-// const Index = () => (
-// <>
-//
-// Sidenav — Halstack Design System
-//
-// {/* */}
-//
-//
-// );
-
-// Index.getLayout = (page: ReactElement) => {page};
-
-// export default Index;
-
import Head from "next/head";
import type { ReactElement } from "react";
import SidenavPageLayout from "screens/components/sidenav/SidenavPageLayout";
-import SidenavCodePage from "screens/components/sidenav/code/SidenavCodePage";
+import SidenavOverviewPage from "screens/components/sidenav/overview/SidenavOverviewPage";
-const Code = () => (
+const Index = () => (
<>
- Sidenav code — Halstack Design System
+ Sidenav — Halstack Design System
-
+
);
-Code.getLayout = (page: ReactElement) => {page};
+Index.getLayout = (page: ReactElement) => {page};
-export default Code;
+export default Index;
diff --git a/apps/website/screens/common/sidenav/SidenavLogo.tsx b/apps/website/screens/common/sidenav/SidenavLogo.tsx
index 286f78e9b..74efd7829 100644
--- a/apps/website/screens/common/sidenav/SidenavLogo.tsx
+++ b/apps/website/screens/common/sidenav/SidenavLogo.tsx
@@ -1,60 +1,28 @@
import styled from "@emotion/styled";
-import Image from "@/common/Image";
import { DxcBadge, DxcFlex } from "@dxc-technology/halstack-react";
-import halstackLogo from "@/common/images/halstack_logo.svg";
-const LogoContainer = styled.div`
+const SidenavTitle = styled.div`
display: flex;
- flex-direction: column;
- margin: var(--spacing-padding-none) var(--spacing-padding-l);
-`;
-
-const Title = styled.div`
- color: var(--color-fg-primary-strong);
- font-size: var(--typography-title-l);
- font-family: var(--typography-font-family);
-`;
-
-const Subtitle = styled.div`
- color: var(--color-fg-neutral-strongest);
- font-size: var(--typography-title-m);
- margin-left: var(--spacing-padding-s);
+ align-items: center;
font-family: var(--typography-font-family);
+ font-size: var(--typography-ttle-m);
+ color: var(--color-fg-neutral-dark);
+ font-weight: var(--typography-title-bold);
`;
-const SidenavLogo = ({ subtitle = "Design System", expanded }: { subtitle?: string; expanded: boolean }) => {
+const SidenavLogo = () => {
const pathVersion = process.env.NEXT_PUBLIC_SITE_VERSION;
const isDev = process.env.NODE_ENV === "development";
- return expanded ? (
-
-
-
-
- Halstack
-
- {subtitle}
-
+ return (
+
+ Halstack Design System
- ) : (
-
);
};
diff --git a/apps/website/screens/components/sidenav/SidenavPageLayout.tsx b/apps/website/screens/components/sidenav/SidenavPageLayout.tsx
index fb5616270..72413b817 100644
--- a/apps/website/screens/components/sidenav/SidenavPageLayout.tsx
+++ b/apps/website/screens/components/sidenav/SidenavPageLayout.tsx
@@ -7,9 +7,8 @@ import { ReactNode } from "react";
const SidenavPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- // { label: "Overview", path: "/components/sidenav" },
- // { label: "Code", path: "/components/sidenav/code" },
- { label: "Code", path: "/components/sidenav" },
+ { label: "Overview", path: "/components/sidenav" },
+ { label: "Code", path: "/components/sidenav/code" },
];
// TODO: UPDATE DESCRIPTION WHEN OVERVIEW IS ADDED
return (
@@ -18,10 +17,12 @@ const SidenavPageHeading = ({ children }: { children: ReactNode }) => {
- The sidenav component provides a vertical navigation structure placed on the left side of the interface.
+ The sidenav component provides a vertical navigation structure placed on the left side of the interface. It
+ provides global access to navigation, branding, and user actions, ensuring consistency and orientation
+ across products and applications.
- The sidenav is part of the application layout, so it can only be used inside of it. Please check the{" "}
+ It is part of the application layout, so it can only be used inside of it. Please check the{" "}
DxcApplicationLayout
{" "}
diff --git a/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx b/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx
index 1cb2135c1..5ea9cbaa2 100644
--- a/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx
+++ b/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx
@@ -153,7 +153,7 @@ const sections = [
title: "Application layout with sidenav",
content: (
),
diff --git a/apps/website/screens/components/sidenav/overview/SidenavOverviewPage.tsx b/apps/website/screens/components/sidenav/overview/SidenavOverviewPage.tsx
index 7e28f0a8f..1c0c7c819 100644
--- a/apps/website/screens/components/sidenav/overview/SidenavOverviewPage.tsx
+++ b/apps/website/screens/components/sidenav/overview/SidenavOverviewPage.tsx
@@ -3,9 +3,11 @@ import QuickNavContainer from "@/common/QuickNavContainer";
import DocFooter from "@/common/DocFooter";
import Image from "@/common/Image";
import anatomy from "./images/sidenav_anatomy.png";
-import responsive from "./images/sidenav_responsive.png";
+import branding from "./images/sidenav_branding.png";
+import mainNavigation from "./images/sidenav_mainnav.png";
+import bottomContent from "./images/sidenav_bottomcontent.png";
+import modes from "./images/sidenav_modes.png";
-// TODO: UPDATE WHEN DOC IS READY
const sections = [
{
title: "Introduction",
@@ -25,39 +27,57 @@ const sections = [
title: "Anatomy",
content: (
<>
+
+ The next section gives an overview of the component's general anatomy. Each part mentioned here will be
+ explained in more detail later in the document.
+
- Title: the main label displayed at the top of the sidenav, typically used to indicate the
- name of the product or section.
-
-
- Group title: a label that groups related links together, providing visual structure and
- context within the navigation.
+ Branding:
+
+
+ Contains collapse/expand toggle for the sidenav.
+
+
+ If no global app header exists, this area should be used for branding (logo,
+ product/app name).
+
+
- Page or section link: the navigational element that redirects users to a specific view or
- section of the application.
+ Top content:
+
+
+ Space placed under the branding for contextual or utility actions that enhance the main
+ navigation, such as a version selector, a searchbar to filter the navigation, status indicators, or
+ small alerts.
+
+
- Single group: a container that holds a set of related links that are always visible and not
- collapsible.
+ Main navigation:
+
+
+ The core navigation area, structured into sections and items.
+
+
+ Each section can be expanded (showing children) or collapsed (hiding
+ children).
+
+
+ Only this area should be scrollable.
+
+
- Collapsible group: a group of links that can be expanded or collapsed, helping reduce
- visual noise and support progressive disclosure.
-
-
- Divider: a horizontal line used to visually separate groups or sections within the sidenav
- for better readability.
-
-
- Single link: an individual navigational item not grouped with others, typically used for
- stand-alone destinations.
-
-
- Icon: an optional visual element placed before the link label, used to reinforce meaning or
- improve scannability.
+ Bottom content:
+
+
+ Space for secondary sections (navigation) and/or other common patterns{" "}
+ (profile details, organization switcher, settings, or primary quick actions)
+
+
@@ -68,73 +88,190 @@ const sections = [
title: "Key interactions and features",
subSections: [
{
- title: "Hierarchical navigation",
- content: (
-
- The sidenav supports hierarchical structures,{" "}
- organizing navigation links into nested groups. Though it only supports one level of
- nesting, this helps users quickly understand the content structure and navigate between related pages or
- sections more efficiently.
-
- ),
- },
- {
- title: "Collapsible groups",
+ title: "Branding",
content: (
-
- Groups can be expanded or collapsed, allowing users to control the visibility of nested
- navigation links. This feature is particularly useful for reducing visual noise and keeping the interface
- tidy, especially when dealing with large or complex structures.
-
+ <>
+
+ A small button allows users to collapse or expand the sidenav. This helps save space when
+ the navigation is not in active use, especially in data-heavy or workspace-oriented layouts.
+
+
+ This area is used to display the product or organization's logo{" "}
+ when no global app header is present. It provides brand recognition and visual
+ consistency in layouts where the sidenav acts as the main navigation container.
+
+
+ Application name identifies the current product or application. When a header is present,
+ the application name may appear either in the header or within the sidenav, depending on layout needs or
+ hierarchy preferences.
+
+
+
),
},
{
- title: "Active link highlighting",
+ title: "Top content",
content: (
-
- The currently active link is visually highlighted in the sidenav. This gives users clear feedback about
- where they are within the application, improving orientation and navigation consistency.
-
+ <>
+
+ Area located directly under the branding that provides space for{" "}
+ contextual or utility elements that support the main navigation. It is intended for
+ actions that help users interact with or filter the content of the sidenav.
+
+
+ Typical examples include a searchbar to filter navigation items, a{" "}
+ version or environment selector, compact status indicators, or{" "}
+ small alerts that inform users without disrupting navigation.
+
+
+ The content in this area should remain lightweight to avoid pushing the primary navigation too far down.
+
+
+ It is not intended for secondary navigation or profile-related actions, which belong to the bottom content
+ area.
+
+
),
},
{
- title: "Persistent visibility",
+ title: "Main navigation",
content: (
-
- The sidenav remains visible and accessible while the user navigates through the product.
- This persistent placement makes it easy to switch sections quickly, supporting efficient multitasking and
- exploration.
-
+ <>
+
+ The Main navigation is the core area that structures and organizes access to the
+ different sections of the application. It is composed of sections and{" "}
+ items, allowing users to navigate efficiently through the product's main areas.
+
+
+ Each section can be expanded to display its child items or collapsed to
+ hide them.
+
+
+ Each section can be expanded to display its child items or collapsed to
+ hide them. The sidenav allows hierarchies of any depth, making it possible to organize
+ content into structured, nested groups when needed. This can be helpful in large or
+ complex applications, but most products work better when navigation is spread across multiple patterns
+ instead of relying on deep nesting. Choose this approach carefully to avoid adding
+ unnecessary complexity to the user experience.
+
+
+ Only this area should be scrollable, ensuring that other sidenav elements (such as
+ branding, top content, or bottom content) remain fixed.
+
+
+
+
+ Menu item: Represents a single navigation entry that links to a page or feature within
+ the application. It can act as a standalone item or as a parent containing nested items.
+
+
+ Menu group: A structural wrapper that groups related menu items under a shared
+ category. It can be expanded or collapsed to reveal or hide its contents.
+
+
+ Icon: A leading visual symbol that helps users quickly identify the purpose of each
+ item and improves scannability within the navigation list.
+
+
+ Label: The text name of the menu item. It should be short, descriptive, and consistent
+ to clearly indicate the destination or function.
+
+
+ Badge: A small visual indicator used to display dynamic information such as
+ notifications, updates, or item counts related to a menu entry.
+
+
+ Chevron (group indicator): Indicates that a menu item contains nested items. It rotates
+ or changes direction to reflect the expanded or collapsed state of the group.
+
+
+ Group line: An optional vertical line that visually connects items within the same
+ group, reinforcing hierarchy and relationships between parent and child items.
+
+
+ Divider: A horizontal separator used to visually distinguish different groups or
+ sections within the sidenav, improving readability and organization.
+
+
+ Scroll bar: Appears when the content within the main navigation exceeds the available
+ height. Only the main navigation area should scroll, keeping the top content and bottom content fixed.
+
+
+ Border: A thin visual line that defines the edge of the component and provides a clear
+ separation between the sidenav and the main content area.
+
+
+
),
},
{
- title: "Icon support",
+ title: "Bottom content",
content: (
-
- Each navigation link can include an icon that visually represents the content or
- functionality it leads to. Icons enhance scannability and make the navigation more intuitive, especially
- when combined with meaningful labels.
-
+ <>
+
+ The bottom content area of the sidenav is reserved for{" "}
+ secondary actions and persistent utilities that support the overall navigation
+ experience. It commonly includes elements such as profile access, organization switchers, settings, or
+ quick actions.
+
+
+ While its content is flexible and customizable, it should remain focused and minimal to
+ avoid visual overload. Teams can adapt this area to their product needs, but it's recommended to follow
+ predefined layout examples to maintain consistency, clarity, and usability across
+ applications.
+
+
+
),
},
{
- title: "Dividers for visual grouping",
+ title: "Expanded and collapsed modes",
content: (
-
- The sidenav allows the inclusion of visual dividers between groups or links, making it easier to identify
- content categories and improving the overall readability of the menu.
-
+ <>
+
+ The sidenav component supports two main display modes — expanded and{" "}
+ collapsed — allowing flexible adaptation to different layout needs and screen sizes.
+
+
+ In expanded mode, all navigation labels, icons, and hierarchy levels are fully visible,
+ offering maximum clarity and discoverability. This mode is recommended when navigation is central to the
+ workflow or when users frequently switch between sections.
+
+
+ In collapsed mode, the sidenav minimizes to a narrow vertical strip, displaying only
+ icons and essential visual cues. This helps preserve workspace and focus on content while maintaining
+ quick access to navigation. Collapsed mode is ideal for data-dense or content-heavy layouts where space
+ efficiency is a priority.
+
+
+
),
},
{
- title: "Responsive behavior",
+ title: "Behavior and considerations in collapsed mode",
content: (
<>
- In smaller screens, the sidenav is collapsed into a single row at the top of the page with an expandable
- icon to show the full list of sidenav content when triggered.
+ While the collapsed mode maintains functional access to navigation, some scenarios may require specific
+ handling to preserve usability and consistency:
-
+
+
+ Missing icons on top-level items:
+
+ If navigation items at the first level do not include icons, a generic default icon is
+ automatically applied. This ensures the collapsed view remains navigable and visually balanced.
+
+
+ Custom content:
+
+ When custom content at the top or bottom (such as searchbar, user details, CTAs, or quick actions) is
+ present in the sidenav, it should be replaced in collapsed mode by a
+ single icon button
+ {" "}
+ to prevent overloading the reduced space.
+
+
),
},
@@ -142,44 +279,89 @@ const sections = [
},
{
title: "Best practices",
- content: (
- <>
-
-
- Use the sidenav component to improve discoverability: make navigation links easy to find
- and access, helping users understand the structure of the application.
-
-
- Keep in mind the type of devices you're developing for: ensure the sidenav behaves in a way
- that doesn't block or reduce the space available for the main content, especially on smaller screens.
-
-
- Follow a clear structure and hierarchy: organize the content using group titles, dividers,
- and indentation to visually differentiate between sections, titles, and individual links.
-
-
- Use clear and concise labels: navigation items should use simple, intuitive wording that
- clearly describes their destination or action.
-
-
- Organize links into logical groups: related navigation items should be grouped together
- under meaningful group titles for easier scanning.
-
-
- Use icons to reinforce meaning: include icons where relevant to improve visual recognition
- and support faster navigation.
-
-
- Use collapsible groups for long menus: when there are many links, collapsible groups help
- keep the sidenav organized and reduce visual clutter.
-
-
- Use dividers to separate sections: visual separators make different content areas more
- distinct and improve readability.
-
-
-
- ),
+ subSections: [
+ {
+ title: "Branding",
+ content: (
+ <>
+
+
+ Show branding only when the app lacks a global header: If there's already a global
+ header, remove or minimize redundant branding to keep the sidenav clean and focused on navigation.
+
+
+ Keep product or service names short, clear, and recognizable: Avoid long or redundant
+ titles that visually compete with navigation items, ensuring the branding area remains clean and easy to
+ scan.
+
+
+
+ ),
+ },
+ {
+ title: "Top content",
+ content: (
+ <>
+
+
+ Prioritize brevity and relevance: Limit the top content to elements that provide
+ immediate contextual value, such as: filtering, quick actions, or lightweight system indicators.
+
+
+ Maintain visual and spatial balance: Keep the section visually unobtrusive by using
+ compact components, consistent spacing, and minimal visual weight. This prevents the top content from
+ pushing the main navigation downward and ensures users can access navigation items without unnecessary
+ scrolling.
+
+
+
+ ),
+ },
+ {
+ title: "Main navigation",
+ content: (
+ <>
+
+
+ Organize by user goals, not internal structure: Group navigation items around what
+ users want to achieve, not how teams or modules are organized internally.
+
+
+ Keep section names clear and concise: Ensure users can immediately understand where
+ each section will take them by using short, direct labels that clearly describe their destination or
+ purpose.
+
+
+ Use icons consistently for recognition: Each icon should reinforce the meaning of its
+ label and be visually consistent across the entire navigation.
+
+
+ Limit nesting depth for clarity: Even though technically unlimited, stay within 2-3
+ levels to maintain a clear mental model of the app's structure.
+
+
+
+ ),
+ },
+ {
+ title: "Bottom content",
+ content: (
+ <>
+
+
+ Use the bottom content area for persistent, secondary actions: Ideal for items like
+ profile access, organization switcher, theme toggle, or settings (actions not tied to a specific
+ section).
+
+
+ Keep it simple and uncluttered: Limit the number of elements to maintain visual balance
+ (it should complement navigation, not compete with it).
+
+
+
+ ),
+ },
+ ],
},
];
diff --git a/apps/website/screens/components/sidenav/overview/images/sidenav_anatomy.png b/apps/website/screens/components/sidenav/overview/images/sidenav_anatomy.png
index c091445a8..3e4270f7b 100644
Binary files a/apps/website/screens/components/sidenav/overview/images/sidenav_anatomy.png and b/apps/website/screens/components/sidenav/overview/images/sidenav_anatomy.png differ
diff --git a/apps/website/screens/components/sidenav/overview/images/sidenav_bottomcontent.png b/apps/website/screens/components/sidenav/overview/images/sidenav_bottomcontent.png
new file mode 100644
index 000000000..550f64958
Binary files /dev/null and b/apps/website/screens/components/sidenav/overview/images/sidenav_bottomcontent.png differ
diff --git a/apps/website/screens/components/sidenav/overview/images/sidenav_branding.png b/apps/website/screens/components/sidenav/overview/images/sidenav_branding.png
new file mode 100644
index 000000000..cf5d469c3
Binary files /dev/null and b/apps/website/screens/components/sidenav/overview/images/sidenav_branding.png differ
diff --git a/apps/website/screens/components/sidenav/overview/images/sidenav_mainnav.png b/apps/website/screens/components/sidenav/overview/images/sidenav_mainnav.png
new file mode 100644
index 000000000..50882c506
Binary files /dev/null and b/apps/website/screens/components/sidenav/overview/images/sidenav_mainnav.png differ
diff --git a/apps/website/screens/components/sidenav/overview/images/sidenav_modes.png b/apps/website/screens/components/sidenav/overview/images/sidenav_modes.png
new file mode 100644
index 000000000..6f1a77ad0
Binary files /dev/null and b/apps/website/screens/components/sidenav/overview/images/sidenav_modes.png differ
diff --git a/apps/website/screens/components/sidenav/overview/images/sidenav_responsive.png b/apps/website/screens/components/sidenav/overview/images/sidenav_responsive.png
deleted file mode 100644
index 6e1c121e3..000000000
Binary files a/apps/website/screens/components/sidenav/overview/images/sidenav_responsive.png and /dev/null differ