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

This widget could not be displayed.

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>
This widget could not be displayed.

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

This widget could not be displayed.

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)?
This widget could not be displayed.

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted Sep 17, 2018 in Confluence

Why start from scratch? Introducing four new templates for Confluence Cloud

Hi my Community friends!  For those who don't know me, I'm a product marketer on the Confluence Cloud team - nice to meet you! For those of you who do, you know that I've been all up in your Co...

543 views 7 6
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