diff --git a/CHANGELOG.md b/CHANGELOG.md
index 43306a4a..4d458f29 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- `$import-google-fonts` option (default: `true`) which can disable the inclusion of Google Fonts using an `@import` declaration
### Changed
+
+- Removed the top and bottom padding of the breadcrumbs component
+
### Deprecated
### Removed
### Fixed
diff --git a/src/nationalarchives/components/breadcrumbs/breadcrumbs.scss b/src/nationalarchives/components/breadcrumbs/breadcrumbs.scss
index 88ce3302..f088412a 100644
--- a/src/nationalarchives/components/breadcrumbs/breadcrumbs.scss
+++ b/src/nationalarchives/components/breadcrumbs/breadcrumbs.scss
@@ -4,13 +4,6 @@
@use "../../tools/typography";
.tna-breadcrumbs {
- padding-top: spacing.space(1);
- padding-bottom: spacing.space(1);
-
- // &:focus {
- // outline: none !important;
- // }
-
&__list {
margin: 0;
padding: 0;
diff --git a/src/nationalarchives/templates/fixtures.json b/src/nationalarchives/templates/fixtures.json
index 3d10f007..3ea66f7b 100644
--- a/src/nationalarchives/templates/fixtures.json
+++ b/src/nationalarchives/templates/fixtures.json
@@ -33,19 +33,19 @@
"name": "plain",
"template": "plain.njk",
"options": {},
- "html": "
-
- {{ tnaBreadcrumbs({
- items: [
- {
- text: 'Home',
- href: '/'
- }
- ]
- }) }}
-
+ {{ tnaBreadcrumbs({
+ items: [
+ {
+ text: 'Home',
+ href: '/'
+ }
+ ],
+ classes: 'tna-column tna-column--full tna-!--padding-vertical-s'
+ }) }}
{% endblock %}
diff --git a/src/nationalarchives/utilities/colour/colour-themes.stories.js b/src/nationalarchives/utilities/colour/colour-themes.stories.js
index 3b8da74c..4b6e1b09 100644
--- a/src/nationalarchives/utilities/colour/colour-themes.stories.js
+++ b/src/nationalarchives/utilities/colour/colour-themes.stories.js
@@ -154,34 +154,33 @@ const Template = ({ theme, accent }) => {
},
})}
-
- ${Breadcrumbs({
- params: {
- items: [
- {
- text: "Alpha",
- href: "#/alpha",
- },
- {
- text: "Beta",
- href: "#/beta",
- },
- {
- text: "Gamma",
- href: "#/gamma",
- },
- {
- text: "Delta",
- href: "#/delta",
- },
- {
- text: "Epsilon",
- href: "#/epsilon",
- },
- ],
- },
- })}
-
+ ${Breadcrumbs({
+ params: {
+ items: [
+ {
+ text: "Alpha",
+ href: "#/alpha",
+ },
+ {
+ text: "Beta",
+ href: "#/beta",
+ },
+ {
+ text: "Gamma",
+ href: "#/gamma",
+ },
+ {
+ text: "Delta",
+ href: "#/delta",
+ },
+ {
+ text: "Epsilon",
+ href: "#/epsilon",
+ },
+ ],
+ classes: "tna-column tna-column--full tna-!--padding-vertical-s",
+ },
+ })}