Remove dependency on slugify filter

x-govuk · Jan 24, 2023 · 2b63137 · 2b63137
1 parent 810593a
commit 2b63137
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/x-govuk/components/related-navigation/README.md b/x-govuk/components/related-navigation/README.md
@@ -47,6 +47,7 @@ If you’re using Nunjucks macros in production with `html` options, or ones end
 | Name | Type | Description |
 | :--- | :--- | :---------- |
 | **title** | string | The title text that displays above the list of navigation links. Default is `Related content`. |
+| **id** | string | ID attribute to add to the section container. |
 | **items** | array | **Required**. An array of navigation links within the section. See [items](#options-for-items). |
 | **subsections** | array | An array of sub-sections within the section. See [subsections](#options-for-subsections). |
 
@@ -55,6 +56,7 @@ If you’re using Nunjucks macros in production with `html` options, or ones end
 | Name | Type | Description |
 | :--- | :--- | :---------- |
 | **title** | string | The title text that displays above the list of navigation links. |
+| **id** | string | ID attribute to add to the subsection container. |
 | **items** | array | **Required**. An array of navigation links within the section. See [items](#options-for-items). |
 
 ### Options for items

diff --git a/x-govuk/components/related-navigation/template.njk b/x-govuk/components/related-navigation/template.njk
@@ -3,8 +3,9 @@
   {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {% for section in params.sections %}
     {% set sectionTitle = section.title or "Related content" %}
-    <nav class="x-govuk-related-navigation__nav-section" role="navigation" aria-labelledby="related-navigation-{{ sectionTitle | slugify }}">
-      <h{{ headingLevel }} class="x-govuk-related-navigation__main-heading" id="related-navigation-{{ sectionTitle | slugify }}">
+    {% set sectionId = section.id or sectionTitle | lower | replace(" ", "-") %}
+    <nav class="x-govuk-related-navigation__nav-section" role="navigation" aria-labelledby="related-navigation-{{ sectionId }}">
+      <h{{ headingLevel }} class="x-govuk-related-navigation__main-heading" id="related-navigation-{{ sectionId }}">
         {{ sectionTitle }}
       </h{{ headingLevel }}>
       {% if section.items %}
@@ -17,9 +18,10 @@
         </ul>
       {% endif %}
       {% for subsection in section.subsections %}
-        <nav role="navigation" class="x-govuk-related-navigation__nav-section"{% if subsection.title %} aria-labelledby="related-navigation-{{ subsection.title | slugify }}"{% endif %}>
+        {% set subsectionId = subsection.id or subsection.title | lower | replace(" ", "-") %}
+        <nav role="navigation" class="x-govuk-related-navigation__nav-section"{% if subsection.title %} aria-labelledby="related-navigation-{{ subsectionId }}"{% endif %}>
           {% if subsection.title %}
-            <h{{ headingLevel + 1 }} class="x-govuk-related-navigation__sub-heading" id="related-navigation-{{ subsection.title | slugify }}">
+            <h{{ headingLevel + 1 }} class="x-govuk-related-navigation__sub-heading" id="related-navigation-{{ subsectionId }}">
               {{ subsection.title }}
             </h{{ headingLevel + 1 }}>
           {% endif %}