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

[Kathleen Newman]

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

• Selected item
• Pull requests 123
• Dropdown  
•   Overview
• Kitchen sink

• Configure

(with the little setting icon at the end)

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

[Kathleen Newman]

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!

[J D]

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

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

https://docs.atlassian.com/aui/latest/docs/app-header.html

[Kathleen Newman]

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,

[J D]

http://jsfiddle.net/api/post/library/pure/

[J D]

<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>

[J D]

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

[Sharon Hinde]

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

[Kathleen Newman]

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

[Sharon Hinde]

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

[Sharon Hinde]

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

[Rupert Neethling]

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?

[Kathleen Newman]

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