diff --git a/app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb b/app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb
index 9d229cc700..1f75c7ba05 100644
--- a/app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb
+++ b/app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb
@@ -19,19 +19,24 @@
   step_nav_helper = GovukPublishingComponents::Presenters::StepByStepNavHelper.new
 
   disable_ga4 ||= false
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_data_attribute({
+    module: "gemstepnav",
+    show_text: t("components.step_by_step_nav.show"),
+    hide_text: t("components.step_by_step_nav.hide"),
+    show_all_text: t("components.step_by_step_nav.show_all"),
+    hide_all_text: t("components.step_by_step_nav.hide_all")
+  })
+  component_helper.add_data_attribute({ module: "ga4-event-tracker", ga4_expandable: "", }) unless disable_ga4
+  component_helper.add_data_attribute({ remember: "" }) if remember_last_step
+  component_helper.add_data_attribute({ id: tracking_id }) if tracking_id
+  component_helper.add_class("gem-c-step-nav js-hidden")
+  component_helper.add_class("govuk-!-display-none-print") if small
+  component_helper.add_class("gem-c-step-nav--large") unless small
 %>
 <% if steps %>
-  <div
-    data-module="gemstepnav<% unless disable_ga4 %> ga4-event-tracker<% end %>"
-    <%= "data-ga4-expandable" unless disable_ga4 %>
-    class="gem-c-step-nav js-hidden <% if small %>govuk-!-display-none-print<% end %> <% unless small %>gem-c-step-nav--large<% end %>"
-    <%= "data-remember" if remember_last_step %>
-    <%= "data-id=#{tracking_id}" if tracking_id %>
-    data-show-text="<%= t("components.step_by_step_nav.show") %>"
-    data-hide-text="<%= t("components.step_by_step_nav.hide") %>"
-    data-show-all-text="<%= t("components.step_by_step_nav.show_all") %>"
-    data-hide-all-text="<%= t("components.step_by_step_nav.hide_all") %>"
-  >
+  <%= tag.div(**component_helper.all_attributes) do %>
     <ol class="gem-c-step-nav__steps">
       <% steps.each_with_index do |step, step_index| %>
         <%
@@ -115,5 +120,5 @@
         </li>
       <% end %>
     </ol>
-  </div>
+  <% end %>
 <% end %>
diff --git a/app/views/govuk_publishing_components/components/docs/step_by_step_nav.yml b/app/views/govuk_publishing_components/components/docs/step_by_step_nav.yml
index 379731d41e..dcbc119b2a 100644
--- a/app/views/govuk_publishing_components/components/docs/step_by_step_nav.yml
+++ b/app/views/govuk_publishing_components/components/docs/step_by_step_nav.yml
@@ -11,6 +11,7 @@ body: |
   - creating a new component allows further iteration without impacting the accordion
 
   Background information relating to the testing and research behind this component can be found on the [Modelling Services wiki](https://gov-uk.atlassian.net/wiki/spaces/MS/pages) in Q2 to Q4, 2017/18.
+uses_component_wrapper_helper: true
 accessibility_criteria: |
   The step by step navigation must: