This documentation has moved. For the most recent documentation, check out https://docs.adaptavist.com. Please update your bookmarks and links.

Skip to end of metadata
Go to start of metadata

Add a Browse Dropdown to the Header Menu

Using ThemeBuilder you can add a fully customisable dropdown to the menu items in the header area of Confluence. The Browse dropdown menu is a feature regularly reported as missed by users after migration to Confluence 5, so this tutorial will add a version of that menu. The menu includes links to:

 

  • Pages
  • Blogs
  • Labels
  • Space Logo
  • Space Admin

 

 

 

Instructions

  1. In ThemeBuilder > Edit Skins - choose the skin you want to add a menu to.
  2. Add a new panel called 'browsemenu'



  3. Copy and paste this code into the new 'browsemenu' panel, and 'Apply' the changes.

    <li id="browseMenu">
      <a title="Spaces" aria-owns="browse-menu-link-content" aria-haspopup="true" href="#" class=
            "aui-nav-link aui-dropdown2-trigger" id="browse-menu-link" name="browse-menu-link">
        <span class="browse">Browse</span>
      </a>
      <div aria-hidden="false" class="aui-dropdown2 aui-style-default aui-dropdown2-in-header" id="browse-menu-link-content">
      <ul>
        <li>
          <ac:macro ac:name="web-item">
            <ac:parameter ac:name="section">system.space.tools/contenttools</ac:parameter>
            <ac:parameter ac:name="item">reorder</ac:parameter>
            <ac:rich-text-body>Pages</ac:rich-text-body>
          </ac:macro>
        </li>
        <li>
          <ac:macro ac:name="web-item">
            <ac:parameter ac:name="section">system.space.sidebar/main-links</ac:parameter>
            <ac:parameter ac:name="item">spacebar-blogs</ac:parameter>
            <ac:rich-text-body>Blog</ac:rich-text-body>
          </ac:macro>
        </li>
        <li>
          <ac:macro ac:name="web-item">
            <ac:parameter ac:name="section">system.space.labels</ac:parameter>
            <ac:parameter ac:name="item">view-labels-popular</ac:parameter>
            <ac:rich-text-body>Labels</ac:rich-text-body>
          </ac:macro>      
        </li>
        <li>
          <ac:macro ac:name="web-item">
            <ac:parameter ac:name="section">system.space.admin/looknfeel</ac:parameter>
            <ac:parameter ac:name="item">spacelogo</ac:parameter>
            <ac:parameter ac:name="icons">false</ac:parameter>
            <ac:parameter ac:name="force">true</ac:parameter>
            <ac:rich-text-body>Space Logo</ac:rich-text-body>
          </ac:macro>
        </li>    
        <li>
          <ac:macro ac:name="web-item">
            <ac:parameter ac:name="section">system.space.tools/overview</ac:parameter>
            <ac:parameter ac:name="item">spacedetails</ac:parameter>
            <ac:parameter ac:name="icons">false</ac:parameter>
            <ac:rich-text-body>Space Admin</ac:rich-text-body>
          </ac:macro>
        </li>    
      </ul>
    </div>
    </li>
  4. In the 'header' panel you will import your menu as the first menu item in the header left hand menu.

    Find the line        <ul class="aui-nav"> and add this code to import the 'browsemenu' panel. 'Apply' the changes.

              <ac:macro ac:name="panel-import">
                <ac:parameter ac:name="panel">browsemenu</ac:parameter>
              </ac:macro>


    The code should look like this.




  5. Go to a page with the skin applied and you should see a new 'Browse' menu as the first item in the left header menu.

Notes

An issue with icons showing in the menu, even when set to false in the macro, is being investigated. If you have this problem use this style rule in the ThemeBuilder CSS to hide the icons:

#browse-menu-link-content img {
  display: none;
}

Summary

You can customise this menu to add or remove as many menu items as you want. See Menu - Web Item macro for more details.

Because the menu is using the ThemeBuilder web section macro to create the menu items it should be Confluence permissions aware.

  • No labels