diff --git a/src/components/breadcrumbs/_macro.spec.js b/src/components/breadcrumbs/_macro.spec.js
index 9e4f49246b..4b7d72a0dc 100644
--- a/src/components/breadcrumbs/_macro.spec.js
+++ b/src/components/breadcrumbs/_macro.spec.js
@@ -5,125 +5,131 @@ import * as cheerio from 'cheerio';
 import axe from '../../tests/helpers/axe';
 import { mapAll } from '../../tests/helpers/cheerio';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
-
-const EXAMPLE_BREADCRUMBS_MINIMAL = {
-    itemsList: [
-        {
-            url: 'https://example.com/',
-            text: 'Home',
-        },
-        {
-            url: 'https://example.com/guide/',
-            text: 'Guide',
-        },
-    ],
-};
-
-const EXAMPLE_BREADCRUMBS = {
-    classes: 'extra-class another-extra-class',
-    ariaLabel: 'Breadcrumbs label',
-    id: 'example-breadcrumbs',
-    itemsList: [
-        {
-            itemClasses: 'item-extra-class item-another-extra-class',
-            linkClasses: 'link-extra-class link-another-extra-class',
-            url: 'https://example.com/',
-            text: 'Home',
-            attributes: {
-                'data-a': '123',
-                'data-b': '456',
-            },
-            id: 'first-breadcrumb',
-        },
-        {
-            url: 'https://example.com/guide/',
-            text: 'Guide',
-            id: 'second-breadcrumb',
-            attributes: {
-                'data-a': '789',
-                'data-b': 'ABC',
-            },
-        },
-    ],
-};
-
-describe('macro: breadcrumbs', () => {
-    it('passes jest-axe checks', async () => {
-        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
-        const results = await axe($.html());
-        expect(results).toHaveNoViolations();
-    });
-
-    it('has additionally provided style classes', () => {
-        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
-        expect($('.ons-breadcrumbs').hasClass('extra-class')).toBe(true);
-        expect($('.ons-breadcrumbs').hasClass('another-extra-class')).toBe(true);
-    });
-
-    it('has a default `aria-label` of "Breadcrumbs"', () => {
-        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_MINIMAL));
-
-        expect($('.ons-breadcrumbs').attr('aria-label')).toBe('Breadcrumbs');
-    });
-
-    it('has the provided `ariaLabel` for `aria-label`', () => {
-        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
-        expect($('.ons-breadcrumbs').attr('aria-label')).toBe('Breadcrumbs label');
-    });
-
-    it('has the provided `id`', () => {
-        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
-        expect($('.ons-breadcrumbs').attr('id')).toBe('example-breadcrumbs');
+import { EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS, EXAMPLE_BREADCRUMBS_ALL_PARAMS } from './_test_examples';
+
+describe('FOR: Macro: Breadcrumbs', () => {
+    describe('GIVEN: Params: required', () => {
+        describe('WHEN: required params are provided', () => {
+            const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS));
+            test('THEN: jest-axe tests pass', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+            const faker = templateFaker();
+            const iconsSpy = faker.spy('icon');
+            faker.renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS);
+            test('THEN: renders chevron icon next to item', () => {
+                const iconTypes = iconsSpy.occurrences.map((occurrence) => occurrence.iconType);
+                expect(iconTypes).toEqual(['chevron']);
+            });
+        });
     });
-
-    it('has additionally provided style classes on `item` element', () => {
-        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
-        expect($('.ons-breadcrumbs__item:first').hasClass('item-extra-class')).toBe(true);
-        expect($('.ons-breadcrumbs__item:first').hasClass('item-another-extra-class')).toBe(true);
+    describe('GIVEN: Params: all', () => {
+        describe('WHEN: all Params are provided', () => {
+            const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
+            test('THEN: jest-axe tests pass', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+            const faker = templateFaker();
+            const iconsSpy = faker.spy('icon');
+            faker.renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS);
+            test('THEN: renders chevron icon next to each item', () => {
+                const iconTypes = iconsSpy.occurrences.map((occurrence) => occurrence.iconType);
+                expect(iconTypes).toEqual(['chevron', 'chevron']);
+            });
+        });
     });
-
-    it('has additionally provided style classes on `link` element', () => {
-        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
-        expect($('.ons-breadcrumbs__link:first').hasClass('link-extra-class')).toBe(true);
-        expect($('.ons-breadcrumbs__link:first').hasClass('link-another-extra-class')).toBe(true);
+    describe('GIVEN: Params: classes', () => {
+        describe('WHEN: additional classes are provided', () => {
+            const $ = cheerio.load(
+                renderComponent('breadcrumbs', {
+                    ...EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS,
+                    classes: 'extra-class another-extra-class',
+                }),
+            );
+            test('THEN: renders with correct additional classes', () => {
+                expect($('.ons-breadcrumbs').hasClass('extra-class')).toBe(true);
+                expect($('.ons-breadcrumbs').hasClass('another-extra-class')).toBe(true);
+            });
+        });
     });
-
-    it('has provided `url` on `link` elements', () => {
-        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
-        const urls = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('href'));
-        expect(urls).toEqual(['https://example.com/', 'https://example.com/guide/']);
+    describe('GIVEN: Params: ariaLabel', () => {
+        describe('WHEN: ariaLabel is not provided', () => {
+            const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS));
+            test('THEN: renders with default aria-label of "Breadcrumbs"', () => {
+                expect($('.ons-breadcrumbs').attr('aria-label')).toBe('Breadcrumbs');
+            });
+        });
+        describe('WHEN: ariaLabel is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('breadcrumbs', {
+                    ...EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS,
+                    ariaLabel: 'Breadcrumbs label',
+                }),
+            );
+            test('THEN: renders with provided aria-label', () => {
+                expect($('.ons-breadcrumbs').attr('aria-label')).toBe('Breadcrumbs label');
+            });
+        });
     });
-
-    it('has provided `text` on `link` elements', () => {
-        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
-        const labels = mapAll($('.ons-breadcrumbs__link'), (node) => node.text().trim());
-        expect(labels).toEqual(['Home', 'Guide']);
-    });
-
-    it('has provided `attributes` on `link` elements', () => {
-        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
-
-        const testValuesA = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('data-a'));
-        expect(testValuesA).toEqual(['123', '789']);
-        const testValuesB = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('data-b'));
-        expect(testValuesB).toEqual(['456', 'ABC']);
+    describe('GIVEN: Params: id', () => {
+        describe('WHEN: id is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('breadcrumbs', {
+                    ...EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS,
+                    id: 'example-breadcrumbs',
+                }),
+            );
+            test('THEN: renders with provided id', () => {
+                expect($('.ons-breadcrumbs').attr('id')).toBe('example-breadcrumbs');
+            });
+        });
     });
