Skip to content

Quicknav redesign #2197

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Mil4n0r merged 5 commits into from
Apr 11, 2025
Merged

Quicknav redesign #2197

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8c9a855
Quicknav redesign
Jialecl Mar 25, 2025
1b71845
Some minor changes based on feedback
Jialecl Apr 1, 2025
09c581e
Documentation overview added to the quicknav
Jialecl Apr 11, 2025
06974e3
Merge branch 'master' of https://github.com/dxc-technology/halstack-r…
Jialecl Apr 11, 2025
df07c54
Fixed documentation errors
Jialecl Apr 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions apps/website/pages/components/quick-nav/code.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import Head from "next/head";
import type { ReactElement } from "react";
import QuickNavCodePage from "screens/components/quick-nav/code/QuickNavCodePage";
import QuickNavPageLayout from "screens/components/quick-nav/QuickNavPageLayout";

const Code = () => (
<>
<Head>
<title>Quick Nav Code — Halstack Design System</title>
</Head>
<QuickNavCodePage />
</>
);

Code.getLayout = (page: ReactElement) => <QuickNavPageLayout>{page}</QuickNavPageLayout>;

export default Code;
24 changes: 10 additions & 14 deletions apps/website/pages/components/quick-nav/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,17 @@
import Head from "next/head";
import type { ReactElement } from "react";
import QuickNavPageLayout from "screens/components/quick-nav/QuickNavPageLayout";
import QuickNavCodePage from "screens/components/quick-nav/code/QuickNavCodePage";
import QuickNavOverviewPage from "screens/components/quick-nav/overview/QuickNavOverviewsPage";

const Index = () => {
return (
<>
<Head>
<title>Quick Nav — Halstack Design System</title>
</Head>
<QuickNavCodePage></QuickNavCodePage>
</>
);
};
const Index = () => (
<>
<Head>
<title>Quick Nav — Halstack Design System</title>
</Head>
<QuickNavOverviewPage />
</>
);

Index.getLayout = function getLayout(page: ReactElement) {
return <QuickNavPageLayout>{page}</QuickNavPageLayout>;
};
Index.getLayout = (page: ReactElement) => <QuickNavPageLayout>{page}</QuickNavPageLayout>;

export default Index;
21 changes: 0 additions & 21 deletions apps/website/pages/components/quick-nav/specifications.tsx
View file
Open in desktop

This file was deleted.

21 changes: 0 additions & 21 deletions apps/website/pages/components/quick-nav/usage.tsx
View file
Open in desktop

This file was deleted.

15 changes: 8 additions & 7 deletions apps/website/screens/components/quick-nav/QuickNavPageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
import PageHeading from "@/common/PageHeading";
import TabsPageHeading from "@/common/TabsPageLayout";
import ComponentHeading from "@/common/ComponentHeading";
import Code from "@/common/Code";
import { ReactNode } from "react";

const QuickNavPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
{ label: "Code", path: "/components/quick-nav" },
{ label: "Usage", path: "/components/quick-nav/usage" },
{ label: "Specifications", path: "/components/quick-nav/specifications" },
{ label: "Overview", path: "/components/quick-nav" },
{ label: "Code", path: "/components/quick-nav/code" },
];

