Skip to content

Breadcrumbs redesign #2207

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 7 commits into from
Apr 11, 2025
Merged

Breadcrumbs redesign #2207

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5edf944
Breadcrumbs component redesign
GomezIvann Apr 4, 2025
216cdbe
Correct z-index issue
GomezIvann Apr 4, 2025
4f9e39d
Breadcrumbs visual adjustments
GomezIvann Apr 4, 2025
1bd86db
Merge branch 'gomezivann/breadcrumbs-redesign' of https://github.com/…
GomezIvann Apr 4, 2025
b84170e
Updates based on feedback
GomezIvann Apr 9, 2025
fd8ba31
Breadcrumbs documentation
GomezIvann Apr 10, 2025
76db9b4
Breadcrumbs anatomy alt fix
GomezIvann 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/breadcrumbs/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 BreadcrumbsPageLayout from "screens/components/breadcrumbs/BreadcrumbsPageLayout";
import BreadcrumbsCodePage from "screens/components/breadcrumbs/code/BreadcrumbsCodePage";

const Code = () => (
<>
<Head>
<title>Breadcrumbs code — Halstack Design System</title>
</Head>
<BreadcrumbsCodePage />
</>
);

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

export default Code;
26 changes: 11 additions & 15 deletions apps/website/pages/components/breadcrumbs/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 BreadcrumbsCodePage from "screens/components/breadcrumbs/code/BreadcrumbsCodePage";
import BreadcrumbsPageLayout from "screens/components/breadcrumbs/BreadcrumbsPageLayout";
import BreadcrumbsOverviewPage from "screens/components/breadcrumbs/overview/BreadcrumbsOverviewPage";

const Usage = () => {
return (
<>
<Head>
<title>Breadcrumbs — Halstack Design System</title>
</Head>
<BreadcrumbsCodePage></BreadcrumbsCodePage>
</>
);
};
const Index = () => (
<>
<Head>
<title>Breadcrumbs — Halstack Design System</title>
</Head>
<BreadcrumbsOverviewPage />
</>
);

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

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

This file was deleted.

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

This file was deleted.

7 changes: 3 additions & 4 deletions apps/website/screens/components/breadcrumbs/BreadcrumbsPageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,8 @@ import { ReactNode } from "react";

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

return (
Expand All @@ -20,7 +19,7 @@ const BreadcrumbsPageHeading = ({ children }: { children: ReactNode }) => {
A breadcrumbs trail is a secondary form of navigation that allows users to keep track and maintain awareness
of their location as they move through a hierarchically structured web application.
</DxcParagraph>
<TabsPageHeading tabs={tabs}></TabsPageHeading>
<TabsPageHeading tabs={tabs} />
</DxcFlex>
</PageHeading>
{children}
Expand Down
18 changes: 8 additions & 10 deletions apps/website/screens/components/breadcrumbs/code/BreadcrumbsCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,15 +124,13 @@ const sections = [
},
];

const BreadcrumbsCodePage = () => {
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/breadcrumbs/code/BreadcrumbsCodePage.tsx" />
</DxcFlex>
);
};
const BreadcrumbsCodePage = () => (
<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/breadcrumbs/code/BreadcrumbsCodePage.tsx" />
</DxcFlex>
);

export default BreadcrumbsCodePage;
118 changes: 118 additions & 0 deletions apps/website/screens/components/breadcrumbs/overview/BreadcrumbsOverviewPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
import QuickNavContainer from "@/common/QuickNavContainer";
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import collapsed from "./examples/collapsed";
import noRoot from "./examples/noRoot";
import Image from "@/common/Image";
import anatomy from "./images/breadcrumbs_anatomy.png";

const sections = [
{
title: "Introduction",
content: (
<DxcParagraph>
Breadcrumbs are a navigational component used in user interfaces to improve the user experience by providing a{" "}
<strong>clear path to previous steps or navigational levels</strong>. They typically display the user's current
location within the hierarchical structure of an application, allowing for easy navigation and improved
orientation.
</DxcParagraph>
),
},
{
title: "Anatomy",
content: (
<>
<Image src={anatomy} alt="Breadcrumbs's anatomy" />
<DxcBulletedList type="number">
<DxcBulletedList.Item>
<strong>Unvisited item:</strong> these are links that represent the navigational path taken by the user but
are not the current page
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Divider:</strong> a visual element that complements the label, providing additional meaning or
enhancing recognition.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Visited item:</strong> displays the textual action that the button is going to carry out.
</DxcBulletedList.Item>
</DxcBulletedList>
</>
),
},
{
title: "Collapsed breadcrumbs",
content: (
<>
<DxcParagraph>
When there are more than four items in the breadcrumbs, the component will{" "}
<strong>collapse the items in a dropdown menu</strong> to avoid overloading the interface. Users can click on
the dropdown to view the hidden items and navigate to the desired level.
</DxcParagraph>
<DxcParagraph>
Although this can be configurable, we highly encourage our users to stick with the collapsing at five or more
items. This was not a random decision, we carefully selected it to ensure the component does not overload the
interface and remains an effective navigational aid.
</DxcParagraph>
<Example example={collapsed} />
<DxcParagraph>
Depending on the amount of available space, the collapsed <strong>breadcrumbs can be synthesized more</strong>{" "}
by removing the root element and displaying only the collapsed dropdown and the current page.
</DxcParagraph>
<Example example={noRoot} />
<DxcParagraph>Be mindful of your user's cognitive load and collapse breadcrumbs appropriately.</DxcParagraph>
</>
),
},
{
title: "Best practices",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
Use breadcrumbs to <strong>support secondary navigation in hierarchical structures</strong>, helping users
understand where they are and how they got there.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Always include the full path from the homepage or root section to the current page to provide meaningful
context.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Display <strong>only one breadcrumb trail per page</strong> to avoid confusion and maintain a clear navigation
hierarchy.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Make all breadcrumb items navigable except for the last one, which should reflect the current page and remain
non-interactive.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Keep labels concise</strong> and consistent with the destination page titles to avoid ambiguity.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Place breadcrumbs at the top of the page</strong>, just below the main navigation or header, to follow
common UI patterns and user expectations.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Avoid using breadcrumbs as a replacement for primary navigation—they are meant to complement it, not replace
menus or sidebars.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
When truncating breadcrumbs due to space constraints,{" "}
<strong>prioritize showing the first and last items</strong> while collapsing the middle items with a clear
overflow mechanism.
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
];

const BreadcrumbsOverviewPage = () => (
<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/breadcrumbs/overview/BreadcrumbsOverviewPage.tsx" />
</DxcFlex>
);

export default BreadcrumbsOverviewPage;
0 .../breadcrumbs/usage/examples/collapsed.tsx → ...eadcrumbs/overview/examples/collapsed.tsx
View file
Open in desktop
File renamed without changes.
0 ...nts/breadcrumbs/usage/examples/noRoot.tsx → .../breadcrumbs/overview/examples/noRoot.tsx
View file
Open in desktop
File renamed without changes.
Binary file added .../website/screens/components/breadcrumbs/overview/images/breadcrumbs_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.
48 changes: 0 additions & 48 deletions apps/website/screens/components/breadcrumbs/specs/BreadcrumbsSpecsPage.tsx
View file
Open in desktop

This file was deleted.

Binary file removed apps/website/screens/components/breadcrumbs/specs/images/breadcrumbs_anatomy.png
View file
Open in desktop
Binary file not shown.
Binary file removed apps/website/screens/components/breadcrumbs/specs/images/breadcrumbs_specs.png
View file
Open in desktop
Binary file not shown.
Loading