Create a Confluence Toolbar Dropdown Option

If a web section does not work correctly in Confluence, there is a workaround. You can include Javascript (JS) to add necessary classes and attributes to the parent dropdown to make it work. Follow this two-step process to create a dropdown section that includes JS:

Part one: Create a web item

The first step of this process is to add a web item. This creates the main button in the toolbar: 

1. Navigate to General Configuration > ScriptRunner > Fragments. 
2. Select Create Fragment.

3. Select Custom Web Item.

4. Fill out the form to create your web item:
   

5. Select Add. 

Result

This is the menu button you will see after clicking Add: 

Part two: Create a web panel

This process's second step is adding a web panel, which adds the dropdown buttons. Follow these steps: 

1. Navigate to General Configuration > ScriptRunner > Fragments. 
2. Select Create Fragment.
3. Select Show a Web Panel. 

4. Fill out the form to create a web panel to add a web section, child menu, and JS:
   

   Code for Provider Class/Script Field

   The code used in the example follows: 

   groovy
   writer.write("""
   <nav id="child-menu-link-content" class="aui-dropdown2 aui-style-default" aria-hidden="true">
       <div class="aui-dropdown2-section">
           <ul id="child-menu-link-leading" class="menu-hidden">
               <li><a href="https://google.com">Google</a></li>
           </ul>
       </div>
   </nav>
   
   <script lang="text/javascript">
       function addDropdownAttributes(link, name){
           link.attr("aria-haspopup", "true");
           link.attr("aria-owns", name + "-menu-link-content")
           link.addClass("aui-nav-link");
           link.addClass("aui-dropdown2-trigger");
       }
   
       var srDropDown = AJS.\$('a#parent-dropdown');
       addDropdownAttributes(srDropDown, "child");
   </script>
   """)

5. Select Add.

Result

The dropdown appears like this in the Confluence instance: