diff --git a/CHANGELOG.md b/CHANGELOG.md
index 381360db8e..b4209a7653 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@
 * Add option for organisation logos to hide the link underline until it's hovered ([PR #4509](https://github.com/alphagov/govuk_publishing_components/pull/4509))
 * Remove chat entry component ([PR #4512](https://github.com/alphagov/govuk_publishing_components/pull/4512))
 * Use component wrapper on skip link component ([PR #4520](https://github.com/alphagov/govuk_publishing_components/pull/4520))
+* Use component wrapper on step nav header component ([PR #4521](https://github.com/alphagov/govuk_publishing_components/pull/4521))
 
 ## 46.4.0
 
diff --git a/app/views/govuk_publishing_components/components/_step_by_step_nav_header.html.erb b/app/views/govuk_publishing_components/components/_step_by_step_nav_header.html.erb
index fd066cbbf5..26cb15595d 100644
--- a/app/views/govuk_publishing_components/components/_step_by_step_nav_header.html.erb
+++ b/app/views/govuk_publishing_components/components/_step_by_step_nav_header.html.erb
@@ -10,10 +10,11 @@
   ]
   breadcrumb_presenter = GovukPublishingComponents::Presenters::Breadcrumbs.new(breadcrumbs)
 
-  data = {}
-  data[:module] = "ga4-link-tracker" unless disable_ga4
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-step-nav-header")
 
   unless disable_ga4
+    component_helper.add_data_attribute({ module: "ga4-link-tracker" })
     ga4_data = {
       event_name: "navigation",
       type: "super breadcrumb",
@@ -21,17 +22,13 @@
       index_total: "1",
     }.to_json
   end
-
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
-  classes = %w[gem-c-step-nav-header]
-  classes << shared_helper.get_margin_bottom if local_assigns[:margin_bottom]
 %>
 <% if title %>
   <script type="application/ld+json">
     <%= raw JSON.pretty_generate(breadcrumb_presenter.structured_data) %>
   </script>
 
-  <%= tag.div(class: classes, data: data) do %>
+  <%= tag.div(**component_helper.all_attributes) do %>
     <strong class="gem-c-step-nav-header__part-of">Part of</strong>
     <% if path %>
       <a href="<%= path %>"
diff --git a/app/views/govuk_publishing_components/components/docs/step_by_step_nav_header.yml b/app/views/govuk_publishing_components/components/docs/step_by_step_nav_header.yml
index 83075597fc..1ac1338a52 100644
--- a/app/views/govuk_publishing_components/components/docs/step_by_step_nav_header.yml
+++ b/app/views/govuk_publishing_components/components/docs/step_by_step_nav_header.yml
@@ -12,6 +12,7 @@ accessibility_criteria: |
   Always place the step by step navigation header at the top of a page, before the `<main>` element. Placing the component here means that the "Skip to main content" link allows the user to skip all navigation links, including the step by step navigation header.
 shared_accessibility_criteria:
   - link
+uses_component_wrapper_helper: true
 examples:
   default:
     data: