Horizontal menu? Confluence has a global one I cannot use. I need code for a new one
Asked by 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](http://sv1gbvdevap313:8090/)

* [Selected item](http://sv1gbvdevap313:8090/)
* [Pull requests 123](http://sv1gbvdevap313:8090/)
* [Dropdown](http://sv1gbvdevap313:8090/#dropdown2-nav1)
* [Overview](http://sv1gbvdevap313:8090/)
* [Kitchen sink](http://sv1gbvdevap313:8090/)

* [Configure](http://sv1gbvdevap313:8090/#dropdown2-nav1)

(with the little setting icon at the end)

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


Answers:
author: Kathleen Newman
body: 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!


author: J D
body: <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>

comments: author: Kathleen Newman
body: 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,


author: J D
body: <http://jsfiddle.net/api/post/library/pure/>


author: J D
body: \<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\>


author: J D
body: There are different code snippets on that page, try all of them.


author: Sharon Hinde
body: 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

comments: author: Kathleen Newman
body: Where can I find a user macro for this particular thing?


author: Sharon Hinde
body: 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-menuMacro Title = Custom MenuDescription = Custom horizontal menuCategories = NavigationMacro Body = No macro bodyTemplate (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


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


author: Rupert Neethling
body: 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?


author: Kathleen Newman
body: 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>