I try to use this code and it should work Nav item Selected item Pull requests 123 Dropdown Overview /li> Kitchen sink Configure 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

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?

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

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

but I get the following menu:

Nav item

Configure

(with the little setting icon at the end)

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

Accepted answers

All comments

J D14

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

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

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 D14

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

J D14

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

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?

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!

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>  </li> <li><a href="http://example.com/">Nav item</a> </li> <li><a href="http://example.com/">Nav item</a> </li> </ul> </div>  <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>  </li> </ul> </div>  </div>  </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?