Fixes #10984: Fix navigation menu expansion for plugin menus comprising multiple words

docs/release-notes/version-3.4.md

@@ -14,6 +14,7 @@
 * [#10973](https://github.com/netbox-community/netbox/issues/10973) - Fix device links in VDC table
 * [#10980](https://github.com/netbox-community/netbox/issues/10980) - Fix view tabs for plugin objects
 * [#10982](https://github.com/netbox-community/netbox/issues/10982) - Catch `NoReverseMatch` exception when rendering tabs with no registered URL
+* [#10984](https://github.com/netbox-community/netbox/issues/10984) - Fix navigation menu expansion for plugin menus comprising multiple words
 
 ## v3.4-beta1 (2022-11-16)
 

netbox/extras/plugins/navigation.py

@@ -19,6 +19,10 @@ class PluginMenu:
         if icon_class is not None:
             self.icon_class = icon_class
 
+    @property
+    def name(self):
+        return self.label.replace(' ', '_')
+
 
 class PluginMenuItem:
     """

netbox/extras/tests/dummy_plugin/navigation.py

@@ -26,7 +26,7 @@ items = (
 )
 
 menu = PluginMenu(
-    label=_('Dummy'),
+    label=_('Dummy Plugin'),
     groups=(('Group 1', items),),
 )
 menu_items = items

netbox/netbox/navigation/__init__.py

@@ -51,6 +51,10 @@ class Menu:
     icon_class: str
     groups: Sequence[MenuGroup]
 
+    @property
+    def name(self):
+        return self.label.replace(' ', '_')
+
 
 #
 # Utility functions

netbox/utilities/templates/navigation/menu.html

@@ -4,12 +4,12 @@
   {% for menu, groups in nav_items %}
     <li class="nav-item">
       {# Menu heading #}
-      <a class="nav-link" href="#menu{{ menu.label }}" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="menu{{ menu.label }}">
+      <a class="nav-link" href="#menu{{ menu.name }}" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="menu{{ menu.name }}">
        <i class="{{ menu.icon_class }}"></i>
        <span class="nav-link-text">{{ menu.label }}</span>
       </a>
       {# Menu groups #}
-      <div class="collapse" id="menu{{ menu.label }}">
+      <div class="collapse" id="menu{{ menu.name }}">
         <ul class="nav nav-sm flex-column">
           {% for group, items in groups %}
             {# Group heading #}