return (
Expand All @@ -17,11 +17,12 @@ const QuickNavPageHeading = ({ children }: { children: ReactNode }) => {
<DxcFlex direction="column" gap="2rem">
<ComponentHeading name="Quick Nav" />
<DxcParagraph>
The quick nav component allows navigation inside a page. It renders the links according to the headings of
the content in order to navigate to each section. The navigation is done using the link label or the link
label plus sublink label when it is a sublink. If there is any space, it will be replaced by '-'.
The Quick Nav component allows navigation inside a page. It renders links according to the headings of the
content structure, enabling users to jump to specific sections. The navigation label is based on the section
title or a combination of section and sub-section titles (for nested links). If a heading includes spaces,
they are replaced with hyphens (<Code>-</Code>) in the URL.
</DxcParagraph>
<TabsPageHeading tabs={tabs}></TabsPageHeading>
<TabsPageHeading tabs={tabs} />
</DxcFlex>
</PageHeading>
{children}
Expand Down
34 changes: 16 additions & 18 deletions apps/website/screens/components/quick-nav/code/QuickNavCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,6 @@ const sections = [
</tr>
</thead>
<tbody>
<tr>
<td>title</td>
<td>
<TableCode>string</TableCode>
</td>
<td>Title of the quick nav component.</td>
<td>-</td>
</tr>
<tr>
<td>
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
Expand All @@ -56,6 +48,14 @@ const sections = [
</td>
<td>-</td>
</tr>
<tr>
<td>title</td>
<td>
<TableCode>string</TableCode>
</td>
<td>Title of the quick nav component.</td>
<td>-</td>
</tr>
</tbody>
</DxcTable>
),
Expand Down Expand Up @@ -83,15 +83,13 @@ const sections = [
},
];

const QuickNavCodePage = () => {
return (
<DxcFlex direction="column" gap="4rem">
<QuickNavContainerLayout>
<QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
</QuickNavContainerLayout>
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/quick-nav/code/QuickNavCodePage.tsx" />
</DxcFlex>
);
};
const QuickNavCodePage = () => (
<DxcFlex direction="column" gap="4rem">
<QuickNavContainerLayout>
<QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
</QuickNavContainerLayout>
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/quick-nav/code/QuickNavCodePage.tsx" />
</DxcFlex>
);

export default QuickNavCodePage;
87 changes: 87 additions & 0 deletions apps/website/screens/components/quick-nav/overview/QuickNavOverviewsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
import Image from "@/common/Image";
import QuickNavContainer from "@/common/QuickNavContainer";
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import DocFooter from "@/common/DocFooter";
import anatomyImage from "./images/quickNav_anatomy.png";

const sections = [
{
title: "Introduction",
content: (
<DxcParagraph>
Quick Nav is used to improve in-page navigation by listing content sections and subsections based on the heading
hierarchy. This helps users understand the page structure at a glance and jump directly to the content they're
interested in. It's especially useful on documentation pages, dashboards and long-form content.
</DxcParagraph>
),
},
{
title: "Anatomy",
content: (
<>
<Image src={anatomyImage} alt="Quick nav anatomy" />
<DxcBulletedList type="number">
<DxcBulletedList.Item>
<strong>Divider:</strong> a thin vertical line that visually separates the Quick Nav from the main content
area. Its purpose is to create a clear boundary between navigation and content, improving readability and
layout organization.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Title</strong> <em>(Optional)</em>: a short descriptive title such as "Contents" or "On this page"
that provides context for the navigation list.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Links:</strong> the main navigation items, each representing a primary section on the page. These
are generated from top-level headings and are clickable.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Sublinks</strong> <em>(Optional)</em>: secondary navigation items, generated from subheadings nested
under the main sections. These allow finer-grain navigation within a specific topic.
</DxcBulletedList.Item>
</DxcBulletedList>
</>
),
},
{
title: "Best practices",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
<strong>Provide a clear title:</strong> use a meaningful title like "On this page" to help users understand
the context of the links.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Show structure clearly:</strong> use Quick Nav to mirror the hierarchy of your content, making it
easier to follow and navigate. Keep headings descriptive and consistent so link labels are meaningful when
rendered.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Avoid clutter:</strong> avoid rendering Quick Nav on pages with very little content; it can feel
redundant.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Maintain visual separation from main content:</strong> always allow sufficient spacing between the
Quick Nav and the main content area. This helps users visually distinguish navigation from content and avoids
overwhelming the layout. Use padding or margins to ensure the Quick Nav doesn't feel cramped or interfere with
readability, especially on larger screens or dense layouts.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Pair with other navigational tools:</strong> combine Quick Nav with tabs or breadcrumbs for a
comprehensive navigation experience across and within pages.
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
];

const QuickNavOverviewPage = () => (
<DxcFlex direction="column" gap="4rem">
<QuickNavContainerLayout>
<QuickNavContainer sections={sections} startHeadingLevel={2} />
</QuickNavContainerLayout>
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/quick-nav/overview/QuickNavOverviewPage.tsx" />
</DxcFlex>
);

export default QuickNavOverviewPage;
Binary file added apps/website/screens/components/quick-nav/overview/images/quickNav_anatomy.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading