diff --git a/layouts/_default/_markup/td-render-heading.html b/layouts/_default/_markup/td-render-heading.html
index 9b470cede5..0439890cca 100644
--- a/layouts/_default/_markup/td-render-heading.html
+++ b/layouts/_default/_markup/td-render-heading.html
@@ -1,4 +1,6 @@
-<h{{ .Level }} id="{{- .Anchor | safeURL -}}">
+<h{{ .Level }} id="{{ .Anchor | safeURL }}"
+  {{- with .Attributes.class }} class="{{ . }}" {{- end -}}
+>
   {{- .Text | safeHTML -}}
   {{ template "_default/_markup/_td-heading-self-link.html" . -}}
 </h{{ .Level }}>
diff --git a/userguide/content/en/docs/adding-content/navigation.md b/userguide/content/en/docs/adding-content/navigation.md
index 297b29a521..e5dfad8e16 100644
--- a/userguide/content/en/docs/adding-content/navigation.md
+++ b/userguide/content/en/docs/adding-content/navigation.md
@@ -314,6 +314,7 @@ params:
 {{< /tabpane >}}
 
 ## Heading self links
+{.test-class}
 
 Docsy supports build-time generation of heading self links using Hugo's
 `render-heading.html` [hook].