Display current division for primary mobile menu toggle

tbx/navigation/templatetags/navigation_tags.py

@@ -18,7 +18,7 @@ def primarynav(context):
     }
 
 
-# Primary nav mobile snippet
+# Primary nav mobile snippets
 @register.inclusion_tag(
     "patterns/navigation/components/primary-nav-mobile.html", takes_context=True
 )
@@ -32,6 +32,33 @@ def primarynavmobile(context):
     }
 
 
+@register.simple_tag(name="get_top_level_parent_page", takes_context=True)
+def get_top_level_parent_page(context):
+    # Get all page links from the primary nav.
+    primary_nav = [
+        block.value["page"]
+        for block in context["settings"]["navigation"][
+            "NavigationSettings"
+        ].primary_navigation
+        if block.value.get("page", False)
+    ]
+    # Get all ancestors for this page (highest depth first). Ignores the homepage.
+    ancestors = (
+        context["page"]
+        .get_ancestors(inclusive=True)
+        .filter(depth__gte=3)
+        .order_by("-depth")
+    )
+
+    # If the ancestor is in the primary nav, use that.
+    for ancestor in ancestors:
+        if ancestor in primary_nav:
+            return ancestor
+
+    # If none of the ancestors are in the primary nav, return nothing.
+    return None
+
+
 # Footer nav snippets
 @register.inclusion_tag(
     "patterns/navigation/components/footer-links.html", takes_context=True

tbx/project_styleguide/templates/patterns/organisms/header/header.html

@@ -19,9 +19,12 @@
                     {% endwagtailcache %}
                 </nav>
 
-            {# Primary mobile menu toggle #}
-                <button class="header__primary-menu-toggle" data-primary-mobile-menu-toggle aria-haspopup="true" aria-expanded="false" aria-label="Mobile menu toggle">
-                    Home
+                {# Primary mobile menu toggle #}
+                {% get_top_level_parent_page as parent_page %} {# Get the top-level parent page #}
+                {% firstof parent_page.title "Home" as parent_title %} {# Get the parent's title, or Home if no parent #}
+                <button class="header__primary-menu-toggle" data-primary-mobile-menu-toggle aria-haspopup="true" aria-expanded="false"
+                        aria-label="Mobile menu toggle - currently viewing '{{ parent_title }}' or pages below it">
+                    {{ parent_title }}
                     {% include "patterns/atoms/icons/icon.html" with name="chevron" classname="header__primary-menu-toggle-icon" %}
                 </button>