From 9c3b9dd7eeda9813e8913818367a4f42d67698e5 Mon Sep 17 00:00:00 2001
From: Ramon Mulia <ramonmulia@gmail.com>
Date: Wed, 20 Nov 2024 12:15:27 -0300
Subject: [PATCH 01/15] adding breadcrumbs component

---
 .../3-components/2-library/4-breadcrumbs.mdx  | 33 ++++++++++++++
 examples/nextjs/src/app/page.tsx              | 17 +++++++
 packages/design/tailwind/css/components.css   | 34 ++++++++++++++
 .../html/ds/src/breadcrumbs/breadcrumbs.html  | 17 +++++++
 .../ds/src/breadcrumbs/breadcrumbs.stories.ts | 25 +++++++++++
 .../src/breadcrumbs/breadcrumbs.stories.tsx   | 40 +++++++++++++++++
 .../ds/src/breadcrumbs/breadcrumbs.test.tsx   | 44 +++++++++++++++++++
 .../react/ds/src/breadcrumbs/breadcrumbs.tsx  | 31 +++++++++++++
 packages/react/ds/src/index.ts                |  1 +
 9 files changed, 242 insertions(+)
 create mode 100644 packages/html/ds/src/breadcrumbs/breadcrumbs.html
 create mode 100644 packages/html/ds/src/breadcrumbs/breadcrumbs.stories.ts
 create mode 100644 packages/react/ds/src/breadcrumbs/breadcrumbs.stories.tsx
 create mode 100644 packages/react/ds/src/breadcrumbs/breadcrumbs.test.tsx
 create mode 100644 packages/react/ds/src/breadcrumbs/breadcrumbs.tsx

diff --git a/apps/docs/content/3-components/2-library/4-breadcrumbs.mdx b/apps/docs/content/3-components/2-library/4-breadcrumbs.mdx
index 377bcfef1..a0bdcd136 100644
--- a/apps/docs/content/3-components/2-library/4-breadcrumbs.mdx
+++ b/apps/docs/content/3-components/2-library/4-breadcrumbs.mdx
@@ -9,6 +9,39 @@ status: in-development
 
 <ComponentStatusBlock componentId="breadcrumbs" />
 
+<Tabs id="tab1">
+  <TabList>
+    <TabItem value="tab11" checked>HTML</TabItem>
+    <TabItem value="tab13">React</TabItem>
+  </TabList>
+  <TabPanel value="tab11">
+  ```html
+    <nav aria-label="Breadcrumbs" class="gi-breadcrumbs" data-testid="govie-breadcrumb">
+        <ol role="list">
+            <li role="listitem">
+            <a href="/" class="gi-link gi-link-no-visited">Home</a>
+            </li>
+            <li role="listitem">
+            <a href="#" class="gi-link gi-link-no-visited">Passports</a>
+            </li>
+            <li role="listitem">
+            <a href="#" class="gi-link gi-link-no-visited">Travel abroad</a>
+            </li>
+        </ol>
+    </nav>
+  ```
+  </TabPanel>
+  <TabPanel value="tab13">
+  ```react
+    import { Breadcrumbs } from '@govie-ds/react';
+
+    <Breadcrumbs links={[{ href: '/', label: 'Home' }, { href: '#', label: 'Passports' }, { href: '#', label: 'Travel abroad' },]} />
+
+  ```
+  </TabPanel>
+  </Tabs>
+
 ## When to use this component
 
 ## When not to use this component
+
diff --git a/examples/nextjs/src/app/page.tsx b/examples/nextjs/src/app/page.tsx
index 05514e452..22a152e52 100644
--- a/examples/nextjs/src/app/page.tsx
+++ b/examples/nextjs/src/app/page.tsx
@@ -20,6 +20,7 @@ import {
   Combobox,
   Chip,
   Alert,
+  Breadcrumbs,
 } from "@govie-ds/react";
 
 export default function Home() {
@@ -52,6 +53,22 @@ export default function Home() {
       <CookieBanner {...CookieBannerProps} />
       <Container>
         <div className="flex flex-col gap-4 my-4">
+          <Breadcrumbs
+            links={[
+              {
+                href: '#',
+                label: 'Home',
+              },
+              {
+                href: '#',
+                label: 'Passport',
+              },
+              {
+                href: '#',
+                label: 'Travel',
+              },
+            ]}
+          />
           <Heading>Heading</Heading>
           <PhaseBanner level="alpha">This is a pre-release version</PhaseBanner>
           <Link
diff --git a/packages/design/tailwind/css/components.css b/packages/design/tailwind/css/components.css
index b3e91ffe0..8c51b87a4 100644
--- a/packages/design/tailwind/css/components.css
+++ b/packages/design/tailwind/css/components.css
@@ -840,3 +840,37 @@ input[type='file' i] {
   }
 }
 /* End of Pagination */
+
+/* Breadcrumbs */
+.gi-breadcrumbs {
+  @apply gi-flex gi-items-center;
+}
+
+.gi-breadcrumbs > ol {
+  @apply gi-inline-flex gi-list-none gi-gap-5;
+}
+
+.gi-breadcrumbs > ol > :not([hidden]) ~ :not([hidden]) {
+  @apply gi-mx-0;
+}
+
+.gi-breadcrumbs > ol > li {
+  @apply gi-relative;
+}
+
+.gi-breadcrumbs > ol > li:not(:first-child)::before {
+  @apply gi-block
+    gi-absolute
+    gi-top-1
+    gi-bottom-0
+    gi-left-[-15px]
+    gi-w-[6px]
+    gi-h-[6px]
+    gi-m-auto
+    gi-border-t-[1px]
+    gi-border-r-[1px]
+    gi-border-gray-500
+    gi-rotate-45;
+  content: '';
+}
+/* End of Breadcrumbs */
diff --git a/packages/html/ds/src/breadcrumbs/breadcrumbs.html b/packages/html/ds/src/breadcrumbs/breadcrumbs.html
new file mode 100644
index 000000000..bd80b571a
--- /dev/null
+++ b/packages/html/ds/src/breadcrumbs/breadcrumbs.html
@@ -0,0 +1,17 @@
+<nav
+  aria-label="Breadcrumbs"
+  class="gi-breadcrumbs"
+  data-testid="govie-breadcrumb"
+>
+  <ol role="list">
+    <li role="listitem">
+      <a href="/" class="gi-link gi-link-no-visited">Home</a>
+    </li>
+    <li role="listitem">
+      <a href="#" class="gi-link gi-link-no-visited">Passports</a>
+    </li>
+    <li role="listitem">
+      <a href="#" class="gi-link gi-link-no-visited">Travel abroad</a>
+    </li>
+  </ol>
+</nav>
diff --git a/packages/html/ds/src/breadcrumbs/breadcrumbs.stories.ts b/packages/html/ds/src/breadcrumbs/breadcrumbs.stories.ts
new file mode 100644
index 000000000..22223aa0d
--- /dev/null
+++ b/packages/html/ds/src/breadcrumbs/breadcrumbs.stories.ts
@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import html from './breadcrumbs.html?raw';
+
+const meta = {
+  title: 'Navigation/Breadcrumbs',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The breadcrumbs component helps users to understand where they are within a website’s structure and move between levels.',
+      },
+    },
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  //@ts-expect-error Render function returns raw HTML string, not a React component
+  render: (_, { parameters }) => {
+    parameters.renderedHtml = html;
+    return html;
+  },
+};
diff --git a/packages/react/ds/src/breadcrumbs/breadcrumbs.stories.tsx b/packages/react/ds/src/breadcrumbs/breadcrumbs.stories.tsx
new file mode 100644
index 000000000..854be2f8b
--- /dev/null
+++ b/packages/react/ds/src/breadcrumbs/breadcrumbs.stories.tsx
@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Breadcrumbs } from './breadcrumbs.js';
+
+const meta = {
+  title: 'Navigation/Breadcrumbs',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The breadcrumbs component helps users to understand where they are within a website’s structure and move between levels.',
+      },
+    },
+  },
+  component: Breadcrumbs,
+} satisfies Meta<typeof Breadcrumbs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  argTypes: {
+    links: {
+      control: 'object',
+      description:
+        'Array of breadcrumb links, each with `href` and `label` properties.',
+      table: {
+        type: {
+          summary: 'Array<{ href: string; label: string }>',
+        },
+      },
+    },
+  },
+  args: {
+    links: [
+      { href: '/', label: 'Home' },
+      { href: '#', label: 'Passports' },
+      { href: '#', label: 'Travel abroad' },
+    ],
+  },
+};
diff --git a/packages/react/ds/src/breadcrumbs/breadcrumbs.test.tsx b/packages/react/ds/src/breadcrumbs/breadcrumbs.test.tsx
new file mode 100644
index 000000000..779437015
--- /dev/null
+++ b/packages/react/ds/src/breadcrumbs/breadcrumbs.test.tsx
@@ -0,0 +1,44 @@
+import { render, cleanup } from '../test-utils.js';
+import { Breadcrumbs } from './breadcrumbs.js';
+
+describe('govieBreadcrumbs', () => {
+  afterEach(cleanup);
+  it('should render a breadcrumb with the correct content', () => {
+    const { getByTestId } = render(
+      <Breadcrumbs
+        links={[
+          {
+            href: '#',
+            label: 'Home',
+          },
+          {
+            href: '#',
+            label: 'Passport',
+          },
+        ]}
+      />,
+    );
+    expect(getByTestId('govie-breadcrumbs')).toBeInTheDocument();
+    expect(getByTestId('breadcrumb_item_0')).toBeInTheDocument();
+    expect(getByTestId('breadcrumb_item_1')).toBeInTheDocument();
+  });
+
+  it('should pass axe accessibility tests', async () => {
+    const { axe } = render(
+      <Breadcrumbs
+        links={[
+          {
+            href: '#',
+            label: 'Home',
+          },
+          {
+            href: '#',
+            label: 'Passport',
+          },
+        ]}
+      />,
+    );
+
+    await axe();
+  });
+});
diff --git a/packages/react/ds/src/breadcrumbs/breadcrumbs.tsx b/packages/react/ds/src/breadcrumbs/breadcrumbs.tsx
new file mode 100644
index 000000000..744c7c348
--- /dev/null
+++ b/packages/react/ds/src/breadcrumbs/breadcrumbs.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Link } from '../link/link.js';
+
+export type BreadcrumbProps = {
+  links: { label: string; href: string }[];
+};
+
+export const Breadcrumbs = ({ links = [] }: BreadcrumbProps) => {
+  return (
+    <nav
+      aria-label="Breadcrumb"
+      className="gi-breadcrumbs"
+      data-testid="govie-breadcrumbs"
+    >
+      <ol role="list">
+        {links.map(({ href, label }, index) => (
+          <li
+            role="listitem"
+            aria-label={`${label} page`}
+            key={`breadcrumb_item_${index}`}
+            data-testid={`breadcrumb_item_${index}`}
+          >
+            <Link href={href} noVisited={!!(links.length - 1)}>
+              {label}
+            </Link>
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+};
diff --git a/packages/react/ds/src/index.ts b/packages/react/ds/src/index.ts
index 3ae834718..63f3db325 100644
--- a/packages/react/ds/src/index.ts
+++ b/packages/react/ds/src/index.ts
@@ -44,3 +44,4 @@ export * from './checkbox/checkboxes-group.js';
 export * from './spinner/spinner.js';
 export { Alert } from './alert/alert.js';
 export * from './pagination/pagination.js';
+export * from './breadcrumbs/breadcrumbs.js';

From 96d2dce07f5989842827fae3aa873bcefb045c10 Mon Sep 17 00:00:00 2001
From: Ramon Mulia <ramonmulia@gmail.com>
Date: Thu, 21 Nov 2024 10:33:25 -0300
Subject: [PATCH 02/15] adding docs

---
 apps/docs/content/3-components/2-library/4-breadcrumbs.mdx | 6 +++++-
 apps/docs/src/components/document/common/mdx.tsx           | 2 ++
 apps/docs/src/lib/components.ts                            | 6 ++++--
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/apps/docs/content/3-components/2-library/4-breadcrumbs.mdx b/apps/docs/content/3-components/2-library/4-breadcrumbs.mdx
index a0bdcd136..79119e4a9 100644
--- a/apps/docs/content/3-components/2-library/4-breadcrumbs.mdx
+++ b/apps/docs/content/3-components/2-library/4-breadcrumbs.mdx
@@ -9,6 +9,8 @@ status: in-development
 
 <ComponentStatusBlock componentId="breadcrumbs" />
 
+<Breadcrumbs links={[{ href: '/', label: 'Home' }, { href: '#', label: 'Passports' }, { href: '#', label: 'Travel abroad' }]} />
+
 <Tabs id="tab1">
   <TabList>
     <TabItem value="tab11" checked>HTML</TabItem>
@@ -35,13 +37,15 @@ status: in-development
   ```react
     import { Breadcrumbs } from '@govie-ds/react';
 
-    <Breadcrumbs links={[{ href: '/', label: 'Home' }, { href: '#', label: 'Passports' }, { href: '#', label: 'Travel abroad' },]} />
+    <Breadcrumbs links={[{ href: '/', label: 'Home' }, { href: '#', label: 'Passports' }, { href: '#', label: 'Travel abroad' }]} />
 
   ```
   </TabPanel>
   </Tabs>
 
 ## When to use this component
+Use breadcrumbs to help users understand their location within a website or application hierarchy and navigate back to higher levels easily.
 
 ## When not to use this component
+Avoid breadcrumbs on websites or applications with a flat structure, where there is no clear hierarchy or depth (e.g., single-page applications or sites with only top-level pages)
 
diff --git a/apps/docs/src/components/document/common/mdx.tsx b/apps/docs/src/components/document/common/mdx.tsx
index ee8555aa5..c58a3c533 100644
--- a/apps/docs/src/components/document/common/mdx.tsx
+++ b/apps/docs/src/components/document/common/mdx.tsx
@@ -27,6 +27,7 @@ import {
   CheckboxesGroup,
   Spinner,
   Pagination,
+  Breadcrumbs,
 } from '@govie-ds/react';
 import { MDXComponents } from 'mdx/types';
 import { useMDXComponent } from 'next-contentlayer/hooks';
@@ -190,6 +191,7 @@ const documentComponents: MDXComponents = {
     </Button>
   ),
   Pagination: (props) => <Pagination {...props} />,
+  Breadcrumbs: (props) => <Breadcrumbs {...props} />,
 };
 
 export function Mdx({ code }: MdxProps) {
diff --git a/apps/docs/src/lib/components.ts b/apps/docs/src/lib/components.ts
index e88df1810..04a2b78a9 100644
--- a/apps/docs/src/lib/components.ts
+++ b/apps/docs/src/lib/components.ts
@@ -837,14 +837,16 @@ export function getComponents(): ComponentDetail[] {
         {
           platform: {
             id: 'global',
+            href: '?path=/docs/navigation-breadcrumbs--docs',
           },
-          status: 'considering',
+          status: 'beta',
         },
         {
           platform: {
             id: 'react',
+            href: '?path=/docs/navigation-breadcrumbs--docs',
           },
-          status: 'considering',
+          status: 'beta',
         },
       ],
     },

From e846210d2aef7231f52a2d54639598955a48392f Mon Sep 17 00:00:00 2001
From: Ramon Mulia <ramonmulia@gmail.com>
Date: Thu, 21 Nov 2024 12:13:52 -0300
Subject: [PATCH 03/15] adding aria props

---
 packages/html/ds/src/breadcrumbs/breadcrumbs.html | 2 +-
 packages/react/ds/src/breadcrumbs/breadcrumbs.tsx | 7 ++++++-
 packages/react/ds/src/link/link.tsx               | 4 +++-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/html/ds/src/breadcrumbs/breadcrumbs.html b/packages/html/ds/src/breadcrumbs/breadcrumbs.html
index bd80b571a..deb7a91bb 100644
--- a/packages/html/ds/src/breadcrumbs/breadcrumbs.html
+++ b/packages/html/ds/src/breadcrumbs/breadcrumbs.html
@@ -11,7 +11,7 @@
       <a href="#" class="gi-link gi-link-no-visited">Passports</a>
     </li>
     <li role="listitem">
-      <a href="#" class="gi-link gi-link-no-visited">Travel abroad</a>
+      <a href="#" class="gi-link gi-link-no-visited" aria-current="page">Travel abroad</a>
     </li>
   </ol>
 </nav>
diff --git a/packages/react/ds/src/breadcrumbs/breadcrumbs.tsx b/packages/react/ds/src/breadcrumbs/breadcrumbs.tsx
index 744c7c348..9345d1a64 100644
--- a/packages/react/ds/src/breadcrumbs/breadcrumbs.tsx
+++ b/packages/react/ds/src/breadcrumbs/breadcrumbs.tsx
@@ -20,7 +20,12 @@ export const Breadcrumbs = ({ links = [] }: BreadcrumbProps) => {
             key={`breadcrumb_item_${index}`}
             data-testid={`breadcrumb_item_${index}`}
           >
-            <Link href={href} noVisited={!!(links.length - 1)}>
+            <Link
+              href={href}
+              {...(window.location.pathname === href
+                ? { 'aria-current': 'page' }
+                : {})}
+            >
               {label}
             </Link>
           </li>
diff --git a/packages/react/ds/src/link/link.tsx b/packages/react/ds/src/link/link.tsx
index 068c8e5cc..d27077560 100644
--- a/packages/react/ds/src/link/link.tsx
+++ b/packages/react/ds/src/link/link.tsx
@@ -7,7 +7,7 @@ export type LinkProps = {
   noColor?: boolean;
   external?: boolean;
   size?: 'sm' | 'md';
-};
+} & React.AriaAttributes;
 
 export function Link({
   as: Component = 'a',
@@ -18,6 +18,7 @@ export function Link({
   noVisited = false,
   noColor = false,
   external = false,
+  ...ariaProps
 }: LinkProps) {
   return (
     <Component
@@ -30,6 +31,7 @@ export function Link({
         ${noUnderline ? 'gi-link-no-underline' : ''}
         ${noVisited ? 'gi-link-no-visited' : ''}
         ${noColor ? 'gi-link-inherit' : ''}`}
+      {...ariaProps}
     >
       {children}
     </Component>

From d93a98c4385d641447fd9607627e2552ee4ab463 Mon Sep 17 00:00:00 2001
From: Ramon Mulia <ramonmulia@gmail.com>
Date: Thu, 21 Nov 2024 12:49:08 -0300
Subject: [PATCH 04/15] fix lint

---
 packages/html/ds/src/breadcrumbs/breadcrumbs.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/html/ds/src/breadcrumbs/breadcrumbs.html b/packages/html/ds/src/breadcrumbs/breadcrumbs.html
index deb7a91bb..3abcd87aa 100644
--- a/packages/html/ds/src/breadcrumbs/breadcrumbs.html
+++ b/packages/html/ds/src/breadcrumbs/breadcrumbs.html
@@ -11,7 +11,9 @@
       <a href="#" class="gi-link gi-link-no-visited">Passports</a>
     </li>
     <li role="listitem">
-      <a href="#" class="gi-link gi-link-no-visited" aria-current="page">Travel abroad</a>
+      <a href="#" class="gi-link gi-link-no-visited" aria-current="page"
+        >Travel abroad</a
+      >
     </li>
   </ol>
 </nav>

From b5f30bed10667675b31a8d5fed273278a683b3ff Mon Sep 17 00:00:00 2001
From: Ramon Mulia <ramonmulia@gmail.com>
Date: Fri, 22 Nov 2024 10:04:18 -0300
Subject: [PATCH 05/15] updating styles

---
 .../3-components/2-library/4-breadcrumbs.mdx  | 50 +++++++++----
 .../src/components/document/common/mdx.tsx    |  6 ++
 examples/nextjs/src/app/page.tsx              | 27 +++----
 packages/design/tailwind/css/components.css   | 28 ++++---
 packages/design/tailwind/css/typography.css   | 19 +++--
 .../html/ds/src/breadcrumbs/breadcrumbs.html  | 29 ++++---
 .../src/breadcrumbs/breadcrumbs.stories.tsx   | 33 ++++----
 .../ds/src/breadcrumbs/breadcrumbs.test.tsx   | 75 +++++++++++--------
 .../react/ds/src/breadcrumbs/breadcrumbs.tsx  | 57 +++++++-------
 packages/react/ds/src/breadcrumbs/types.ts    | 17 +++++
 10 files changed, 210 insertions(+), 131 deletions(-)
 create mode 100644 packages/react/ds/src/breadcrumbs/types.ts

diff --git a/apps/docs/content/3-components/2-library/4-breadcrumbs.mdx b/apps/docs/content/3-components/2-library/4-breadcrumbs.mdx
index 79119e4a9..abaf27022 100644
--- a/apps/docs/content/3-components/2-library/4-breadcrumbs.mdx
+++ b/apps/docs/content/3-components/2-library/4-breadcrumbs.mdx
@@ -9,7 +9,12 @@ status: in-development
 
 <ComponentStatusBlock componentId="breadcrumbs" />
 
-<Breadcrumbs links={[{ href: '/', label: 'Home' }, { href: '#', label: 'Passports' }, { href: '#', label: 'Travel abroad' }]} />
+<Breadcrumbs>
+  <BreadcrumbLink href="/home">Home</BreadcrumbLink>
+  <BreadcrumbEllipses />
+  <BreadcrumbLink href="/docs">Documentation</BreadcrumbLink>
+  <BreadcrumbCurrentLink href="/travel">Travel abroad</BreadcrumbCurrentLink>
+</Breadcrumbs>
 
 <Tabs id="tab1">
   <TabList>
@@ -18,30 +23,42 @@ status: in-development
   </TabList>
   <TabPanel value="tab11">
   ```html
-    <nav aria-label="Breadcrumbs" class="gi-breadcrumbs" data-testid="govie-breadcrumb">
-        <ol role="list">
+   <nav aria-label="Breadcrumbs" class="gi-breadcrumbs">
+      <ol role="list">
+        <li role="listitem">
+          <a href="/home" class="gi-link gi-link-inherit" aria-label="Home page">Home</a>
+        </li>
             <li role="listitem">
-            <a href="/" class="gi-link gi-link-no-visited">Home</a>
+              <div class="gi-breadcrumb-ellipses">
+                <div></div>
+                <div></div>
+                <div></div>
+              </div>
             </li>
-            <li role="listitem">
-            <a href="#" class="gi-link gi-link-no-visited">Passports</a>
-            </li>
-            <li role="listitem">
-            <a href="#" class="gi-link gi-link-no-visited">Travel abroad</a>
-            </li>
-        </ol>
+        <li role="listitem">
+          <a href="/docs" class="gi-link gi-link-inherit" aria-label="Documentation page">Documentation</a>
+        </li>
+        <li role="listitem">
+          <a href="/travel" class="gi-link gi-link-inherit" aria-label="Travel page" aria-current="page">Travel abroad</a>
+        </li>
+      </ol>
     </nav>
   ```
   </TabPanel>
   <TabPanel value="tab13">
   ```react
-    import { Breadcrumbs } from '@govie-ds/react';
+    import { Breadcrumbs, BreadcrumbLink, BreadcrumbEllipses, BreadcrumbCurrentLink } from '@govie-ds/react';
 
-    <Breadcrumbs links={[{ href: '/', label: 'Home' }, { href: '#', label: 'Passports' }, { href: '#', label: 'Travel abroad' }]} />
+    <Breadcrumbs>
+      <BreadcrumbLink href="/home">Home</BreadcrumbLink>
+      <BreadcrumbEllipses />
+      <BreadcrumbLink href="/docs">Documentation</BreadcrumbLink>
+      <BreadcrumbCurrentLink href="/travel">Travel abroad</BreadcrumbCurrentLink>
+    </Breadcrumbs>
 
-  ```
-  </TabPanel>
-  </Tabs>
+```
+</TabPanel>
+</Tabs>
 
 ## When to use this component
 Use breadcrumbs to help users understand their location within a website or application hierarchy and navigate back to higher levels easily.
@@ -49,3 +66,4 @@ Use breadcrumbs to help users understand their location within a website or appl
 ## When not to use this component
 Avoid breadcrumbs on websites or applications with a flat structure, where there is no clear hierarchy or depth (e.g., single-page applications or sites with only top-level pages)
 
+```
diff --git a/apps/docs/src/components/document/common/mdx.tsx b/apps/docs/src/components/document/common/mdx.tsx
index 4bf7a054b..9afae6562 100644
--- a/apps/docs/src/components/document/common/mdx.tsx
+++ b/apps/docs/src/components/document/common/mdx.tsx
@@ -29,6 +29,9 @@ import {
   Stack,
   Pagination,
   Breadcrumbs,
+  BreadcrumbCurrentLink,
+  BreadcrumbEllipses,
+  BreadcrumbLink,
   Alert,
 } from '@govie-ds/react';
 import { MDXComponents } from 'mdx/types';
@@ -195,6 +198,9 @@ const documentComponents: MDXComponents = {
   Stack: (props) => <Stack {...props} />,
   Pagination: (props) => <Pagination {...props} />,
   Breadcrumbs: (props) => <Breadcrumbs {...props} />,
+  BreadcrumbCurrentLink: (props) => <BreadcrumbCurrentLink {...props} />,
+  BreadcrumbEllipses: (props) => <BreadcrumbEllipses {...props} />,
+  BreadcrumbLink: (props) => <BreadcrumbLink {...props} />,
   Alert: (props) => <Alert {...props} />,
 };
 
diff --git a/examples/nextjs/src/app/page.tsx b/examples/nextjs/src/app/page.tsx
index 0c39e5130..ec8fc15cd 100644
--- a/examples/nextjs/src/app/page.tsx
+++ b/examples/nextjs/src/app/page.tsx
@@ -23,6 +23,9 @@ import {
   Alert,
   Breadcrumbs,
   Toast,
+  BreadcrumbCurrentLink,
+  BreadcrumbEllipses,
+  BreadcrumbLink,
 } from '@govie-ds/react';
 
 export default function Home() {
@@ -61,22 +64,14 @@ export default function Home() {
           trigger={<Button>Trigger Toast</Button>}
         />
         <div className="flex flex-col gap-4 my-4">
-          <Breadcrumbs
-            links={[
-              {
-                href: '#',
-                label: 'Home',
-              },
-              {
-                href: '#',
-                label: 'Passport',
-              },
-              {
-                href: '#',
-                label: 'Travel',
-              },
-            ]}
-          />
+          <Breadcrumbs>
+            <BreadcrumbLink href="/home">Home</BreadcrumbLink>
+            <BreadcrumbEllipses />
+            <BreadcrumbLink href="/documentation">
+              Documentation
+            </BreadcrumbLink>
+            <BreadcrumbCurrentLink href="/travel">Travel</BreadcrumbCurrentLink>
+          </Breadcrumbs>
           <Heading>Heading</Heading>
           <PhaseBanner level="alpha">This is a pre-release version</PhaseBanner>
           <Link
diff --git a/packages/design/tailwind/css/components.css b/packages/design/tailwind/css/components.css
index 275c51697..ca6b286b1 100644
--- a/packages/design/tailwind/css/components.css
+++ b/packages/design/tailwind/css/components.css
@@ -857,7 +857,6 @@ input[type='file' i] {
  }
  .notyf__toast:has(.gi-toast-danger) {
   @apply !gi-shadow-[0px_0px_25px_-5px_rgba(76,11,0,0.15)];
-  
  }
 
 /* End of Native notyf classes */
@@ -926,7 +925,7 @@ input[type='file' i] {
 }
 
 .gi-breadcrumbs > ol {
-  @apply gi-inline-flex gi-list-none gi-gap-5;
+  @apply gi-inline-flex gi-list-none gi-gap-7;
 }
 
 .gi-breadcrumbs > ol > :not([hidden]) ~ :not([hidden]) {
@@ -940,16 +939,21 @@ input[type='file' i] {
 .gi-breadcrumbs > ol > li:not(:first-child)::before {
   @apply gi-block
     gi-absolute
-    gi-top-1
     gi-bottom-0
-    gi-left-[-15px]
-    gi-w-[6px]
-    gi-h-[6px]
-    gi-m-auto
-    gi-border-t-[1px]
-    gi-border-r-[1px]
-    gi-border-gray-500
-    gi-rotate-45;
-  content: '';
+  gi-left-[-17px]
+  gi-text-gray-500
+  gi-font-bold
+  gi-text-sm;
+  content: '/';
 }
+
+.gi-breadcrumb-ellipses {
+  @apply gi-flex gi-h-full gi-w-full gi-items-center;
+}
+
+.gi-breadcrumb-ellipses > div {
+  @apply gi-bg-gray-500 gi-w-2 gi-h-2;
+  clip-path: ellipse(2px 2px at center);
+}
+
 /* End of Breadcrumbs */
diff --git a/packages/design/tailwind/css/typography.css b/packages/design/tailwind/css/typography.css
index 558d2b4ce..3dd3bedfb 100644
--- a/packages/design/tailwind/css/typography.css
+++ b/packages/design/tailwind/css/typography.css
@@ -177,21 +177,28 @@
   @apply gi-decoration-xs
   gi-underline
   gi-underline-offset-[0.2em]
-  gi-text-blue-700
-  hover:gi-text-blue-800
-  visited:gi-text-purple-700
-  hover:gi-decoration-lg
+  gi-text-blue-700;
+}
+
+.gi-link:not([aria-current='page']) {
+  @apply hover:gi-decoration-lg
   focus:gi-no-underline
   focus:gi-rounded-sm
-  focus:gi-text-blue-800
   focus:gi-shadow-[0_0_0_2px_var(--gieds-color-gray-950),0_0_0_5px_var(--gieds-color-yellow-400)]
   focus-visible:gi-shadow-[0_0_0_2px_var(--gieds-color-gray-950),0_0_0_5px_var(--gieds-color-yellow-400)]
-  focus-visible:gi-text-blue-800
   focus-visible:gi-no-underline
   focus-visible:gi-rounded-sm
   focus-visible:gi-outline-none;
 }
 
+.gi-link[aria-current='page'] {
+  @apply gi-text-gray-700 gi-pointer-events-none gi-no-underline focus-visible:gi-outline-none focus-visible:gi-shadow-none;
+}
+
+.gi-link:not(.gi-link-inherit) {
+  @apply hover:gi-text-blue-800 visited:gi-text-purple-700 focus:gi-text-blue-800 focus-visible:gi-text-blue-800;
+}
+
 .gi-link-sm {
   @apply gi-text-sm;
 }
diff --git a/packages/html/ds/src/breadcrumbs/breadcrumbs.html b/packages/html/ds/src/breadcrumbs/breadcrumbs.html
index 3abcd87aa..90ebbcc51 100644
--- a/packages/html/ds/src/breadcrumbs/breadcrumbs.html
+++ b/packages/html/ds/src/breadcrumbs/breadcrumbs.html
@@ -1,18 +1,29 @@
-<nav
-  aria-label="Breadcrumbs"
-  class="gi-breadcrumbs"
-  data-testid="govie-breadcrumb"
->
+<nav aria-label="Breadcrumbs" class="gi-breadcrumbs">
   <ol role="list">
     <li role="listitem">
-      <a href="/" class="gi-link gi-link-no-visited">Home</a>
+      <a href="/home" class="gi-link gi-link-inherit" aria-label="Home page"
+        >Home</a
+      >
+    </li>
+    <li role="listitem">
+      <div class="gi-breadcrumb-ellipses" aria-hidden="true">
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
     </li>
     <li role="listitem">
-      <a href="#" class="gi-link gi-link-no-visited">Passports</a>
+      <a href="/travel" class="gi-link gi-link-inherit" aria-label="Travel page"
+        >Travel</a
+      >
     </li>
     <li role="listitem">
-      <a href="#" class="gi-link gi-link-no-visited" aria-current="page"
-        >Travel abroad</a
+      <a
+        href="/docs"
+        class="gi-link gi-link-inherit"
+        aria-label="Documentation page"
+        aria-current="page"
+        >Documentation</a
       >
     </li>
   </ol>
diff --git a/packages/react/ds/src/breadcrumbs/breadcrumbs.stories.tsx b/packages/react/ds/src/breadcrumbs/breadcrumbs.stories.tsx
index 854be2f8b..d3308fcc6 100644
--- a/packages/react/ds/src/breadcrumbs/breadcrumbs.stories.tsx
+++ b/packages/react/ds/src/breadcrumbs/breadcrumbs.stories.tsx
@@ -1,5 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Breadcrumbs } from './breadcrumbs.js';
+import {
+  Breadcrumbs,
+  BreadcrumbCurrentLink,
+  BreadcrumbLink,
+  BreadcrumbEllipses,
+} from './breadcrumbs.js';
 
 const meta = {
   title: 'Navigation/Breadcrumbs',
@@ -18,23 +23,17 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  argTypes: {
-    links: {
-      control: 'object',
-      description:
-        'Array of breadcrumb links, each with `href` and `label` properties.',
-      table: {
-        type: {
-          summary: 'Array<{ href: string; label: string }>',
-        },
-      },
-    },
-  },
   args: {
-    links: [
-      { href: '/', label: 'Home' },
-      { href: '#', label: 'Passports' },
-      { href: '#', label: 'Travel abroad' },
+    children: [
+      <BreadcrumbLink href="/home">Home</BreadcrumbLink>,
+      <BreadcrumbEllipses />,
+      <BreadcrumbLink href="/travel">Travel</BreadcrumbLink>,
+      <BreadcrumbCurrentLink href="/docs">Documentation</BreadcrumbCurrentLink>,
     ],
   },
+  argTypes: {
+    children: {
+      description: 'The breadcrumb items: link, current link, and back link.',
+    },
+  },
 };
diff --git a/packages/react/ds/src/breadcrumbs/breadcrumbs.test.tsx b/packages/react/ds/src/breadcrumbs/breadcrumbs.test.tsx
index 779437015..88b93c6eb 100644
--- a/packages/react/ds/src/breadcrumbs/breadcrumbs.test.tsx
+++ b/packages/react/ds/src/breadcrumbs/breadcrumbs.test.tsx
@@ -1,42 +1,57 @@
 import { render, cleanup } from '../test-utils.js';
-import { Breadcrumbs } from './breadcrumbs.js';
+import {
+  Breadcrumbs,
+  BreadcrumbCurrentLink,
+  BreadcrumbLink,
+  BreadcrumbEllipses,
+} from './breadcrumbs.js';
 
 describe('govieBreadcrumbs', () => {
   afterEach(cleanup);
-  it('should render a breadcrumb with the correct content', () => {
-    const { getByTestId } = render(
-      <Breadcrumbs
-        links={[
-          {
-            href: '#',
-            label: 'Home',
-          },
-          {
-            href: '#',
-            label: 'Passport',
-          },
-        ]}
-      />,
+  it('should render Breadcrumbs', () => {
+    const { getByRole, getAllByRole } = render(
+      <Breadcrumbs>
+        <BreadcrumbLink href="/home">Home</BreadcrumbLink>
+        <BreadcrumbEllipses />
+        <BreadcrumbCurrentLink href="/travel">Travel</BreadcrumbCurrentLink>
+      </Breadcrumbs>,
     );
-    expect(getByTestId('govie-breadcrumbs')).toBeInTheDocument();
-    expect(getByTestId('breadcrumb_item_0')).toBeInTheDocument();
-    expect(getByTestId('breadcrumb_item_1')).toBeInTheDocument();
+
+    const breadcrumbNav = getByRole('navigation', {
+      name: /breadcrumb/i,
+    });
+    expect(breadcrumbNav).toBeInTheDocument();
+
+    const listItems = getAllByRole('listitem');
+    expect(listItems).toHaveLength(3);
+
+    expect(listItems[0]).toHaveTextContent('Home');
+    expect(listItems[1]).toBeInTheDocument();
+    expect(listItems[2]).toHaveTextContent('Travel');
+  });
+
+  it('should render Breadcrumbs with ellipses correctly', () => {
+    const { container } = render(
+      <Breadcrumbs>
+        <BreadcrumbLink href="/home">Home</BreadcrumbLink>
+        <BreadcrumbEllipses />
+        <BreadcrumbLink href="/docs">Documentation</BreadcrumbLink>
+        <BreadcrumbCurrentLink href="/travel">Travel</BreadcrumbCurrentLink>
+      </Breadcrumbs>,
+    );
+
+    const listItem = container.querySelector('li .gi-breadcrumb-ellipses');
+    expect(listItem).toBeInTheDocument();
+    expect(listItem).toHaveClass('gi-breadcrumb-ellipses');
   });
 
   it('should pass axe accessibility tests', async () => {
     const { axe } = render(
-      <Breadcrumbs
-        links={[
-          {
-            href: '#',
-            label: 'Home',
-          },
-          {
-            href: '#',
-            label: 'Passport',
-          },
-        ]}
-      />,
+      <Breadcrumbs>
+        <BreadcrumbLink href="/home">Home</BreadcrumbLink>
+        <BreadcrumbEllipses />
+        <BreadcrumbCurrentLink href="/travel">Travel</BreadcrumbCurrentLink>
+      </Breadcrumbs>,
     );
 
     await axe();
diff --git a/packages/react/ds/src/breadcrumbs/breadcrumbs.tsx b/packages/react/ds/src/breadcrumbs/breadcrumbs.tsx
index 9345d1a64..0689ad1ee 100644
--- a/packages/react/ds/src/breadcrumbs/breadcrumbs.tsx
+++ b/packages/react/ds/src/breadcrumbs/breadcrumbs.tsx
@@ -1,33 +1,40 @@
-import React from 'react';
 import { Link } from '../link/link.js';
+import type { BreadcrumbLinkProps, BreadcrumbProps } from './types.js';
 
-export type BreadcrumbProps = {
-  links: { label: string; href: string }[];
-};
+export const BreadcrumbEllipses = () => (
+  <div className="gi-breadcrumb-ellipses" aria-hidden="true">
+    <div />
+    <div />
+    <div />
+  </div>
+);
+
+export const BreadcrumbLink = ({
+  href,
+  children,
+  ...ariaProps
+}: BreadcrumbLinkProps) => (
+  <Link noColor href={href} aria-label={`${children} page`} {...ariaProps}>
+    {children}
+  </Link>
+);
+
+export const BreadcrumbCurrentLink = ({
+  href,
+  children,
+}: BreadcrumbLinkProps) => (
+  <BreadcrumbLink href={href} aria-current="page">
+    {children}
+  </BreadcrumbLink>
+);
 
-export const Breadcrumbs = ({ links = [] }: BreadcrumbProps) => {
+export const Breadcrumbs = ({ children }: BreadcrumbProps) => {
   return (
-    <nav
-      aria-label="Breadcrumb"
-      className="gi-breadcrumbs"
-      data-testid="govie-breadcrumbs"
-    >
+    <nav aria-label="Breadcrumbs" className="gi-breadcrumbs">
       <ol role="list">
-        {links.map(({ href, label }, index) => (
-          <li
-            role="listitem"
-            aria-label={`${label} page`}
-            key={`breadcrumb_item_${index}`}
-            data-testid={`breadcrumb_item_${index}`}
-          >
-            <Link
-              href={href}
-              {...(window.location.pathname === href
-                ? { 'aria-current': 'page' }
-                : {})}
-            >
-              {label}
-            </Link>
+        {children.map((Component, index) => (
+          <li role="listitem" key={`breadcrumb_item_${index}`}>
+            {Component}
           </li>
         ))}
       </ol>
diff --git a/packages/react/ds/src/breadcrumbs/types.ts b/packages/react/ds/src/breadcrumbs/types.ts
new file mode 100644
index 000000000..f3a1c9ea0
--- /dev/null
+++ b/packages/react/ds/src/breadcrumbs/types.ts
@@ -0,0 +1,17 @@
+import type { LinkProps } from '../link/link.js';
+import {
+  BreadcrumbCurrentLink,
+  BreadcrumbEllipses,
+  BreadcrumbLink,
+} from './breadcrumbs.js';
+
+export type BreadcrumbLinkProps = Pick<LinkProps, 'href' | 'children'> &
+  React.AriaAttributes;
+
+export type BreadcrumbProps = {
+  children: React.ReactElement<
+    | typeof BreadcrumbLink
+    | typeof BreadcrumbCurrentLink
+    | typeof BreadcrumbEllipses
+  >[];
+};

From 728cf613e353a8dfab81d34265811f6fef302140 Mon Sep 17 00:00:00 2001
From: Ramon Mulia <ramonmulia@gmail.com>
Date: Fri, 22 Nov 2024 10:19:24 -0300
Subject: [PATCH 06/15] fix format

---
 examples/nextjs/src/app/page.tsx | 50 ++++++++++++++++----------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/examples/nextjs/src/app/page.tsx b/examples/nextjs/src/app/page.tsx
index ec8fc15cd..dab04b014 100644
--- a/examples/nextjs/src/app/page.tsx
+++ b/examples/nextjs/src/app/page.tsx
@@ -32,25 +32,25 @@ export default function Home() {
   return (
     <div className="flex flex-col h-full">
       <Header
-        logo={{ href: '/' }}
-        tools={{ search: { action: '/search-page' } }}
+        logo={{ href: "/" }}
+        tools={{ search: { action: "/search-page" } }}
         navLinks={[
           {
-            href: '#',
-            label: 'News',
+            href: "#",
+            label: "News",
           },
           {
-            href: '#',
-            label: 'Departments',
+            href: "#",
+            label: "Departments",
           },
           {
-            href: '#',
-            label: 'Services',
+            href: "#",
+            label: "Services",
           },
         ]}
         languages={[
           {
-            href: '#',
+            href: "#",
             label: 'Gaeilge',
           },
         ]}
@@ -85,8 +85,8 @@ export default function Home() {
           <Icon icon="thumb_up" />
           <IconButton
             icon={{
-              icon: 'send',
-              ariaLabel: 'Send',
+              icon: "send",
+              ariaLabel: "Send",
             }}
           />
           <Combobox {...ComboBoxProps} />
@@ -104,37 +104,37 @@ export default function Home() {
           <hr />
           <RadiosGroup
             title={{
-              value: 'Where do you live?',
+              value: "Where do you live?",
               asHeading: {
-                size: 'md',
-                as: 'h2',
+                size: "md",
+                as: "h2",
               },
             }}
             items={[
               {
-                label: 'England',
-                value: 'england',
+                label: "England",
+                value: "england",
               },
               {
-                label: 'Scotland',
-                value: 'scotland',
+                label: "Scotland",
+                value: "scotland",
               },
               {
-                label: 'Ireland',
-                value: 'ireland',
+                label: "Ireland",
+                value: "ireland",
               },
             ]}
             groupId="uniqueId"
           />
           <TextArea
             hint={{
-              text: 'Hint: This is a helpful hint.',
+              text: "Hint: This is a helpful hint.",
             }}
             id="textarea-id"
             maxChars={50}
             label={{
-              text: 'Textarea text',
-              htmlFor: 'textarea-id',
+              text: "Textarea text",
+              htmlFor: "textarea-id",
             }}
           />
 
@@ -153,11 +153,11 @@ export default function Home() {
               <Button>Primary action</Button>
             </div>
           </Modal>
-          <List items={['Item 1', 'Item 2', 'Item 3']} type={TypeEnum.Bullet} />
+          <List items={["Item 1", "Item 2", "Item 3"]} type={TypeEnum.Bullet} />
           <Chip label="Chip" onClose={() => null} />
           <div className="gi-h-[300px] gi-bg-gray-50 gi-overflow-auto gi-p-2">
             <Stack
-              direction={{ sm: 'column', base: 'row' }}
+              direction={{ sm: "column", base: "row" }}
               itemsAlignment="start"
               itemsDistribution="start"
               gap={5}

From bc045056c2815fa2a559b3f1af2478e9bb7a527d Mon Sep 17 00:00:00 2001
From: Ramon Mulia <ramonmulia@gmail.com>
Date: Fri, 22 Nov 2024 10:21:12 -0300
Subject: [PATCH 07/15] fix css format

---
 packages/design/tailwind/css/components.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/design/tailwind/css/components.css b/packages/design/tailwind/css/components.css
index ca6b286b1..6ac2ee3a7 100644
--- a/packages/design/tailwind/css/components.css
+++ b/packages/design/tailwind/css/components.css
@@ -940,11 +940,11 @@ input[type='file' i] {
   @apply gi-block
     gi-absolute
     gi-bottom-0
-  gi-left-[-17px]
-  gi-text-gray-500
-  gi-font-bold
-  gi-text-sm;
-  content: '/';
+    gi-left-[-17px]
+    gi-text-gray-500
+    gi-font-bold
+    gi-text-sm;
+    content: '/';
 }
 
 .gi-breadcrumb-ellipses {

From 2078d96c84d2e8ca4069abf2787b9e617d245b0d Mon Sep 17 00:00:00 2001
From: Ramon Mulia <ramonmulia@gmail.com>
Date: Fri, 22 Nov 2024 12:52:21 -0300
Subject: [PATCH 08/15] fixing typo

---
 .../3-components/2-library/4-breadcrumbs.mdx  |  8 +--
 .../src/components/document/common/mdx.tsx    |  4 +-
 examples/nextjs/src/app/page.tsx              |  8 +--
 packages/design/tailwind/css/components.css   | 58 +++++++++----------
 .../html/ds/src/breadcrumbs/breadcrumbs.html  |  2 +-
 .../src/breadcrumbs/breadcrumbs.stories.tsx   |  4 +-
 .../ds/src/breadcrumbs/breadcrumbs.test.tsx   | 12 ++--
 .../react/ds/src/breadcrumbs/breadcrumbs.tsx  |  4 +-
 packages/react/ds/src/breadcrumbs/types.ts    |  4 +-
 9 files changed, 51 insertions(+), 53 deletions(-)

diff --git a/apps/docs/content/3-components/2-library/4-breadcrumbs.mdx b/apps/docs/content/3-components/2-library/4-breadcrumbs.mdx
index abaf27022..34fa2464f 100644
--- a/apps/docs/content/3-components/2-library/4-breadcrumbs.mdx
+++ b/apps/docs/content/3-components/2-library/4-breadcrumbs.mdx
@@ -11,7 +11,7 @@ status: in-development
 
 <Breadcrumbs>
   <BreadcrumbLink href="/home">Home</BreadcrumbLink>
-  <BreadcrumbEllipses />
+  <BreadcrumbEllipsis />
   <BreadcrumbLink href="/docs">Documentation</BreadcrumbLink>
   <BreadcrumbCurrentLink href="/travel">Travel abroad</BreadcrumbCurrentLink>
 </Breadcrumbs>
@@ -29,7 +29,7 @@ status: in-development
           <a href="/home" class="gi-link gi-link-inherit" aria-label="Home page">Home</a>
         </li>
             <li role="listitem">
-              <div class="gi-breadcrumb-ellipses">
+              <div class="gi-breadcrumb-ellipsis">
                 <div></div>
                 <div></div>
                 <div></div>
@@ -47,11 +47,11 @@ status: in-development
   </TabPanel>
   <TabPanel value="tab13">
   ```react
-    import { Breadcrumbs, BreadcrumbLink, BreadcrumbEllipses, BreadcrumbCurrentLink } from '@govie-ds/react';
+    import { Breadcrumbs, BreadcrumbLink, BreadcrumbEllipsis, BreadcrumbCurrentLink } from '@govie-ds/react';
 
     <Breadcrumbs>
       <BreadcrumbLink href="/home">Home</BreadcrumbLink>
-      <BreadcrumbEllipses />
+      <BreadcrumbEllipsis />
       <BreadcrumbLink href="/docs">Documentation</BreadcrumbLink>
       <BreadcrumbCurrentLink href="/travel">Travel abroad</BreadcrumbCurrentLink>
     </Breadcrumbs>
diff --git a/apps/docs/src/components/document/common/mdx.tsx b/apps/docs/src/components/document/common/mdx.tsx
index 9afae6562..4e5bf2bb2 100644
--- a/apps/docs/src/components/document/common/mdx.tsx
+++ b/apps/docs/src/components/document/common/mdx.tsx
@@ -30,7 +30,7 @@ import {
   Pagination,
   Breadcrumbs,
   BreadcrumbCurrentLink,
-  BreadcrumbEllipses,
+  BreadcrumbEllipsis,
   BreadcrumbLink,
   Alert,
 } from '@govie-ds/react';
@@ -199,7 +199,7 @@ const documentComponents: MDXComponents = {
   Pagination: (props) => <Pagination {...props} />,
   Breadcrumbs: (props) => <Breadcrumbs {...props} />,
   BreadcrumbCurrentLink: (props) => <BreadcrumbCurrentLink {...props} />,
-  BreadcrumbEllipses: (props) => <BreadcrumbEllipses {...props} />,
+  BreadcrumbEllipsis: (props) => <BreadcrumbEllipsis {...props} />,
   BreadcrumbLink: (props) => <BreadcrumbLink {...props} />,
   Alert: (props) => <Alert {...props} />,
 };
diff --git a/examples/nextjs/src/app/page.tsx b/examples/nextjs/src/app/page.tsx
index dab04b014..642f738ec 100644
--- a/examples/nextjs/src/app/page.tsx
+++ b/examples/nextjs/src/app/page.tsx
@@ -24,7 +24,7 @@ import {
   Breadcrumbs,
   Toast,
   BreadcrumbCurrentLink,
-  BreadcrumbEllipses,
+  BreadcrumbEllipsis,
   BreadcrumbLink,
 } from '@govie-ds/react';
 
@@ -66,10 +66,8 @@ export default function Home() {
         <div className="flex flex-col gap-4 my-4">
           <Breadcrumbs>
             <BreadcrumbLink href="/home">Home</BreadcrumbLink>
-            <BreadcrumbEllipses />
-            <BreadcrumbLink href="/documentation">
-              Documentation
-            </BreadcrumbLink>
+            <BreadcrumbEllipsis />
+            <BreadcrumbLink href="/documentation">Documentation</BreadcrumbLink>
             <BreadcrumbCurrentLink href="/travel">Travel</BreadcrumbCurrentLink>
           </Breadcrumbs>
           <Heading>Heading</Heading>
diff --git a/packages/design/tailwind/css/components.css b/packages/design/tailwind/css/components.css
index 6ac2ee3a7..6339923de 100644
--- a/packages/design/tailwind/css/components.css
+++ b/packages/design/tailwind/css/components.css
@@ -833,75 +833,75 @@ input[type='file' i] {
 
 /* Native notyf classes */
 .notyf {
-  @apply !gi-gap-6
- }
+  @apply !gi-gap-6;
+}
 .notyf__toast {
- @apply !gi-m-0 !gi-p-0 !gi-min-w-[340px] !gi-max-w-[460px] !gi-overflow-auto;
- animation-delay: 0s !important;
+  @apply !gi-m-0 !gi-p-0 !gi-min-w-[340px] !gi-max-w-[460px] !gi-overflow-auto;
+  animation-delay: 0s !important;
 }
 .notyf__message {
- @apply !gi-w-full;
- animation-delay: 0s !important;
- }
+  @apply !gi-w-full;
+  animation-delay: 0s !important;
+}
 .notyf__wrapper {
- @apply !gi-m-0 !gi-p-0; 
+  @apply !gi-m-0 !gi-p-0;
 }
 .notyf__toast:has(.gi-toast-info) {
   @apply !gi-shadow-[0px_0px_25px_-5px_rgba(7,33,85,0.15)];
- }
- .notyf__toast:has(.gi-toast-success) {
+}
+.notyf__toast:has(.gi-toast-success) {
   @apply !gi-shadow-[0px_0px_25px_-5px_rgba(0,61,33,0.15)];
- }
- .notyf__toast:has(.gi-toast-warning) {
+}
+.notyf__toast:has(.gi-toast-warning) {
   @apply !gi-shadow-[0px_0px_25px_-5px_rgba(62,41,25,0.15)];
- }
- .notyf__toast:has(.gi-toast-danger) {
+}
+.notyf__toast:has(.gi-toast-danger) {
   @apply !gi-shadow-[0px_0px_25px_-5px_rgba(76,11,0,0.15)];
- }
+}
 
 /* End of Native notyf classes */
 
 .gi-toast-base {
-  @apply gi-relative gi-flex-row gi-flex gi-p-3 gi-border-xs gi-rounded-sm gi-gap-2
+  @apply gi-relative gi-flex-row gi-flex gi-p-3 gi-border-xs gi-rounded-sm gi-gap-2;
 }
 
 .gi-toast-base-dismissible {
-  @apply gi-toast-base !gi-pr-10
+  @apply gi-toast-base !gi-pr-10;
 }
 
 .gi-toast-title {
-  @apply gi-text-2md gi-font-bold
+  @apply gi-text-2md gi-font-bold;
 }
 
 .gi-toast-container {
-  @apply gi-flex gi-flex-col gi-items-start gi-gap-1 gi-grow gi-pr-0
+  @apply gi-flex gi-flex-col gi-items-start gi-gap-1 gi-grow gi-pr-0;
 }
 
 .gi-toast-content {
-  @apply !gi-mb-0
+  @apply !gi-mb-0;
 }
 
 .gi-toast-dismiss {
-  @apply gi-absolute gi-top-2 gi-right-2
+  @apply gi-absolute gi-top-2 gi-right-2;
 }
 
 .gi-toast-info {
-  @apply gi-bg-blue-50 gi-border-blue-100 gi-text-blue-700
+  @apply gi-bg-blue-50 gi-border-blue-100 gi-text-blue-700;
 }
 
 .gi-toast-success {
-  @apply gi-bg-green-50 gi-border-green-100 gi-text-green-700
+  @apply gi-bg-green-50 gi-border-green-100 gi-text-green-700;
 }
 
 .gi-toast-warning {
-  @apply gi-bg-yellow-50 gi-border-yellow-300 gi-text-yellow-700
+  @apply gi-bg-yellow-50 gi-border-yellow-300 gi-text-yellow-700;
 }
 
 .gi-toast-danger {
-  @apply gi-bg-red-50 gi-border-red-100 gi-text-red-700
+  @apply gi-bg-red-50 gi-border-red-100 gi-text-red-700;
 }
 .gi-toast-action {
-  @apply gi-text-gray-950 gi-mt-2
+  @apply gi-text-gray-950 gi-mt-2;
 }
 
 /* End of Toast */
@@ -944,14 +944,14 @@ input[type='file' i] {
     gi-text-gray-500
     gi-font-bold
     gi-text-sm;
-    content: '/';
+  content: '/';
 }
 
-.gi-breadcrumb-ellipses {
+.gi-breadcrumb-ellipsis {
   @apply gi-flex gi-h-full gi-w-full gi-items-center;
 }
 
-.gi-breadcrumb-ellipses > div {
+.gi-breadcrumb-ellipsis > div {
   @apply gi-bg-gray-500 gi-w-2 gi-h-2;
   clip-path: ellipse(2px 2px at center);
 }
diff --git a/packages/html/ds/src/breadcrumbs/breadcrumbs.html b/packages/html/ds/src/breadcrumbs/breadcrumbs.html
index 90ebbcc51..5e3807517 100644
--- a/packages/html/ds/src/breadcrumbs/breadcrumbs.html
+++ b/packages/html/ds/src/breadcrumbs/breadcrumbs.html
@@ -6,7 +6,7 @@
       >
     </li>
     <li role="listitem">
-      <div class="gi-breadcrumb-ellipses" aria-hidden="true">
+      <div class="gi-breadcrumb-ellipsis" aria-hidden="true">
         <div></div>
         <div></div>
         <div></div>
diff --git a/packages/react/ds/src/breadcrumbs/breadcrumbs.stories.tsx b/packages/react/ds/src/breadcrumbs/breadcrumbs.stories.tsx
index d3308fcc6..1b5ccfdde 100644
--- a/packages/react/ds/src/breadcrumbs/breadcrumbs.stories.tsx
+++ b/packages/react/ds/src/breadcrumbs/breadcrumbs.stories.tsx
@@ -3,7 +3,7 @@ import {
   Breadcrumbs,
   BreadcrumbCurrentLink,
   BreadcrumbLink,
-  BreadcrumbEllipses,
+  BreadcrumbEllipsis,
 } from './breadcrumbs.js';
 
 const meta = {
@@ -26,7 +26,7 @@ export const Default: Story = {
   args: {
     children: [
       <BreadcrumbLink href="/home">Home</BreadcrumbLink>,
-      <BreadcrumbEllipses />,
+      <BreadcrumbEllipsis />,
       <BreadcrumbLink href="/travel">Travel</BreadcrumbLink>,
       <BreadcrumbCurrentLink href="/docs">Documentation</BreadcrumbCurrentLink>,
     ],
diff --git a/packages/react/ds/src/breadcrumbs/breadcrumbs.test.tsx b/packages/react/ds/src/breadcrumbs/breadcrumbs.test.tsx
index 88b93c6eb..e03cba121 100644
--- a/packages/react/ds/src/breadcrumbs/breadcrumbs.test.tsx
+++ b/packages/react/ds/src/breadcrumbs/breadcrumbs.test.tsx
@@ -3,7 +3,7 @@ import {
   Breadcrumbs,
   BreadcrumbCurrentLink,
   BreadcrumbLink,
-  BreadcrumbEllipses,
+  BreadcrumbEllipsis,
 } from './breadcrumbs.js';
 
 describe('govieBreadcrumbs', () => {
@@ -12,7 +12,7 @@ describe('govieBreadcrumbs', () => {
     const { getByRole, getAllByRole } = render(
       <Breadcrumbs>
         <BreadcrumbLink href="/home">Home</BreadcrumbLink>
-        <BreadcrumbEllipses />
+        <BreadcrumbEllipsis />
         <BreadcrumbCurrentLink href="/travel">Travel</BreadcrumbCurrentLink>
       </Breadcrumbs>,
     );
@@ -34,22 +34,22 @@ describe('govieBreadcrumbs', () => {
     const { container } = render(
       <Breadcrumbs>
         <BreadcrumbLink href="/home">Home</BreadcrumbLink>
-        <BreadcrumbEllipses />
+        <BreadcrumbEllipsis />
         <BreadcrumbLink href="/docs">Documentation</BreadcrumbLink>
         <BreadcrumbCurrentLink href="/travel">Travel</BreadcrumbCurrentLink>
       </Breadcrumbs>,
     );
 
-    const listItem = container.querySelector('li .gi-breadcrumb-ellipses');
+    const listItem = container.querySelector('li .gi-breadcrumb-ellipsis');
     expect(listItem).toBeInTheDocument();
-    expect(listItem).toHaveClass('gi-breadcrumb-ellipses');
+    expect(listItem).toHaveClass('gi-breadcrumb-ellipsis');
   });
 
   it('should pass axe accessibility tests', async () => {
     const { axe } = render(
       <Breadcrumbs>
         <BreadcrumbLink href="/home">Home</BreadcrumbLink>
-        <BreadcrumbEllipses />
+        <BreadcrumbEllipsis />
         <BreadcrumbCurrentLink href="/travel">Travel</BreadcrumbCurrentLink>
       </Breadcrumbs>,
     );
diff --git a/packages/react/ds/src/breadcrumbs/breadcrumbs.tsx b/packages/react/ds/src/breadcrumbs/breadcrumbs.tsx
index 0689ad1ee..5ffef0a7b 100644
--- a/packages/react/ds/src/breadcrumbs/breadcrumbs.tsx
+++ b/packages/react/ds/src/breadcrumbs/breadcrumbs.tsx
@@ -1,8 +1,8 @@
 import { Link } from '../link/link.js';
 import type { BreadcrumbLinkProps, BreadcrumbProps } from './types.js';
 
-export const BreadcrumbEllipses = () => (
-  <div className="gi-breadcrumb-ellipses" aria-hidden="true">
+export const BreadcrumbEllipsis = () => (
+  <div className="gi-breadcrumb-ellipsis" aria-hidden="true">
     <div />
     <div />
     <div />
diff --git a/packages/react/ds/src/breadcrumbs/types.ts b/packages/react/ds/src/breadcrumbs/types.ts
index f3a1c9ea0..83bcba5d8 100644
--- a/packages/react/ds/src/breadcrumbs/types.ts
+++ b/packages/react/ds/src/breadcrumbs/types.ts
@@ -1,7 +1,7 @@
 import type { LinkProps } from '../link/link.js';
 import {
   BreadcrumbCurrentLink,
-  BreadcrumbEllipses,
+  BreadcrumbEllipsis,
   BreadcrumbLink,
 } from './breadcrumbs.js';
 
@@ -12,6 +12,6 @@ export type BreadcrumbProps = {
   children: React.ReactElement<
     | typeof BreadcrumbLink
     | typeof BreadcrumbCurrentLink
-    | typeof BreadcrumbEllipses
+    | typeof BreadcrumbEllipsis
   >[];
 };

From 98f9ef0374ae6a186c1f6c9c858c91d2a0bc1878 Mon Sep 17 00:00:00 2001
From: Ramon Mulia <ramonmulia@gmail.com>
Date: Fri, 22 Nov 2024 14:13:15 -0300
Subject: [PATCH 09/15] adding wagtail example

---
 examples/wagtail/core/jinja/home_page.jinja | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/examples/wagtail/core/jinja/home_page.jinja b/examples/wagtail/core/jinja/home_page.jinja
index 96e0b8ea6..7a1a391ff 100644
--- a/examples/wagtail/core/jinja/home_page.jinja
+++ b/examples/wagtail/core/jinja/home_page.jinja
@@ -17,7 +17,6 @@
 {% from 'modal/modal.html' import govieModal %}
 {% from 'icon-button/icon-button.html' import govieIconButton %}
 {% from 'cookie-banner/cookie-banner.html' import govieCookieBanner %}
-{% from 'list/list.html' import govieList %}
 {% from 'combo-box/combo-box.html' import govieComboBox %}
 {% from 'alert/alert.html' import govieAlert %}
 {% from 'toast/toast.html' import govieToast %}
@@ -51,6 +50,12 @@
 
   <hr />
 
+  <h2>Breadcrumbs</h2>
+  {% include "breadcrumbs/breadcrumbs.html" %}
+  <br />
+
+  <hr />
+
   {{ govieCookieBanner(cookieBannerProps) }}
 
   <h2>Paragraph (Global)</h2>
@@ -231,8 +236,6 @@
   <h2>Footer (Global)</h2>
   {{ govieFooter(footerProps) }}
 
-  <h2>List</h2>
-  {{ govieList(listProps) }}
   <script src="{{ static('js/govie-frontend.umd.js') }}"></script>
 </body>
 

From 9346f9b1775ae08741ca67deaf510e4c7bcd091d Mon Sep 17 00:00:00 2001
From: Ramon Mulia <ramonmulia@gmail.com>
Date: Mon, 25 Nov 2024 06:58:36 -0300
Subject: [PATCH 10/15] removing unecessary description

---
 packages/react/ds/src/breadcrumbs/breadcrumbs.stories.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/react/ds/src/breadcrumbs/breadcrumbs.stories.tsx b/packages/react/ds/src/breadcrumbs/breadcrumbs.stories.tsx
index 1b5ccfdde..2c9f11044 100644
--- a/packages/react/ds/src/breadcrumbs/breadcrumbs.stories.tsx
+++ b/packages/react/ds/src/breadcrumbs/breadcrumbs.stories.tsx
@@ -31,9 +31,4 @@ export const Default: Story = {
       <BreadcrumbCurrentLink href="/docs">Documentation</BreadcrumbCurrentLink>,
     ],
   },
-  argTypes: {
-    children: {
-      description: 'The breadcrumb items: link, current link, and back link.',
-    },
-  },
 };

From 994458b2872bab58b856abe6fed5fb3b2adbc5a4 Mon Sep 17 00:00:00 2001
From: Ramon Mulia <ramonmulia@gmail.com>
Date: Mon, 25 Nov 2024 12:32:18 -0300
Subject: [PATCH 11/15] adding breadcrumbs macro

---
 .../3-components/2-library/4-breadcrumbs.mdx  | 24 ++++--
 .../src/components/document/common/mdx.tsx    |  5 +-
 packages/design/tailwind/css/components.css   | 13 +--
 .../html/ds/src/breadcrumbs/breadcrumbs.html  | 79 ++++++++++++-------
 .../ds/src/breadcrumbs/breadcrumbs.schema.ts  | 36 +++++++++
 .../ds/src/breadcrumbs/breadcrumbs.stories.ts | 41 +++++++++-
 .../ds/src/breadcrumbs/breadcrumbs.test.ts    | 48 +++++++++++
 packages/html/ds/src/link/link.html           |  7 ++
 packages/html/ds/src/link/link.schema.ts      |  5 ++
 .../src/breadcrumbs/breadcrumbs.stories.tsx   | 19 +++++
 .../ds/src/breadcrumbs/breadcrumbs.test.tsx   |  6 +-
 .../react/ds/src/breadcrumbs/breadcrumbs.tsx  |  7 +-
 12 files changed, 230 insertions(+), 60 deletions(-)
 create mode 100644 packages/html/ds/src/breadcrumbs/breadcrumbs.schema.ts
 create mode 100644 packages/html/ds/src/breadcrumbs/breadcrumbs.test.ts

diff --git a/apps/docs/content/3-components/2-library/4-breadcrumbs.mdx b/apps/docs/content/3-components/2-library/4-breadcrumbs.mdx
index 34fa2464f..54fecc0aa 100644
--- a/apps/docs/content/3-components/2-library/4-breadcrumbs.mdx
+++ b/apps/docs/content/3-components/2-library/4-breadcrumbs.mdx
@@ -19,6 +19,7 @@ status: in-development
 <Tabs id="tab1">
   <TabList>
     <TabItem value="tab11" checked>HTML</TabItem>
+    <TabItem value="tab12">Macro</TabItem>
     <TabItem value="tab13">React</TabItem>
   </TabList>
   <TabPanel value="tab11">
@@ -29,10 +30,8 @@ status: in-development
           <a href="/home" class="gi-link gi-link-inherit" aria-label="Home page">Home</a>
         </li>
             <li role="listitem">
-              <div class="gi-breadcrumb-ellipsis">
-                <div></div>
-                <div></div>
-                <div></div>
+              <div aria-hidden="true">
+                  <span class="material-symbols-outlined gi-gray-700">more_horiz</span>
               </div>
             </li>
         <li role="listitem">
@@ -45,6 +44,18 @@ status: in-development
     </nav>
   ```
   </TabPanel>
+  <TabPanel value="tab12">
+    ```html
+      {{govieBreadcrumbs({
+        items: [
+          { "label": "Home", "href": "/home" },
+          { "ellipsis": true },
+          { "label": "Documentation", "href": "/docs" },
+          { "label": "Travel abroad", "href": "/travel", "currentPage": true }
+        ]})
+      }}
+    ```
+    </TabPanel>
   <TabPanel value="tab13">
   ```react
     import { Breadcrumbs, BreadcrumbLink, BreadcrumbEllipsis, BreadcrumbCurrentLink } from '@govie-ds/react';
@@ -56,8 +67,8 @@ status: in-development
       <BreadcrumbCurrentLink href="/travel">Travel abroad</BreadcrumbCurrentLink>
     </Breadcrumbs>
 
-```
-</TabPanel>
+  ```
+  </TabPanel>
 </Tabs>
 
 ## When to use this component
@@ -66,4 +77,3 @@ Use breadcrumbs to help users understand their location within a website or appl
 ## When not to use this component
 Avoid breadcrumbs on websites or applications with a flat structure, where there is no clear hierarchy or depth (e.g., single-page applications or sites with only top-level pages)
 
-```
diff --git a/apps/docs/src/components/document/common/mdx.tsx b/apps/docs/src/components/document/common/mdx.tsx
index b4b986848..615c03654 100644
--- a/apps/docs/src/components/document/common/mdx.tsx
+++ b/apps/docs/src/components/document/common/mdx.tsx
@@ -224,7 +224,10 @@ export function Mdx({ code }: MdxProps) {
             key === 'Heading' ||
             key === 'Icon' ||
             key === 'Tag' ||
-            key === 'Card'
+            key === 'Card' ||
+            key === 'BreadcrumbLink' ||
+            key === 'BreadcrumbEllipsis' ||
+            key === 'BreadcrumbCurrentLink'
           ) {
             return;
           }
diff --git a/packages/design/tailwind/css/components.css b/packages/design/tailwind/css/components.css
index ba1efd760..65fcf07a6 100644
--- a/packages/design/tailwind/css/components.css
+++ b/packages/design/tailwind/css/components.css
@@ -836,8 +836,8 @@ input[type='file' i] {
   @apply !gi-gap-6;
 }
 .notyf__toast {
- @apply !gi-m-0 !gi-p-0 !gi-min-w-[340px] !gi-max-w-[460px];
- animation-delay: 0s !important;
+  @apply !gi-m-0 !gi-p-0 !gi-min-w-[340px] !gi-max-w-[460px];
+  animation-delay: 0s !important;
 }
 .notyf__message {
   @apply !gi-w-full;
@@ -947,13 +947,4 @@ input[type='file' i] {
   content: '/';
 }
 
-.gi-breadcrumb-ellipsis {
-  @apply gi-flex gi-h-full gi-w-full gi-items-center;
-}
-
-.gi-breadcrumb-ellipsis > div {
-  @apply gi-bg-gray-500 gi-w-2 gi-h-2;
-  clip-path: ellipse(2px 2px at center);
-}
-
 /* End of Breadcrumbs */
diff --git a/packages/html/ds/src/breadcrumbs/breadcrumbs.html b/packages/html/ds/src/breadcrumbs/breadcrumbs.html
index 5e3807517..d6754bd2d 100644
--- a/packages/html/ds/src/breadcrumbs/breadcrumbs.html
+++ b/packages/html/ds/src/breadcrumbs/breadcrumbs.html
@@ -1,30 +1,49 @@
-<nav aria-label="Breadcrumbs" class="gi-breadcrumbs">
-  <ol role="list">
-    <li role="listitem">
-      <a href="/home" class="gi-link gi-link-inherit" aria-label="Home page"
-        >Home</a
-      >
-    </li>
-    <li role="listitem">
-      <div class="gi-breadcrumb-ellipsis" aria-hidden="true">
-        <div></div>
-        <div></div>
-        <div></div>
-      </div>
-    </li>
-    <li role="listitem">
-      <a href="/travel" class="gi-link gi-link-inherit" aria-label="Travel page"
-        >Travel</a
-      >
-    </li>
-    <li role="listitem">
-      <a
-        href="/docs"
-        class="gi-link gi-link-inherit"
-        aria-label="Documentation page"
-        aria-current="page"
-        >Documentation</a
-      >
-    </li>
-  </ol>
-</nav>
+{% from 'link/link.html' import govieLink %}
+{% from 'icon/icon.html' import govieIcon %}
+
+{% macro govieBreadcrumbs(props) %}
+  <nav
+    aria-label="Breadcrumbs"
+    data-element="breadcrumbs-container"
+    data-module="gieds-breadcrumbs"
+    class="gi-breadcrumbs"
+  >
+    <ol role="list">
+      {% for item in props.items %}
+        <li
+          role="listitem"
+          {% if item.currentPage %}aria-current="page"{% endif %}
+        >
+          {% if item.ellipsis %}
+            <div aria-hidden="true">
+              {{
+                govieIcon({
+                "icon": "more_horiz",
+                "className": "gi-text-gray-700"
+                })
+              }}
+            </div>
+          {% elif item.currentPage %}
+            {{
+              govieLink({
+                  "noColor": true,
+                  "href": item.href,
+                  "label": item.label,
+                  "ariaCurrent": "page"
+              })
+            }}
+          {% else %}
+            {{
+              govieLink({
+                  "noColor": true,
+                  "href": item.href,
+                  "label": item.label,
+                  "ariaLabel": item.label + " page"
+              })
+            }}
+          {% endif %}
+        </li>
+      {% endfor %}
+    </ol>
+  </nav>
+{% endmacro %}
diff --git a/packages/html/ds/src/breadcrumbs/breadcrumbs.schema.ts b/packages/html/ds/src/breadcrumbs/breadcrumbs.schema.ts
new file mode 100644
index 000000000..c630e8b8c
--- /dev/null
+++ b/packages/html/ds/src/breadcrumbs/breadcrumbs.schema.ts
@@ -0,0 +1,36 @@
+import * as zod from 'zod';
+
+// Breadcrumb item schema
+export const BreadcrumbsItemSchema = zod
+  .object({
+    label: zod
+      .string({ description: 'The label for the breadcrumb item' })
+      .optional(),
+    href: zod
+      .string({ description: 'The URL the breadcrumb item points to' })
+      .optional(),
+    ellipsis: zod
+      .boolean({
+        description:
+          'Specify if the breadcrumb item should be displayed as an ellipsis',
+      })
+      .optional(),
+    currentPage: zod
+      .boolean({
+        description: 'Indicates if this breadcrumb item is the current page',
+      })
+      .optional(),
+  })
+  .refine(
+    (data) => data.ellipsis || (data.label && data.href) || data.currentPage,
+    {
+      message:
+        'Each breadcrumb item must have ellipsis, label and href, or currentPage',
+    },
+  );
+
+export const BreadcrumbsArraySchema = zod.object({
+  items: zod.array(BreadcrumbsItemSchema),
+});
+
+export type BreadcrumbsProps = zod.infer<typeof BreadcrumbsArraySchema>;
diff --git a/packages/html/ds/src/breadcrumbs/breadcrumbs.stories.ts b/packages/html/ds/src/breadcrumbs/breadcrumbs.stories.ts
index 22223aa0d..8721a0e95 100644
--- a/packages/html/ds/src/breadcrumbs/breadcrumbs.stories.ts
+++ b/packages/html/ds/src/breadcrumbs/breadcrumbs.stories.ts
@@ -1,9 +1,19 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { renderComponent } from '../storybook/storybook';
 import html from './breadcrumbs.html?raw';
+import { BreadcrumbsProps } from './breadcrumbs.schema';
+
+const path = import.meta.url.split('/breadcrumbs')[0];
+
+const macro = { name: 'govieBreadcrumbs', html, path };
+
+const Breadcrumbs = renderComponent<BreadcrumbsProps>(macro);
 
 const meta = {
   title: 'Navigation/Breadcrumbs',
+  component: Breadcrumbs,
   parameters: {
+    macro,
     docs: {
       description: {
         component:
@@ -17,9 +27,32 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  //@ts-expect-error Render function returns raw HTML string, not a React component
-  render: (_, { parameters }) => {
-    parameters.renderedHtml = html;
-    return html;
+  args: {
+    items: [
+      { label: 'Home', href: '/' },
+      { ellipsis: true },
+      { label: 'Travel', href: '/travel' },
+      { label: 'Documentation', href: '/travel/docs', currentPage: true },
+    ],
+  },
+};
+
+export const WithoutEllipsis: Story = {
+  args: {
+    items: [
+      { label: 'Home', href: '/' },
+      { label: 'Travel', href: '/travel' },
+      { label: 'Passport', href: '/passport' },
+      { label: 'Documentation', href: '/docs', currentPage: true },
+    ],
   },
 };
+
+export const SingleItem: Story = {
+  args: {
+    items: [
+      { label: 'Back to [Previous page]', href: '/' },
+    ],
+  },
+};
+
diff --git a/packages/html/ds/src/breadcrumbs/breadcrumbs.test.ts b/packages/html/ds/src/breadcrumbs/breadcrumbs.test.ts
new file mode 100644
index 000000000..b076f79e6
--- /dev/null
+++ b/packages/html/ds/src/breadcrumbs/breadcrumbs.test.ts
@@ -0,0 +1,48 @@
+import { render } from '../common/render';
+import html from './breadcrumbs.html?raw';
+import type { BreadcrumbsProps } from './breadcrumbs.schema';
+
+describe('govieBreadcrumbs', () => {
+  const renderBreadcrumbs = render<BreadcrumbsProps>({
+    componentName: 'breadcrumbs',
+    macroName: 'govieBreadcrumbs',
+    html,
+  });
+  const items = [
+    { label: 'Home', href: '/' },
+    {
+      ellipsis: true,
+    },
+    {
+      label: 'Travel',
+      href: '/travel',
+      currentPage: true,
+    },
+  ];
+
+  it('should render Breadcrumbs', () => {
+    const { getByRole, getAllByRole } = renderBreadcrumbs({
+      items,
+    });
+
+    const breadcrumbNav = getByRole('navigation', {
+      name: /breadcrumb/i,
+    });
+    expect(breadcrumbNav).toBeInTheDocument();
+
+    const listItems = getAllByRole('listitem');
+    expect(listItems).toHaveLength(3);
+
+    expect(listItems[0]).toHaveTextContent('Home');
+    expect(listItems[1]).toBeInTheDocument();
+    expect(listItems[2]).toHaveTextContent('Travel');
+  });
+
+  it('should pass axe tests', async () => {
+    const { axe } = renderBreadcrumbs({
+      items,
+    });
+
+    await axe();
+  });
+});
diff --git a/packages/html/ds/src/link/link.html b/packages/html/ds/src/link/link.html
index d2e350f79..7b0268792 100644
--- a/packages/html/ds/src/link/link.html
+++ b/packages/html/ds/src/link/link.html
@@ -35,9 +35,16 @@
     {% endif %}
   {% endmacro %}
 
+  {% macro getAriaCurrent(props) %}
+    {% if props.ariaCurrent %}
+      aria-current="{{ props.ariaCurrent }}"
+    {% endif %}
+  {% endmacro %}
+
   <a
     href="{{ props.href }}"
     {{ getAriaLabel(props) | trim }}
+    {{ getAriaCurrent(props) | trim }}
     {{ getExternalAttribute(props.external) | trim }}
     class="
       gi-link
diff --git a/packages/html/ds/src/link/link.schema.ts b/packages/html/ds/src/link/link.schema.ts
index 0f84a3852..b5a3a0466 100644
--- a/packages/html/ds/src/link/link.schema.ts
+++ b/packages/html/ds/src/link/link.schema.ts
@@ -19,6 +19,11 @@ export const linkSchema = zod.object({
       description: 'ARIA Label of link, default is label',
     })
     .optional(),
+  ariaCurrent: zod
+    .string({
+      description: 'ARIA current attribute',
+    })
+    .optional(),
   noVisited: zod
     .boolean({
       description:
diff --git a/packages/react/ds/src/breadcrumbs/breadcrumbs.stories.tsx b/packages/react/ds/src/breadcrumbs/breadcrumbs.stories.tsx
index 2c9f11044..9e4c77037 100644
--- a/packages/react/ds/src/breadcrumbs/breadcrumbs.stories.tsx
+++ b/packages/react/ds/src/breadcrumbs/breadcrumbs.stories.tsx
@@ -32,3 +32,22 @@ export const Default: Story = {
     ],
   },
 };
+
+export const WithoutEllipsis: Story = {
+  args: {
+    children: [
+      <BreadcrumbLink href="/home">Home</BreadcrumbLink>,
+      <BreadcrumbLink href="/travel">Travel</BreadcrumbLink>,
+      <BreadcrumbLink href="/passport">Passport</BreadcrumbLink>,
+      <BreadcrumbCurrentLink href="/docs">Documentation</BreadcrumbCurrentLink>,
+    ],
+  },
+};
+
+export const SingleItem: Story = {
+  args: {
+    children: [
+      <BreadcrumbLink href="/home">Back to [Previous page]</BreadcrumbLink>,
+    ],
+  },
+};
diff --git a/packages/react/ds/src/breadcrumbs/breadcrumbs.test.tsx b/packages/react/ds/src/breadcrumbs/breadcrumbs.test.tsx
index e03cba121..80e4f432d 100644
--- a/packages/react/ds/src/breadcrumbs/breadcrumbs.test.tsx
+++ b/packages/react/ds/src/breadcrumbs/breadcrumbs.test.tsx
@@ -40,9 +40,9 @@ describe('govieBreadcrumbs', () => {
       </Breadcrumbs>,
     );
 
-    const listItem = container.querySelector('li .gi-breadcrumb-ellipsis');
-    expect(listItem).toBeInTheDocument();
-    expect(listItem).toHaveClass('gi-breadcrumb-ellipsis');
+    const ellipsisDiv = container.querySelector('div[aria-hidden="true"]');
+    expect(ellipsisDiv).toBeInTheDocument();
+    expect(ellipsisDiv).toHaveTextContent('more_horiz');
   });
 
   it('should pass axe accessibility tests', async () => {
diff --git a/packages/react/ds/src/breadcrumbs/breadcrumbs.tsx b/packages/react/ds/src/breadcrumbs/breadcrumbs.tsx
index 5ffef0a7b..61750ee94 100644
--- a/packages/react/ds/src/breadcrumbs/breadcrumbs.tsx
+++ b/packages/react/ds/src/breadcrumbs/breadcrumbs.tsx
@@ -1,11 +1,10 @@
+import { Icon } from '../icon/icon.js';
 import { Link } from '../link/link.js';
 import type { BreadcrumbLinkProps, BreadcrumbProps } from './types.js';
 
 export const BreadcrumbEllipsis = () => (
-  <div className="gi-breadcrumb-ellipsis" aria-hidden="true">
-    <div />
-    <div />
-    <div />
+  <div aria-hidden="true">
+    <Icon className="gi-text-gray-700" icon="more_horiz" />
   </div>
 );
 

From e2ac773eeafa230573a5eb9cc67618b46268093e Mon Sep 17 00:00:00 2001
From: Ramon Mulia <ramonmulia@gmail.com>
Date: Mon, 25 Nov 2024 13:40:39 -0300
Subject: [PATCH 12/15] adding wagtail example

---
 examples/wagtail/core/jinja/home_page.jinja             | 8 +++++++-
 packages/html/ds/src/breadcrumbs/breadcrumbs.html       | 2 +-
 packages/html/ds/src/breadcrumbs/breadcrumbs.schema.ts  | 5 +++--
 packages/html/ds/src/breadcrumbs/breadcrumbs.stories.ts | 9 +++------
 packages/html/ds/src/breadcrumbs/breadcrumbs.test.ts    | 6 +++---
 5 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/examples/wagtail/core/jinja/home_page.jinja b/examples/wagtail/core/jinja/home_page.jinja
index 7a1a391ff..33401243d 100644
--- a/examples/wagtail/core/jinja/home_page.jinja
+++ b/examples/wagtail/core/jinja/home_page.jinja
@@ -20,6 +20,7 @@
 {% from 'combo-box/combo-box.html' import govieComboBox %}
 {% from 'alert/alert.html' import govieAlert %}
 {% from 'toast/toast.html' import govieToast %}
+{% from 'breadcrumbs/breadcrumbs.html' import govieBreadcrumbs %}
 
 {% from 'vars.jinja' import comboBoxProps, cookieBannerProps, modalProps, footerProps, HeaderProps, SelectProps, tabsProps, radioProps, listProps %}
 
@@ -51,7 +52,12 @@
   <hr />
 
   <h2>Breadcrumbs</h2>
-  {% include "breadcrumbs/breadcrumbs.html" %}
+    {{ govieBreadcrumbs({ "navItems": [
+        { "label": "Home", "href": "/" },
+        { "ellipsis": true },
+        { "label": "Travel", "href": "/travel" },
+        { "label": "Documentation", "href": "/docs", "currentPage": true }
+    ]}) }}
   <br />
 
   <hr />
diff --git a/packages/html/ds/src/breadcrumbs/breadcrumbs.html b/packages/html/ds/src/breadcrumbs/breadcrumbs.html
index d6754bd2d..9177a0a14 100644
--- a/packages/html/ds/src/breadcrumbs/breadcrumbs.html
+++ b/packages/html/ds/src/breadcrumbs/breadcrumbs.html
@@ -9,7 +9,7 @@
     class="gi-breadcrumbs"
   >
     <ol role="list">
-      {% for item in props.items %}
+      {% for item in props.navItems %}
         <li
           role="listitem"
           {% if item.currentPage %}aria-current="page"{% endif %}
diff --git a/packages/html/ds/src/breadcrumbs/breadcrumbs.schema.ts b/packages/html/ds/src/breadcrumbs/breadcrumbs.schema.ts
index c630e8b8c..357c399d4 100644
--- a/packages/html/ds/src/breadcrumbs/breadcrumbs.schema.ts
+++ b/packages/html/ds/src/breadcrumbs/breadcrumbs.schema.ts
@@ -1,6 +1,5 @@
 import * as zod from 'zod';
 
-// Breadcrumb item schema
 export const BreadcrumbsItemSchema = zod
   .object({
     label: zod
@@ -30,7 +29,9 @@ export const BreadcrumbsItemSchema = zod
   );
 
 export const BreadcrumbsArraySchema = zod.object({
-  items: zod.array(BreadcrumbsItemSchema),
+  navItems: zod.array(BreadcrumbsItemSchema, {
+    description: 'List of nav items',
+  }),
 });
 
 export type BreadcrumbsProps = zod.infer<typeof BreadcrumbsArraySchema>;
diff --git a/packages/html/ds/src/breadcrumbs/breadcrumbs.stories.ts b/packages/html/ds/src/breadcrumbs/breadcrumbs.stories.ts
index 8721a0e95..dbfecf19e 100644
--- a/packages/html/ds/src/breadcrumbs/breadcrumbs.stories.ts
+++ b/packages/html/ds/src/breadcrumbs/breadcrumbs.stories.ts
@@ -28,7 +28,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    items: [
+    navItems: [
       { label: 'Home', href: '/' },
       { ellipsis: true },
       { label: 'Travel', href: '/travel' },
@@ -39,7 +39,7 @@ export const Default: Story = {
 
 export const WithoutEllipsis: Story = {
   args: {
-    items: [
+    navItems: [
       { label: 'Home', href: '/' },
       { label: 'Travel', href: '/travel' },
       { label: 'Passport', href: '/passport' },
@@ -50,9 +50,6 @@ export const WithoutEllipsis: Story = {
 
 export const SingleItem: Story = {
   args: {
-    items: [
-      { label: 'Back to [Previous page]', href: '/' },
-    ],
+    navItems: [{ label: 'Back to [Previous Page]', href: '/' }],
   },
 };
-
diff --git a/packages/html/ds/src/breadcrumbs/breadcrumbs.test.ts b/packages/html/ds/src/breadcrumbs/breadcrumbs.test.ts
index b076f79e6..7db5f3f47 100644
--- a/packages/html/ds/src/breadcrumbs/breadcrumbs.test.ts
+++ b/packages/html/ds/src/breadcrumbs/breadcrumbs.test.ts
@@ -8,7 +8,7 @@ describe('govieBreadcrumbs', () => {
     macroName: 'govieBreadcrumbs',
     html,
   });
-  const items = [
+  const navItems = [
     { label: 'Home', href: '/' },
     {
       ellipsis: true,
@@ -22,7 +22,7 @@ describe('govieBreadcrumbs', () => {
 
   it('should render Breadcrumbs', () => {
     const { getByRole, getAllByRole } = renderBreadcrumbs({
-      items,
+      navItems,
     });
 
     const breadcrumbNav = getByRole('navigation', {
@@ -40,7 +40,7 @@ describe('govieBreadcrumbs', () => {
 
   it('should pass axe tests', async () => {
     const { axe } = renderBreadcrumbs({
-      items,
+      navItems,
     });
 
     await axe();

From 918579a2ca7afe1f1e1f0d749581f492db4dd175 Mon Sep 17 00:00:00 2001
From: Ramon Mulia <ramonmulia@gmail.com>
Date: Mon, 25 Nov 2024 15:47:37 -0300
Subject: [PATCH 13/15] adding regext to skip marging bottom

---
 .../src/components/document/common/mdx.tsx    | 19 ++++---------------
 1 file changed, 4 insertions(+), 15 deletions(-)

diff --git a/apps/docs/src/components/document/common/mdx.tsx b/apps/docs/src/components/document/common/mdx.tsx
index 615c03654..29929d717 100644
--- a/apps/docs/src/components/document/common/mdx.tsx
+++ b/apps/docs/src/components/document/common/mdx.tsx
@@ -214,21 +214,10 @@ export function Mdx({ code }: MdxProps) {
       components={{
         ...standardComponents,
         ...wrapComponents(documentComponents, ({ key }) => {
-          if (key === 'Tabs') {
-            return [MarginBottom];
-          }
-          if (
-            key === 'DeveloperRecommendation' ||
-            key.includes('Tab') ||
-            key === 'Link' ||
-            key === 'Heading' ||
-            key === 'Icon' ||
-            key === 'Tag' ||
-            key === 'Card' ||
-            key === 'BreadcrumbLink' ||
-            key === 'BreadcrumbEllipsis' ||
-            key === 'BreadcrumbCurrentLink'
-          ) {
+          const regexSkipMb =
+            /^(Tabs|DeveloperRecommendation|Link|Heading|Icon|Tag|Card|BreadcrumbLink|BreadcrumbEllipsis|BreadcrumbCurrentLink|.*Tab.*)$/;
+
+          if (regexSkipMb.test(key) && key !== 'Tabs') {
             return;
           }
 

From 1e0374c0c59707e427f01fbfced820c0ab680850 Mon Sep 17 00:00:00 2001
From: Ramon Mulia <ramonmulia@gmail.com>
Date: Mon, 25 Nov 2024 16:31:04 -0300
Subject: [PATCH 14/15] removing comment

---
 apps/docs/content/3-components/2-library/breadcrumbs.mdx        | 2 --
 .../components/document/components/component-status-table.tsx   | 1 -
 2 files changed, 3 deletions(-)

diff --git a/apps/docs/content/3-components/2-library/breadcrumbs.mdx b/apps/docs/content/3-components/2-library/breadcrumbs.mdx
index 9ec1e067d..f5f8b7787 100644
--- a/apps/docs/content/3-components/2-library/breadcrumbs.mdx
+++ b/apps/docs/content/3-components/2-library/breadcrumbs.mdx
@@ -94,5 +94,3 @@ Use breadcrumbs to help users understand their location within a website or appl
 Avoid breadcrumbs on websites or applications with a flat structure, where there is no clear hierarchy or depth (e.g., single-page applications or sites with only top-level pages)
 
 <ComponentStatusBlock componentId="breadcrumbs" />
-
-```
diff --git a/apps/docs/src/components/document/components/component-status-table.tsx b/apps/docs/src/components/document/components/component-status-table.tsx
index 07208dc91..a00b1a5c6 100644
--- a/apps/docs/src/components/document/components/component-status-table.tsx
+++ b/apps/docs/src/components/document/components/component-status-table.tsx
@@ -97,7 +97,6 @@ export function ComponentStatusBlock({ componentId }: { componentId: string }) {
   );
 
   if (!componentStatus) {
-    console.log({ componentStatuses });
     throw new Error(`Component status not found '${componentId}'.`);
   }
   return (

From 1c10705f140bfc16e76a2ea44a795bcababb4263 Mon Sep 17 00:00:00 2001
From: Ramon Mulia <ramonmulia@gmail.com>
Date: Fri, 29 Nov 2024 14:50:26 -0300
Subject: [PATCH 15/15] fix format

---
 packages/react/ds/src/index.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/react/ds/src/index.ts b/packages/react/ds/src/index.ts
index 6d685c4ea..444324675 100644
--- a/packages/react/ds/src/index.ts
+++ b/packages/react/ds/src/index.ts
@@ -46,8 +46,5 @@ export * from './stack/stack.js';
 export { Alert } from './alert/alert.js';
 export * from './toast/toast.js';
 export * from './pagination/pagination.js';
-<<<<<<< HEAD
 export * from './breadcrumbs/breadcrumbs.js';
-=======
 export * from './summary-list/summary-list.js';
->>>>>>> main