Add a button with a sub-menu to Top Global Header/Navigation Bar?

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

4 answers

1 accepted

1 vote
Answer accepted

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>

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

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(){


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://..." title="tooltiptext for this">First item in the menu</a></li><li><a href="https://..." title="tooltip text (mouseover)">Second item</a></li></ul></div></div>');


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://..." title="tooltiptext for this">First item in menu2</a></li><li><a href="https://..." 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)?

Suggest an answer

Log in or Sign up to answer
Community showcase
Published Mar 12, 2019 in Confluence

Confluence Admin Certification now $150 for Community Members

More and more people are building their careers with Atlassian, and we want you to be at the front of this wave! Important Dates Start the Certification Prep Course by 2 April 2019 Take your e...

690 views 2 13
Read article

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you