-
-    it('has a "chevron" icon for each breadcrumb item', () => {
-        const faker = templateFaker();
-        const iconsSpy = faker.spy('icon');
-
-        faker.renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_MINIMAL);
-
-        const iconTypes = iconsSpy.occurrences.map((occurrence) => occurrence.iconType);
-        expect(iconTypes).toEqual(['chevron', 'chevron']);
+    describe('GIVEN: Params: itemsList (multiple)', () => {
+        describe('WHEN: itemClasses param is provided', () => {
+            const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
+            test('THEN: renders item with provided style classes', () => {
+                expect($('.ons-breadcrumbs__item:first').hasClass('item-extra-class')).toBe(true);
+                expect($('.ons-breadcrumbs__item:first').hasClass('item-another-extra-class')).toBe(true);
+            });
+        });
+        describe('WHEN: linkClasses param is provided', () => {
+            const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
+            test('THEN: renders link with provided style classes', () => {
+                expect($('.ons-breadcrumbs__link').hasClass('link-extra-class')).toBe(true);
+                expect($('.ons-breadcrumbs__link').hasClass('link-another-extra-class')).toBe(true);
+            });
+        });
+        describe('WHEN: id param is provided', () => {
+            const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
+            test('THEN: renders items with provided id', () => {
+                const ids = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('id'));
+                expect(ids).toEqual(['first-breadcrumb', 'second-breadcrumb']);
+            });
+        });
+        describe('WHEN: url param is provided', () => {
+            const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
+            test('THEN: renders items with provided url link', () => {
+                const urls = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('href'));
+                expect(urls).toEqual(['https://example.com/', 'https://example.com/guide/']);
+            });
+        });
+        describe('WHEN: text param is provided', () => {
+            const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
+            test('THEN: renders item links with provided text', () => {
+                const labels = mapAll($('.ons-breadcrumbs__link'), (node) => node.text().trim());
+                expect(labels).toEqual(['Home', 'Guide']);
+            });
+        });
+        describe('WHEN: attributes param is provided', () => {
+            const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_ALL_PARAMS));
+            test('THEN: renders items with provided attributes', () => {
+                const testValuesA = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('data-a'));
+                expect(testValuesA).toEqual(['123', '789']);
+                const testValuesB = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('data-b'));
+                expect(testValuesB).toEqual(['456', 'ABC']);
+            });
+        });
     });
 });
diff --git a/src/components/breadcrumbs/_test_examples.js b/src/components/breadcrumbs/_test_examples.js
new file mode 100644
index 0000000000..8f51c55784
--- /dev/null
+++ b/src/components/breadcrumbs/_test_examples.js
@@ -0,0 +1,36 @@
+export const EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS = {
+    itemsList: [
+        {
+            url: 'https://example.com/',
+            text: 'Home',
+        },
+    ],
+};
+
+export const EXAMPLE_BREADCRUMBS_ALL_PARAMS = {
+    classes: 'extra-class another-extra-class',
+    ariaLabel: 'Breadcrumbs label',
+    id: 'example-breadcrumbs',
+    itemsList: [
+        {
+            itemClasses: 'item-extra-class item-another-extra-class',
+            linkClasses: 'link-extra-class link-another-extra-class',
+            url: 'https://example.com/',
+            text: 'Home',
+            attributes: {
+                'data-a': '123',
+                'data-b': '456',
+            },
+            id: 'first-breadcrumb',
+        },
+        {
+            url: 'https://example.com/guide/',
+            text: 'Guide',
+            id: 'second-breadcrumb',
+            attributes: {
+                'data-a': '789',
+                'data-b': 'ABC',
+            },
+        },
+    ],
+};