Add a button with a sub-menu to Top Global Header/Navigation Bar?
Asked by Eric Pullen:

I have found this example on how to add a menu button to the top navigation bar, but I can't find an example on how to add a button that contains a drop down menu. I want something the same as the Spaces drop down (in version 5.3) that I can populate with my own content.

This is the page that descibes how to add just a single button:

<https://confluence.atlassian.com/pages/viewpage.action?pageId=358908020>


Answers:
author: Eric Pullen
body: I had a co-worker that helped me to figure it out. Example below, hope this can help someone else out:  

|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `<``script``>` `AJS.toInit(function(){` ` ``AJS.$('.aui-header-primary .aui-nav').prepend(' <``a` `href``=``"#mycompany-menu-link-content"` `aria-owns``=``"mycompany-menu-link-content"` `aria-haspopup``=``"true"` `class``=``"aui-button aui-button-link aui-dropdown2-trigger aui-style-default"``>MyCompany</``a``> <``div` `id``=``"mycompany-menu-link-content"` `class``=``"aui-dropdown2 aui-style-default"``> <``div` `class``=``"aui-dropdown2-section"``><``ul``> <``li``><``a` `href``=``"link1"` `title``=``"Link1"``>Link1</``a``></``li``> <``li``><``a` `href``=``"link2"` `title``=``"Link2"``>Link2</``a``></``li``> <``li``><``a` `href``=``"link3"` `title``=``"Link3"``>Link3</``a``></``li``> </``ul``></``div``> <``div` `class``=``"aui-dropdown2-section"``><``ul``> <``li``><``a` `href``=``"link4"` `title``=``"Link4"``>Link4</``a``></``li``> <``li``><``a` `href``=``"link5"` `title``=``"Link5"``>Link5</``a``></``li``> </``ul``></``div``> <``div` `class``=``"aui-dropdown2-section"``><``ul``> <``li``><``a` `href``=``"link6"` `title``=``"Link6"``>Link6</``a``></``li``> </``ul``></``div``></``div``>');` ` ``AJS.$('#mycompany-menu-link-content').ajsMenu();` `});` `</``script``>` |


author: Mikael Mikkola
body: When I used Eric's code to create two dropdown menus, the menus became identical. The solution was to use different "id" and "aria-owns" names, like in the example below. (Possibly one of them is enough, I did not check.)  
`<``script``>`  
`AJS.toInit(function(){`

<br />

AJS.$('.aui-header-primary .aui-nav').prepend('\<a href="#mycompany-menu-link-content" aria-owns="mycompany-menu-link-content-MyMenu1" aria-haspopup="true" class="aui-button aui-button-link aui-dropdown2-trigger aui-style-default" a{padding: 0px 100px 0px 0px;}\>\<span class="aui-icon aui-icon-small aui-iconfont-help" style="color:white" a{padding: 0px 100px 0px 0px;}\>\</span\>MyMenu1\</a\>\<div id="mycompany-menu-link-content-MyMenu1" class="aui-dropdown2 aui-style-default"\> \<div class="aui-dropdown2-section"\>\<ul\>\<li\>\<a href="[https://...](https://services.prh.fi/confluence/pages/viewpage.action?pageId=15860280)" title="tooltiptext for this"\>First item in the menu\</a\>\</li\>\<li\>\<a href="[https://...](https://services.prh.fi/confluence/display/TW/Wikin+ohjeet)" title="tooltip text (mouseover)"\>Second item\</a\>\</li\>\</ul\>\</div\>\</div\>');

<br />

AJS.$('.aui-header-primary .aui-nav').prepend('\<a href="#mycompany-menu-link-content" aria-owns="mycompany-menu-link-content-MyMenu2" aria-haspopup="true" class="aui-button aui-button-link aui-dropdown2-trigger aui-style-default" a{padding: 0px 100px 0px 0px;}\>\<span class="aui-icon aui-icon-small aui-iconfont-help" style="color:white" a{padding: 0px 100px 0px 0px;}\>\</span\>MyMenu2\</a\>\<div id="mycompany-menu-link-content-MyMenu2" class="aui-dropdown2 aui-style-default"\> \<div class="aui-dropdown2-section"\>\<ul\>\<li\>\<a href="[https://...](https://services.prh.fi/confluence/pages/viewpage.action?pageId=15860280)" title="tooltiptext for this"\>First item in menu2\</a\>\</li\>\<li\>\<a href="[https://...](https://services.prh.fi/confluence/display/TW/Wikin+ohjeet)" title="tooltip text (mouseover)"\>Second item in menu2\</a\>\</li\>\</ul\>\</div\>\</div\>');

`AJS.$('#mycompany-menu-link-content').ajsMenu();`  
`});`  
`</``script``>`  

Thanks for Eric for the code! And a question: now there is 2,5 character space between the items in the top bar. How to reduce it to 1 or 1,5 (for all items or at least for these added items)?


author: Georg Steinmetz
body: Here you can find a tutorial on how to create a plugin. At the end they are adding a sub-menu to the top navigation bar

[https://developer.atlassian.com/display/DOCS/Put+the+Final+Polish+on+the+Project+in+Eclipse](https://developer.atlassian.com/display/DOCS/Put+the+Final+Polish+on+the+Project+in+Eclipse "here")


author: Eric Pullen

Tags: confluence-administration