Horizontal menu? Confluence has a global one I cannot use. I need code for a new one

I try to use this code and it should work

 

 

<nav class="aui-navgroup aui-navgroup-horizontal">     
<div class="aui-navgroup-inner">         
<div class="aui-navgroup-primary">             
 
<ul class="aui-nav">                 
	<li><a href="#">Nav item</a></li>                 
	<li class="aui-nav-selected"><a href="#">Selected item</a></li>                 
	<li><a href="#">Pull requests <span class="aui-badge">123</span></a></li> 
 
	<li><a href="#dropdown2-nav1" aria-owns="dropdown2-nav1" aria-haspopup="true" 	
	    class="aui-dropdown2-trigger">Dropdown <span class="aui-icon-dropdown"></span>	
	</a></li>   
              
	<li><a href="#"><span class="aui-icon aui-icon-test16-dark"></span>Overview</a>/li> 
<li><a href="#">Kitchen sink</a></li>          
 
</ul></div>         
 
<div class="aui-navgroup-secondary">             
<ul class="aui-nav">                 
<li><a href="#dropdown2-nav1" aria-owns="dropdown2-nav1" aria-haspopup="true" 
class="aui-dropdown2-trigger">
 
<span class="aui-icon aui-icon-small aui-iconfont-configure">Configure</span></a></li>             </ul>         </div>     </div> </nav>

 

but I get the following menu:

Nav item

(with the little setting icon at the end)

I wonder if my browser is doing something strange? I use Internet Explorer 11.0 

4 answers

Thanks but my problem is that the code on https://docs.atlassian.com/aui/latest/docs/navigation.html does not work. When I add it into the html editor and then saves it turns into a bullet listed linked list and there is no menu to be see,

<nav class="aui-navgroup aui-navgroup-horizontal"> <div class="aui-navgroup-inner"> <div class="aui-navgroup-primary"> <ul class="aui-nav"> <li><a href="#">Nav item</a></li> <li class="aui-nav-selected"><a href="#">Selected item</a></li> <li><a href="#">Pull requests <span class="aui-badge">123</span></a></li> <li><a href="#dropdown2-nav1" aria-owns="dropdown2-nav1" aria-haspopup="true" class="aui-dropdown2-trigger">Dropdown <span class="aui-icon-dropdown"></span></a></li> <li><a href="#"><span class="aui-icon aui-icon-test16-dark"></span> Overview</a></li> <li><a href="#">Kitchen sink</a></li> </ul> </div> <div class="aui-navgroup-secondary"> <ul class="aui-nav"> <li><a href="#dropdown2-nav1" aria-owns="dropdown2-nav1" aria-haspopup="true" class="aui-dropdown2-trigger"><span class="aui-icon aui-icon-small aui-iconfont-configure">Configure</span></a></li> </ul> </div> </div> </nav>

There are different code snippets on that page, try all of them.

This widget could not be displayed.

Confluence, you REALLY need to develop a drop down navigation menu that can be used PER SPACE!!!

I.E. not a universal one. Or make your universal menu configurable.I am really frustrated because I have tried regular drop down navigation menu's that work on normal websites but not Confluence. Confluence does not seem to like certain scripting languages within html. Bleh!

This widget could not be displayed.

This Confluence code does not work. It comes out as a vertical menu for some odd reason. Can someone please tell me if there is any other code or macros around that can create a menu with subpages for a certain area.

I tried the one that comes with Confluence and was disappointed to find that it was global and you could not confine it to a space.

https://docs.atlassian.com/aui/latest/docs/tabs.html

This widget could not be displayed.

Hi Kathleen,

this is a weird one but I did find that the menu code is styled correctly if you add it in a user-macro and then add the macro to a page. Not sure if that would work for you but its maybe worth a try.

Sharon

 

Where can I find a user macro for this particular thing?

Kathleen, sorry I did not get a notification that you had replied here. To create the menu as a macro: Go to > General Configuration > User Macros. Choose Create a User Macro. Enter the macro details (see below) Click Add. *User Macro Details* Macro Name = custom-menu Macro Title = Custom Menu Description = Custom horizontal menu Categories = Navigation Macro Body = No macro body Template (macro code - using example menu) = {code} ## Macro name: custom-menu ## Macro has a body: N ## ## @noparams <nav class="aui-navgroup aui-navgroup-horizontal"> <div class="aui-navgroup-inner"> <div class="aui-navgroup-primary"> <ul class="aui-nav __skate" resolved=""> <li><a href="http://example.com/">Nav item</a> </li> <li class="aui-nav-selected"><a href="http://example.com/">Selected nav item</a> </li> <li><a href="http://example.com/">Nav item <span class="aui-badge">123</span></a> </li> <li><a aria-controls="dropdown2-nav1" aria-owns="dropdown2-nav1" aria-expanded="false" aria-haspopup="true" class="aui-dropdown2-trigger" href="#" resolved="">Dropdown <span class="aui-icon-dropdown"></span> </a> <div aria-hidden="true" class="aui-dropdown2 aui-style-default aui-layer" id="dropdown2-nav1" resolved=""> <ul class="aui-list-truncate"> <li><a href="http://example.com/">Dropdown item</a> </li> <li><a href="http://example.com/">Dropdown item</a> </li> </ul> </div> <!-- .aui-dropdown2 --> </li> <li><a href="http://example.com/">Nav item</a> </li> <li><a href="http://example.com/">Nav item</a> </li> </ul> </div> <!-- .aui-navgroup-primary --> <div class="aui-navgroup-secondary"> <ul class="aui-nav __skate" resolved=""> <li> <a aria-controls="dropdown2-nav2" aria-owns="dropdown2-nav2" aria-expanded="false" aria-haspopup="true" class="aui-dropdown2-trigger" data-container="#aui-hnav-example" href="#" resolved=""><span class="aui-icon aui-icon-small aui-iconfont-configure">Configure</span></a> <div aria-hidden="true" class="aui-dropdown2 aui-style-default aui-layer" id="dropdown2-nav2" resolved=""> <ul class="aui-list-truncate"> <li><a href="http://example.com/">Dropdown item</a> </li> <li><a href="http://example.com/">Dropdown item</a> </li> </ul> </div> <!-- .aui-dropdown2 --> </li> </ul> </div> <!-- .aui-navgroup-secondary --> </div> <!-- .aui-navgroup-inner --> </nav> {code} Then add the macro to your page using the macro browser. Search for custom menu. Sharon

Well the comments are messed up here. Ignore the {code} blocks in answer above. @Atlassian why no editing tools in comments here?

This is a long shot, since this thread is over three years old, but I tried to save the above code for a user macro and it didn't show up in my available macros. I'm using Confluence 6.5.2. Any suggestions?

Suggest an answer

Log in or Sign up to answer
Atlassian Summit 2018

Meet the community IRL

Atlassian Summit is an excellent opportunity for in-person support, training, and networking.

Learn more
Community showcase
Published Tuesday in Confluence

Add-on evaluation with confluence templates

Atlassian market place contains number of Apps/Addons which improves the capability of out of the box Atlassian products. It is good to follow a plugin evaluation process before install add-ons. So t...

155 views 12 6
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