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

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
Atlassian Community Anniversary

Happy Anniversary, Atlassian Community!

This community is celebrating its one-year anniversary and Atlassian co-founder Mike Cannon-Brookes has all the feels.

Read more
Community showcase
Kesha Thillainayagam
Posted Apr 13, 2018 in Confluence

We want to hear how your non-technical teams are using Confluence!

Hi Community! Kesha (kay-sha) from the Confluence marketing team here! Can you share stories with us on how your non-technical (think Marketing, Sales, HR, legal, etc.) teams are using Confluen...

2,925 views 27 12
Join discussion

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