Add support for breadcrumb-config-outline

core/src/main/resources/lib/form/breadcrumb-config-outline.jelly

@@ -32,6 +32,5 @@ THE SOFTWARE.
     </st:attribute>
   </st:documentation>
 
-  <st:adjunct includes="lib.form.breadcrumb-config-outline.init"/>
   <l:breadcrumb title="${attrs.title?:'%configuration'}" id="inpage-nav" />
 </j:jelly>

war/src/main/js/components/dropdowns/index.js

@@ -1,8 +1,10 @@
 import Jumplists from "@/components/dropdowns/jumplists";
+import InpageJumplist from "@/components/dropdowns/inpage-jumplist";
 import Overflow from "@/components/dropdowns/overflow";
 
 function init() {
   Jumplists.init();
+  InpageJumplist.init();
   Overflow.init();
 }
 

war/src/main/js/components/dropdowns/inpage-jumplist.js

@@ -0,0 +1,72 @@
+import tippy from "tippy.js";
+import Templates from "@/components/dropdowns/templates";
+import makeKeyboardNavigable from "@/util/keyboard";
+import { toId } from "@/util/dom";
+
+/*
+ * Generates a jump list for the active breadcrumb to jump to
+ * sections on the page (if using <f:breadcrumb-config-outline />)
+ */
+function init() {
+  const inpageNavigationBreadcrumb = document.querySelector("#inpage-nav");
+  if (inpageNavigationBreadcrumb) {
+    const chevron = document.createElement("li");
+    chevron.classList.add("children");
+    inpageNavigationBreadcrumb.after(chevron);
+
+    tippy(chevron, generateDropdown());
+  }
+}
+
+/*
+ * Generates the Tippy dropdown for the in-page jump list
+ */
+function generateDropdown() {
+  return {
+    ...Templates.dropdown(),
+    onShow(instance) {
+      instance.popper.addEventListener("click", () => {
+        instance.hide();
+      });
+      const items = [];
+      document
+        .querySelectorAll(
+          "form > div > div > .jenkins-section > .jenkins-section__title"
+        )
+        .forEach((section) => {
+          const id = toId(section.textContent);
+          section.id = id;
+          items.push({ label: section.textContent, id: id });
+        });
+      instance.setContent(generateDropdownItems(items));
+    },
+  };
+}
+
+/*
+ * Generates the contents for the dropdown
+ */
+function generateDropdownItems(items) {
+  const menuItems = document.createElement("div");
+
+  menuItems.classList.add("jenkins-dropdown");
+  menuItems.append(
+    ...items.map((item) => {
+      const menuItemOptions = {
+        url: "#" + item.id,
+        label: item.label,
+      };
+      return Templates.item(menuItemOptions);
+    })
+  );
+
+  makeKeyboardNavigable(
+    menuItems,
+    () => menuItems.querySelectorAll(".jenkins-dropdown__item"),
+    Templates.SELECTED_ITEM_CLASS
+  );
+
+  return menuItems;
+}
+
+export default { init };